Sizning WordPress blogingiz printerga mos keladimi?

CSS-ni chop eting

Kechagi postni tugatgandan so'ng Ijtimoiy media ROI, Men uni oldindan ko'rishni Dotster bosh direktori Klint Peyjga jo'natmoqchi edim. Men PDF-ga chop etganimda, sahifa tartibsiz edi!

Hali ham veb-sayt nusxalarini baham ko'rish, keyinroq murojaat qilish yoki ba'zi bir eslatmalar bilan faylga qo'shish uchun nusxa ko'chirishni yaxshi ko'radigan odamlar ko'p. O'z blogimni printer bilan do'stlashtirmoqchiman. Bu men o'ylaganimdan ancha oson edi.

O'zingizning bosma versiyangizni qanday namoyish qilish kerak:

Buni amalga oshirish uchun sizga CSS asoslarini tushunishingiz kerak bo'ladi. Eng qiyin tomoni - bu sizning CSS-ni yozishingiz uchun tarkibni namoyish qilish, yashirish va sozlashni sinab ko'rish uchun brauzeringizning ishlab chiquvchi konsolidan foydalanish. Safari-da siz ishlab chiquvchi vositalarini yoqishingiz, sahifangizning o'ng tugmachasini bosishingiz va Tarkibni tekshirish-ni tanlashingiz kerak bo'ladi. Bu sizga bog'liq element va CSS-ni ko'rsatadi.

Safari-da veb-inspektorda sizning sahifangizning bosma versiyasini ko'rsatish uchun juda yaxshi imkoniyat mavjud:

Safari - veb-inspektorda ko'rinishni chop etish

WordPress blogingizni printerga qanday moslashtirish mumkin:

Bosib chiqarish uchun uslubingizni aniqlashning bir necha xil usullari mavjud. Ulardan biri sizning joriy uslublar jadvalingizga "bosma" ning media turiga xos bo'lgan bo'limni qo'shishdir.

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

Boshqa usul - farzandingiz mavzusiga bosib chiqarish variantlarini ko'rsatadigan ma'lum bir uslublar jadvalini qo'shish. Mana qanday:

  1. Qo'shimcha uslublar jadvalini mavzu katalogiga yuklang print.css.
  2. O'zingizdagi yangi uslublar varag'iga ma'lumotnoma qo'shing Functions.php fayl. Print.css faylingiz ota-ona va farzandingizning jadvalidan keyin yuklanishini ta'minlashni xohlaysiz, shunda uning uslublari oxirgi marta yuklanadi. Bundan tashqari, men ushbu yuklamada 100 ustuvorligini qo'ydim, shunda u plagindan keyin yuklanadi Mana mening ma'lumotnomam quyidagicha:

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

Endi print.css faylini sozlashingiz va yashirilgan yoki boshqacha ko'rinishga ega bo'lgan barcha elementlarni o'zgartirishingiz mumkin. Mening saytimda, masalan, men ko'rsatishni istagan kontent bosilishi uchun barcha navigatsiya, sarlavhalar, yon panellar va altbilgilarni yashiraman.

My print.css fayl shunga o'xshash. Men zamonaviy brauzerlar tomonidan qabul qilingan usulni ham qo'shganimga e'tibor bering:

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

Bosib chiqarish ko'rinishi qanday ko'rinadi

Google Chrome brauzeridan bosib chiqarilsa, mening bosma ko'rinishim quyidagicha ko'rinadi:

WordPress Print View

Kengaytirilgan chop etish uslubi

Shuni ta'kidlash kerakki, barcha brauzerlar bir xilda yaratilmagan. Har bir brauzerni sizning sahifangiz qanday ko'rinishini ko'rish uchun tekshirishni xohlashingiz mumkin. Ba'zilar tarkibni qo'shish, chekka joylar va sahifa o'lchamlarini belgilash, shuningdek boshqa bir qator elementlarni qo'shish uchun ba'zi rivojlangan sahifa xususiyatlarini qo'llab-quvvatlaydi. Smashing jurnali juda ko'p narsalarga ega ushbu kengaytirilgan nashrga oid batafsil maqola imkoniyatlari.

Quyidagi chap tomonda mualliflik huquqi to'g'risidagi eslatmani, pastki o'ng tomonda sahifa hisoblagichini va har bir sahifaning yuqori chap qismidagi hujjat sarlavhasini qo'shish uchun men kiritgan sahifa tartibining ba'zi tafsilotlari:

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

  1. 1
  2. 2

Siz nima deb o'ylaysiz?

Ushbu sayt spamni kamaytirish uchun Akismet-dan foydalanadi. Fikringiz ma'lumotlarining qanday ishlashini bilib oling.