Èske Blog WordPress ou enprime-Zanmitay?

Ekri an lèt detache CSS

Kòm mwen ranpli pòs yè a sou Sosyal Media ROI, Mwen te vle voye yon preview li nan Dotster CEO Clint Page. Lè m 'enprime nan yon PDF, menm si, paj la te yon dezòd!

Gen toujou anpil moun yo deyò ki renmen enprime kopi yon sit entènèt yo pataje, referans pita, oswa jis ranpli ak kèk nòt. Mwen deside mwen te vle fè blog mwen an enprimant-zanmitay. Li te pi fasil pase mwen te panse li ta dwe.

Ki jan yo Montre vèsyon ekri an lèt detache ou:

Ou pral bezwen konprann Basics yo nan CSS akonpli sa a. Pati ki pi difisil la se lè l sèvi avèk konsole pwomotè navigatè ou a teste montre, kache, ak ajiste kontni an pou ke ou ka ekri CSS ou. Nan Safari, ou pral bezwen yo ki ap pèmèt zouti yo pwomotè, dwa-klike sou paj ou a, epi chwazi Enspekte kontni. Sa pral montre w eleman ak CSS ki asosye.

Safari gen yon bèl opsyon ti kras yo montre vèsyon an ekri an lèt detache nan paj ou a nan enspektè entènèt la:

Safari - Ekri an lèt detache View nan Enspektè entènèt

Ki jan yo fè Blog WordPress ou enprimant-Zanmitay:

Gen yon koup diferan fason pou espesifye manier ou pou ekri an lèt detache. Youn nan se jis ajoute yon seksyon nan Fèy estil ou ye kounye a ki espesifik nan kalite medya nan "ekri an lèt detache".

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

Lòt fason an se ajoute yon fèy style espesifik nan tèm pitit ou a ki presize opsyon ki ekri an lèt detache. Men ki jan:

  1. Voye yon Fèy Styles adisyonèl nan anyè tèm ou rele print.css.
  2. Ajoute yon referans a nouvo Fèy estil nan ou functions.php dosye. Ou pral vle asire dosye print.css ou a chaje apre style paran ou ak pitit ou pou ke estil li yo chaje dènye. Mwen menm mwen te mete yon priyorite nan 100 sou sa a loading konsa ke li chaje apre Plugin Men sa referans mwen sanble:

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

Koulye a, ou ka Customize dosye a print.css ak modifye tout nan eleman yo ke ou vle kache oswa parèt yon fason diferan. Nan sit mwen an, pou egzanp, mwen kache tout navigasyon an, Tèt, ankadre, ak pye pou ke se sèlman kontni an mwen vle montre enprime.

My print.css dosye sanble tankou sa a. Remake ke mwen menm mwen te ajoute marges, yon metòd ki aksepte pa navigatè modèn:

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

Ki jan View an ekri an lèt detache sanble

Men ki jan gade enprime mwen sanble si enprime soti nan Google Chrome:

WordPress Enprime View

Avanse enprime manier

Li enpòtan sonje ke se pa tout navigatè yo kreye egal. Ou ka vle teste chak navigatè yo wè ki jan paj ou sanble atravè yo. Gen kèk menm ki sipòte kèk karakteristik paj avanse yo ajoute kontni, mete marges ak gwosè paj, osi byen ke yon kantite lòt eleman. Smashing Magazine gen yon trè atik detaye sou sa yo ekri an lèt detache avanse opsyon.

Isit la nan kèk detay layout paj ke mwen enkòpore yo ajoute yon mansyone copyright nan pati anba a kite, yon kontwa paj sou bò dwat la anba, ak tit la dokiman sou bò gòch anwo nan chak paj:

@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 Kòmantè

  1. 1
  2. 2

Ki sa ou panse?

Sit sa a sèvi ak Akismet diminye Spam. Aprann kijan kòmantè ou a trete.