A është WordPress Blog-u juaj Printer-Friendly?

Printo CSS

Ndërsa përfundova postimin e djeshëm më Roi i mediave sociale, Doja të dërgoja një vrojtim të tij tek CEO i Dotster Clint Page. Megjithatë, kur kam shtypur në një PDF, faqja ishte një rrëmujë!

Ka ende shumë njerëz atje që duan të shtypin kopjet e një faqe në internet për të ndarë, referuar më vonë, ose thjesht skedojnë me disa shënime. Vendosa që doja ta bëja blog-un tim miqësor. Ishte shumë më lehtë sesa mendoja se do të ishte.

Si të shfaqni versionin tuaj të shtypur:

Do të duhet të kuptoni bazat e CSS për ta arritur këtë. Pjesa më e vështirë është përdorimi i konzolës së zhvilluesit të shfletuesit tuaj për të provuar shfaqjen, fshehjen dhe rregullimin e përmbajtjes në mënyrë që të mund të shkruani CSS tuaj. Në Safari, do t'ju duhet të aktivizoni mjetet e zhvilluesit, klikoni me të djathtën në faqen tuaj dhe zgjidhni Inspect Content. Kjo do t'ju tregojë elementin dhe CSS të shoqëruara.

Safari ka një mundësi të bukur të vogël për të shfaqur versionin e shtypur të faqes tuaj në inspektorin e internetit:

Safari - Shikoni shtypjen në Inspektorin e Uebit

Si ta bëni WordPress Blog-in tuaj Printer-Friendly:

Ka disa mënyra të ndryshme për të specifikuar stilimin tuaj për shtyp. Njëra është thjesht të shtoni një seksion në fletën tuaj të stilit aktual që është specifik për llojin mediatik të "shtypjes".

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

Mënyra tjetër është të shtoni një fletë stili të veçantë në temën tuaj të fëmijës që specifikon mundësitë e printimit. Ja se si:

  1. Ngarko një fletë stilesh shtesë në drejtorinë tënde të temave të quajtur shtyp.css.
  2. Shtoni një referencë në fletën e stileve të reja në tuaj functions.php dosje. Do të dëshironi të siguroni që skedari juaj print.css të jetë i ngarkuar pas fletës së stilit të prindit dhe fëmijës, në mënyrë që stilet e tij të ngarkohen të fundit. Unë gjithashtu vendosa një përparësi prej 100 në këtë ngarkim në mënyrë që ajo të ngarkohet pas shtojcës Ja se si duket referenca ime:

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

Tani mund të personalizoni skedarin print.css dhe të modifikoni të gjithë elementët që dëshironi të fshihen ose shfaqen ndryshe. Në faqen time, për shembull, unë fsheh të gjithë navigimin, kokat, shiritat anësorë dhe faqet në mënyrë që të shtypet vetëm përmbajtja që unë dëshiroj të shfaq.

My shtyp.css skedari duket kështu. Vini re se unë gjithashtu shtova kufijtë, një metodë që pranohet nga shfletuesit modernë:

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

Si duket pamja e shtypur

Ja se si duket pamja ime e shtypur nëse shtypet nga Google Chrome:

Pamja e Shtypjes së WordPress

Stili i avancuar i printimit

Importantshtë e rëndësishme të theksohet se jo të gjithë shfletuesit janë krijuar të barabartë. Ju mund të dëshironi të provoni secilin shfletues për të parë se si duket faqja juaj nëpër to. Disa madje mbështesin disa veçori të përparuara të faqes për të shtuar përmbajtje, vendosur kufijtë dhe madhësitë e faqeve, si dhe një numër elementësh të tjerë. Revista Smashing ka një shumë artikull i hollësishëm mbi këto shtypura të përparuara options.

Këtu keni disa detaje të paraqitjes së faqeve që kam inkorporuar për të shtuar një përmendje të së drejtës së autorit në të majtë poshtë, një numërues faqe në të djathtë poshtë dhe titullin e dokumentit në të majtën e sipërme të çdo faqeje:

@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

Çfarë mendoni ju?

Kjo faqe përdor Akismet për të reduktuar spamin. Mësoni se si përpunohet komenti juaj.