আপনার ওয়ার্ডপ্রেস ব্লগ মুদ্রক-বন্ধুত্বপূর্ণ?

সিএসএস মুদ্রণ করুন

আমি গতকাল পোস্ট সম্পূর্ণ হিসাবে সোশ্যাল মিডিয়া আরওআই, আমি ডটস্টার সিইও ক্লিন্ট পৃষ্ঠায় এর প্রাকদর্শন পাঠাতে চেয়েছিলাম। আমি যখন একটি পিডিএফ প্রিন্ট করেছি, যদিও পৃষ্ঠাটি গোলমাল!

এখনও অনেক লোক আছে যেগুলি ভাগ করে নেওয়ার জন্য কোনও ওয়েবসাইটের অনুলিপিগুলি মুদ্রণ করতে পছন্দ করে, পরে রেফারেন্স করে, বা কিছু নোট দিয়ে কেবল ফাইল করে। আমি সিদ্ধান্ত নিয়েছি যে আমি আমার ব্লগকে প্রিন্টার বান্ধব করে তুলতে চাই। এটি যেটা হবে ভেবেছিলাম তার চেয়ে অনেক সহজ ছিল।

আপনার মুদ্রণ সংস্করণটি কীভাবে প্রদর্শিত করবেন:

এটি সম্পাদন করার জন্য আপনাকে সিএসএসের বেসিকগুলি বুঝতে হবে। সর্বাধিক কঠিন অংশটি আপনার ব্রাউজারের বিকাশকারী কনসোলটি সামগ্রী প্রদর্শন, গোপন এবং সামঞ্জস্য করার জন্য যাতে আপনার সিএসএস লিখতে পারে তা পরীক্ষা করে ব্যবহার করা হয়। সাফারিতে আপনাকে বিকাশকারী সরঞ্জামগুলি সক্ষম করতে হবে, আপনার পৃষ্ঠায় ডান ক্লিক করুন এবং সামগ্রী পরিদর্শন করুন নির্বাচন করুন। এটি আপনাকে সংশ্লিষ্ট উপাদান এবং সিএসএস দেখায়।

ওয়েব ইন্সপেক্টরটিতে আপনার পৃষ্ঠার মুদ্রণ সংস্করণ প্রদর্শন করার জন্য সাফারির একটি দুর্দান্ত ছোট বিকল্প রয়েছে:

সাফারি - ওয়েব পরিদর্শকের মুদ্রণ দেখুন View

আপনার ওয়ার্ডপ্রেস ব্লগকে কীভাবে প্রিন্টার বান্ধব করবেন:

মুদ্রণের জন্য আপনার স্টাইলিং নির্দিষ্ট করার কয়েকটি ভিন্ন উপায় রয়েছে। একটি হ'ল কেবল আপনার বর্তমান স্টাইলশীটে একটি বিভাগ যুক্ত করা যা "মুদ্রণ" এর মিডিয়া ধরণের সাথে সুনির্দিষ্ট।

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

মুদ্রণ দর্শন কীভাবে দেখায়

গুগল ক্রোম থেকে মুদ্রিত হলে আমার মুদ্রণ দর্শনটি কেমন দেখাচ্ছে তা এখানে:

ওয়ার্ডপ্রেস প্রিন্ট ভিউ

অ্যাডভান্সড প্রিন্ট স্টাইলিং

এটি লক্ষ্য করা গুরুত্বপূর্ণ যে সমস্ত ব্রাউজার সমানভাবে তৈরি হয় না। আপনার পৃষ্ঠাটি তাদের জুড়ে কীভাবে দেখছে তা দেখতে আপনি প্রতিটি ব্রাউজারটি পরীক্ষা করতে চাইতে পারেন। কিছু সামগ্রী এমনকি সামগ্রী সংযোজন, মার্জিন এবং পৃষ্ঠা আকার নির্ধারণের পাশাপাশি বেশ কয়েকটি অন্যান্য উপাদানকে সমর্থন করে কিছু উন্নত পৃষ্ঠাগুলি সমর্থন করে। স্ম্যামিং ম্যাগাজিনের একটি খুব আছে এই উন্নত মুদ্রণের উপর বিস্তারিত নিবন্ধ অপশন।

নীচের বামে একটি কপিরাইট উল্লেখ, নীচের ডানদিকে একটি পৃষ্ঠার কাউন্টার এবং প্রতিটি পৃষ্ঠার উপরের বামে নথির শিরোনাম যুক্ত করতে এখানে কিছু পৃষ্ঠার বিন্যাসের বিশদটি অন্তর্ভুক্ত করেছি:

@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

আপনি কি মনে করেন?

এই সাইট স্প্যাম কমাতে Akismet ব্যবহার করে। আপনার ডেটা প্রক্রিয়া করা হয় তা জানুন.