మీ బ్లాగు బ్లాగ్ ప్రింటర్ స్నేహపూర్వకంగా ఉందా?

నేను నిన్నటి పోస్ట్ పూర్తి చేసినప్పుడు సోషల్ మీడియా ROI, నేను దాని ప్రివ్యూను డాట్‌స్టర్ సీఈఓ క్లింట్ పేజికి పంపించాలనుకున్నాను. నేను ఒక PDF కి ముద్రించినప్పుడు, పేజీ గందరగోళంగా ఉంది!

వెబ్‌సైట్ యొక్క కాపీలను భాగస్వామ్యం చేయడానికి, తరువాత సూచించడానికి లేదా కొన్ని గమనికలతో ఫైల్ చేయడానికి ఇష్టపడే చాలా మంది ప్రజలు ఇంకా అక్కడ ఉన్నారు. నా బ్లాగ్ ప్రింటర్‌ను స్నేహపూర్వకంగా మార్చాలని నేను నిర్ణయించుకున్నాను. ఇది నేను అనుకున్నదానికంటే చాలా సులభం.

మీ ముద్రణ సంస్కరణను ఎలా ప్రదర్శించాలి:

దీన్ని సాధించడానికి మీరు 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 ఫైల్ లోడ్ అవుతుందని మీరు నిర్ధారించుకోవాలి, తద్వారా దాని శైలులు చివరిగా లోడ్ అవుతాయి. నేను ఈ లోడింగ్‌కు 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 నుండి ముద్రించినట్లయితే నా ముద్రణ వీక్షణ ఎలా ఉంటుందో ఇక్కడ ఉంది:

అధునాతన ప్రింట్ స్టైలింగ్

అన్ని బ్రౌజర్‌లు సమానంగా సృష్టించబడవని గమనించడం ముఖ్యం. మీ పేజీ ఎలా ఉంటుందో చూడటానికి మీరు ప్రతి బ్రౌజర్‌ను పరీక్షించాలనుకోవచ్చు. కంటెంట్ జోడించడానికి, మార్జిన్లు మరియు పేజీ పరిమాణాలను సెట్ చేయడానికి, అలాగే అనేక ఇతర అంశాలను జోడించడానికి కొన్ని కొన్ని అధునాతన పేజీ లక్షణాలకు కూడా మద్దతు ఇస్తాయి. స్మాషింగ్ మ్యాగజైన్ చాలా ఉంది ఈ అధునాతన ముద్రణపై వివరణాత్మక వ్యాసం ఎంపికలు.

దిగువ ఎడమవైపు కాపీరైట్ ప్రస్తావన, దిగువ కుడి వైపున ఒక పేజీ కౌంటర్ మరియు ప్రతి పేజీ ఎగువ ఎడమ వైపున ఉన్న పత్రం శీర్షికను జోడించడానికి నేను చేర్చిన కొన్ని పేజీ లేఅవుట్ వివరాలు ఇక్కడ ఉన్నాయి:

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