Vai jūsu WordPress emuārs ir piemērots printeriem?

Drukāt CSS

Kad es pabeidzu vakardienas ierakstu Sociālo mediju IA, Es gribēju nosūtīt tā priekšskatījumu Dotster izpilddirektoram Klintam Peidžam. Tomēr, kad es drukāju uz PDF, lapa bija haoss!

Tur joprojām ir daudz ļaužu, kuriem patīk izdrukāt vietnes kopijas, lai koplietotu, vēlāk uzzinātu vai vienkārši pievienotu piezīmes. Es nolēmu, ka vēlos padarīt savu emuāru par draudzīgu printeriem. Tas bija daudz vieglāk, nekā es domāju.

Kā parādīt drukāto versiju:

Lai to paveiktu, jums būs jāsaprot CSS pamati. Visgrūtākais ir izmantot pārlūkprogrammas izstrādātāja konsoli, lai pārbaudītu satura parādīšanu, paslēpšanu un pielāgošanu, lai jūs varētu rakstīt savu CSS. Pārlūkprogrammā Safari jums jāiespējo izstrādātāja rīki, ar peles labo pogu noklikšķiniet uz savas lapas un atlasiet Pārbaudīt saturu. Tas parādīs jums saistīto elementu un CSS.

Safari ir jauka maza iespēja parādīt savas lapas drukāto versiju tīmekļa inspektorā:

Safari - drukas skats Web Inspector

Kā padarīt savu WordPress emuāru draudzīgu drukāšanai:

Ir pāris dažādi veidi, kā norādīt stilu drukāšanai. Viens no tiem ir tikai pievienot sadaļu pašreizējā stila lapā, kas raksturīga multivides tipam “drukāt”.

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

Otrs veids ir bērna tēmai pievienot īpašu stila lapu, kurā norādītas drukas opcijas. Lūk, kā:

  1. Augšupielādējiet papildu stila lapu tēmas direktorijā ar nosaukumu print.css.
  2. Pievienojiet atsauci uz jauno stila lapu savā functions.php failu. Pārliecinieties, ka fails print.css tiek ielādēts pēc vecāku un bērnu stila lapas, lai tā stili tiktu ielādēti pēdējie. Es arī ielādēju prioritāti 100 šai ielādei, lai tā tiktu ielādēta pēc spraudņa. Lūk, kā izskatās mana atsauce:

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);

Tagad jūs varat pielāgot print.css failu un modificēt visus elementus, kurus vēlaties slēpt vai attēlot atšķirīgi. Piemēram, savā vietnē es paslēpju visu navigāciju, galvenes, sānjoslas un kājenes, lai tiktu izdrukāts tikai saturs, kuru vēlos parādīt.

My print.css fails izskatās šādi. Ievērojiet, ka es pievienoju arī piemales, metodi, kuru pieņem mūsdienu pārlūkprogrammas:

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

Kā izskatās drukas skats

Lūk, kā drukas skats izskatās, ja tas tiek drukāts no Google Chrome:

WordPress drukas skats

Uzlabots drukas stils

Ir svarīgi atzīmēt, ka ne visas pārlūkprogrammas ir izveidotas vienādi. Iespējams, vēlēsities pārbaudīt katru pārlūku, lai redzētu, kā jūsu lapa izskatās tajos. Daži pat atbalsta dažas papildu lapu funkcijas, lai pievienotu saturu, iestatītu piemales un lapu izmērus, kā arī vairākus citus elementus. Smashing Magazine ir ļoti detalizēts raksts par šo uzlaboto druku iespējas.

Tālāk ir sniegta informācija par lapas izkārtojumu, ko es iekļāvu, lai pievienotu autortiesību pieminēšanu kreisajā apakšējā kreisajā pusē, lapu skaitītāju apakšējā labajā stūrī un dokumenta nosaukumu katras lapas augšējā kreisajā stūrī:

@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 Komentāri

  1. 1
  2. 2

Ko jūs domājat?

Šī vietne izmanto Akismet, lai samazinātu surogātpastu. Uzziniet, kā tiek apstrādāts jūsu komentārs.