WordPress:Styling for Print

来自站长百科
Xxf3325（讨论 | 贡献）2008年4月15日 (二) 12:04的版本
跳转至： 导航、​ 搜索
可打印版不再被支持且可能有渲染错误。请更新您的浏览器书签并改用浏览器默认的打印功能。

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

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

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

打印出来显得漂亮

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

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

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

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

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

创建打印样式

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

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


在样式表内

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

To instruct the browser to look for the print styles within the style sheet, change your style sheet link in the head section of your header.php template file from this:

指示你的浏览器在样式表内找到打印样式，在你的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" />


to this, instructing the browser to look for print styles in the style sheet:

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

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


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


In your style sheet, usually at the very bottom, add the following to start your print styles: 在你的样式表中，通常在最底部，添加以下的内容来开始尼德打印样式： 

/* Print Styles */
@media print {
body { background:white; color:black; margin:0 }
}


/* Print Styles */
@media print {
body { background:white; color:black; margin:0 }
}


Creating a Print Style Sheet

创建一个打印样式表

To create an independent style sheet featuring all of your print styles: 创建一个单独的样式表，包含所有的打印样式：

  1. Create a text file called print.css.
  2. 创建一个文本文件，叫做print.css。
  3. Save it to your WordPress Theme folder.
  4. 将它保存到你的WordPress主题文件夹。
  5. Type (or paste) in the following to get the print styles started and save the file:
  6. 输入（或者）粘贴以下的内容，来开始打印样式，并且保存文件：
/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }



<pre>/* 打印样式表 */
@media print {
body { background:white; color:black; margin:0 }



}
4. Create a link in the head section of your header.php template file as follows:
<link rel="stylesheet" type="text/css" media="print" 
href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
4.在你的header.php模板文件中head部分创建一个像以下的链接：
<link rel="stylesheet" type="text/css" media="print" 
href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />


Defining Print Styles

定义打印样式

Within the Print Styles section on your style sheet or in your print style sheet, add your site's structure selectors (names) like this (yours may be different):

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

/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
#header { }
#content { }
#comments { }
#sidebar { }
#footer { }
}



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


To include each section, simply add display:block to the selector's declarations or attributes.

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

#content { display:block }
#内容{ display:block }

To not include a section, so it will not print, add display:none to the selector's declarations. 去除一个部分，这样这个部分就不会打印出来，将display:none添加到选择器的声明上。 

#footer { display:none }
#页脚 { display:none }

Using display:none, any element on your web page can disappear when printed. If you have advertising or other elements you do not want to appear when printed, then add the display:none to their selector under the print section. 使用display:none,你的网页上的任何元素在打印的时候，都可能不会出现。如果你有广告或者其它的一些什么元素，你在打印时，不希望这些出现，在打印部分下他们的选择器上添加display:none。

Printing the Header

打印页眉

The header of many WordPress Sites can be quite large, sometimes filling the top third or more of a page. This is unnecessary and consumes paper when printing, so you can change the look and size of your header in your print styles. 许多WordPress站点的页眉非常地大，有时，占据了网页上部的三分之一，或者更多。这是没必要的，而且打印的时候，会浪费纸张，因此你可以在你的打印样式上改变你的页眉的外观和大小。

Now the header is set to a height of 200 pixels, features text that is very large (about 250% of the base font size) and displays a bright yellow color. Since the height of the header is to accommodate the graphics, and by default, any background images in your styles will not print, you will just have empty space around your very large header title. You will want to change the look to make the header smaller and make the font size and color a little more reasonable for printing.

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

#header { display:block; 
	height: 100px; 
	font-size: 150%; 
	color:black; }


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


The font styles all stay the same, just the size and color are changed. 字体的形式仍然保持原样，只是字体的大小和颜色改变了。

Structural Changes

结构改变

Just because you have set part of the structure of your site to "disappear" when printed does not mean that the structure moves around to accommodate it. Many Themes feature a corner of their content container anchored to a specific spot, like 150 pixels from the left of the screen. Even though the sidebar may be set to display:none, unless the positions and margins are changed in the content, it may bring with a 150 pixel gap on the left. You will also need to change the positioning of the content section to accommodate the loss of the sidebar.

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


Since, most users want to drop the sidebar and position the content so it stretches across the page in a comfortable reading layout, use this example:

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

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


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


This makes the sidebar disappear and instructs the browser to use whatever the margin settings are by default for the printer.

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

Printing Print Sizes

打印打印大小

You can control the printed font sizes by using points instead of pixels or em as these related to information the printer can understand.

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

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



#页眉 { height:75px; 
     字体大小: 24pt; 
     颜色:black }
#内容{ margin-left:0; 
     float:none; 
     宽度:auto; 
   颜色:black; 
     字体大小:12pt }


Printing Comments

打印评论

In general, most people want to read the comments, but they certainly do not want to see the comment form when a page is printed. The comment form is for use on the screen and can take up most of a sheet of paper when printed. 一般来说，大多数人想要阅读评论，但是他们当然不喜欢看网页打印出来后的评论形式。评论形式是在屏面上使用的，打印出来时，可以占据一张纸的大部分。

Look inside your WordPress Theme's folder for the comments.php or comments-popup.php template files and open whichever one you use. Look through the template for the start of the comment form and find the ID selector or name. It might look like this:

查看你的WordPress主题文件夹，找到comments.php 或者comments-popup.php模板文件，并且打开任何一个你使用的文件。彻底地审查模板，看看评论形式的开始，并且找到ID选择器或者名称。它可能看起来像这样的： 

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" 
method="post" id="commentform">


<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" 
method="post" id="commentform">


The CSS ID for the form is commentform. To not display the comment form when printing, add this to the printing style section of your style sheet. 形式的CSS ID是commentform。打印时，不显示评论形式，将这个添加到你的样式表中的打印样式部分。 

#commentform { display:none }
#评论样式 { display:none }


Page Breaks

网页分割

While these do not work for every browser or printer, you can instruct them not to "break" your photographs or graphics in two pieces, or break apart blockquotes, or not to have a page break after a heading but to force it to break before the heading. This is not a perfect science, but if you are really particular about how your printed web page looks, you might want to use these.

虽然这些并不是对于每一个浏览器或者打印机都管用，你可以指示它们，不要将你的照片或者图表"分成"两个部分，或者分开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 }



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 }


Print Style Example

打印样式例子

There are many aspects of your web page design you can control when printing, including the size, colors, and looks of links, headings, titles, author information, the post meta data, any part of your web page. Here is an example of one usage that you can use as a reference.

打印时，你可以控制网页设计的许多方面，包括大小，颜色，链接的外观，标题，标题，作者信息，文章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; }
}





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



Resources

资源






Themes with Printer Friendly CSS

打印机友好的CSS主题

If your theme already has a printer friendly CSS, post a link here. If you have created a printer friendly CSS for a theme, post a link here to your page and to the theme's page too.

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

Translations

翻译

If you have translated this article, or have some similar one on your blog, post a link here. Please mark Fully Translated articles with (t) and similar ones with (s). 如果你已经翻译了这篇文章，或者你的博客上有相似的文章，请在这儿发表一个链接。请将完全翻译的文章标记为(t)，将相似的文章标记为(s)。

Print yemadregiya mengedoch in Amharic.(t)


Print yemadregiya mengedoch in Amharic.(t)


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

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


Criando Estilos para Impressão in Portuguese. (t)

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

Opsætning af WordPress til udskrivning in Danish.(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=1491”