Apa Blog Printer-Friendly Sampeyan WordPress?

Nyithak CSS

Nalika aku ngrampungake kiriman wingi dina ROI Media Sosial, Aku pengin ngirim pratinjau menyang CEO Dotster Clint Page. Nalika aku nyithak PDF, kaca kasebut ora apik!

Ana isih akeh wong sing seneng nyithak salinan situs web kanggo dituduhake, referensi mengko, utawa mung file karo sawetara cathetan. Aku mutusake pengin nggawe blogku dadi ramah printer. Iku luwih gampang saka sing dakkira.

Cara nampilake versi cetak sampeyan:

Sampeyan kudu ngerti dasar-dasar CSS kanggo ngrampungake. Sisih sing paling angel yaiku nggunakake console developer browser kanggo nyoba nampilake, ndhelikake, lan nyetel konten supaya sampeyan bisa nulis CSS. Ing Safari, sampeyan kudu ngaktifake alat pangembang, klik klik kaca sampeyan, banjur pilih Priksa Konten. Sing bakal nuduhake elemen lan CSS sing ana gandhengane.

Safari duwe pilihan cilik kanggo nampilake versi cetak kaca sampeyan ing inspektur web:

Safari - Print View ing Web Inspektur

Cara Nggawe Ramah Printer Blog WordPress Sampeyan:

Ana macem-macem cara kanggo nemtokake gaya kanggo nyetak. Salah sijine yaiku nambah bagean ing lembar gaya sampeyan saiki sing khusus kanggo jinis "print" media.

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

Cara liya yaiku nambahake sheet gaya tartamtu menyang tema bocah sing nemtokake opsi cetak. Mangkene carane:

  1. Upload styleheet tambahan menyang direktori tema sing diarani print.css.
  2. Tambah referensi menyang lembar gaya anyar ing functions.php file Sampeyan bakal pengin nggawe manawa file print.css dimuat sawise pola gaya wong tuwa lan bocah supaya gaya dimuat pungkasan. Aku uga menehi prioritas 100 ing pemuatan iki supaya akeh sawise akeh plugin Mangkene referensi:

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

Saiki sampeyan bisa ngatur file print.css lan ngowahi kabeh elemen sing pengin didhelikake utawa ditampilake kanthi beda. Ing situsku, contone, aku ndhelikake kabeh pandhu arah, header, sidebars, lan sikil supaya mung konten sing pengin dak tampilake sing dicithak.

My print.css file katon kaya iki. Elinga yen aku uga nambah wates, cara sing ditampa browser modern:

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

Kepiye Tampilan Print

Mangkene tampilan tampilan cetakku yen dicithak saka Google Chrome:

Tampilan Cetak WordPress

Gaya Cetak Lanjut

Penting, dicathet yen ora kabeh browser digawe padha. Sampeyan bisa uga nyoba nyoba saben browser kanggo ndeleng tampilan kaca sampeyan. Sawetara malah ndhukung sawetara fitur kaca canggih kanggo nambah konten, nyetel wates lan ukuran kaca, uga sawetara elemen liyane. Majalah Smashing duwe artikel rinci babagan print canggih kasebut opsi.

Mangkene sawetara rincian tata letak kaca sing aku lebokake kanggo nambah sebutan hak cipta ing sisih kiwa ngisor, counter kaca ing sisih tengen ngisor, lan judhul dokumen ing sisih kiwa ndhuwur saben kaca:

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

  1. 1
  2. 2

Apa sampeyan mikir?

Situs iki nggunakake Akismet kanggo ngurangi spam. Sinau babagan proses data sampeyan.