Je váš blog WordPress vhodný pro tisk?

Tisk CSS

Když jsem dokončil včerejší příspěvek dne Návratnost investic do sociálních médiíChtěl jsem poslat náhled na to Dotster CEO Clint Page. Když jsem však tiskl do PDF, stránka byla nepořádek!

Stále existuje spousta lidí, kteří si rádi vytisknou kopie webových stránek, aby je mohli sdílet, později odkazovat nebo jen uložit nějaké poznámky. Rozhodl jsem se, že chci, aby byl můj blog vhodný pro tisk. Bylo to mnohem jednodušší, než jsem si myslel, že to bude.

Jak zobrazit verzi tisku:

Abyste toho dosáhli, budete muset porozumět základům CSS. Nejsložitější je použít vývojářskou konzoli prohlížeče k testování zobrazování, skrývání a úpravy obsahu tak, abyste mohli psát své CSS. V Safari budete muset povolit nástroje pro vývojáře, kliknout pravým tlačítkem na stránku a vybrat Zkontrolovat obsah. To vám ukáže přidružený prvek a CSS.

Safari má pěknou malou možnost zobrazit tiskovou verzi vaší stránky ve webovém inspektoru:

Safari - zobrazení tisku ve webovém inspektoru

Jak přizpůsobit svůj blog WordPress pro tisk:

Existuje několik různých způsobů, jak určit styl pro tisk. Jedním z nich je přidání sekce do aktuální šablony stylů, která je specifická pro typ média „tisk“.

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

Druhým způsobem je přidat do vašeho podřízeného motivu konkrétní šablonu stylů, která určuje možnosti tisku. Zde je postup:

  1. Nahrajte další šablonu stylů do svého adresáře motivů s názvem print.css.
  2. Přidejte odkaz na novou šablonu stylů ve vašem functions.php soubor. Budete chtít zajistit, aby byl váš soubor print.css načten po rodičovské a podřízené šabloně stylů, aby byly styly načteny jako poslední. Při tomto načítání jsem také nastavil prioritu 100, aby se načtalo po pluginu Zde vypadá 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);

Nyní můžete přizpůsobit soubor print.css a upravit všechny prvky, které chcete skrýt nebo zobrazit jinak. Například na svém webu schovávám veškerou navigaci, záhlaví, postranní lišty a zápatí, takže se vytiskne pouze obsah, který si přeji zobrazit.

My print.css soubor vypadá takto. Všimněte si, že jsem také přidal okraje, což je metoda, kterou akceptují moderní prohlížeče:

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

Jak vypadá zobrazení tisku

Takto vypadá moje zobrazení tisku při tisku z prohlížeče Google Chrome:

Zobrazení tisku WordPress

Pokročilý styl tisku

Je důležité si uvědomit, že ne všechny prohlížeče jsou vytvořeny stejně. Možná budete chtít vyzkoušet každý prohlížeč, abyste zjistili, jak na něm vaše stránka vypadá. Některé dokonce podporují některé pokročilé funkce stránky pro přidání obsahu, nastavení okrajů a velikostí stránek a řadu dalších prvků. Smashing Magazine má velmi podrobný článek o těchto pokročilých tiscích možnosti.

Zde jsou některé detaily rozvržení stránky, které jsem začlenil, abych přidal zmínku o autorských právech vlevo dole, počítadlo stránek vpravo dole a název dokumentu v levé horní části každé stránky:

@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áře

  1. 1
  2. 2

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.