Er din WordPress-blog printervenlig?

Udskriv CSS

Da jeg afsluttede gårsdagens indlæg den ROI på sociale medier, Jeg ville sende en forhåndsvisning af den til Dotster CEO Clint Page. Da jeg udskrev til en PDF, var siden dog et rod!

Der er stadig mange mennesker derude, der kan lide at udskrive kopier af et websted for at dele, referere senere eller bare arkivere med nogle noter. Jeg besluttede, at jeg ville gøre min blog printervenlig. Det var meget lettere, end jeg troede, det ville være.

Sådan vises din udskriftsversion:

Du skal forstå det grundlæggende i CSS for at opnå dette. Den sværeste del er at bruge din browsers udviklerkonsol til at teste visning, skjulning og justering af indholdet, så du kan skrive din CSS. I Safari skal du aktivere udviklerværktøjerne, højreklikke på din side og vælge Inspekter indhold. Det viser dig det element og CSS, der er tilknyttet.

Safari har en dejlig lille mulighed for at vise udskriftsversionen af ​​din side i webinspektøren:

Safari - Printvisning i Webinspektør

Sådan gør du din WordPress-blog printervenlig:

Der er et par forskellige måder at specificere din styling til udskrivning på. Den ene er bare at tilføje et afsnit i dit aktuelle typografiark, der er specifikt for medietypen "print".

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

Den anden måde er at tilføje et specifikt typografiark til dit barns tema, der angiver udskrivningsmulighederne. Sådan gør du:

  1. Upload et ekstra typografiark til dit temakatalog, der kaldes print.css.
  2. Tilføj en henvisning til det nye typografiark i din functions.php fil. Du vil sikre, at din print.css -fil indlæses efter dit forælder- og underordnede stilark, så dens stilarter indlæses sidst. Jeg placerede også en prioritet på 100 på denne indlæsning, så den indlæses efter plugin Sådan ser min reference ud:

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

Nu kan du tilpasse print.css-filen og ændre alle de elementer, du vil have skjult eller vist forskelligt. På mit websted skjuler jeg for eksempel al navigation, sidehoveder, sidebjælker og sidefødder, så kun det indhold, jeg vil vise, udskrives.

My print.css filen ser sådan ud. Bemærk, at jeg også tilføjede margener, en metode, der accepteres af moderne browsere:

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

Sådan ser udskriftsvisningen ud

Sådan ser min printvisning ud, hvis den udskrives fra Google Chrome:

WordPress-udskrivningsvisning

Avanceret Print Styling

Det er vigtigt at bemærke, at ikke alle browsere er skabt ens. Du vil måske teste hver browser for at se, hvordan din side ser ud for dem. Nogle understøtter endda nogle avancerede sidefunktioner for at tilføje indhold, angive margener og sidestørrelser samt en række andre elementer. Smashing Magazine har en meget detaljeret artikel om dette avancerede print valgmuligheder.

Her er nogle sidelayoutdetaljer, som jeg indarbejdede for at tilføje en copyright -omtale nederst til venstre, en sidetæller nederst til højre og dokumentets titel øverst til venstre på hver side:

@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) " Highbridge, 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 Kommentarer

  1. 1
  2. 2

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.