Je! Printa yako ya Blog ya WordPress-Ya Kirafiki?

Chapisha CSS

Nilipokamilisha chapisho la jana tarehe Jamii Media ROI, Nilitaka kutuma hakiki yake kwa Mkurugenzi Mtendaji wa Dotster Clint Page. Wakati nilichapisha kwa PDF, ingawa, ukurasa huo ulikuwa fujo!

Bado kuna watu wengi huko nje ambao wanapenda kuchapisha nakala za wavuti ili kushiriki, rejea baadaye, au faili tu na noti zingine. Niliamua kuwa ninataka kufanya blogi yangu iwe ya kupendeza. Ilikuwa rahisi sana kuliko vile nilifikiri itakuwa.

Jinsi ya Kuonyesha Toleo lako la Chapisho:

Utahitaji kuelewa misingi ya CSS kukamilisha hii. Sehemu ngumu zaidi ni kutumia msanidi programu wa kivinjari chako kujaribu kuonyesha, kujificha, na kurekebisha yaliyomo ili uweze kuandika CSS yako. Katika Safari, utahitaji kuwezesha zana za msanidi programu, bonyeza-kulia ukurasa wako, na uchague Kagua Yaliyomo. Hiyo itakuonyesha kipengee na CSS inayohusiana.

Safari ina chaguo nzuri kidogo kuonyesha toleo la kuchapisha la ukurasa wako kwenye mkaguzi wa wavuti:

Safari - Mtazamo wa Chapisho katika Kikaguzi cha Wavuti

Jinsi ya Kufanya Printer yako ya Blogi ya WordPress iwe ya Kirafiki:

Kuna njia kadhaa tofauti za kubainisha mtindo wako wa kuchapishwa. Moja ni kuongeza tu sehemu kwenye lahaja yako ya mitindo ambayo ni maalum kwa aina ya media ya "chapisha".

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

Njia nyingine ni kuongeza karatasi maalum ya mitindo kwa mada yako ya mtoto ambayo inabainisha chaguzi za kuchapisha. Hapa kuna jinsi:

  1. Pakia laha la mitindo kwenye saraka yako ya mada inayoitwa chapa.css.
  2. Ongeza rejeleo kwenye lahaja mpya katika faili yako ya functions.php faili. Utahitaji kuhakikisha faili yako ya print.css imepakiwa baada ya karatasi yako ya mzazi na mtoto ili mitindo ipakuliwe mwisho. Pia niliweka kipaumbele cha 100 kwenye upakiaji huu ili iweze kupakia baada ya programu-jalizi Hapa ndivyo kumbukumbu yangu inavyoonekana:

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

Sasa unaweza kubadilisha faili ya print.css na urekebishe vitu vyote ambavyo unataka kufichwa au kuonyeshwa tofauti. Kwa mfano, kwenye wavuti yangu, mimi huficha urambazaji wote, vichwa vya kichwa, baa za pembeni, na vichwa vya miguu ili tu yaliyomo ninayotaka kuonyesha yamechapishwa.

My chapa.css faili inaonekana kama hii. Ona kwamba pia niliongeza kishindo, njia ambayo inakubaliwa na vivinjari vya kisasa:

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

Jinsi Mtazamo wa Chapisho Unavyoonekana

Hivi ndivyo mtazamo wangu wa kuchapisha unavyoonekana ikiwa umechapishwa kutoka Google Chrome:

Mtazamo wa Magazeti ya WordPress

Uchapishaji wa Juu wa Uchapishaji

Ni muhimu kutambua kuwa sio vivinjari vyote vilivyoundwa sawa. Unaweza kutaka kujaribu kila kivinjari ili uone jinsi ukurasa wako unavyoonekana. Wengine hata huunga mkono huduma zingine za kurasa za juu ili kuongeza yaliyomo, weka kando na saizi za ukurasa, na pia vitu kadhaa. Jarida la Smashing lina sana makala ya kina juu ya uchapishaji wa hali ya juu chaguzi.

Hapa kuna maelezo ya mpangilio wa ukurasa ambao nilijumuisha kuongeza kutaja hakimiliki chini kushoto, kaunta ya ukurasa upande wa kulia chini, na kichwa cha hati upande wa kushoto juu ya kila ukurasa:

@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 Maoni

  1. 1
  2. 2

Unafikiri?

Tovuti hii inatumia Akismet kupunguza spam. Jifunze jinsi maoni yako yanasindika.