Apakah Blog WordPress Anda Ramah Printer?

Cetak CSS

Saat saya menyelesaikan posting kemarin di ROI Media Sosial, Saya ingin mengirimkan previewnya ke CEO Dotster Clint Page. Namun, ketika saya mencetak ke PDF, halamannya berantakan!

Masih banyak orang di luar sana yang suka mencetak salinan situs web untuk dibagikan, referensi nanti, atau hanya file dengan beberapa catatan. Saya memutuskan bahwa saya ingin menjadikan blog saya ramah printer. Itu jauh lebih mudah dari yang saya kira.

Bagaimana Menampilkan Versi Cetak Anda:

Anda harus memahami dasar-dasar CSS untuk mencapai ini. Bagian tersulit adalah menggunakan konsol pengembang browser Anda untuk menguji tampilan, menyembunyikan, dan menyesuaikan konten sehingga Anda dapat menulis CSS Anda. Di Safari, Anda harus mengaktifkan alat pengembang, klik kanan halaman Anda, dan pilih Periksa Konten. Itu akan menunjukkan kepada Anda elemen dan CSS yang terkait.

Safari memiliki opsi kecil yang bagus untuk menampilkan versi cetak halaman Anda di web inspector:

Safari - Tampilan Cetak di Web Inspector

Cara Membuat Blog WordPress Anda Ramah Printer:

Ada beberapa cara berbeda untuk menentukan gaya Anda untuk dicetak. Salah satunya adalah dengan menambahkan bagian di lembar gaya Anda saat ini yang khusus untuk jenis media "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 lainnya adalah dengan menambahkan lembar gaya tertentu ke tema anak Anda yang menentukan opsi cetak. Begini caranya:

  1. Unggah lembar gaya tambahan ke direktori tema Anda yang disebut print.css.
  2. Tambahkan referensi ke lembar gaya baru di file functions.php mengajukan. Anda akan ingin memastikan file print.css Anda dimuat setelah stylesheet orang tua dan anak Anda sehingga gayanya dimuat terakhir. Saya juga menempatkan prioritas 100 pada pemuatan ini sehingga dimuat setelah plugin. Berikut tampilan referensi saya:

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

Sekarang Anda dapat menyesuaikan file print.css dan memodifikasi semua elemen yang ingin Anda sembunyikan atau tampilkan secara berbeda. Di situs saya, misalnya, saya menyembunyikan semua navigasi, header, sidebar, dan footer sehingga hanya konten yang ingin saya tampilkan yang dicetak.

My print.css File terlihat seperti ini. Perhatikan bahwa saya juga menambahkan margin, metode yang diterima oleh browser modern:

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

Bagaimana Tampilan Cetak Tampak

Begini tampilan print view saya jika dicetak dari Google Chrome:

Tampilan Cetak WordPress

Gaya Cetak Tingkat Lanjut

Penting untuk dicatat bahwa tidak semua browser dibuat sama. Anda mungkin ingin menguji setiap browser untuk melihat bagaimana tampilan halaman Anda di seluruh browser. Beberapa bahkan mendukung beberapa fitur halaman lanjutan untuk menambahkan konten, mengatur margin dan ukuran halaman, serta sejumlah elemen lainnya. Majalah Smashing memiliki nilai yang sangat tinggi artikel rinci tentang cetakan lanjutan ini Pilihan.

Berikut beberapa detail tata letak halaman yang saya masukkan untuk menambahkan penyebutan hak cipta di kiri bawah, penghitung halaman di kanan bawah, dan judul dokumen di kiri atas setiap 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) " 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

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.