WordPress Blogunuz Yazdırılabilir mi?

CSS yazdır

Dünkü gönderiyi tamamladığım gibi Sosyal Medya Yatırım Getirisi, Bunun bir ön izlemesini Dotster CEO'su Clint Page'e göndermek istedim. Yine de bir PDF'ye yazdırdığımda, sayfa karmakarışıktı!

Bir web sitesinin kopyalarını paylaşmak, daha sonra başvurmak veya sadece bazı notlarla dosyalamak için yazdırmayı seven birçok insan var. Blogumu yazıcı dostu yapmak istediğime karar verdim. Düşündüğümden çok daha kolaydı.

Basılı Sürümünüzü Nasıl Görüntüleyebilirsiniz:

Bunu başarmak için CSS'nin temellerini anlamanız gerekir. En zor kısım, CSS'nizi yazabilmeniz için içeriği görüntülemeyi, gizlemeyi ve ayarlamayı test etmek için tarayıcınızın geliştirici konsolunu kullanmaktır. Safari'de, geliştirici araçlarını etkinleştirmeniz, sayfanızı sağ tıklamanız ve İçeriği İncele'yi seçmeniz gerekir. Bu size ilişkili öğeyi ve CSS'yi gösterecektir.

Safari, sayfanızın yazdırılmış sürümünü web denetçisinde görüntülemek için güzel bir küçük seçeneğe sahiptir:

Safari - Web Inspector'da Baskı Görünümü

WordPress Blogunuzu Nasıl Yazıcı Dostu Yapabilirsiniz:

Baskı için stilinizi belirlemenin birkaç farklı yolu vardır. Birincisi, mevcut stil sayfanıza "baskı" ortam türüne özgü bir bölüm eklemektir.

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

Diğer yol, alt temanıza yazdırma seçeneklerini belirleyen belirli bir stil sayfası eklemektir. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

  1. Adlı tema dizininize ek bir stil sayfası yükleyin print.css.
  2. Yeni stil sayfasına bir referans ekleyin functions.php dosya. Print.css dosyanızın, stillerin en son yüklenmesi için ana ve alt stil sayfanızdan sonra yüklendiğinden emin olmak isteyeceksiniz. Eklentiden sonra yüklenmesi için bu yüklemeye 100 öncelik verdim İşte referansım şöyle görünüyor:

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

Artık print.css dosyasını özelleştirebilir ve gizlenmesini veya farklı şekilde görüntülenmesini istediğiniz tüm öğeleri değiştirebilirsiniz. Örneğin, sitemde, yalnızca görüntülemek istediğim içeriğin yazdırılması için tüm gezinmeyi, üstbilgileri, kenar çubuklarını ve altbilgileri gizliyorum.

My print.css dosya buna benziyor. Modern tarayıcılar tarafından kabul edilen bir yöntem olan kenar boşluklarını da eklediğime dikkat edin:

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

Baskı Görünümü Nasıl Görünüyor

Google Chrome'dan yazdırıldığında basılı görünümüm şu şekilde görünür:

WordPress Baskı Görünümü

Gelişmiş Baskı Şekillendirme

Tüm tarayıcıların eşit yaratılmadığına dikkat etmek önemlidir. Sayfanızın nasıl göründüğünü görmek için her bir tarayıcıyı test etmek isteyebilirsiniz. Hatta bazıları içerik eklemek, kenar boşluklarını ve sayfa boyutlarını ayarlamak için bazı gelişmiş sayfa özelliklerini ve ayrıca bir dizi başka öğeyi destekler. Smashing Magazine'de çok bu gelişmiş baskılarla ilgili ayrıntılı makale seçenekleri.

Sol altta bir telif hakkı sözünü, sağ altta bir sayfa sayacını ve her sayfanın sol üstündeki belge başlığını eklemek için dahil ettiğim bazı sayfa düzeni ayrıntıları:

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

  1. 1
  2. 2

Ne düşünüyorsunuz?

Bu site spam'i azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl işlendiğini öğrenin.