WordPress Blog-a we Printer-Friendly e?

CSS çap bike

Wekî ku min peyama doh li ser qedand ROI ya Civakî ya Civakî, Min dixwest ku pêşnumayek wê ji CEOyê Dotster Clint Page re bişînim. Gava ku min li PDF-ê çap kir, her çend, rûpel tevlihev bû!

Li wir hîn jî gelek kes hene ku dixwazin kopiyên malperek çap bikin ku parve bikin, paşê referans bikin, an jî tenê bi hin têbînan pel bikin. Min biryar da ku ez dixwazim tevnvîsa xwe ya çap-heval çêbikim. Ji ya ku ez difikirîm ew ê pir hêsantir bû.

Çawa Guhertoya Çapa Xwe Nîşan Bidin:

Hûn ê hewce ne ku bingehên CSS-ê fam bikin ku vê yekê pêk bînin. Beşa herî dijwar karanîna konsola pêşvebirinê ya geroka we ye ku hûn naverokê nîşan bikin, veşêrin û verast bikin, da ku hûn CSS-ya xwe binivîsin. Di Safari-yê de, hûn ê hewce ne ku amûrên pêşdebirker çalak bikin, rûpela xwe rast-bikirtînin, û Kontrola Naverokê hilbijêrin. Ew ê element û CSS-ya têkildar nîşanî we bide.

Vebijarkek piçûk û xweş a Safari heye ku guhertoya çapê ya rûpelê we di çavdêriya tevnê de nîşan bide:

Safari - Dîtina Çapemeniyê di Tevnegerê Webê de

Meriv Çawa WordPress Blog-a Xwe Ji-Çap Bike

Çend awayên cuda hene ku hûn ji bo çapkirinê şêwaza xwe diyar dikin. Yek tenê ew e ku hûn di şêwaza xweya heyî de beşek lê zêde bikin ku jibo tîpa medya ya "çap" ê taybetî ye.

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

Awayê din ev e ku hûn li ser mijara zarokê / a xwe vebijarkek şêwazek taybetî ku vebijarkên çapê diyar dike, zêde bikin. Li vir çawa ye:

  1. Stylesêwazek pêvek bi navê xwe li pelrêça mijara xwe bar bikin çap bike.css.
  2. Di pirtûka xwe de referansek li şêwaza nû zêde bikin functions.php dosî. Hûn ê bixwazin piştrast bikin ku pelê print.css piştî stîla dêûbav û zarokê we barkirî ye da ku şêwazên wê paşîn werin barkirin. Min di heman demê de pêşanîyek 100 danî ser vê barkirinê da ku ew piştî pêvekê bar bike Li vir referansa min çawa xuya dike:

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

Naha hûn dikarin pelê print.css xwerû bikin û hemî hêmanên ku hûn dixwazin bi awayek cûda veşartî an pêşandî biguherînin. Di malpera xwe de, wek nimûne, ez hemî navîgasyon, sernûçe, kêlekên dorpêç û jêrîn vedişêrim da ku tenê naveroka ku ez dixwazim nîşan bikim çap bibe.

My çap bike.css pel bi vî rengî xuya dike. Bala xwe bidinê ku min margin jî zêde kir, rêbazek ku ji hêla gerokên nûjen ve tê qebûl kirin:

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

Dîtina Çap Çawa Dît

Ger ji Google Chrome-ê were çap kirin nêrîna çapa min çawa xuya dike:

Dîtina Çapkirina WordPress

Yêwaza Pêşkeftî ya Pêşkeftî

Girîng e ku meriv not bike ku hemî gerokên wekhev nehatine afirandin. Hûn dikarin bixwazin her rûgerek biceribînin da ku bibînin ka rûpela we li seranserê wan çawa xuya dike. Hinek jî piştgirî didin hin taybetmendiyên rûpelê yên pêşkeftî ku naverokê lê zêde bikin, marjînan û mezinahiyên rûpelê destnîşan bikin, û her weha hejmarek hêmanên din jî. Kovara Smashing a pir heye gotara berfireh li ser van çapa pêşkeftî bijarte.

Li vir çend hûrguliyên dabeşandina rûpelê hene ku min ew berhev kir da ku li binê çepê yê binavûdeng, li jêrî rastê jimareyek rûpelê, û li serê çepê ya her rûpelê sernavê belgeyê li ser mafê pêgirtiyê zêde bikim:

@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) " Highbridge, 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 Comments

  1. 1
  2. 2

Hûn çi difikirin?

Ev malpera Akismet bikar tîne ku ji bo kêmkirina spam. Zêdetir agahdariya danûstandinên we çawa pêvajoy kirin.