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

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

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

如何顯示打印版本：

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

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

如何使您的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瀏覽器打印，則打印視圖如下所示：

高級打印樣式

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

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

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