Добавление таблицы стилей для печати на ваш сайт WordPress — мудрый шаг. Окружающая среда поблагодарит вас за применение этой статьи на вашем сайте. Это такая простая функция для реализации, и большинство людей просто игнорируют ее. Я покажу вам, как легко добавить простую таблицу стилей печати на ваш сайт WordPress. Я собираюсь дать вам отличную основу того, что вы можете использовать на своем сайте немедленно, и покажу вам несколько советов, чтобы вы могли перейти на следующий уровень.
Шаг 1. Реализация таблицы стилей печати
Вам нужно будет обновить файл header.php вашей темы, чтобы он знал, что таблица стилей, которую мы будем обновлять, будет также использоваться для печати. Откройте файл header.php и найдите:
|
1
|
<link rel=»stylesheet» type=»text/css» media=»screen» href=»<?php bloginfo( ‘stylesheet_url’ ); ?>» />
|
Нам нужно обновить атрибут media, чтобы включить печать. Экран сообщает браузеру «Это таблица стилей, которую вы должны использовать, чтобы знать, как отображать элементы в браузере». Нам нужно сказать: «Вы также можете использовать эту таблицу стилей, когда пользователь печатает». Так что теперь это выглядит так:
|
1
|
<link rel=»stylesheet» type=»text/css» media=»screen, print» href=»<?php bloginfo( ‘stylesheet_url’ ); ?>» />
|
Затем откройте свою таблицу стилей style.css. В конце документа добавьте:
|
1
|
@import «print.css»;
|
Важно, чтобы код находился внизу таблицы стилей, чтобы убедиться, что ваши стили экрана не наследуют стили, которые мы используем для печати, и чтобы стили печати не были переопределены со стилями вашего сайта. После этого создайте файл в том же каталоге с именем print.css. Здесь мы добавим весь наш стиль для печати.
Шаг 2. Добавление стиля печати
Ниже представлена модифицированная версия стиля печати для темы WordPress по умолчанию «TwentyTen». Многие веб-сайты используют одни и те же элементы, поэтому нет необходимости изобретать колесо для его разработки. Я собираюсь разбить ключевые элементы, чтобы вы знали, почему они были включены, и какие стили вы должны использовать, чтобы добавить их в свои собственные элементы.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
@media print {
body {
background: #fff none !important;
color: #000;
}
#wrapper {
clear: both !important;
display: block !important;
float: none !important;
position: relative !important;
}
#header {
border-bottom: 2pt solid #000;
padding-bottom: 18pt;
}
#colophon {
border-top: 2pt solid #000;
}
#site-title,
#site-description {
float: none;
line-height: 1.4em;
margin: 0;
padding: 0;
}
#site-title {
font-size: 13pt;
}
.entry-content {
font-size: 14pt;
line-height: 1.6em;
}
.entry-title {
font-size: 21pt;
}
#access,
#branding img,
#respond,
.comment-edit-link,
.edit-link,
.navigation,
.page-link,
.widget-area {
display: none !important;
}
#container,
#header,
#footer {
margin: 0;
width: 100%;
}
#content,
.one-column #content {
margin: 24pt 0 0;
width: 100%;
}
.wp-caption p {
font-size: 11pt;
}
#site-info,
#site-generator {
float: none;
width: auto;
}
#colophon {
width: auto;
}
img#wpstats {
display: none;
}
#site-generator a {
margin: 0;
padding: 0;
}
#entry-author-info {
border: 1px solid #e7e7e7;
}
#main {
display: inline;
}
.home .sticky {
border: none;
}
}
|
Шаг 3. Понимание стиля печати
Оберните ваши метки для печати
Во-первых, вы должны заметить, как все ваши стили печати заключены внутри:
|
1
2
|
@media print {
}
|
Все объекты, которые соответствуют функциональности печати, заключены в эти скобки. Если вы добавите какой-либо стиль, убедитесь, что он находится в этих скобках. Если это снаружи, CSS не будет знать лучше и будет считать, что это часть экрана.
Сделай все черным и белым
|
1
2
3
4
|
body {
background: #fff none !important;
color: #000;
}
|
Это один из ключевых элементов для создания стиля печати. Как правило, все, что подходит для печати, не должно иметь фона, а все цвета должны быть черно-белыми.
Заблокируйте свои элементы и убедитесь, что они не перекрываются
|
1
2
3
4
5
6
|
#wrapper {
clear: both !important;
display: block !important;
float: none !important;
position: relative !important;
}
|
Это основные стили, которые позволяют убедиться, что все отображается один поверх другого. Если вы очистите его, все в #wrapper будет попадать под предыдущий элемент, а все, что после него, попадет за оболочкой, так что вещи не будут вытеснены друг с другом. У него не должно быть поплавка, и позиция должна оставаться относительной. Что это будет делать, так это следить за тем, чтобы содержимое читалось слева направо и чтобы никакие объекты не перекрывали друг друга; это будет один текущий документ.
Используйте границы и интервалы для разделения
|
1
2
3
4
|
#header {
border-bottom: 2pt solid #000;
padding-bottom: 18pt;
}
|
Вы заметите несколько свойств, которые на самом деле стилизуют элемент по всей таблице стилей печати. Это абсолютно приемлемо. Много раз, цвет будет разделять элементы в дизайне. Поскольку все в черно-белом, это трудно сделать. Таким образом, такие вещи, как добавление черной рамки к нижней части элемента и добавление некоторого пространства под ним, помогут четко отделить их.
Помните о шрифте и размере строки
|
1
2
3
4
5
6
7
|
.entry-content {
font-size: 14pt;
line-height: 1.6em;
}
.entry-title {
font-size: 21pt;
}
|
Отличная идея — учитывать размер текста содержимого, которое вы печатаете. Размер, который вы видите на экране, по сравнению с тем, что умеют читать, сильно отличается. Учитывая меньший размер шрифта, я чувствую, что это 14 pt. Я мог бы даже подумать о том, чтобы стать меньше. Наличие высоты строки, которая помогает потоку контента, также очень полезно. Убедитесь, что между строками есть свободное пространство, чтобы печатный текст не читался. Кроме того, придание заголовкам большего размера шрифта поможет отличить их от содержимого.
Скрыть ненужные элементы
|
01
02
03
04
05
06
07
08
09
10
|
#access,
#branding img,
#respond,
.comment-edit-link,
.edit-link,
.navigation,
.page-link,
.widget-area {
display: none !important;
}
|
Это будет один из ваших наиболее часто используемых атрибутов элемента. ‘display: none’ полностью скрывает элемент. На распечатанной странице она будет выглядеть так, как будто ее даже не было с самого начала, поэтому, если вы скроете все свои изображения, на них не будет пустого места, где они обычно находятся; элемент будет полностью удален из макета, и будет отображено следующее доступное содержимое. Я часто использую это для ненужных элементов, чтобы включить в мою печать как изображения, навигацию и боковые панели.
Возьмите полную ширину страницы
|
1
2
3
4
5
6
|
#container,
#header,
#footer {
margin: 0;
width: 100%;
}
|
Этот элемент гарантирует, что все ваши элементы, которые обертывают содержимое страницы, имеют ширину 100%, чтобы они занимали все доступное поле в печатном документе. Иногда дизайнеры устанавливают ширину 900 пикселей или тому подобное, что позволяет печатать только в области 900 пикселей.
В печати допускаются различные элементы
|
1
2
3
4
5
|
#content,
.one-column #content {
margin: 24pt 0 0;
width: 100%;
}
|
В таблице стилей экрана это будет левая часть контента. Это будет иметь боковую панель справа. Теперь вы заметите, что его ширина больше не ограничена этим пространством, он займет все доступное поле в печатном документе. Он имеет ширину 100%, и боковая панель больше не сможет поместиться рядом с ним. Фактически, боковая панель должна иметь отображение: нигде в таблице стилей печати. Есть также атрибут margin, который отделяет его от контента вокруг него, чтобы он выделялся.
Узнайте, какие изображения вы можете удалить
|
1
2
3
|
img#wpstats {
display: none;
}
|
Это отличный пример сокрытия изображений с идентификатором «wpstats». Вы можете создать свой собственный класс с именем hideInPrint для добавления к изображениям, которые вы хотите удалить при печати. Код для этого будет выглядеть так:
|
1
2
3
|
img.hideInPrint {
display: none;
}
|
Вывод
Эта статья является лишь основой — вы можете добавить свои собственные уникальные стили бренда, чтобы создать индивидуальный стиль печати. Здесь мы показали вам элементы, которые следует учитывать при реализации таблицы стилей печати в вашем собственном проекте; Остальная часть стиля будет зависеть от вас в вашем собственном проекте! Знание мысли «почему» были использованы определенные атрибуты, поможет вам понять, что понадобится вашему проекту.