A yw Eich Blog WordPress yn Argraffydd-Gyfeillgar?

Argraffu CSS

Wrth imi gwblhau’r swydd ddoe ymlaen ROI Cyfryngau Cymdeithasol, Roeddwn i eisiau anfon rhagolwg ohono i Dudalen Clint Prif Swyddog Gweithredol Dotster. Fodd bynnag, pan argraffais i PDF, roedd y dudalen yn llanast!

Mae yna lawer o bobl ar gael o hyd sy'n hoffi argraffu copïau o wefan i'w rhannu, cyfeirio atynt yn ddiweddarach, neu ffeilio gyda rhai nodiadau yn unig. Penderfynais fy mod eisiau gwneud fy mlog yn gyfeillgar i argraffydd. Roedd yn llawer haws nag yr oeddwn i'n meddwl y byddai.

Sut i Arddangos Eich Fersiwn Argraffu:

Bydd angen i chi ddeall hanfodion CSS i gyflawni hyn. Y rhan anoddaf yw defnyddio consol datblygwr eich porwr i brofi arddangos, cuddio ac addasu'r cynnwys fel y gallwch ysgrifennu eich CSS. Yn Safari, bydd angen i chi alluogi'r offer datblygwr, de-gliciwch eich tudalen, a dewis Archwilio'r Cynnwys. Bydd hynny'n dangos yr elfen a'r CSS sy'n gysylltiedig i chi.

Mae gan Safari opsiwn bach neis i arddangos fersiwn print eich tudalen yn yr arolygydd gwe:

Safari - Gweld Argraffu yn Arolygydd Gwe

Sut i Wneud Eich Blog WordPress yn Argraffydd-Gyfeillgar:

Mae yna gwpl o wahanol ffyrdd o nodi'ch steilio i'w argraffu. Un yn unig yw ychwanegu adran yn eich taflen arddull gyfredol sy'n benodol i'r math cyfryngau o “brint”.

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

Y ffordd arall yw ychwanegu dalen arddull benodol at thema eich plentyn sy'n nodi'r opsiynau argraffu. Dyma sut:

  1. Llwythwch daflen arddull ychwanegol i'ch cyfeirlyfr thema o'r enw print.css.
  2. Ychwanegwch gyfeiriad at y ddalen arddull newydd yn eich functions.php ffeil. Byddwch chi am sicrhau bod eich ffeil print.css yn cael ei llwytho ar ôl taflen arddull eich rhiant a'ch plentyn fel bod ei harddulliau'n cael eu llwytho ddiwethaf. Hefyd, rhoddais flaenoriaeth o 100 ar y llwyth hwn fel ei fod yn llwytho ar ôl ategyn Dyma sut mae fy nghyfeirnod yn edrych:

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

Nawr gallwch chi addasu'r ffeil print.css ac addasu'r holl elfennau rydych chi am eu cuddio neu eu harddangos yn wahanol. Yn fy safle, er enghraifft, rwy'n cuddio'r holl fordwyo, penawdau, bariau ochr a throedynnau fel mai dim ond y cynnwys yr hoffwn ei arddangos sy'n cael ei argraffu.

My print.css ffeil yn edrych fel hyn. Sylwch fy mod hefyd wedi ychwanegu ymylon, dull sy'n cael ei dderbyn gan borwyr modern:

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

Sut mae'r Gweld Print yn Edrych

Dyma sut mae fy ngolwg print yn edrych os yw wedi'i argraffu o Google Chrome:

Gweld Argraffu WordPress

Steilio Argraffu Uwch

Mae'n bwysig nodi nad yw pob porwr yn cael ei greu yn gyfartal. Efallai yr hoffech chi brofi pob porwr i weld sut mae'ch tudalen yn edrych ar eu traws. Mae rhai hyd yn oed yn cefnogi rhai nodweddion tudalen datblygedig i ychwanegu cynnwys, gosod ymylon a maint tudalennau, yn ogystal â nifer o elfennau eraill. Mae gan Smashing Magazine gylchgrawn iawn erthygl fanwl ar y print datblygedig hwn opsiynau.

Dyma ychydig o fanylion cynllun tudalen a ymgorfforais i ychwanegu sôn hawlfraint yn y chwith isaf, cownter tudalen ar y dde isaf, a theitl y ddogfen ar ochr chwith uchaf pob tudalen:

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

  1. 1
  2. 2

Beth ydych chi'n feddwl?

Mae'r wefan hon yn defnyddio Akismet i leihau sbam. Dysgwch sut mae eich data sylwadau yn cael ei brosesu.