आपला वर्डप्रेस ब्लॉग प्रिंटर अनुकूल आहे?

सीएसएस मुद्रित करा

मी कालची पोस्ट पूर्ण केल्यावर सोशल मीडिया आरओआय, मला त्याचे पूर्वावलोकन डॉट्स सीईओ क्लिंट पृष्ठाकडे पाठवायचे होते. मी जेव्हा पीडीएफमध्ये मुद्रित केले, ते पृष्ठ गोंधळलेले होते!

अजूनही असे बरेच लोक आहेत जे एखाद्या वेबसाइटच्या प्रती सामायिक करणे, नंतर संदर्भ देणे किंवा नंतर काही नोट्ससह फाईल मुद्रित करणे आवडतात. मी माझा ब्लॉग प्रिंटर-अनुकूल बनवण्याचा निर्णय घेतला आहे. मला वाटले त्यापेक्षा हे खूप सोपे होते.

आपली मुद्रण आवृत्ती कशी प्रदर्शित करावी:

हे पूर्ण करण्यासाठी आपल्याला सीएसएसची मूलभूत गोष्टी समजणे आवश्यक आहे. सर्वात कठीण भाग म्हणजे आपल्या ब्राउझरच्या विकसक कन्सोलचा वापर सामग्री प्रदर्शित करणे, लपविणे आणि समायोजित करणे यासाठी चाचणी करणे जेणेकरून आपण आपला सीएसएस लिहू शकाल. सफारीमध्ये आपल्याला विकसक साधने सक्षम करणे आवश्यक आहे, आपल्या पृष्ठावर उजवे-क्लिक करा आणि सामग्रीची तपासणी करणे निवडा. हे आपणास संबंधित घटक आणि सीएसएस दर्शवेल.

वेब इन्स्पेक्टरमध्ये आपल्या पृष्ठाची मुद्रण आवृत्ती प्रदर्शित करण्यासाठी सफारीकडे एक छोटासा पर्याय आहे:

सफारी - वेब निरीक्षकामधील मुद्रण दृश्य

आपला वर्डप्रेस ब्लॉग प्रिंटर-मैत्रीपूर्ण कसा बनवायचा:

प्रिंटसाठी आपले स्टाईल निर्दिष्ट करण्याचे दोन वेगवेगळे मार्ग आहेत. एक म्हणजे फक्त आपल्या सध्याच्या स्टाईलशीटमध्ये एक विभाग जोडा जो “प्रिंट” च्या मीडिया प्रकाराशी संबंधित असेल.

@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 फाईल. आपण आपली प्रिंट.एस.एस. फाइल आपल्या पालक आणि मुलाच्या स्टाईलशीटनंतर लोड केली आहे हे सुनिश्चित करू इच्छित असाल जेणेकरून त्या शैली शेवटच्या वेळी लोड केल्या गेल्या. मी या लोडिंगवर 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);

आता आपण प्रिंट सीएसएस फाइल सानुकूलित करू शकता आणि आपण लपविलेले किंवा वेगळ्या प्रकारे प्रदर्शित करू इच्छित सर्व घटक सुधारित करू शकता. माझ्या साइटवर, उदाहरणार्थ, मी सर्व नेव्हिगेशन, शीर्षलेख, साइडबार आणि फूटर लपविते जेणेकरून मला प्रदर्शित करण्याची इच्छा असलेली सामग्रीच छापली जाईल.

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

    मनोरंजक डग्लस, जेव्हा मी तुमची पोस्ट वाचतो तेव्हा मी फक्त प्रिंटफ्रेंडली नावाच्या साइटकडे पहात होतो. हे आपल्यासाठी आणि आपण मुद्रित करू इच्छित असलेल्या कोणत्याही अन्य साइटसाठी बरेच काही करते. खूप गोड, हे तपासा:

    http://www.printfriendly.com

  2. 2

तुला काय वाटत?

ही साइट स्पॅम कमी करण्यासाठी अकिस्मेट वापरते आपल्या टिप्पणी डेटावर प्रक्रिया कशी केली जाते ते जाणून घ्या.