តើម៉ាស៊ីនបោះពុម្ពប្លកប្លករបស់អ្នកមានលក្ខណៈងាយស្រួលទេ?

ដូចដែលខ្ញុំបានបញ្ចប់ការប្រកាសកាលពីម្សិលមិញ ប្រព័ន្ធផ្សព្វផ្សាយសង្គម ROI, ខ្ញុំចង់ផ្ញើការមើលជាមុនរបស់វាទៅកាន់នាយកប្រតិបត្តិក្លូតធេនធរក្លីនធ័រ។ ទោះយ៉ាងណានៅពេលដែលខ្ញុំព្រីនទៅជាភីអេសភីទំព័រនោះរញ៉េរញ៉ៃណាស់!

វានៅតែមានមនុស្សជាច្រើននៅទីនោះដែលចូលចិត្តបោះពុម្ពចេញពីគេហទំព័រដើម្បីចែកចាយឯកសារយោងនៅពេលក្រោយឬគ្រាន់តែចងក្រងជាឯកសារជាមួយកំណត់ចំណាំខ្លះៗ។ ខ្ញុំបានសំរេចចិត្តថាខ្ញុំចង់ធ្វើអោយប្លក់របស់ខ្ញុំក្លាយជាម៉ាស៊ីនព្រីនធ័រ។ វាងាយស្រួលជាងអ្វីដែលខ្ញុំបានគិត។

របៀបបង្ហាញកំណែបោះពុម្ពរបស់អ្នក៖

អ្នកត្រូវស្វែងយល់អំពីមូលដ្ឋានគ្រឹះនៃ CSS ដើម្បីសំរេចបាន។ ផ្នែកដែលពិបាកបំផុតគឺប្រើកុងសូលអ្នកអភិវឌ្ឍន៍កម្មវិធីបើកអ៊ីនធឺណិតដើម្បីសាកល្បងបង្ហាញលាក់និងកែមាតិកាដូច្នេះអ្នកអាចសរសេរ CSS របស់អ្នក។ នៅក្នុងសាហ្វារីអ្នកត្រូវបើកឧបករណ៍អ្នកអភិវឌ្ឍន៍ចុចកណ្តុរខាងស្តាំលើទំព័ររបស់អ្នកហើយជ្រើសរើសមាតិកាត្រួតពិនិត្យ។ នោះនឹងបង្ហាញអ្នកអំពីធាតុនិង CSS ដែលទាក់ទង។

សារ៉ាហ្វាយមានជំរើសតិចតួចក្នុងការបង្ហាញកំណែព្រីនទំព័ររបស់អ្នកនៅក្នុងអ្នកត្រួតពិនិត្យគេហទំព័រ៖

តើធ្វើដូចម្តេចដើម្បីធ្វើឱ្យម៉ាស៊ីនបោះពុម្ពប្លក, រូបភាព - មិត្តភាព:

មានវិធីពីរផ្សេងគ្នាក្នុងការបញ្ជាក់រចនាប័ទ្មរបស់អ្នកសម្រាប់ការបោះពុម្ព។ មួយគឺគ្រាន់តែបន្ថែមផ្នែកមួយនៅក្នុងសន្លឹករចនាប័ទ្មបច្ចុប្បន្នរបស់អ្នកដែលជាក់លាក់ទៅនឹងប្រភេទមេឌានៃ“ បោះពុម្ព” ។

@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 របស់អ្នកត្រូវបានផ្ទុកបន្ទាប់ពីសន្លឹកឆ្នោតឪពុកម្តាយនិងកូនដូច្នេះរចនាប័ទ្មរបស់វាត្រូវបានផ្ទុកចុងក្រោយ។ ខ្ញុំក៏បានដាក់អាទិភាព ១០០ លើការផ្ទុកនេះដូច្នេះវាផ្ទុកបន្ទាប់ពីកម្មវិធីជំនួយនេះជាអ្វីដែលឯកសារយោងរបស់ខ្ញុំមើលទៅ៖

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៖

ស្ទីលបោះពុម្ពកម្រិតខ្ពស់

វាជាការសំខាន់ក្នុងការកត់សម្គាល់ថាមិនមែនកម្មវិធីរុករកទាំងអស់ត្រូវបានបង្កើតស្មើគ្នាទេ។ អ្នកប្រហែលជាចង់សាកល្បងកម្មវិធីរុករកនីមួយៗដើម្បីមើលពីរបៀបដែលទំព័ររបស់អ្នកមើលវា។ អ្នកខ្លះថែមទាំងគាំទ្រលក្ខណៈពិសេសនៃទំព័រជឿនលឿនមួយចំនួនដើម្បីបន្ថែមមាតិកាកំណត់រឹមនិងទំហំទំព័រក៏ដូចជាធាតុមួយចំនួនទៀត។ ទស្សនាវដ្តីស្មាច់មានច្រើនណាស់ អត្ថបទលម្អិតស្តីពីការបោះពុម្ពជឿនលឿនទាំងនេះ ជម្រើស។

នេះជាព័ត៌មានលំអិតអំពីប្លង់ទំព័រដែលខ្ញុំបានបញ្ចូលដើម្បីបន្ថែមការរក្សាសិទ្ធិនៅផ្នែកខាងឆ្វេងផ្នែកខាងស្តាំទំព័រនៅខាងស្តាំខាងក្រោមនិងចំណងជើងឯកសារនៅផ្នែកខាងឆ្វេងខាងលើនៃទំព័រ៖

@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;
  }
}