Naha WordPress Blog Printer-Friendly anjeun?

Nyetak CSS

Nalika kuring réngsé tulisan kamari dina Media Sosial ROI, Kuring badé ngirim sawangan éta ka Dotster CEO Clint Page. Nalika kuring nyetak kana PDF, sanaos, halaman na mangrupikeun kacau!

Masih seueur jalmi di luar sana anu resep nyitak salinan halaman wéb pikeun dibagi, rujukan engké, atanapi ngan file sareng sababaraha catetan. Kuring mutuskeun kuring hoyong ngadamel blog kuring ramah-printer. Éta langkung gampil tibatan anu kuring anggap.

Kumaha Tembongkeun Vérsi Cetak Anjeun:

Anjeun kedah ngartos dasar-dasar CSS pikeun ngalaksanakeun ieu. Bagian anu paling hese nyaeta nganggo konsol pangembang panyungsi anjeun pikeun nguji mintonkeun, nyumput, sareng nyaluyukeun konténna supados anjeun tiasa nyerat CSS anjeun. Di Safari, anjeun kedah ngaktipkeun alat pamekar, klik katuhu halaman anjeun, sareng pilih Inspéksi Eusi. Éta bakal nunjukkeun anjeun unsur sareng CSS pakait.

Safari gaduh pilihan sakedik anu saé pikeun nembongkeun versi cetak halaman anjeun dina inspektur wéb:

Safari - Print View dina Web Inspector

Kumaha Janten WordPress Blog Printer-Friendly Anjeun:

Aya sababaraha cara anu béda pikeun ngahususkeun gaya anjeun pikeun nyetak. Hiji nyaéta ngan ukur nambihan bagian dina lembar gaya anjeun ayeuna anu khusus pikeun jinis média "cetak".

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

Cara sanésna nyaéta nambihan lambaran gaya khusus pikeun téma murangkalih anjeun anu netepkeun pilihan cetak. Kieu carana:

  1. Unggah lembar gaya tambahan kana diréktori téma anjeun anu disebat nyetak.css.
  2. Tambahkeun rujukan kana lembar gaya énggal dina anjeun functions.php file. Anjeun bakal hoyong mastikeun file print.css anjeun dimuat saatos gaya indung sareng anak anjeun sahingga gaya na dimuat pamungkas. Kuring ogé nempatkeun prioritas 100 dina ngamuat ieu sahingga seueur saatos plugin Ieu mangrupikeun référénsi kuring:

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

Ayeuna anjeun tiasa ngaropea file print.css sareng ngarobih sadaya unsur anu anjeun badé disumputkeun atanapi ditampilkeun sacara béda. Dina situs abdi, salaku conto, kuring nyumputkeun sadayana navigasi, header, sidebars, sareng footer sahingga ukur eusi anu kuring hoyong tampilkeun anu dicitak.

My nyetak.css file siga kieu. Perhatikeun yén kuring ogé nambihan margina, metode anu ditampi ku panyungsi modéren:

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

Kumaha Tampilan Cetak Sigana

Kieu kumaha tampilan citak kuring upami dicitak tina Google Chrome:

Témbongkeun Print WordPress

Styling Cetak Laju

Penting pikeun dicatet yén henteu sadaya panyungsi didamel sami. Anjeun panginten tiasa nyobian unggal browser pikeun ningali kumaha kaca anjeun ngalangkungan aranjeunna. Sababaraha ogé ngadukung sababaraha fitur halaman maju pikeun nambihan eusi, nyetél margin sareng ukuran halaman, ogé sajumlah elemen sanés. Majalah Smashing gaduh pisan tulisan lengkep ngeunaan ieu cetak canggih pilihan.

Ieu sababaraha detil perenah halaman anu kuring lebetkeun pikeun nambihan sebutan hak cipta di kénca handap, konter halaman di belah katuhu handap, sareng judul dokumén dina kénca luhur unggal halaman:

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

  1. 1
  2. 2

Naon anu anjeun pikirkeun?

Situs migunakeun Akismet pikeun ngurangan spam. Diajar kumaha komentar data anjeun diolah.