您的WordPress博客對打印機友好嗎?

打印CSS

當我完成昨天的發布後 社交媒體投資回報率,我想將其預覽發送給Dotster CEO Clint Page。 但是,當我打印為PDF時,頁面一片混亂!

仍然有很多人喜歡打印網站的副本以共享,以後參考或僅添加一些註釋。 我決定要使我的博客易於打印。 這比我想像的要容易得多。

如何顯示打印版本:

您需要了解CSS的基礎知識才能完成此任務。 最困難的部分是使用瀏覽器的開發人員控制台來測試顯示,隱藏和調整內容,以便編寫CSS。 在Safari中,您需要啟用開發人員工具,右鍵單擊您的頁面,然後選擇檢查內容。 這將向您顯示元素和關聯的CSS。

Safari有一個不錯的小選擇,可以在Web檢查器中顯示頁面的打印版本:

Safari-Web Inspector中的打印視圖

如何使您的WordPress博客易於打印:

有兩種不同的方式指定打印樣式。 一種只是在當前樣式表中添加特定於“打印”媒體類型的部分。

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

另一種方法是向您的子主題添加特定的樣式表,以指定打印選項。 就是這樣:

  1. 將另一個樣式表上傳到您的主題目錄,名為 打印文件.
  2. 在您的新樣式表中添加引用 的functions.php 文件。 您需要確保在父樣式表和子樣式表之後加載了print.css文件,以便最後加載樣式。 我還為此加載設置了100的優先級,以便它在插件之後加載。這是我的參考內容:

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

現在,您可以自定義print.css文件,並修改要隱藏或不同顯示的所有元素。 例如,在我的網站中,我隱藏了所有導航,頁眉,側邊欄和頁腳,以便僅打印要顯示的內容。

My 打印文件 文件看起來像這樣。 請注意,我還添加了頁邊距,這是現代瀏覽器所接受的方法:

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

打印視圖的外觀

如果使用Google Chrome瀏覽器打印,則打印視圖如下所示:

WordPress打印視圖

高級打印樣式

重要的是要注意,並非所有瀏覽器都是一樣的。 您可能需要測試每個瀏覽器,以查看頁面在瀏覽器中的外觀。 有些甚至支持某些高級頁面功能來添加內容,設置頁邊距和頁面大小以及許多其他元素。 粉碎雜誌有一個非常 這些高級印刷品的詳細文章 選項。

我合併了以下頁面佈局詳細信息,以在左下角添加版權說明,在右下角添加頁面計數器,並在每頁左上角添加文檔標題:

@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) " Highbridge, 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 個評論

  1. 1
  2. 2

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.