Pemasaran Kandungan

Adakah Blog WordPress Anda Sesuai untuk Pencetak?

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

Douglas Karr

Douglas Karr ialah CMO daripada OpenINSIGHTS dan pengasas Martech Zone. Douglas telah membantu berpuluh-puluh syarikat permulaan MarTech yang berjaya, telah membantu dalam usaha wajar lebih $5 bilion dalam pemerolehan dan pelaburan Martech, dan terus membantu syarikat dalam melaksanakan dan mengautomasikan strategi jualan dan pemasaran mereka. Douglas ialah transformasi digital yang diiktiraf di peringkat antarabangsa dan pakar serta penceramah MarTech. Douglas juga merupakan pengarang buku panduan Dummie dan buku kepimpinan perniagaan yang diterbitkan.

Artikel yang berkaitan

Kembali ke atas butang
Tutup

Adblock Dikesan

Martech Zone mampu memberikan anda kandungan ini tanpa sebarang kos kerana kami mengewangkan tapak kami melalui hasil iklan, pautan ahli gabungan dan tajaan. Kami amat menghargai jika anda akan mengalih keluar penyekat iklan anda semasa anda melihat tapak kami.