Сиздин WordPress блогуңуз принтерге ылайыктуубу?

CSSти басып чыгаруу

Кечээки постту бүтүрүп жатканда Коомдук Медиа ROI, Мен 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) " 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;
  }
}

2 Comments

  1. 1
  2. 2

Эмне деп ойлойсуң?

Бул сайт спам азайтуу Akismet колдонот. Сиздин комментарий маалымат кандайча иштелишин Үйрөнүү.