Ĉu Via WordPress-Blogo Preseblas?

Presi CSS

Kiel mi kompletigis la hieraŭan afiŝon en ROI de Socia Amaskomunikilaro, Mi volis sendi antaŭprezenton de ĝi al Dotster CEO Clint Page. Kiam mi presis al PDF, tamen la paĝo estis fuŝa!

Estas ankoraŭ multaj homoj tie, kiuj ŝatas presi kopiojn de retejo por dividi, referenci poste aŭ simple registri kun iuj notoj. Mi decidis, ke mi volas igi mian blogon presebla. Ĝi estis multe pli facila ol mi pensis, ke ĝi estos.

Kiel Montri Vian Presitan Version:

Vi bezonos kompreni la bazojn de CSS por plenumi ĉi tion. La plej malfacila parto estas uzi la programan konzolon de via retumilo por provi montri, kaŝi kaj ĝustigi la enhavon tiel ke vi povas skribi vian CSS. En Safaro, vi devos ebligi la programilojn, dekstre alklaki vian paĝon kaj elekti Inspekti enhavon. Tio montros al vi la elementon kaj CSS asociitajn.

Safaro havas belan malgrandan eblon montri la presitan version de via paĝo en la retejo-inspektoro:

Safaro - Presa Vido en Reta Inspektoro

Kiel igi Vian WordPress-Blogon Presebla:

Estas kelkaj malsamaj manieroj specifi vian stiladon por presado. Unu estas nur aldoni sekcion en via nuna stilfolio, kiu estas specifa por la amaskomunikila tipo de "presaĵo".

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

La alia maniero estas aldoni specifan stilfolion al via infana temo, kiu specifas la presajn opciojn. Jen kiel:

  1. Alŝutu plian stilfolion al via temo-dosierujo nomata print.css.
  2. Aldonu referencon al la nova stilfolio en via functions.php dosiero. Vi volos certigi, ke via print.css-dosiero estas ŝarĝita post via gepatra kaj infana stilfolio, tiel ke ĝiaj stiloj estu ŝarĝitaj laste. Mi ankaŭ metis prioritaton de 100 sur ĉi tiun ŝarĝon por ke ĝi ŝarĝu post aldonaĵo Jen kiel aspektas mia referenco:

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

Nun vi povas agordi la dosieron print.css kaj modifi ĉiujn elementojn, kiujn vi volas kaŝi aŭ montri alimaniere. En mia retejo, ekzemple, mi kaŝas ĉiujn navigilojn, kapojn, flankajn stangojn kaj piedliniojn, tiel ke nur la enhavo, kiun mi volas montri, estas presita.

My print.css dosiero aspektas tiel. Rimarku, ke mi ankaŭ aldonis randojn, metodon akceptatan de modernaj retumiloj:

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

Kiel aspektas la Presa Vido

Jen kiel aspektas mia presita vido se presite de Google Chrome:

WordPress Presa Vido

Altnivela Presa Stilo

Gravas rimarki, ke ne ĉiuj retumiloj estas egalaj. Vi eble volas testi ĉiun retumilon por vidi kiel via paĝo aspektas trans ili. Iuj eĉ subtenas iujn progresintajn paĝajn funkciojn por aldoni enhavon, agordi randojn kaj paĝograndecojn, kaj ankaŭ kelkajn aliajn elementojn. Smashing Magazine havas tre detala artikolo pri ĉi tiuj altnivelaj presaĵoj Ebloj

Jen kelkaj paĝaj aranĝaj detaloj, kiujn mi enkorpigis por aldoni kopirajtan mencion malsupre maldekstre, paĝokalkulilo dekstre malsupre, kaj la dokumentan titolon supre maldekstre de ĉiu paĝo:

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

  1. 1
  2. 2

Kion vi pensas?

Ĉi tiu retejo uzas Akismeton por redukti spamon. Lernu, kiel via komento datiĝas.