编辑“WordPress定制打印样式”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress进阶使用|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
我们可以利用[http://www.wordpress.la/theme.html WordPress主题]轻松改变博客样式，大多数主题[http://www.wordpress.la/codex-%E4%B8%BA%E5%85%AC%E5%BC%80%E5%8F%91%E5%B8%83%E8%AE%BE%E8%AE%A1%E4%B8%BB%E9%A2%98.html 发布]前都经过多次彻底的跨平台测试和跨[[浏览器]]测试。然而这些主题都是为显示在电脑屏幕上的博客而设计的，如果我们要把[[博客]]内容打印出来，效果会怎样？现在有些人仍然习惯于把资料打印出来在闲暇时阅读，所以我们也要考虑怎样定制自己博客的打印样式。

默认情况下，如果用户打印的WordPress网页没有经过特别的打印样式设计，[[网页]]的样式表单将无法显示在打印页面上。一眼扫在打印出的页面上，全是文字，最上方是标题，之后是正文，正文下方是侧边栏内容，最后是页脚信息，非常影响美观。

我们可以直接打印一个页面或是在浏览器菜单中选择打印>打印预览来了解自己博客的打印效果。的确不是很赏心悦目吧？况且侧边栏上长长的博客链接也会浪费不少纸张。

==漂亮的打印样式==
要使打印样式变得美观，我们首先要注意网站结构以及包含文字的各个版块的结构。幸好WordPress主题的模块化文件系统能够帮助我们了解这些网站结构，模块化文件系统明确指定了主要结构版块。

大多数WordPress博客的主要结构都是相似的（但在不同用户的主题中，各个版块名称可能不尽相同）：

 #header
 #content
 #comments
 #sidebar (or #menu)
 #footer

我们可以在WordPress主题文件夹的style.css样式表单中找到以上版块的样式文件。

怎样修改这些版块以实现更好的打印效果，这完全取决于我们的想法。我们可以只打印出侧边栏而不打印页脚，也可以只显示页脚而舍弃侧边栏，还可以更改字体和字号，甚至可以把图片显示在打印页面上。下面介绍一些简单的示例，掌握基本技巧后大家可以随心所欲地发挥自己的创意。

===设计打印样式===
有两种方法可以设置打印样式。如果希望打印方便，只对博客做简单修改，可以使用第一种方法，将代码直接添加到样式表单。如果希望掌握博客的最终打印结果，最好是将各个版块留在各自的print.css样式文件中。

注意：一些WordPress主题作者可能已经考虑到打印问题并在主题文件中包括了主题的打印样式。设计打印样式前，请参考主题文件夹中的print.css样式表单文件以及style.css文件。

===在样式表单中设置打印样式===
我们可以在样式表单中设置打印样式，指导浏览器在样式表单中查找打印样式，并且所有打印样式都必须出现在各自的位置上。

要指导浏览器在样式表单中查找打印样式，我们需要在header.php模板文件的head部分改变样式表单链接，将文件中的以下代码：
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"   
 type="text/css" media="screen" />
更改为以下代码：

 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"   
 type="text/css" media="screen, print" />
之后，在样式表单中（通常是表单最下方），将以下代码添加到打印样式中：

 /* Print Styles */
 @media print {
 body { background:white; color:black; margin:0 }
 }
===新建打印样式表单===
新建一个独立的打印样式表单，步骤如下：
# 新建一个文本文件，命名为print.css
#将print.css文件保存到WordPress主题目录下
#在文件中输入（或复制）以下代码以启动打印样式，保存文件：
 /* Print Style Sheet */
 @media print {
 body { background:white; color:black; margin:0 }
 }

在模板文件header.php的head部分生成一个链接，如下所示：
 <link rel="stylesheet" type="text/css" media="print"   
 href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
===定义打印样式===
在样式表单或是打印样式表单的Print Styles版块，按以下格式加入网站结构的选择符（版块名称）（不同用户的版块名称可能有所不同）：
 /* Print Style Sheet */
 @media print {
 body { background:white; color:black; margin:0 }
 #header { }
 #content { }
 #comments { }
 #sidebar { }
 #footer { }
 }
如果要显示某个版块，只要在选择符的声明或属性中加入display:block：
 #content { display:block }
如果不希望显示某个版块，在选择符的声明中加入display:none：
 #footer { display:none }
使用display:none属性的元素不会出现在打印页面上。如果网页上有广告等不希望出现在打印页面上的元素， 可以为这些元素加上display:none属性。

 <?php get_header(); ?>
 <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
 <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
 <?php the_content('(continue reading...)'); ?>
 <?php endwhile; ?>
 <?php else : ?>
 <a href="<?php the_permalink() ?>">Not Found</a>
 Sorry, but you are looking for something that isn't here. You can search again by using <a href="#searchform">this form</a>...
 （对不起，这里没有您要找的信息。您可以用 <a href="#searchform">this form</a>再次搜索...）
 <?php endif; ?>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>

==网站结构变化==
之前我们选定了一些不希望出现在打印页面上的元素，但这并不意味这这些元素会完全配合我们的操作。例如，即使我们将侧边栏设置display:none属性，如果不对正文中各个元素的位置和空白部分做相应改动，页面左边会留出大约150像素的空白，影响排版。此外还需要重新调整正文位置，填补侧边栏留出的空白部分。

因此大多数用户会放弃显示侧边栏并增加正文宽度，达到更好的排版效果方便读者阅读，这时可以使用下面的代码示例：

 #sidebar { display:none }
 #content{ margin-left:0; float:none;  width:auto }
此代码使侧边栏消失在打印页面上并指导[[浏览器]]利用空白部分显示正文以供打印。

==打印页面的字号===
我们可以用points而不是像素或em为单位来控制打印出的字体大小，points是打印机能够识别的用法。

 #header { height:75px; font-size: 24pt; color:black }
 #content { margin-left:0; float:none; width:auto; color:black; font-size:12pt }

===打印评论部分==
一般而言，大多数人都喜欢阅读别人的评论，但都不喜欢评论框出现在打印出的网页上。评论框方便了坐在电脑屏幕前的读者，但如果将评论框打印出来会造成纸张浪费。

在WordPress主题文件夹中找到模板文件comments.php或comments-popup.php并打开，在模板中找到评论框的开始部分，查看评论框的ID选择符或名称，查找结果大致如下：
 <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php"   
 method="post" id="commentform">
评论框的CSS ID为commentform。要使评论框不显示在打印页面上，可以将以下代码添加到样式表单的打印样式部分：
 #commentform { display:none }

==分页符==
我们可以命令浏览器或打印机不要将段落或图片分割成两部分，不要打断引号中的内容，也不要在某个标题后分页显示标题下的内容，尽量将标题与内容一同显示到下一页中。但一些浏览器和打印机无法响应这类命令，如果确实希望达到良好的打印效果，可以试用以下代码：

 h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid }
 img { page-break-inside:avoid; page-break-after:avoid; }
 blockquote, table, pre { page-break-inside:avoid }
 ul, ol, dl  { page-break-before:avoid }
==打印样式实例==
我们可以控制很多[[网页设计]]元素的打印效果，包括字体、字色、链接样式、标题、作者信息、日志元数据甚至网页上任何部分。下面是一个打印样式的实例，供大家参考。
 @media print {
 body {background:white; font-size:10pt; margin:0 }
 #sidebar { display:none }
 #header { height:75px }
 #content{ margin-left:0; float:none; width:auto }
 .demo .red { color:black; font-weight:bold }
 #content a { font-weight:bold; color:#000066; text-decoration:underline }
 #content{ margin-left:0; float:none; width:auto }
 #footer, .ad { display:none }
 h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid }
 h3 { margin-left:10px; margin-bottom:0px; padding-bottom:0px }
 blockquote, table, pre { page-break-inside:avoid }
 ul, ol, dl  { page-break-before:avoid }
 img.centered { display: block; margin-left: auto; margin-right: auto; }
 img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
 img.left { padding: 4px;  margin: 0 7px 2px 0; display: inline; }
 .right { float: right; }
 .left { float: left }
 img { page-break-inside:avoid; page-break-after:avoid; }
==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|D]]
[[category:WordPress使用|D]]