您的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) " 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条评论

  1. 1
  2. 2

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.