Nyomtatóbarát-e a WordPress blogod?

CSS nyomtatása

Ahogy befejeztem a tegnapi bejegyzést Közösségi média megtérülés, Egy előzetes képet akartam küldeni a Dotster vezérigazgatójának, Clint Page-nek. Amikor PDF-re nyomtattam, az oldal rendetlenséget okozott!

Még mindig sok olyan ember van, aki szívesen kinyomtatja a webhely másolatait, hogy később megossza, később hivatkozhasson, vagy csak fájlokat készítsen néhány megjegyzéssel. Úgy döntöttem, hogy nyomtatóbaráttá akarom tenni a blogomat. Sokkal könnyebb volt, mint gondoltam volna.

A nyomtatott verzió megjelenítése:

Ennek megvalósításához meg kell ismernie a CSS alapjait. A legnehezebb a böngésző fejlesztői konzoljának használata a tartalom megjelenítésének, elrejtésének és beállításának tesztelésére, hogy megírhassa a CSS-t. A Safariban engedélyeznie kell a fejlesztői eszközöket, kattintson a jobb gombbal az oldalára, és válassza a Tartalom ellenőrzése lehetőséget. Ez megmutatja a társított elemet és CSS-t.

A Safari egy jó kis lehetőséget kínál az oldal nyomtatott verziójának megjelenítésére a webellenőrben:

Safari - Nyomtatási nézet a Web Inspector alkalmazásban

Hogyan lehet nyomtatóbaráttá tenni a WordPress blogot:

A nyomtatáshoz használt stílus megadásának többféle módja van. Az egyik csak az, hogy a jelenlegi stíluslapba hozzáad egy szakaszt, amely a „nyomtatás” hordozótípusára jellemző.

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

A másik módszer egy speciális stíluslap hozzáadása a gyermek témához, amely meghatározza a nyomtatási beállításokat. Itt van, hogyan:

  1. Töltsön fel egy további stíluslapot az úgynevezett témakönyvtárba print.css.
  2. Adjon hozzá hivatkozást az új stíluslapra a functions.php fájl. Gondoskodnia kell arról, hogy a print.css fájl a szülő és gyermek stíluslap után kerüljön betöltésre, hogy a stílusokat utoljára töltsék be. 100-as prioritást is adtam ennek a betöltésnek, hogy a plugin után töltse be. Így néz ki a hivatkozásom:

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

Most testreszabhatja a print.css fájlt, és módosíthatja az összes elrejteni vagy másként megjeleníteni kívánt elemet. A webhelyemen például elrejtem az összes navigációt, fejlécet, oldalsávot és láblécet, hogy csak az a tartalom kerüljön kinyomtatásra, amelyet megjeleníteni szeretnék.

My print.css fájl így néz ki. Figyelje meg, hogy margókat is felvettem, a modern böngészők által elfogadott módszer:

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

Hogyan néz ki a nyomtatási nézet

Így néz ki a nyomtatási nézetem, ha a Google Chrome-ból nyomtatom:

WordPress nyomtatási nézet

Speciális nyomtatási stílus

Fontos megjegyezni, hogy nem minden böngésző jön létre egyenlően. Érdemes tesztelnie az egyes böngészőket, hogy lássa az oldalát. Egyesek még néhány speciális oldalfunkciót is támogatnak tartalom hozzáadásához, margók és oldalméretek, valamint számos más elem hozzáadásához. A Smashing Magazine-nak van egy nagyon részletes cikk erről a speciális nyomtatásról lehetőségeket.

Íme néhány oldalelrendezési részlet, amelyet beépítettem, hogy hozzáadhassam a szerzői jogi említést a bal alsó sarokhoz, egy oldalszámlálót a jobb alsó sarokhoz, és a dokumentum címét minden oldal bal felső sarkában:

@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

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.