WordPress:Styling for Print

来自站长百科
跳转至： 导航、​ 搜索

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

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

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

打印出来显得漂亮[ ]

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

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

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

在你的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 }
}

创建一个打印样式表[ ]

创建一个单独的样式表，包含所有的打印样式：

  1. 创建一个文本文件，叫做print.css。
  2. 将它保存到你的WordPress主题文件夹。
  3. 输入（或者）粘贴以下的内容，来开始打印样式，并且保存文件：
/* 打印样式表 */
@media print {
body { background:white; color:black; margin:0 }
}
4.在你的header.php模板文件中head部分创建一个像以下的链接：
<link rel="stylesheet" type="text/css" media="print" 
href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />

定义打印样式[ ]

在你的样式表或者你的打印样式表中的打印样式部分，像这个一样，添加你的站点的结构选择器（名）（你的可能有所不同）： 

/* 打印样式表 */
@media print {
body { background:white; color:black; margin:0 }
#页眉{ }
#内容{ }
#评论{ }
#工具条 { }
#页脚 { }
}

要包含每个部分，只要给选择器的声明 或者属性，添加display:block。 

#内容{ display:block }

去除一个部分，这样这个部分就不会打印出来，将display:none添加到选择器的声明上。 

#页脚 { display:none }

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

打印页眉[ ]

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

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

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

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

结构改变[ ]

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

因为，大多数用户希望取消工具条，来安置内容，这样它以一个舒适的阅读布局，在页面上伸展，使用这个例子： 

#sidebar { display:none }
#内容{ margin-left:0; 
     float:none; 
     width:auto }

这使得工具条消失了，指示浏览器使用任何的默认给打印机的页边空白设置。

打印打印大小[ ]

你可以使用points而不是像素或者em，来控制打印的字体的大小，因为这些与打印机读懂的信息相关。 

#页眉 { height:75px; 
     字体大小: 24pt; 
     颜色:black }
#内容{ margin-left:0; 
     float:none; 
     宽度:auto; 
   颜色:black; 
     字体大小: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。打印时，不显示评论形式，将这个添加到你的样式表中的打印样式部分。 

#评论样式 { display:none }

网页分割[ ]

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

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 }

打印样式例子[ ]

打印时，你可以控制网页设计的许多方面，包括大小，颜色，链接的外观，标题，标题，作者信息，文章meta数据,你的网页的任何部分。下面是一个用法的例子，你可以将这个用作参考。 

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

资源[ ]

打印机友好的CSS主题[ ]

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

翻译[ ]

如果你已经翻译了这篇文章，或者你的博客上有相似的文章，请在这儿发表一个链接。请将完全翻译的文章标记为(t)，将相似的文章标记为(s)。 Print yemadregiya mengedoch in Amharic.(t)

Printable version with CSS - نسخه قابل چاپ با سی اس اس in Persian(فارسی). (s)

Criando Estilos para Impressão葡萄牙语. (t)

Opsætning af WordPress til udskrivning 丹麦语。(t)



This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.

取自“https://www.zzbaike.com/wiki/index.php?title=WordPress:Styling_for_Print&oldid=1504”