Вміст Маркетинг

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

Як я закінчив вчорашній пост на Рентабельність інвестицій у соціальні мережі, Я хотів надіслати його попередній перегляд генеральному директору 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;
  }
}

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.