Сиздин 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) " 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 Comments

  1. 1

    Кызыктуу Дуглас, мен жөн гана PrintFriendly деген сайтты карап отуруп, сиздин билдирүүңүздү окудум. Бул сиз үчүн жана сиз басып чыгаргыңыз келген башка сайттар үчүн көп нерсе кылат. Абдан таттуу, текшерип көрүңүз:

    http://www.printfriendly.com

  2. 2

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

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