Il-Blog WordPress Tiegħek Huwa Printer-Friendly?

Stampa CSS

Kif lestejt il-kariga tal-bieraħ fi ROI tal-Midja Soċjali, Ridt nibgħat preview tiegħu lill-Kap Eżekuttiv ta 'Dotster Clint Page. Meta stampajt fuq PDF, għalkemm, il-paġna kienet mess!

Għad hemm ħafna nies hemmhekk li jixtiequ jistampaw kopji ta 'websajt biex jaqsmu, jirreferu aktar tard, jew sempliċement jippreżentaw b'xi noti. Iddeċidejt li rrid nagħmel il-blog tiegħi faċli għall-istampar. Kien ħafna iktar faċli milli ħsibt li jkun.

Kif Turi l-Verżjoni Stampata Tiegħek:

Int ser ikollok bżonn tifhem il-bażi ta 'CSS biex twettaq dan. L-iktar parti diffiċli hija l-użu tal-console tal-iżviluppatur tal-browser tiegħek biex tittestja l-wiri, il-ħabi u l-aġġustament tal-kontenut sabiex tkun tista 'tikteb is-CSS tiegħek. F’Safari, ikollok bżonn tippermetti l-għodod tal-iżviluppatur, ikklikkja l-paġna tiegħek fuq il-lemin, u agħżel Spezzjona l-Kontenut. Dan jurik l-element u s-CSS assoċjati.

Safari għandu ftit għażla sabiħa biex juri l-verżjoni stampata tal-paġna tiegħek fl-ispettur tal-web:

Safari - Stampa Stampa fl-Ispettur tal-Web

Kif Tagħmel Il-Blog Ta 'WordPress Tiegħek Printer-Friendly:

Hemm ftit modi differenti kif tispeċifika l-istil tiegħek għall-istampar. Waħda hija biss li żżid taqsima fl-istilheet attwali tiegħek li hija speċifika għat-tip tal-midja ta '"print".

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

Il-mod l-ieħor huwa li żżid folja ta 'stil speċifika mat-tema tat-tifel / tifla tiegħek li tispeċifika l-għażliet tal-istampar. Ara kif:

  1. Tella 'skeda ta' stili addizzjonali fid-direttorju tat-tema tiegħek imsejjaħ print.css.
  2. Żid referenza għall-istil folja l-ġdida tiegħek functions.php fajl. Int trid tkun żgur li l-fajl print.css tiegħek jitgħabba wara l-istil tal-ġenitur u t-tifel / tifla tiegħek sabiex l-istili tiegħu jitgħabbew l-aħħar. Qiegħed ukoll prijorità ta '100 fuq din it-tagħbija sabiex titgħabba wara l-plugin Hawn kif tidher ir-referenza tiegħi:

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

Issa tista 'tippersonalizza l-fajl print.css u timmodifika l-elementi kollha li trid moħbija jew murija b'mod differenti. Fis-sit tiegħi, pereżempju, naħbi n-navigazzjoni, headers, sidebars, u footers kollha sabiex il-kontenut li nixtieq nuri jkun stampat biss.

My print.css fajl jidher bħal dan. Innota li żidt ukoll marġini, metodu aċċettat minn browsers moderni:

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

Kif tidher il-Veduta Stampata

Hawnhekk tidher kif tidher l-istampar tiegħi jekk tkun stampata minn Google Chrome:

WordPress Stampa View

Stampar Avvanzat tal-Istampar

Huwa importanti li wieħed jinnota li mhux il-browsers kollha huma maħluqa ugwali. Jista 'jkun li tkun trid tittestja kull browser biex tara kif tidher il-paġna tiegħek madwarhom. Xi wħud anke jappoġġjaw xi karatteristiċi tal-paġna avvanzati biex iżidu l-kontenut, jistabbilixxu marġini u daqsijiet tal-paġna, kif ukoll numru ta 'elementi oħra. Smashing Magazine għandu ħafna artikolu dettaljat dwar dawn l-istampar avvanzat għażliet.

Hawn xi dettalji tat-tqassim tal-paġna li inkorporajt biex inżid referenza għad-drittijiet tal-awtur fin-naħa t'isfel tax-xellug, kontatur tal-paġna fin-naħa t'isfel tal-lemin, u t-titlu tad-dokument fin-naħa ta 'fuq tax-xellug ta' kull paġna:

@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 Kummenti

  1. 1
  2. 2

What do you think?

Dan is-sit juża Akismet biex inaqqas l-ispam. Tgħallem kif il-kumment tiegħek huwa pproċessat.