WordPress Blogunuz Yazıcıya Uyğundur?

CSS yazdırın

Dünənki yazını bitirdim Sosial Media ROI, Dotster CEOi Clint Page-a bir önizləmə göndərmək istədim. Bir PDF-yə yazdırdığım zaman, səhifə qarışıq idi!

Hələ orada bir veb saytın nüsxələrini çap etmək, daha sonra istinad etmək və ya bəzi qeydlərlə sənədləşdirmək üçün çap etmək istəyən bir çox insan var. Blogumu yazıcıya uyğun etmək istədiyimə qərar verdim. Düşündüyümdən çox daha asan idi.

Çap versiyasını necə göstərmək olar:

Bunu həyata keçirmək üçün CSS-in əsaslarını başa düşməlisiniz. Ən çətin tərəf, CSS-lərinizi yaza bilmək üçün məzmunun göstərilməsini, gizlənməsini və tənzimlənməsini sınamaq üçün brauzerinizin geliştirici konsolundan istifadə etməkdir. Safari-də, geliştirici alətlərini aktivləşdirməlisiniz, səhifənizi sağ vurun və Məzmunu yoxla seçin. Bununla əlaqəli elementi və CSS-i göstərəcəkdir.

Safari, veb müfəttişində səhifənizin çap versiyasını göstərmək üçün çox kiçik bir seçimə malikdir:

Safari - Veb müfəttişində görünüşü çap edin

WordPress blogunuzu çapa uyğun etmək üçün necə:

Çap üçün stilinizi müəyyənləşdirməyin bir neçə fərqli yolu var. Bunlardan biri cari üslubunuza “çap” ın media tipinə xas olan bir hissə əlavə etməkdir.

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

Digər yol, uşağınızın mövzusuna çap seçimlərini təyin edən müəyyən bir stil cədvəli əlavə etməkdir. Budur:

  1. Adlanan mövzu qovluğuna əlavə bir stil cədvəli yükləyin çap.css.
  2. Yeni üslub cədvəlinə istinad əlavə edin functions.php fayl. Print.css dosyanızın ana və uşaq üslubu cədvəlindən sonra yüklənməsini təmin etmək istəyəcəksiniz, belə ki üslublar son yüklənəcəkdir. Mən də bu yüklənməyə 100 prioritet verdim ki, plagindən sonra yüklənsin Budur istinadım belə görünür:

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

İndi print.css faylını fərdiləşdirə və gizlədilən və ya fərqli şəkildə göstərilməsini istədiyiniz bütün elementləri dəyişə bilərsiniz. Məsələn, saytımda bütün naviqasiyanı, başlıqları, yan panelləri və altbilgiləri gizlədirəm ki, yalnız göstərmək istədiyim məzmunu çap olunsun.

My çap.css fayl buna bənzəyir. Müasir brauzerlər tərəfindən qəbul edilən bir üsul olan haşiyələr də əlavə etdiyimə diqqət yetirin.

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

Çap Görünüşü necə görünür?

Google Chrome-dan çap olunduqda çap görünüşüm necə görünür:

WordPress çap görünüşü

Qabaqcıl çap üslubu

Bütün brauzerlərin bərabər yaradılmadığını qeyd etmək vacibdir. Səhifənizin onların arasında necə göründüyünü görmək üçün hər brauzeri sınamaq istəyə bilərsiniz. Bəziləri hətta məzmun əlavə etmək üçün bəzi inkişaf etmiş səhifə xüsusiyyətlərini dəstəkləyir, kənar boşluqlar və səhifə ölçüləri və bir sıra digər elementləri təyin edir. Smashing Magazine bir çox şeyə sahibdir bu inkişaf etmiş çap haqqında ətraflı məqalə variantları.

Aşağıda sola bir müəllif hüququ qeydini, sağ altdakı bir səhifə sayğacını və hər səhifənin sol üst hissəsindəki sənəd başlığını əlavə etmək üçün daxil etdiyim bəzi səhifə düzeni detalları:

@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 Şərhlər

  1. 1
  2. 2

Siz nə düşünürsünüz?

Bu sayt spam azaldılması üçün Akismet istifadə edir. Yorumunuzun necə işləndiyini öyrənin.