क्या आपका WordPress Blog Printer-Friendly है?

प्रिंट सीएसएस

जैसा कि मैंने कल की पोस्ट को पूरा किया सोशल मीडिया आरओआई, मैं इसका एक पूर्वावलोकन डॉटस्टर सीईओ क्लिंट पेज को भेजना चाहता था। जब मैंने एक पीडीएफ पर प्रिंट किया था, हालांकि, पृष्ठ गड़बड़ था!

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

अपना प्रिंट संस्करण कैसे प्रदर्शित करें:

इसे पूरा करने के लिए आपको सीएसएस की मूल बातें समझनी होंगी। सबसे कठिन हिस्सा सामग्री को प्रदर्शित करने, छिपाने और समायोजित करने का परीक्षण करने के लिए आपके ब्राउज़र के डेवलपर कंसोल का उपयोग कर रहा है ताकि आप अपना सीएसएस लिख सकें। सफारी में, आपको डेवलपर टूल को सक्षम करना होगा, अपने पृष्ठ पर राइट-क्लिक करना होगा और सामग्री का निरीक्षण करना होगा। यह आपको संबंधित तत्व और सीएसएस दिखाएगा।

वेब इंस्पेक्टर में सफारी में आपके पेज का प्रिंट संस्करण प्रदर्शित करने का एक अच्छा विकल्प है:

सफारी - वेब इंस्पेक्टर में प्रिंट दृश्य

कैसे अपने 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. अपनी थीम डायरेक्टरी में एक अतिरिक्त स्टाइलशीट अपलोड करें जिसे कहा जाता है प्रिंट.
  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 प्रिंट फ़ाइल इस तरह दिखती है। ध्यान दें कि मैंने मार्जिन भी जोड़ा है, एक ऐसी विधि जो आधुनिक ब्राउज़रों द्वारा स्वीकार की जाती है:

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

    दिलचस्प डगलस, मैं सिर्फ एक साइट देख रहा था जिसका नाम PrintFriendly था जब मैंने आपकी पोस्ट पढ़ी। यह आपके और आपके द्वारा प्रिंट की जाने वाली किसी अन्य साइट के लिए बहुत कुछ करता है। बहुत प्यारा है, इसे देखें:

    http://www.printfriendly.com

  2. 2

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.