Да ли је ваш ВордПресс блог погодан за штампу?

Одштампај ЦСС

Као што сам довршио јучерашњи пост на РОИ на друштвеним медијима, Желео сам да пошаљем његов преглед извршном директору Дотстера Цлинт Паге-у. Међутим, када сам штампао у ПДФ, страница је била у нереду!

Још увек има много људи који воле да одштампају копије веб локација да би их делили, касније референцирали или једноставно послали неке белешке. Одлучио сам да свој блог желим учинити штампачем. Било је много лакше него што сам мислио да ће бити.

Како приказати верзију за штампу:

Да бисте то постигли, мораћете да разумете основе ЦСС-а. Најтежи део је коришћење развојне конзоле прегледача за тестирање приказивања, скривања и прилагођавања садржаја тако да можете да напишете ЦСС. У Сафари-ју ћете морати да омогућите алате за програмере, кликните десним тастером миша на страницу и изаберите Инспецт Цонтент. То ће вам показати повезани елемент и ЦСС.

Сафари има лепу малу могућност да прикаже верзију за штампу ваше странице у веб инспектору:

Сафари - приказ штампе у Веб Инспецтору

Како свој ВордПресс блог учинити прилагођеним за штампу:

Постоји неколико различитих начина одређивања стајлинга за штампу. Једно је само додати одељак у ваш тренутни табелу стилова који је специфичан за врсту медија „принт“.

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

Други начин је додавање одређеног стилског листа својој подређеној теми која одређује опције штампања. Ево како:

  1. Отпремите додатни табелу стилова у директоријум тема под називом принт.цсс.
  2. Додајте референцу на нову табелу стилова у свом фунцтионс.пхп датотека. Морали бисте осигурати да се датотека принт.цсс учита након вашег матичног и подређеног стилског листа, тако да се стилови учитавају задњи. Такође сам ставио приоритет 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);

Сада можете прилагодити датотеку принт.цсс и изменити све елементе које желите да буду скривени или другачије приказани. На пример, на својој веб локацији сакривам сву навигацију, заглавља, бочне траке и подножја, тако да се штампа само садржај који желим да прикажем.

My принт.цсс датотека изгледа овако. Приметите да сам такође додао маргине, методу коју прихватају савремени прегледачи:

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

Како изгледа приказ за штампу

Ево како изгледа мој приказ за штампу ако се штампа из Гоогле Цхроме-а:

ВордПресс приказ штампе

Напредни стил штампе

Важно је напоменути да нису сви прегледачи створени једнаки. Можда ћете желети да тестирате сваки прегледач да бисте видели како ваша страница изгледа на њима. Неки чак подржавају неке напредне функције страница за додавање садржаја, постављање маргина и величина страница, као и бројних других елемената. Смасхинг Магазине има врло детаљан чланак о овим напредним штампаним издањима опције.

Ево неких детаља о распореду страница које сам уградио да бих додао поменуто ауторско право у доњем левом углу, бројач страница у доњем десном углу и наслов документа у горњем левом углу сваке странице:

@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) " Highbridge, 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;
  }
}

Komentari

  1. 1
  2. 2

Шта ви мислите?

Ова страница користи Акисмет како би смањила нежељену пошту. Сазнајте како се ваш коментар обрађује.