Content Marketing

Er din WordPress-blog printervenlig?

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

Douglas Karr

Douglas Karr er CMO for OpenINSIGHTS og grundlæggeren af Martech Zone. Douglas har hjulpet snesevis af succesfulde MarTech-startups, har hjulpet med due diligence på over $5 mia. i Martech-opkøb og -investeringer og fortsætter med at hjælpe virksomheder med at implementere og automatisere deres salgs- og marketingstrategier. Douglas er en internationalt anerkendt digital transformation og MarTech-ekspert og foredragsholder. Douglas er også udgivet forfatter til en Dummies guide og en bog om virksomhedsledelse.

Relaterede artikler

Tilbage til toppen knap
Luk

Adblock fundet

Martech Zone er i stand til at give dig dette indhold uden omkostninger, fordi vi tjener penge på vores websted gennem annonceindtægter, affilierede links og sponsorater. Vi ville sætte pris på, hvis du ville fjerne din annonceblokering, mens du ser vores websted.