သင်၏ WordPress ဘလော့သည်ပရင်တာနှင့်အကျွမ်းတဝင်ရှိပါသလား။

ငါမနေ့ကရဲ့ post ကိုပြီးစီးအဖြစ် လူမှုမီဒီယာ ROIငါ Dotster ရဲ့အမှုဆောင်အရာရှိချုပ် Clint Page ကိုကြိုတင်ကြည့်ချင်တယ်။ ငါ PDF သို့ပုံနှိပ်သောအခါ, စာမျက်နှာရှုပ်ထွေးခဲ့သည်!

ဝက်ဘ်ဆိုက်၏ကော်ပီများကိုဝေမျှရန်၊ နောက်မှကိုးကားရန်သို့မဟုတ်မှတ်စုအချို့နှင့်အတူဖိုင်တွဲရန်ပုံနှိပ်ထုတ်ဝေလိုသောရှေးရှေးလူအမြောက်အများရှိနေသေးသည်။ ငါသည်ငါ့ဘလော့ဂ်ပရင်တာ - ဖော်ရွေလုပ်ချင်ဆုံးဖြတ်ခဲ့သည်။ ဒါဟာငါထင်လိမ့်မယ်ထက်အများကြီးပိုမိုလွယ်ကူခဲ့ပါတယ်။

ပုံနှိပ်ထုတ်ဝေတဲ့ဗားရှင်းကိုဘယ်လိုပြရမလဲ။

၎င်းကိုပြီးမြောက်ရန်သင် CSS ၏အခြေခံများကိုနားလည်ရန်လိုအပ်သည်။ အခက်ခဲဆုံးအပိုင်းမှာအကြောင်းအရာများကိုပြသခြင်း၊ ဖုံးကွယ်ထားခြင်းနှင့်ချိန်ညှိခြင်းများကိုစစ်ဆေးရန်သင်၏ browser ရေးသားသူ developer console ကိုသုံးခြင်းဖြင့်သင်၏ CSS ရေးရန်ဖြစ်သည်။ Safari တွင် developer tools များကိုဖွင့်ရန်၊ သင်၏စာမျက်နှာကိုညာဖက် နှိပ်၍ Inspect Content ကိုရွေးချယ်ရန်လိုအပ်သည်။ ဒါက element နဲ့ CSS နဲ့သက်ဆိုင်တဲ့ element ကိုပြလိမ့်မယ်။

Safari တွင် ၀ က်ဘ်စစ်ဆေးရေးမှူး၏သင်၏စာမျက်နှာ၏ပုံနှိပ်ဗားရှင်းကိုဖော်ပြရန်ကောင်းမွန်သောနည်းလမ်းအနည်းငယ်ရှိသည်။

သင်၏ WordPress ဘလော့ဂ် Printer-Friendly ပြုလုပ်နည်း

ပုံနှိပ်ရန်အတွက်သင်၏ပုံစံကိုသတ်မှတ်ရန်နည်းလမ်းနှစ်မျိုးရှိသည်။ တစ်ခုမှာမီဒီယာအမျိုးအစား“ ပုံနှိပ်ခြင်း” နှင့်သက်ဆိုင်သောသင်၏လက်ရှိစတိုင်ဇယားတွင်အခန်းတစ်ခုကိုထည့်ရန်ဖြစ်သည်။

@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. သင့်တွင်ရှိသော styleheet အသစ်သို့ရည်ညွှန်းထည့်ပါ 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 ဖိုင်ကိုစိတ်ကြိုက်ပြုပြင်ပြီးသင်ဝှက်ထားသောသို့မဟုတ်ကွဲပြားစွာဖော်ပြလိုသော element များအားလုံးပြုပြင်နိုင်သည်။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်၏ ၀ က်ဘ်ဆိုက်တွင်ကျွန်ုပ်ဖော်ပြလိုသောအကြောင်းအရာသာပုံနှိပ်နိုင်ရန်အတွက်လမ်းကြောင်း၊ ခေါင်းစီး၊ ဘေးဘားနှင့်အောက်ခြေများအားလုံးကိုကျွန်ုပ်ဖုံးကွယ်ထားသည်။

My print.css ဖိုင်ကဒီပုံနဲ့တူတယ် ငါသည်လည်းမာဂျင်များထည့်သွင်းကြောင်းသတိပြုပါ, ခေတ်သစ် browser များကလက်ခံသောနည်းလမ်း:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

ပုံနှိပ်ကြည့်ရန်မည်သို့ကြည့်သနည်း

Google Chrome မှပုံနှိပ်လျှင်ကျွန်ုပ်၏ပုံနှိပ်မြင်ကွင်းကိုကြည့်ပါ။

အဆင့်မြင့်ပုံနှိပ်ပုံစံ

သတိပြုရန်မှာ browser (ဘရောက်ဆာ) များအားလုံးတူညီစွာဖန်တီးထားခြင်းမဟုတ်ပါ။ Browser တစ်ခုချင်းစီကိုသင့်ရဲ့ page ကဘယ်လိုမြင်လဲဆိုတာကြည့်ဖို့စမ်းကောင်းလိုလိမ့်မည်။ အချို့သည်အကြောင်းအရာထည့်သွင်းခြင်း၊ မာဂျင်များသတ်မှတ်ခြင်းနှင့်စာမျက်နှာအရွယ်အစားအပြင်အခြားဒြပ်စင်အများအပြားအတွက်အဆင့်မြင့်စာမျက်နှာအချို့ကိုပင်ထောက်ပံ့သည်။ 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) " 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;
  }
}