CSS Layout Agar Website Menjadi Print Friendly

Mempercantik Layout Print dan PDF Website tanpa Plugin

Sebenarnya untuk bisa membuat halaman kita langsung bisa diprint tidaklah membutuhkan kode CSS khusus, akan tetapi untuk membuat agar halaman bisa langsung diprint atau dijadikan pdf dengan rapi tanpa ada header dan footer serta sidebar dan element lain dari website kita maka diperlukan sedikit sentuhan CSS.

Website yang print friendly sudah pasti akan memudahkan dan banyak membantu pengunjung, mereka tidak perlu repot-repot copy-paste artikel dari website kita, yang perlu mereka lakukan hanyalah menekan kombinasi tombol  ctrl+P jika menggunakan desktop atau dengan mengakses menu print jika menggunakan mobile browser, seketika halaman dari website kita akan siap untuk diprint.

Lalu bagaimana mempercantik layout print dan PDF website agar halaman website kita bisa langsung diprint dengan rapi? Ada setidaknya 3 cara yang bisa Anda lakukan untuk mempercantik layout print dan PDF website:

Cara Pertama: Membuat file CSS untuk mengatur print/pdf layout

Cara Kedua: Menggunakan custom CSS untuk menambahkan kode css print layout, dan cara ini jauh lebih simpel serta mudah.

Cara ketiga: Menambahkan kode css ke file style.css yang berada di folder tema aktif Anda.

Cara Pertama: Membuat file CSS untuk layout print.

Langkah Pertama: Membuat Link pada head section

Saya sangat menyarankan agar Anda meggunakan child theme, sehingga ketika ada error maka memperbaikinya pun mudah. Demikian juga ketika parent theme ada update maka file yang telah Anda modifikasi tidak di-override oleh file asli tema sehingga modifikasi yang telah Anda buat pun hilang dan harus mengulang dari awal.

Anda bisa melakukan ini dengan membuat link di head section pada file header.php yang berada dalam folder tema aktif yang sedang Anda gunakan. Untuk mengakses file header.php Anda bisa:

1. Mengaksesnya dari CPanel, Direct Admin atau panel lain yang Anda gunakan, setelah itu buka folder wp-content > themes > pilih tema yang Anda gunakan > edit file header.php
2. Dari theme editor yang ada di dashboard website Anda, jika tema Anda tidak menyediakan fitur theme editor maka Anda bisa menggunakan plugin Theme Editor atau plugin lain yang Anda sukai.

Setelah Anda berhasil mengakses file header.php  silakan edit dan tambahkan kode berikut tepat di antara tag dan sehingga menjadi link kode Anda , berikut kodenya:


<link rel="stylesheet" type="text/css" media="print"
href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />

Setelah berhasil menambahkan link silakan Anda save filenya.

Langkah kedua: Membuat file baru bernama print.css pada folder tema aktif yang Anda gunakan.

Untuk melakukan ini, silakan Anda mengakses folder tema aktif yang Anda gunakan wp-content > themes > pilih tema yang Anda gunakan > tambahkan file > beri nama file tersebut dengan nama print.css

File ini harus berada di dalam folder tema aktif yang Anda gunakan langsung, Anda tidak boleh meletakkannya di dalam folder lain. Jika Anda ingin meletakkannya di dalam folder lain maka Anda harus memodifikasi link yang sudah Anda pasang pada header.php sesuai di mana file print.css Anda berada.

Langkah ketiga: Menambahkan kode CSS pada file print.css tersebut

Silakan menambahkan kode sesuai kebutuhan Anda.

Jika Anda merasa perlu mereset style silakan tambahkan kode berikut:

/*Reset CSS Style www.zaad.my.id*/
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

Setelah itu tambahkan kode-kode lain yang Anda butuhkan, contohnya untuk menyembunyikan header, footer dan sidebar dari tampilan print/pdf maka silakan gunakan format kode berikut:

#header, #footer, #sidebar { display:none !important; }

• #header untuk menyembunyikan header dari tampilan print/pdf
• #footer untuk menyembunyikan footer dari tampilan print/pdf
• #sidebar untuk menyembunyikan sidebar dari tampilan print/pdf

Anda bisa menambahkan element lain dengan format seperti di atas jika ada element lain yang ingin Anda sembunyikan.

Perhatikan bahwa element ID atau class pada tema Anda bisa berbeda dengan tema yang sedang saya gunakan sehingga Anda perlu mengganti #header, #footer, #sidebar dengan element ID yang sesuai dengan tema yang sedang Anda gunakan, untuk mengetahui element ID Anda bisa menggunakan inspect element dari browser Anda, silakan buka website Anda, buka salah satu postingan di sana, klik kanan dan klik inspect, atau Anda bisa langsung menekan tombol F12 di halaman yang Anda inginkan. Silakan cari element yang ingin Anda masukkan di print.css, Anda bisa melihat gambar di bawah jika ingin lebih jelas.

Untuk menyembunyikan link terutama yang biasanya ada di menu dan dropdown menu, meta tag, postingan terkait, silakan gunakan kode berikut:

a[href]:after { content: none !important; }

Anda juga bisa mengatur layout halaman ketika diprint atau dijadikan pdf dengan menambahkan kode-kode sesuai kebutuhan Anda, sekali lagi gunakan inspect element untuk mengetahui ID yang Anda butuhkan, silakan lihat gambar di bawah jika ingin lebih jelas.

Perhatikan code CSS yang ada dalam kotak merah, itu merupakan code CSS untuk content area dari website saya, saya copy dan saya tambahkan ke print.css lalu saya modifikasi menjadi sebagai berikut:

/*Content Area Layout www.zaad.my.id*/
.content-area {
    float: left;
    position: relative;
    width: 100%;
	padding-left: 10px;
    padding-right: 10px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-color: #f1f1f1;
}

• widht (lebar) yang awalnya 72% saya ubah menjadi 100%
• padding-left yang awalnya tidak ada saya tambahkan
• padding-right yang awalnya 30px saya ubah menjadi 10px
• border-top, border bottom, border left yang awalnya tidak ada saya tambahkan dan lebarnya saya tentukan.

Perlu diperhatikan bahwa Anda harus bisa membedakan kapan Anda menggunakan hashtag (#) atau titik (.) atau bahkan tidak menggunakan keduanya, hashtag digunakan untuk element ID dan titik digunakan untuk element class. Jika bingung Anda bisa merujuk ke sini.

Anda bisa memasukkan kode-kode lain sesuai selera Anda, seperti kode untuk blockqoute jika ingin memodifikasi pada tampilan print/pdf seperti kode berikut:

/* Block Quote www.zaad.my.id */
    blockquote {
    font-style: italic;
    margin: 20px 0px;
    padding-left: 10px;
    border-top-width: 0px;
    border-bottom-width:0px;
    border-left-width: 3px;
    border-right-width:0px;
    border-style: solid;
    border-radius: 0px;
    }
}

Silakan masukkan kode lain sesuai kebutuhan, jika bingung element apa yang harus Anda modifikasi maka Anda bisa merujuk ke sini.

Langkah keempat: Simpan file print.css dan bersihkan cache

Silakan simpan file print.css yang sudah Anda modifikasi, jika Anda menggunakan plugin caching maka silakan bersihkan cache Anda sebelum mencoba melihat perubahannya, setelah itu cobalah lihat perubahan yang telah Anda buat dengan membuka halaman tertentu lalu tekan ctrl+P pada keyboard.

Cara Kedua: Memanfaatkan custom CSS dari tema.

Cara ini tergolong sangat mudah dan minim risiko, yang perlu Anda lakukan hanyalah membuka menu Layout > Customize (Tampilan > Sesuaikan) dari dashboard WordPress Anda, kemudian cari menu Custom CSS/JS dan gunakan kode berikut:

@media print {
    /*masukkan kode CSS Anda di sini*/
}

Silakan ganti tulisan /*masukkan kode CSS Anda di sini*/ dengan kode Anda. Contohnya kode yang saya gunakan di website saya:

@media print {
/* Sembunyikan Link www.zaad.my.id */
a[href]:after { content: none !important; }
/* Sembunyikan Element www.zaad.my.id */
#site-navigation, #scroll-top, #footer, #right-sidebar, #site-header-inner { display:none !important; }
/* Content Area Layout www.zaad.my.id */
.content-area {
    float: left;
    position: relative;
    width: 100%;
	padding-left: 10px;
    padding-right: 10px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-color: #f1f1f1;
}
/* Sembunyikan Header Halaman dan Breadcrumbs www.zaad.my.id */
.page-header, .has-transparent-header .page-header {
    display: none;}
/* Setting Block Quote www.zaad.my.id */
    blockquote {
    font-style: italic;
    margin: 20px 0px;
    padding-left: 10px;
    border-top-width: 0px;
    border-bottom-width:0px;
    border-left-width: 3px;
    border-right-width:0px;
    border-style: solid;
    border-radius: 0px;
    }
}

Anda boleh meggunakan kode saya di atas dan memodifikasinya sesuai keinginan Anda. Jangan lupa klik simpan untuk melihat hasilnya, jika Anda menggunakan plugin cache silakan lakukan purge cache setelah menyimpan agar perubahan bisa terlihat.

Sekali lagi ingat bahwa element ID atau class bisa berbeda tergantung tema yang Anda gunakan. Untuk mengetahui element ID atau class dari tema yang Anda gunakan silakan baca cara pertama di atas dan lihat gambar yang saya sertakan.

Cara ketiga: Menambahkan kode CSS pada file style.css

Anda dapat menambahkan kode yang ada pada cara kedua di atas langsung ke file style.css yang ada pada folder tema aktif Anda.

Perhatikan bahwa Anda sangat disarankan untuk menggunakan child theme ketika melakukan modifikasi file tema.

Note:

• Pretty print CSS di atas saya terapkan di tema Ocean WP, di tema yang lain mungkin ada perbedaan.
• Untuk saaat ini saya sudah tidak menggunakan tema Ocean WP, jadi karena saya sudah tidak update maka saya juga tidak menjamin kode di atas 100% bekerja di tema Ocean WP.
• Jika Anda ingin menampakkan warna background pada layout print, silakan lihat Kode CSS untuk Print Warna Background (Pretty Print)