Je váš blog WordPress vhodný pre tlač?

Vytlačiť CSS

Ako som dokončoval včerajší príspevok dňa NI pre sociálne médiá, Chcel som to poslať ukážku generálnemu riaditeľovi Dotster Clint Page. Keď som však tlačil do PDF, stránka bola neporiadok!

Existuje stále veľa ľudí, ktorí si radi tlačia kópie webových stránok na zdieľanie, odkazujú sa na ne neskôr alebo iba ukladajú poznámky. Rozhodol som sa, že chcem, aby bol môj blog vhodný pre tlač. Bolo to oveľa jednoduchšie, ako som si myslel, že to bude.

Ako zobraziť verziu tlače:

Aby ste to dosiahli, musíte porozumieť základom CSS. Najťažšie je pomocou konzoly pre vývojárov prehliadača otestovať zobrazovanie, skrývanie a úpravu obsahu, aby ste mohli písať svoje CSS. V prehliadači Safari budete musieť povoliť vývojárske nástroje, kliknúť pravým tlačidlom myši na svoju stránku a vybrať možnosť Skontrolovať obsah. Zobrazí sa priradený prvok a CSS.

Safari má peknú malú možnosť zobraziť tlačenú verziu vašej stránky vo webovom inšpektore:

Safari - Zobrazenie tlače vo webovom inšpektore

Ako vytvoriť blog WordPress vhodný pre tlač:

Existuje niekoľko rôznych spôsobov, ako určiť svoj štýl pre tlač. Jedným z nich je iba pridanie sekcie do vašej aktuálnej šablóny štýlov, ktorá je špecifická pre typ média „tlač“.

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

Ďalším spôsobom je pridať k svojej podradenej téme konkrétnu šablónu štýlov, ktorá určuje možnosti tlače. Tu je postup:

  1. Nahrajte ďalšiu šablónu štýlov do adresára tém s názvom print.css.
  2. Pridajte odkaz na novú šablónu štýlov do súboru functions.php spis. Budete mať istotu, že sa váš súbor print.css načíta po rodičovskej a podradenej šablóne so štýlmi, aby sa štýly načítali ako posledné. Na toto načítanie som tiež umiestnil prioritu 100, aby sa načítal po doplnku. Takto vyzerá môj odkaz:

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

Teraz môžete prispôsobiť súbor print.css a upraviť všetky prvky, ktoré chcete skryť alebo zobraziť inak. Napríklad na svojom webe skryjem všetku navigáciu, hlavičky, bočné pruhy a päty, aby sa vytlačil iba obsah, ktorý chcem zobraziť.

My print.css súbor vyzerá takto. Všimnite si, že som pridal aj okraje, metódu, ktorú akceptujú moderné prehliadače:

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

Ako vyzerá zobrazenie tlače

Takto vyzerá moje zobrazenie tlače, ak je vytlačené z prehliadača Google Chrome:

Zobrazenie tlače WordPress

Pokročilý štýl tlače

Je dôležité poznamenať, že nie všetky prehľadávače sú vytvorené rovnako. Možno budete chcieť vyskúšať každý prehliadač a zistiť, ako vyzerá vaša stránka. Niektoré dokonca podporujú niektoré pokročilé funkcie stránky na pridanie obsahu, nastavenie okrajov a veľkostí stránok, ako aj množstvo ďalších prvkov. Smashing Magazine má veľmi podrobný článok o tejto rozšírenej tlači možnosti.

Tu uvádzam niekoľko podrobností rozloženia stránky, ktoré som začlenil, aby som dolu vľavo dole pridal zmienku o autorských právach, vpravo dole počítadlo stránok a vľavo hore na každej stránke názov dokumentu:

@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áre

  1. 1
  2. 2

Čo si myslíte?

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje vašich komentárov.