Ваш блог WordPress удобен для печати?

Распечатать CSS

Поскольку я завершил вчерашний пост на ROI в социальных сетях, Я хотел отправить предварительный просмотр его генеральному директору Dotster Клинту Пейджу. Однако когда я распечатал в PDF-файл, страница была в беспорядке!

Есть еще много людей, которые любят распечатывать копии веб-сайта, чтобы поделиться ими, ссылаться позже или просто сохранить в виде заметок. Я решил, что хочу сделать свой блог удобным для печати. Это было намного проще, чем я думал.

Как отобразить версию для печати:

Для этого вам необходимо понимать основы CSS. Самая сложная часть - использовать консоль разработчика вашего браузера для тестирования отображения, скрытия и настройки содержимого, чтобы вы могли написать свой CSS. В Safari вам нужно включить инструменты разработчика, щелкнуть страницу правой кнопкой мыши и выбрать «Проверить содержимое». Это покажет вам связанный элемент и CSS.

В Safari есть небольшая приятная опция для отображения печатной версии вашей страницы в веб-инспекторе:

Safari - Просмотр печати в Web Inspector

Как сделать свой блог WordPress доступным для печати:

Есть несколько разных способов указать стиль для печати. Один из них - просто добавить в вашу текущую таблицу стилей раздел, специфичный для типа носителя «печать».

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

Другой способ - добавить в дочернюю тему конкретную таблицу стилей, в которой указаны параметры печати. Вот как:

  1. Загрузите дополнительную таблицу стилей в каталог вашей темы под названием print.css.
  2. Добавьте ссылку на новую таблицу стилей в свой functions.php файл. Вам нужно убедиться, что ваш файл print.css загружается после родительской и дочерней таблиц стилей, чтобы его стили загружались последними. Я также установил приоритет 100 для этой загрузки, чтобы она загружалась после плагина. Вот как выглядит моя ссылка:

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

Теперь вы можете настроить файл print.css и изменить все элементы, которые вы хотите скрыть или по-разному отображать. На моем сайте, например, я скрываю всю навигацию, заголовки, боковые панели и нижние колонтитулы, чтобы печатался только контент, который я хочу отобразить.

My print.css файл выглядит так. Обратите внимание, что я также добавил поля - метод, принятый в современных браузерах:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

Как выглядит режим печати

Вот как выглядит мое представление для печати, если оно распечатано из Google Chrome:

Просмотр печати WordPress

Расширенный стиль печати

Важно отметить, что не все браузеры одинаковы. Вы можете протестировать каждый браузер, чтобы увидеть, как ваша страница выглядит в них. Некоторые даже поддерживают некоторые расширенные функции страницы для добавления содержимого, установки полей и размеров страницы, а также ряда других элементов. Журнал Smashing Magazine очень подробная статья об этих расширенных печатных настройки.

Вот некоторые детали макета страницы, которые я добавил, чтобы добавить упоминание об авторских правах в нижнем левом углу, счетчик страниц в правом нижнем углу и заголовок документа в верхнем левом углу каждой страницы:

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

2 комментариев

  1. 1
  2. 2

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.