ڇا توهان جو ورڈپریس بلاگ پرنٽر دوست آهي؟

پرنٽ 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. پنهنجي موضوع واري ڊاريڪٽري ۾ اضافي اسٽائل شيٽ اپڊيٽ ڪيل سڏين ٿا پرنٽ.css.
  2. توھان ۾ نئين اسٽائل شيٽ جو حوالو شامل ڪريو functions.php فائيل. توهان يقيني بڻائڻ چاهيندا ته توهان جي پرنٽ.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);

ھاڻي توھان پرنٽ.css فائل کي ڪسٽمائي ڪري سگھوٿا ۽ سڀني عنصرن کي تبديل ڪري سگھوٿا جيڪي توھان چاھيو ٿا يا مختلف طور تي ڏيکارڻ چاھيو ٿا. مثال طور ، منهنجي سائيٽ ۾ ، سڀني نيويگيشن ، هيڊرز ، سائيڊبار ۽ فوٽر کي لڪائي ڇڏيان ته صرف مواد جيڪو ڇپائڻ چاهيان ٿو ڇپائي سگهان ٿو.

My پرنٽ.css فائل هن وانگر آهي. نوٽ ڪيو ته مون مارجن پڻ شامل ڪيو ، هڪ طريقو جيڪو جديد برائوزر پاران قبول ڪيو ويو آهي.

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

ڇاپيو ويو ڏسبو

هتي گوگل ڪروم مان جيڪڏهن ڇپيل آهي ته منهنجي ڇپائي جو ڏيک نظر اچي ٿو:

ورڈپریس پرنٽ منظر

جديد پرنٽ اسٽائل

اهو ياد رکڻ ضروري آهي ته سڀ برائوزر برابر نه ٺاهيا ويا آهن. توهان شايد هر برائوزر کي جانچڻ چاهيو ٿا ته توهان جو صفحو انهن جي وچ ۾ ڪيئن ڏسجي ٿو. ڪجھ مواد کي شامل ڪرڻ ، مارجن سيٽ ڪرڻ ۽ پيج جي سائز ، ۽ ٻين ڪيترن ئي عنصر کي شامل ڪرڻ لاءِ ڪجھ ترقي يافته صفحي جي خاصيتن جي حمايت ڪندو آھي. سليڪنگ ميگزين ۾ تمام گهڻو آهي ان ترقي يافته پرنٽ تي تفصيلي مضمون اختيارات.

هتي ڪجهه صفحن جي ترتيب واريون تفصيلون آهن جيڪي مون هيٺ ڏنل کاٻي پاسي ۾ ڪاپي رائيٽ جو ذڪر شامل ڪرڻ لاءِ ، هيٺيان سا theي طرف هڪ صفحو کٽيندڙ ، ۽ هر صفحي جي مٿين کاٻي پاسي دستاويزي لقب شامل ڪيو آهي:

@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
  2. 2

توهان ڇا ٿا سوچيو؟

هي سائيٽ اسپام کي گهٽائڻ لاء اکزمٽ استعمال ڪري ٿو. سکو ته توهان جي تجويز ڪيل ڊيٽا کي ڪيئن عمل ڪيو وڃي.