Сіздің 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 Print View

Кеңейтілген басып шығару стилі

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