के तपाइँको WordPress ब्लग प्रिंटर मैत्री हो?

मैले हिजोको पोष्ट पूरा गरेको रूपमा सामाजिक मीडिया आरआईआई, म यसको पूर्वावलोकन डट्स सीईओ क्लिन्ट पृष्ठमा पठाउन चाहान्छु। जब मैले PDF मा प्रिन्ट गरेँ, जे होस्, पृष्ठ गड़बड भयो!

त्यहाँ अझै धेरै व्यक्तिहरू छन् जुन वेबसाइटको प्रतिलिपिहरू साझा गर्न, पछि सन्दर्भ गर्न, वा केही नोटहरूको साथ फाइल गर्न प्रिन्ट गर्न मन पराउँदछ। मैले निर्णय गरे कि म मेरो ब्लग प्रिन्टर-मैत्री बनाउन चाहान्छु। यो मैले सोचे भन्दा यो सजिलो थियो।

तपाइँको प्रिन्ट संस्करण कसरी प्रदर्शन गर्ने:

तपाईंले यो पूरा गर्न CSS को आधारभूत कुरा बुझ्न आवश्यक छ। सब भन्दा गाह्रो अंश तपाइँको ब्राउजरको विकासकर्ता कन्सोल प्रयोग गरीरहेको छ प्रदर्शन गर्न, लुकाउने, र सामग्री समायोजन गर्न ताकि तपाइँ तपाइँको CSS लाई लेख्न सक्नुहुन्छ। सफारीमा तपाईले विकासकर्ता उपकरणहरू सक्षम गर्न आवश्यक छ, तपाईको पृष्ठमा दायाँ क्लिक गर्नुहोस्, र सामग्री निरीक्षण गर्नुहोस्। त्यसले तपाइँलाई तत्व र CSS सम्बन्धित देखाउँदछ।

सफारीसँग तपाइँको पृष्ठको प्रिन्ट संस्करण वेब इन्स्पेक्टरमा प्रदर्शन गर्न एक राम्रो सानो विकल्प छ:

कसरी तपाइँको 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 फाईल तपाइँ तपाइँको प्रिन्ट.एस.एस. फाइल लोड गर्न सुनिश्चित गर्न चाहानुहुन्छ तपाइँको अविभावक र बाल शैली पाना पछि लोड भयो ताकि यो शैली अन्तिम लोड भयो। मैले यो लोडि onमा पनि १०० को प्राथमिकता यसैले राखेको छ कि यसले प्लगइन पछि लोड हुन्छ यहाँ मेरो सन्दर्भ यस्तो देखिन्छ।

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);

अब तपाइँ प्रिन्ट सीएसएस फाइललाई अनुकूलित गर्न सक्नुहुन्छ र सबै तत्वहरू परिमार्जन गर्न सक्नुहुन्छ जुन तपाइँ लुकाउन चाहानुहुन्छ वा फरक तरीकाले प्रदर्शन गर्न सक्नुहुन्छ। मेरो साइटमा, उदाहरण को लागी, म सबै नेभिगेसन, हेडर, साइडबार, र फुटरहरु लाई लुकाउँछु ताकि मैले प्रदर्शन गर्न चाहेको सामग्री मात्र छापिएको छ।

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 क्रोम बाट मुद्रित छ:

उन्नत प्रिन्ट स्टाइलिंग

यो याद गर्नु महत्त्वपूर्ण छ कि सबै ब्राउजरहरू समान बनाइएको हुँदैन। तपाइँ प्रत्येक ब्राउजर परीक्षण गर्न चाहानुहुन्छ कि तपाइँको पृष्ठ उनीहरूमा कसरी देखिन्छ भनेर हेर्नका लागि। केहि सामग्री को लागी केहि उन्नत पृष्ठ सुविधाहरु समर्थन, मार्जिन र पृष्ठ आकार सेट, को लागी अन्य तत्वहरु को एक संख्या। Smashing Magazine को एक धेरै छ यी उन्नत प्रिन्टमा विस्तृत लेख विकल्पहरू।

यहाँ केहि पृष्ठ लेआउट विवरणहरू छन् जुन मैले तल बायाँमा प्रतिलिपि अधिकार उल्लेख थप्न समावेश गरेको थियो, तल दायाँ पट्टि काउन्टर, र प्रत्येक पृष्ठको शीर्ष बायाँमा कागजात शीर्षक:

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