Ass Äre WordPress Blog Dréckerfrëndlech?

Dréckt CSS

Wéi ech de Post vu gëschter ofgeschloss hunn Sozial Medien ROI, Ech wollt eng Virschau dovun un den Dotster CEO Clint Page schécken. Wéi ech awer op e PDF gedréckt hunn, war d'Säit e Mess!

Et ginn nach ëmmer vill Leit dobaussen déi gär Exemplare vun enger Websäit ofdrécken fir se ze deelen, méi spéit ze referenzéieren oder just mat e puer Notizen ofzeginn. Ech hu beschloss datt ech mäi Blog printerfrëndlech wollt maachen. Et war vill méi einfach wéi ech geduecht hunn et wier.

Wéi weist Dir Är Print Versioun:

Dir musst d'Grondlage vun CSS verstoen fir dëst z'erreechen. Dee schwieregsten Deel ass d'Benotzung vun Ärer Browser Entwéckler Konsole fir ze testen ze weisen, ze verstoppen, an den Inhalt unzepassen sou datt Dir Äre CSS schreift. A Safari musst Dir d'Entwécklerinstrumenter aktivéieren, klickt op Är Säit a wielt Inhalt inspizéieren. Dat weist Iech d'Element an d'CSS assoziéiert.

Safari huet eng flott kleng Optioun fir d'Dréck Versioun vun Ärer Säit am Webinspekter ze weisen:

Safari - Print View am Webinspekter

Wéi Maacht Dir Äre WordPress Blog Dréckerfrëndlech:

Et ginn e puer verschidde Weeër fir Äre Styling fir Dréck ze spezifizéieren. Eent ass just fir eng Sektioun an Ärem aktuellen Styleblad hinzuzufügen déi spezifesch fir de Medientyp "Print" ass.

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

Deen anere Wee ass e spezifescht Stilblat op Äert Kandthema ze addéieren dat d'Dréckoptioune spezifizéiert. Hei ass wéi:

  1. Eroplueden en zousätzleche Stylesheet an Ärem Themenverzeechnes genannt drécken.css.
  2. Füügt eng Referenz op dat neit Stylblat an Ärem functions.php Datei. Dir wëllt Är print.css Datei no Ärem Elteren- a Kandstilblat lueden sou datt d'Stiler als lescht gelueden sinn. Ech hunn och eng Prioritéit vun 100 op dës Luede gesat, sou datt se nom Plugin lued Hei ass wéi meng Referenz ausgesäit:

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

Elo kënnt Dir d'Print.css Datei personaliséieren an all Elementer änneren, déi Dir verstoppt oder anescht ugewisen hutt. A mengem Site, zum Beispill, verstoppen ech all d'Navigatioun, Header, Sidebar a Fousszeilen sou datt nëmmen den Inhalt deen ech affichéiere wëllt gedréckt gëtt.

My drécken.css Datei gesäit esou aus. Bedenkt datt ech och Margen derbäi hunn, eng Method déi vu moderne Browser akzeptéiert gëtt:

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

Wéi gesäit de Print View aus

Hei ass wéi meng Printvisioun ausgesäit wann se vu Google Chrome gedréckt ginn:

WordPress Print View

Fortgeschratt Print Styling

Et ass wichteg ze bemierken datt net all Browser gläich erstallt sinn. Dir wëllt all Browser testen fir ze kucken wéi Är Säit iwwer se ausgesäit. E puer ënnerstëtzen och e puer fortgeschratt Säitefeatures fir Inhalt bäizefügen, Margen a Säitegréissten ze setzen, wéi och eng Rei aner Elementer. Smashing Magazine huet eng ganz detailléierte Artikel iwwer dës fortgeschratt Drécken Méiglechkeeten.

Hei sinn e puer Säit Layout Detailer déi ech agebaut hunn fir e Copyright ze ernimmen ënnen lénks, e Säitekonter ënnen riets, an den Dokument Titel uewe lénks op all Säit:

@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

Wat denks du?

Dëse Site benotzt Akismet fir Spam ze reduzéieren. Léiert wéi Är Kommentarfaten veraarbecht ginn.