Njẹ Ọwe itẹwe Blog Wodupiresi rẹ jẹ Ọrẹ?

Tẹjade CSS

Bi mo ti pari iwe ifiweranṣẹ lana Awujọ Media ROI, Mo fẹ lati fi awotẹlẹ kan ranṣẹ si Alakoso Dotster Clint Page. Nigbati Mo tẹjade si PDF kan, botilẹjẹpe, oju-iwe naa jẹ idotin!

Ọpọlọpọ awọn eniyan ṣi wa sibẹ ti o fẹ lati tẹjade awọn ẹda ti oju opo wẹẹbu kan lati pin, itọkasi nigbamii, tabi faili nikan pẹlu awọn akọsilẹ kan. Mo pinnu Mo fẹ lati ṣe ore-itẹwe bulọọgi mi. O rọrun pupọ ju Mo ro pe yoo jẹ.

Bii o ṣe le Ṣafihan Ẹya Tẹjade Rẹ:

Iwọ yoo nilo lati ni oye awọn ipilẹ ti CSS lati ṣe eyi. Apakan ti o nira julọ ni lilo itọnisọna ẹrọ aṣawakiri aṣawakiri rẹ lati ṣe idanwo ifihan, fifipamọ, ati ṣatunṣe akoonu naa ki o le kọ CSS rẹ. Ni Safari, iwọ yoo nilo lati mu awọn irinṣẹ idagbasoke ṣiṣẹ, tẹ-ọtun oju-iwe rẹ, ki o yan Ṣayẹwo akoonu. Iyẹn yoo fihan ọ ni eroja ati nkan CSS.

Safari ni aṣayan kekere ti o wuyi lati ṣafihan ẹya titẹ ti oju-iwe rẹ ninu oluyẹwo wẹẹbu:

Safari - Tẹjade Wiwo ni Oluyewo Wẹẹbu

Bii o ṣe le Ṣẹda Blog Wodupiresi rẹ-Ọrẹ:

Awọn ọna oriṣiriṣi tọkọtaya wa ti ṣalaye aṣa rẹ fun titẹ. Ọkan jẹ o kan lati ṣafikun apakan kan ninu iwe-aza aza ti lọwọlọwọ rẹ ti o ṣe pataki si iru media ti “titẹ”.

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

Ọna miiran ni lati ṣafikun iwe ara kan pato si akori ọmọ rẹ ti o ṣalaye awọn aṣayan titẹ. Eyi ni bii:

  1. Ṣe akojọpọ iwe aza aza si itọsọna akori rẹ ti a pe titẹ sita.
  2. Ṣafikun itọkasi si iwe-aza tuntun ninu rẹ functions.php faili. Iwọ yoo fẹ lati rii daju pe o ti gbe faili ti print.css rẹ lẹhin ti obi rẹ ati iwe-akọọlẹ awọn ọmọ rẹ ki awọn aza rẹ ti kojọpọ nikẹhin. Mo tun gbe ipo pataki ti 100 sori ikojọpọ yii ki o jẹ ẹru lẹhin ohun itanna Eyi ni ohun ti itọkasi mi ṣe dabi:

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

Bayi o le ṣe akanṣe faili print.css ki o yipada gbogbo awọn eroja ti o fẹ farasin tabi ṣe afihan otooto. Ninu aaye mi, fun apẹẹrẹ, Mo tọju gbogbo lilọ kiri, awọn akọle, awọn ẹgbẹ ẹgbẹ, ati awọn ẹlẹsẹ nitori pe akoonu ti Mo fẹ lati han nikan ni a tẹ.

My titẹ sita faili dabi eleyi. Ṣe akiyesi pe Mo tun ṣafikun awọn ala, ọna ti o gba nipasẹ awọn aṣawakiri igbalode:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

Bawo ni Wiwo Tẹjade Wulẹ

Eyi ni bi wiwo titẹ mi ṣe n wo ti a ba tẹjade lati Google Chrome:

Wiwo Wodupiresi Wiwo

Onitẹsiwaju Tẹjade Styling

O ṣe pataki lati ṣe akiyesi pe kii ṣe gbogbo aṣawakiri ni a ṣẹda dogba. O le fẹ lati danwo aṣawakiri kọọkan lati wo bi oju-iwe rẹ ṣe nwo kọja wọn. Diẹ ninu paapaa ṣe atilẹyin diẹ ninu awọn ẹya oju-iwe ti ilọsiwaju lati ṣafikun akoonu, ṣeto awọn agbegbe ati awọn iwọn oju-iwe, ati nọmba awọn eroja miiran. Iwe irohin Smashing ni pupọ pupọ alaye alaye lori titẹjade ilọsiwaju wọnyi awọn aṣayan.

Eyi ni diẹ ninu awọn alaye ipilẹ oju-iwe ti Mo ṣafikun lati ṣafikun mẹnuba aṣẹ-lori ni apa osi isalẹ, counter oju-iwe ni apa ọtun isalẹ, ati akọle iwe aṣẹ ni apa osi apa gbogbo oju-iwe:

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

2 Comments

  1. 1
  2. 2

Kini o le ro?

Aaye yii nlo Akismet lati dinku apamọ. Mọ bi a ṣe n ṣalaye data rẹ ti o ṣawari.