编辑“WordPress:Styling for Print”

__TOC__
通过使用[[WordPress:Using Themes|主题]]，WordPress使你的WordPress站点设计过程简单，许多主题在[[WordPress:Designing Themes for Public Release|被发行]]之前，在不同的电脑和浏览器上经过了彻底的测试。这些是为'''屏面'''设计的。但是使你的WordPress站点为'''打印'''设计会是怎样的呢。有的人仍然喜欢打印出网页，在他们空闲时，阅读，因此考虑一下，设计你的WordPress站点，使其能打印。

默认情况下，当一个用户打印出了一张WordPress网页的时候，但这个网页在设计的时候，并没有考虑到打印，样式表在打印的时候，被去掉了，网页打印出来时，就像网页本没有样式表。打印的网页看起来就像一个长行的信息，以你的标题开始，内容，然后是长行的工具条，然后是页脚。不是很漂亮。

看看你的WordPress站点打印后，看起来是怎样的，打印一个网页，或者从你的浏览器的菜单上，选择'''打印 > 打印预览'''。不是很漂亮，是吗？而且，将那个长的友情链接工具条打印出来，有两页纸，真的是浪费纸张。

=打印出来显得漂亮=

要使你的站点打印出来时，显得比较漂亮，我们需要注意站点的体系结构，这个结构将内容保存在各个部分中。幸运的是，WordPress主题的模块文件系统使这个过程变得更加地简单，因为主要的结构区都设计清楚了。

更多的WordPress站点的核心结构是如下的，虽然在你的主题上，名称可能有所不同。

<pre>#页眉
#内容
#评论
#工具条 (or #菜单)
#页脚</pre>

在你的WordPress主题文件夹中的<tt>style.css</tt>样式表中，你会找到这些部分的样式。

你怎样改变这些部分，为打印做准备，取决于你自己。你可以打印工具条但是不打印页脚，或者打印页脚，不打印工具条，改变字体格式和大小，设置决定打不打印图像。我们会给出一些例子，让你参考，但是其余的，就要你自己通过尝试来体会和了解了。

==创建打印样式==

可以以两种方式设置与打印相关的样式。如果你想简单地打印一下，只是简单地改变一下站点，你可以使用第一种方法，并且将它们直接添加到样式表上。如果打印时，你想控制站点的最后结果，最好将这些保存在他们自己的<tt>print.css</tt>样式表上。

'''注:'''有的WordPress主题作者可能提前已经考虑到了，在他们的主题中已经包括了打印样式。在开始打印之前，查看主题文件夹找到一个<tt>print.css</tt>样式表文件，在<tt>style.css</tt>找到'''打印'''相关参考。


===在样式表内===

可以在样式表内设置打印样式。必须"指示"浏览器在样式表中找到打印样式，而且它们必须在它们自己的部分。

指示你的浏览器在样式表内找到打印样式，在你的<tt>header.php</tt>模板文件中的<tt>head</tt> 部分改变你的样式表链接，将这个：

<pre><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" 
type="text/css" media="screen" /></pre>

改为这个，指示浏览器在样式表中找到打印样式：

<pre><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" 
type="text/css" media="screen, print" /></pre>
在你的样式表中，通常在最底部，添加以下的内容来开始你的打印样式：

<pre>/* Print Styles */
@media print {
body { background:white; color:black; margin:0 }
}</pre>
===创建一个打印样式表===
创建一个单独的样式表，包含所有的打印样式：

#创建一个文本文件，叫做<tt>print.css</tt>。
#将它保存到你的WordPress主题文件夹。
#输入（或者）粘贴以下的内容，来开始打印样式，并且保存文件：
 <pre>/* 打印样式表 */
@media print {
body { background:white; color:black; margin:0 }
}</pre>

:4.在你的<tt>header.php</tt>模板文件中<tt>head</tt>部分创建一个像以下的链接：

<pre><link rel="stylesheet" type="text/css" media="print" 
href="<?php bloginfo('stylesheet_directory'); ?>/print.css" /></pre>

=定义打印样式=

在你的样式表或者你的打印样式表中的'''打印样式'''部分，像这个一样，添加你的站点的结构选择器（名）（你的可能有所不同）：
<pre>/* 打印样式表 */
@media print {
body { background:white; color:black; margin:0 }
#页眉{ }
#内容{ }
#评论{ }
#工具条 { }
#页脚 { }
}</pre>

要包含每个部分，只要给选择器的''声明'' 或者属性，添加<tt>display:block</tt>。
<pre>#内容{ display:block }</pre>

去除一个部分，这样这个部分就不会打印出来，将<tt>display:none</tt>添加到选择器的声明上。
<pre>#页脚 { display:none }</pre>

使用<tt>display:none</tt>,你的网页上的任何元素在打印的时候，都可能不会出现。如果你有广告或者其它的一些什么元素，你在打印时，不希望这些出现，在打印部分下他们的选择器上添加<tt>display:none</tt>。

==打印页眉==
许多WordPress站点的页眉非常地大，有时，占据了网页上部的三分之一，或者更多。这是没必要的，而且打印的时候，会浪费纸张，因此你可以在你的打印样式上改变你的页眉的外观和大小。

现在页眉已经设置到了200像素的高度，显示的文本非常大，（大概是基本的字体大小的百分之250）而且显示了一个明亮的黄色。因为页眉的高度是要适应图形，在默认情况下，你的样式上的任何的背景图像都不会打印出来，在你的非常大的页眉标题周围，你只有空白的空间。你可能要改变外观，使页眉更小，使字体大小和颜色更加地适合于打印。

<pre>#页眉 { display:block; 
高度: 100px; 
字体大小: 150%; 
颜色:黑色; }</pre>

字体的形式仍然保持原样，只是字体的大小和颜色改变了。

==结构改变==

打印时，你将你的站点上部分结构"取消"，这并不意味着''结构''四处移动来适应它。许多主题有一个角落的<tt>content</tt>容器，锚定一个特别的点，像屏面左上方的150像素。即使工具条设置为<tt>display:none</tt>,除非位置和页边空白在内容中改变了，它可能在左边引起一个150像素缺口。你也要更改一下内容部分的位置来使其使用工具条的丢失部分。

因为，大多数用户希望取消工具条，来安置内容，这样它以一个舒适的阅读布局，在页面上伸展，使用这个例子：
<pre>#sidebar { display:none }
#内容{ margin-left:0; 
     float:none; 
     width:auto }</pre>
这使得工具条消失了，指示浏览器使用任何的默认给打印机的页边空白设置。
==打印打印大小==

你可以使用'''points'''而不是像素或者''em''，来控制打印的字体的大小，因为这些与打印机读懂的信息相关。
<pre>#页眉 { height:75px; 
     字体大小: 24pt; 
     颜色:black }
#内容{ margin-left:0; 
     float:none; 
     宽度:auto; 
   颜色:black; 
     字体大小:12pt }</pre>

==打印评论== 
一般来说，大多数人想要阅读评论，但是他们当然不喜欢看网页打印出来后的评论形式。评论形式是在屏面上使用的，打印出来时，可以占据一张纸的大部分。

查看你的WordPress主题文件夹，找到<tt>comments.php</tt> 或者<tt>comments-popup.php</tt>模板文件，并且打开任何一个你使用的文件。彻底地审查模板，看看评论形式的开始，并且找到ID选择器或者名称。它可能看起来像这样的：
<pre><form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" 
method="post" id="commentform"></pre>

形式的CSS ID是<tt>commentform</tt>。打印时，不显示评论形式，将这个添加到你的样式表中的打印样式部分。

<pre>#评论样式 { display:none }</pre>
==网页分割==

虽然这些并不是对于每一个浏览器或者打印机都管用，你可以指示它们，不要将你的照片或者图表"分成"两个部分，或者分开blockquotes,不要将网页在标题后分开，将网页在标题前分开。这不是一个完美的科学，但是如果你真的在意你的网页的外观，你可能要使用这些。
<pre>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 }
</pre>

=打印样式例子=

打印时，你可以控制网页设计的许多方面，包括大小，颜色，链接的外观，标题，标题，作者信息，文章meta数据,你的网页的任何部分。下面是一个用法的例子，你可以将这个用作参考。
<pre>@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; }
}
</pre>
=资源=

* [http://www.arikfr.com/blog/make-your-blog-printer-friendly.html 使你的博客打印机友好] – 一个半指南性的，关于怎样使WordPress主题打印机友好 CSS文件。
* [http://www.aleeya.net/wordpress/css-printer-friendly-for-wordpress/ Aleeya.Net: Wordpress友好的CSS打印机] – 一个CSS 样本(没有图例主题) 怎样制作你自己的CSS的一些小贴士。
* [http://www.w3.org/TR/CSS21/page.html W3's CSS 2.1 Paged 媒体信息]
* [http://www.w3.org/TR/REC-CSS2/media.html W3.org's CSS-2 媒体参考]
* [http://www.codestyle.org/css/media/index.shtml 代码形式媒体监控(设计, 打印, 等等)]
* [http://evolt.org/article/Kissing_Print_Versions_of_Pages_Goodbye/20/22225/index.html Kissing Print Versions of Pages Goodbye by Lachlan Cannon]
* [http://evolt.org/article/Printing_with_style/17/26318/index.html Lachlan Cannon的与样式一起打印]
* [http://www.macedition.com/cb/cb_20011022.php CodeBitch的打印网页]
* [http://www.zeldman.com/essentials/print/ Zeldman.com's Essentials: 打印机友好的]
* [http://www.alistapart.com/articles/goingtoprint/ Apart的 CSS 设计列表: 将要打印]
* [http://evolt.org/article/rdf/22/60331/index.html Evolt.org's 你的网站外观在纸上看起来有多好]
* [http://www.w3schools.com/css/pr_print_pagebi.asp Property里的网页分割]
* [http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm Killersites.com's使网页可以打印  使用CSS]

=打印机友好的CSS主题=

如果你的主题已经有了一个打印机有好的CSS,在这儿发一个链接。如果你为主题创建了一个打印机友好的CSS,在这儿发表一个链接到你的网页和主题网页的链接。

* [http://www.arikfr.com/blog/make-your-blog-printer-friendly.html 图例主题的打印机友好的CSS] –由Arik Fraimovich制作。得到图例主题[http://cutline.tubetorial.com/ here]。
=翻译=
如果你已经翻译了这篇文章，或者你的博客上有相似的文章，请在这儿发表一个链接。请将完全翻译的文章标记为''(t)''，将相似的文章标记为''(s)''。
[http://webserviceethiopia.com/print-yemadregiya-mengedoch/ Print yemadregiya mengedoch] in Amharic.''(t)''

[http://weblog.corelist.net/archives/1384/02/15/printable-version-with-css/ Printable version with CSS - نسخه قابل چاپ با سی اس اس] in Persian(فارسی). ''(s)''

[http://300350.org/pages/wordpressprint/ Criando Estilos para Impressão]葡萄牙语. ''(t)''

[http://bestpracticemarketing.com/opsætning-af-wordpress-til-udskrivning/ Opsætning af WordPress til udskrivning] 丹麦语。''(t)''




{{Copyedit}}