wordpress主题
In this tutorial we’ll take a look at what designing a theme for printing means and how WordPress theme developers can design their themes for printing. Designing a theme to look great in a web browser is not enough, some people still like (or need) to print out web pages for various reasons, so we also need to design themes to look great when they are printed.
在本教程中，我们将了解设计打印主题的含义以及WordPress主题开发人员如何设计打印主题。 设计主题以使其在Web浏览器中看起来不够漂亮，有些人仍然出于各种原因仍然喜欢(或需要)打印网页，因此我们还需要设计主题以使其在打印时看起来更出色。
Throughout this article I’ll provide some basic CSS which can help to take your theme to the next level by optimizing its interface for printing. If you’re a theme developer then you can directly embed the CSS in your theme. If you’re a WordPress user and if want to make your current website print ready, then you can install this code via a plugin. I will go through all these steps in detail below.
在整篇文章中，我将提供一些基本CSS，这些CSS可以通过优化其打印界面来将您的主题提升到一个新的水平。 如果您是主题开发人员，则可以直接将CSS嵌入主题中。 如果您是WordPress用户，并且想打印当前网站，则可以通过插件安装此代码。 我将在下面详细介绍所有这些步骤。
By default, when a user prints a WordPress web page that is not print ready, the style sheet is stripped away and the page prints as if there is no style sheet. It tends to look like a long line of information, starting with your header, the content, then the long list that is your sidebar, followed by the footer. It’s not very pretty.
默认情况下，当用户打印尚未准备就绪的WordPress网页时，样式表会被剥离掉，并且该页面的打印就像没有样式表一样。 它看起来像一长串信息，从标题，内容开始，然后是侧边栏的长列表，然后是页脚。 不是很漂亮
A theme is typically said to be print ready if, when it’s printed, it only prints the website name, post content and comments. It shouldn’t print widgets, ads and other such elements. For image and anchor tags, it should display the URL beside the image and link text. Images should fit the width of the printed page. Backgrounds should be clean and the text should use standard fonts and colors. Overall the text and images should be easy to read and view, and must be aligned perfectly in the page.
如果在打印主题时仅打印网站名称，帖子内容和评论，则通常认为该主题已准备就绪。 它不应打印小部件，广告和其他此类元素。 对于图像和锚标记，它应在图像和链接文本旁边显示URL。 图像应适合打印页面的宽度。 背景应整洁，文本应使用标准字体和颜色。 总体而言，文本和图像应易于阅读和查看，并且必须在页面中完美对齐。
One of the best examples of a print ready website is SitePoint. Go ahead and press Ctrl + P and check out how it looks.
可打印的网站的最佳示例之一是SitePoint。 继续并按Ctrl + P并查看外观。
You can see that it removes most of the things from the header and includes only page url and logo. And then it starts directly with the header and content of the page. For every image and anchor tag it prints the respective URL beside it.
您会看到它从标题中删除了大部分内容，并且仅包含页面URL和徽标。 然后直接从页面的标题和内容开始。 对于每个图像和锚标记，它都会在其旁边打印相应的URL。
Here you can see that the image width fits the page width when the actual dimensions exceed the page width.
在这里，您可以看到当实际尺寸超过页面宽度时，图像宽度适合页面宽度。
If you’re planning to create a new site, before choosing a theme, make sure you check if it is print ready. There are lots of themes that look great but are poorly designed for printing. Avoid these themes if possible.
如果您打算创建一个新站点，则在选择主题之前，请确保检查它是否已准备好打印。 有很多主题看起来不错，但设计却不适合打印。 尽可能避免使用这些主题。
The first step is to create a print.css file which we will put our print design CSS code in. If you’re a theme developer, then you can enqueue this file along with the CSS files in your theme. If you are a WordPress user and your theme is not print ready then you’ll need to enqueue this script via a plugin.
第一步是创建一个print.css文件，我们将在其中放入我们的印刷设计CSS代码。如果您是主题开发人员，则可以将此文件与CSS文件一起放入主题中。 如果您是WordPress用户，但您的主题尚未准备好打印，则需要通过插件使此脚本入队。
Theme developers can put this code directly in their theme’s functions.php file
主题开发人员可以将此代码直接放在其主题的functions.php文件中
function prefix_print_style() { wp_enqueue_style("mytheme_print_style", get_bloginfo("template_directory")."/print.css"); } add_action("wp_enqueue_scripts", "prefix_print_style");I am assuming you have placed the print.css file in the root of theme directory.
我假设您已将print.css文件放在主题目录的根目录中。
If you are a already using a not print ready theme then you need to install this style via a simple functionality plugin. Below is the code for the plugin.
如果您已经使用了尚未打印的主题，则需要通过一个简单的功能插件安装此样式。 以下是该插件的代码。
<?php /* Plugin Name: SitePoint Print Ready Plugin URI: https://www.sitepoint.com Description: This plugin makes your theme print ready. License: GPL2 */ function prefix_print_style() { wp_enqueue_style("myplugin_print_style", plugins_url("print.css", __FILE__)); } add_action("wp_enqueue_scripts", "prefix_print_style"); ?>Again, I am also assuming you have the print.css file in the plugin root directory.
同样，我还假设您在插件根目录中有print.css文件。
From here onwards, whatever code I’ll show you, you’ll need to put in the print.css file.
从这里开始，无论我要显示什么代码，您都需要放入print.css文件中。
The @page rule can be used to define or change dimensions, orientation, margins, orphans, windows and page breaks of a printed sheet.
@page规则可用于定义或更改打印纸的尺寸，方向，页边距，孤立行，窗口和分页符。
The image below marks each of the above terms in a printed sheet.
下图在打印纸上标记了以上每个术语。
Image courtesy of mPDF
图片由mPDF提供
Add this code to your print.css file to keep margins between the printed page and the content.
将此代码添加到您的print.css文件中，以保持打印页面和内容之间的边距。
@page { margin: 2cm; }The @media print media rule is used to define CSS properties for HTML elements when they are printed. All of the CSS code used inside this rule is applied when the web page is printed.
@media print媒体规则用于为HTML元素在打印时定义CSS属性。 打印网页时，将应用此规则内使用的所有CSS代码。
From now onwards all the CSS code I will show you should be kept inside the @media print rule.
从现在开始，我将向您展示的所有CSS代码都应保留在@media print规则中。
We will use the WordPress default classes, HTML5 semantic tags and the most common class names to style the web page for print.
我们将使用WordPress默认类，HTML5语义标记和最常用的类名称来设置网页样式以进行打印。
The standard background color for printed pages is white and font color is back. As we have already given margin to printed sheet above using @page rule, we need to remove any margins from body.
打印页面的标准背景颜色为白色，字体颜色为反色。 由于我们已经使用@page规则在上面的打印纸上添加了页边距，因此我们需要从正文中删除所有页边距。
@media print { body { background:white; color:black; margin:0 } }We need to hide the navigation menu, footer and sidebar when web page is printed. We can achieve this by the following CSS.
打印网页时，我们需要隐藏导航菜单，页脚和侧边栏。 我们可以通过以下CSS来实现。
@media print { nav, .nav, footer, #sidebar, aside, #footer { display: none; } }We also need to print comments but not the comment form.
我们还需要打印注释，而不是注释表单。
@media print { #commentform { display:none; } }While the code below does not work for every browser or printer, you can instruct them not to “break” your photographs or graphics into 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’re really particular about how your printed web page should look, you might want to use these.
尽管下面的代码不适用于所有浏览器或打印机，但是您可以指示他们不要将照片或图形“分成两部分”，或将大括号分开，或者不要在标题后进行分页，而是强制使用在标题之前中断。 这不是一门完美的科学，但是如果您对打印的网页的外观真的很特别，则可能需要使用它们。
@media print { 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; } }You should style your web page heading specifically for print, you can do this by using the following CSS:
您应该为打印的网页标题设置样式，可以使用以下CSS来做到这一点：
@media print { h1, h2, h3 { font-weight:bold; } h1 { font-size:24px; } h2 { font-size:16px; border-bottom:1px solid #ccc; padding:0 0 2px 0; margin:0 0 5px 0; } h3 { font-size:13px; margin:0 0 2px 0; } }You should style your paragraph font family, font size and margins specifically for printing.
您应该为打印样式设置段落字体系列，字体大小和边距。
@media print { p { font-size:11px; font-family:times new roman, serif; margin:0 0 18px 0; } }You should style your anchor tags specifically for printing and also display href value in brackets beside the link.
您应该为锚标记设计样式，以专门用于打印，并在链接旁边的方括号中显示href值。
@media print { p { font-size:11px; font-family:times new roman, serif; margin:0 0 18px 0; } p a:after { content: " (http://yourdomain.com/" attr(href) ")"; font-size: 80%; } p a[href^="/"]:after { content: " (http://yourdomain.com" attr(href) ")"; } p a[href^="http://"]:after, p a[href^="https://"]:after { content: " (" attr(href) ")"; } p a[href^="#"]:after { display: none; } }We need to make sure that the image width doesn’t overflow beyond the printed page width, we also need to display image URL beside it.
我们需要确保图像宽度不会超出打印页面宽度，也需要在其旁边显示图像URL。
@media print { img { max-width: 100%; } p img:after { content: " (http://yourdomain.com/" attr(src) ")"; } p img[href^="/"]:after { content: " (http://yourdomain.com" attr(src) ")"; } p img[href^="http://"]:after, p img[href^="https://"]:after { content: " (" attr(src) ")"; } }If you’re a theme developer then you’ll already know the other classes containing the unnecessary parts of your theme. Add them to the print.css file to hide them or re-styling them.
如果您是主题开发人员，那么您将已经知道其他包含主题不必要部分的类。 将它们添加到print.css文件以隐藏它们或重新设置它们的样式。
If you’re building a plugin, then inspect your theme using your browser specific developer tool and find the class names, then add them to the print.css file for hiding them or re-styling them.
如果要构建插件，请使用特定于浏览器的开发人员工具检查主题并找到类名称，然后将其添加到print.css文件中以隐藏它们或重新设置其样式。
If you’ve been following along, but haven’t yet created the example, don’t worry. Here’s the complete code inside the print.css file.
如果您一直在遵循，但尚未创建示例，请不要担心。 这是print.css文件中的完整代码。
@page { margin: 2cm; } @media print { body { background:white; color:black; margin:0 } nav, .nav, footer, #sidebar, aside, #footer { display: none; } #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; } h1, h2, h3 { font-weight:bold; } h1 { font-size:24px; } h2 { font-size:16px; border-bottom:1px solid #ccc; padding:0 0 2px 0; margin:0 0 5px 0; } h3 { font-size:13px; margin:0 0 2px 0; } p { font-size:11px; font-family:times new roman, serif; margin:0 0 18px 0; } p a:after { content: " (http://yourdomain.com/" attr(href) ")"; font-size: 80%; } p a[href^="/"]:after { content: " (http://yourdomain.com" attr(href) ")"; } p a[href^="http://"]:after, p a[href^="https://"]:after { content: " (" attr(href) ")"; } p a[href^="#"]:after { display: none; } img { max-width: 100%; } p img:after { content: " (http://yourdomain.com/" attr(src) ")"; } p img[href^="/"]:after { content: " (http://yourdomain.com" attr(src) ")"; } p img[href^="http://"]:after, p img[href^="https://"]:after { content: " (" attr(src) ")"; } }If you want to further improve the how print friendly your pages are, it’s not only about hiding or re-styling elements. Some websites add elements such as QR codes.
如果您想进一步改善页面的打印友好度，不仅要隐藏或重新设置元素样式。 一些网站添加了QR码等元素。
Here’s an example that adds a QR code to all printed pages:
这是一个向所有打印页面添加QR码的示例：
@media print { body:after { content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150 &chl=http://<?php the_permalink(); ?>&choe=UTF-8); position: absolute; right: 0; top: 0; } }In this article I covered the concepts of styling a basic blog-style theme. However, your theme can be more advanced and can support playing video and audio. In that case, consider hiding the audio and video element but display the URL of the resource.
在本文中，我介绍了样式化基本博客样式主题的概念。 但是，您的主题可以更高级，并且可以支持播放视频和音频。 在这种情况下，请考虑隐藏音频和视频元素，但显示资源的URL。
Please share your experiences with designing WordPress themes for printing, I’ve love to hear what you’ve done.
请分享您设计WordPress主题以进行打印的经验，我很乐意听到您的所作所为。
翻译自: https://www.sitepoint.com/designing-wordpress-themes-for-printing/
wordpress主题
