Сіздің 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 журналы өте жақсы осы кеңейтілген басып шығару туралы егжей-тегжейлі мақала нұсқалары.

Төменгі сол жақта авторлық құқық туралы ескерту, төменгі оң жақта парақ есептегіші және әр парақтың жоғарғы сол жағында құжат тақырыбын қосу үшін парақтың орналасу мәліметтері келтірілген:

@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 пайдаланады. Деректеріңіздің қалай өңделетінін біліңіз.