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 bliver nødt til at forstå det grundlæggende i CSS for at opnå dette. Den sværeste del er at bruge din browsers udviklerkonsol til at teste visning, skjuling 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 Inspicer indhold. Det viser dig det tilknyttede element og CSS.

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 barn-tema, der specificerer udskriftsindstillingerne. 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 dig, at din print.css-fil indlæses efter din forældres og underordnede stilark, så dens typografier indlæses sidst. Jeg prioriterede også 100 på denne indlæsning, så den indlæses efter plugin. Her 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 udskriftsvisning, hvis den udskrives fra Google Chrome:

WordPress-udskrivningsvisning

Avanceret Print Styling

Det er vigtigt at bemærke, at ikke alle browsere er skabt ens. Det kan være en god idé at teste hver browser for at se, hvordan din side ser ud over dem. Nogle understøtter endda nogle avancerede sidefunktioner for at tilføje indhold, indstille margener og sidestørrelser samt et antal andre elementer. Smashing Magazine har en meget detaljeret artikel om dette avancerede print valgmuligheder.

Her er nogle detaljer om sidelayout, som jeg har medtaget for at tilføje en copyright-omtale nederst til venstre, en sidetæller nederst til højre og dokumenttitlen ø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) " 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 Kommentarer

  1. 1
  2. 2

Hvad mener du?

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