Adakah Blog WordPress Anda Sesuai untuk Pencetak?

Cetak CSS

Semasa saya menyelesaikan catatan semalam pada ROI Media Sosial, Saya ingin menghantar pratonton ke CEO Dotster Clint Page. Namun, ketika saya mencetak ke PDF, halaman itu berantakan!

Masih banyak orang di luar sana yang suka mencetak salinan laman web untuk berkongsi, merujuk kemudian, atau hanya memfailkan beberapa nota. Saya memutuskan untuk menjadikan blog saya mesra pencetak. Ia jauh lebih mudah daripada yang saya sangka.

Cara Memaparkan Versi Cetakan Anda:

Anda perlu memahami asas-asas CSS untuk mencapainya. Bahagian yang paling sukar adalah menggunakan konsol pembangun penyemak imbas anda untuk menguji paparan, penyembunyian, dan penyesuaian kandungan sehingga anda dapat menulis CSS anda. Di Safari, anda perlu mengaktifkan alat pembangun, klik kanan halaman anda, dan pilih Periksa Kandungan. Itu akan menunjukkan kepada anda elemen dan CSS yang berkaitan.

Safari mempunyai pilihan kecil yang bagus untuk memaparkan versi cetak halaman anda di pemeriksa web:

Safari - Paparan Cetakan di Web Inspector

Cara Membuat Blog WordPress Anda Mesra Pencetak:

Terdapat beberapa cara yang berbeza untuk menentukan gaya anda untuk dicetak. Salah satunya adalah dengan menambahkan bahagian dalam helaian gaya semasa anda 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 lain adalah dengan menambahkan helaian gaya tertentu ke tema anak anda yang menentukan pilihan cetak. Ini caranya:

  1. Muat naik helaian gaya tambahan ke direktori tema anda yang dipanggil cetak.css.
  2. Tambahkan rujukan ke helaian gaya baru di functions.php fail. Anda ingin memastikan fail print.css anda dimuatkan setelah helaian gaya ibu bapa dan anak anda sehingga gaya dimuat terakhir. Saya juga meletakkan keutamaan 100 pada pemuatan ini sehingga dimuat selepas pemalam Inilah rujukan saya seperti:

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 boleh menyesuaikan fail print.css dan mengubah semua elemen yang anda mahu tersembunyi atau dipaparkan secara berbeza. Di laman web saya, misalnya, saya menyembunyikan semua navigasi, tajuk, bar sisi, dan footer sehingga hanya kandungan yang ingin saya paparkan dicetak.

My cetak.css fail kelihatan seperti ini. Perhatikan bahawa saya juga menambahkan margin, kaedah yang diterima oleh penyemak imbas moden:

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

Bagaimana Paparan Cetakan

Begini rupa paparan cetak saya jika dicetak dari Google Chrome:

Paparan Cetakan WordPress

Gaya Cetakan Lanjutan

Penting untuk diperhatikan bahawa tidak semua penyemak imbas dibuat sama. Anda mungkin ingin menguji setiap penyemak imbas untuk melihat bagaimana halaman anda kelihatan di seberang mereka. Ada juga yang menyokong beberapa ciri halaman lanjutan untuk menambahkan kandungan, menetapkan margin dan ukuran halaman, serta sejumlah elemen lain. Majalah Smashing mempunyai sangat artikel terperinci mengenai cetakan lanjutan ini pilihan.

Berikut adalah beberapa perincian susun atur halaman yang saya masukkan untuk menambahkan sebutan hak cipta di kiri bawah, kaunter halaman di kanan bawah, dan tajuk 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 Komen

  1. 1
  2. 2

Apa yang anda fikir?

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.