Чи зручний ваш блог WordPress для друку?

Друк CSS

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

Є ще багато людей, котрі люблять роздруковувати копії веб-сайту, щоб поділитися ними, посилатися пізніше або просто залишити якісь нотатки. Я вирішив, що хочу зробити свій блог зручним для друку. Це було набагато легше, ніж я думав, що це буде.

Як відобразити версію для друку:

Для цього вам потрібно буде зрозуміти основи CSS. Найскладнішим є використання консолі розробника вашого браузера для тестування відображення, приховування та налаштування вмісту, щоб ви могли писати свій CSS. У Safari потрібно ввімкнути інструменти розробника, клацнути правою кнопкою миші на вашій сторінці та вибрати Перевірити вміст. Це покаже вам пов'язаний елемент та CSS.

У Safari є приємна маленька можливість відобразити версію для друку вашої сторінки у веб-інспекторі:

Safari - вид друку у веб-інспекторі

Як зробити свій блог 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 для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.