ynhâld Marketing

Is jo WordPress-blog printerfreonlik?

As ik foltôge de post fan juster op Sosjale media ROI, Ik woe der in foarbyld fan stjoere nei Dotster CEO Clint Page. Doe't ik printe nei in PDF, lykwols, wie de side in puinhoop!

D'r binne der noch in protte minsken dy't graach kopyen fan in webside ôfdrukke wolle om te dielen, letter te ferwizen, of gewoan bestân mei wat notysjes. Ik besleat dat ik myn blog printerfreonlik meitsje woe. It wie folle makliker dan ik tocht dat it soe wêze.

Hoe jo jo printferzje werjaan:

Jo moatte de basis fan CSS begripe om dit te berikken. It dreechste diel is it brûken fan de ûntwikkelderskonsole fan jo blêder om te testen it werjaan, ferbergjen en oanpassen fan de ynhâld sadat jo jo CSS kinne skriuwe. Yn Safari moatte jo de ark foar ûntwikkelders ynskeakelje, rjochtsklikje op jo side en selektearje Ynhâld ynspektearje. Dat sil jo it elemint en CSS sjen litte assosjearre.

Safari hat in moaie lytse opsje om de printferzje fan jo side yn 'e webynspekteur te sjen:

Safari - Printwerjefte yn Web Inspector

Hoe jo jo WordPress-blog printerfreonlik meitsje:

D'r binne in pear ferskillende manieren om jo styling foar print te spesifisearjen. Ien is gewoan om in seksje yn jo hjoeddeistige stylblêd ta te foegjen dy't spesifyk is foar it mediatype "print".

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

De oare manier is om in spesifyk stylblêd ta te foegjen oan jo bernetema dat de printopsjes spesifisearret. Hjir is hoe:

  1. Upload in ekstra stylblêd nei jo temamap neamd print.css.
  2. Foegje in ferwizing nei it nije stylblêd yn jo functions.php map. Jo wolle derfoar soargje dat jo print.css-bestân wurdt laden nei jo âlder- en bernstylblêd, sadat de stilen it lêste laden wurde. Ik haw ek in prioriteit fan 100 pleatst op dit laden, sadat it laadt nei plugin Hjir is wat myn referinsje derút sjocht:
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);

No kinne jo it print.css-bestân oanpasse en alle eleminten oanpasse dy't jo wolle ferburgen of oars werjûn. Op myn side ferbergje ik bygelyks alle navigaasje, kopteksten, sydbalken en fuotteksten, sadat allinich de ynhâld dy't ik werjaan wol ôfdrukt wurdt.

My print.css triem sjocht der sa út. Merk op dat ik ek marzjes tafoege, in metoade dy't wurdt akseptearre troch moderne browsers:

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

Hoe sjocht de Printwerjefte derút

Hjir is hoe't myn printwerjefte derút sjocht as ôfdrukt fan Google Chrome:

WordPress Printwerjefte

Avansearre printstyling

It is wichtich om te notearjen dat net alle browsers gelyk binne makke. Jo kinne elke blêder testje om te sjen hoe't jo side der oer sjocht. Guon stypje sels wat avansearre sidefunksjes om ynhâld ta te foegjen, marzjes en sidegrutte yn te stellen, lykas ek in oantal oare eleminten. Smashing Magazine hat in hiel detaillearre artikel oer dizze avansearre print opsjes.

Hjir binne wat side-yndielingsdetails dy't ik opnommen haw om in copyrightfermelding yn 'e linker ûnderkant ta te foegjen, in sideteller rjochtsûnder, en de dokuminttitel linksboppe fan elke 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 is CMO fan OpenINSIGHTS en de oprjochter fan de Martech Zone. Douglas hat holpen tsientallen suksesfolle MarTech startups, hat holpen yn 'e due diligence fan mear as $ 5 miljard yn Martech oanwinsten en ynvestearrings, en bliuwt te helpen bedriuwen by it útfieren en automatisearjen fan harren ferkeap en marketing strategyen. Douglas is in ynternasjonaal erkend digitale transformaasje en MarTech-ekspert en sprekker. Douglas is ek in publisearre skriuwer fan in Dummie's gids en in boek foar bedriuwsliederskip.

Related Articles

Werom nei topknop
Slute

Adblock ûntdutsen

Martech Zone is yn steat om jo dizze ynhâld sûnder kosten te leverjen, om't wy ús side monetearje fia advertinsje-ynkomsten, affiliate keppelings en sponsoring. Wy soene it wurdearje as jo jo advertinsjeblokkerer fuortsmite as jo ús side besjen.