WordPress makes it easy to style your WordPress site with 워드프레스는 테마를 사용하여 쉽게 디자인할 수 있다. 이 테마는 배포 전에 다른 컴퓨터와 브라우저에서 철저하게 테스트된다. 이것은 화면을 위해 디자인된다. 그러면 인쇄를 위한 디자인은 어떨까? 쉬는 시간에 읽기 위해, 웹페이지를 인쇄하기를 원하는 사람들이 여전히 있다. 그래서 인쇄를 위한 디자인을 생각해보자.
기본적으로, 워드프레스 웹페이지는 인쇄용으로는 디자인되어 있지 않다. 스타일시트가 제거되어, 스타일시트가 없는 것처럼 인쇄된다. 헤더로 시작하는 긴 줄로 시작해서, 본문, 사이드바 목록, 푸터가 순서대로 나열된다. 보기에 좋지 않다.
워드 프레스 사이트 인쇄 모양을 확인하려면 페이지를 인쇄하거나, 브라우저의 메뉴에서 인쇄> 인쇄 미리보기를 선택한다. 보기 안 좋은가? 두 페이지 이상 사이드바 블로그롤의 긴 목록을 인쇄하여 인쇄 용지를 꽤 낭비하게 된다.
사이트를 예쁘게 인쇄하려면, 각 섹션안에 본문이 있는 사이트 구조에 집중해야 한다. 다행히, 워드프레스 테마의 모듈 파일 시스템으로 이 과정을 쉽게 할 수 있다. 주요 구조 부분이 명확하게 지정되어 있기 때문이다.
이름이 테마마다 다를 수 있지만, 다음은 대부분 워드프레스 사이트의 핵심 구조이다.
#header #content #comments #sidebar (or #menu) #footer
워드프레스 테마 폴더의 style.css 스타일시트에서 이 섹션들의 스타일을 찾을 수 있을 것이다.
인쇄에 대비하여 이 섹션을 변경하는 것은 여러분의 몫이다. 푸터를 제외하고 사이드바를 인쇄하거나 또는 사이드바를 제외하고 푸터를 인쇄하고, 글꼴과 크기를 변경하고, 이미지를 인쇄하거나 제외할 수 있다. 예제를 통해, 나머지는 테스트하여 스스로 알아낼 수 있을 것이다.
인쇄와 관련된 스타일은 두 가지 방법으로 설정할 수 있다. 쉬운 인쇄를 위해 사이트를 간단히 변경하고자 하는 경우에, 첫 번째 방법을 사용하여 스타일 시트에 직접 추가 할 수 있다. 인쇄 할 때 사이트의 최종 결과를 제어하려는 경우, 자신의 print.css 스타일시트로 관리하는 것이 최선이다.
참고: 일부 워드프레스 테마에는 이미 인쇄 스타일이 지정되어 수 있을 수 있다. 계속하기 전에 테마 폴더에서 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 Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
}
<link rel="stylesheet" type="text/css" media="print"
href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
스타일시트의 인쇄 스타일 섹션 내 또는 인쇄 스타일 시트에, 아래와 같이 사이트 구조 선택자(이름)을 추가한다(테마마다 다를 수 있다):
/* 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을 추가한다.
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.
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 }
This makes the sidebar disappear and instructs the browser to use whatever the margin settings are by default for the printer.
You can control the printed font sizes by using points instead of pixels or em as these related to information the printer can understand.
#header { height:75px;
font-size: 24pt;
color:black }
#content { margin-left:0;
float:none;
width:auto;
color:black;
font-size:12pt }
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:
<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.
#commentform { display:none }
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.
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 }
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.
@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; }
}
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).