El vostre bloc de WordPress es pot imprimir?

Imprimeix CSS

Com vaig completar la publicació d'ahir a ROI de les xarxes socials, Volia enviar-ne una vista prèvia al conseller delegat de Dotster, Clint Page. Però, quan vaig imprimir en un PDF, la pàgina era un desastre.

Encara hi ha molta gent a qui li agrada imprimir còpies d’un lloc web per compartir-les, consultar-les més endavant o simplement arxivar-les amb algunes notes. Vaig decidir que volia que el meu bloc fos per imprimir. Va ser molt més fàcil del que pensava que seria.

Com es mostra la versió per imprimir:

Haureu d’entendre els conceptes bàsics de CSS per aconseguir-ho. El més difícil és utilitzar la consola de desenvolupador del navegador per provar la visualització, l’amagatall i l’ajust del contingut de manera que pugueu escriure el vostre CSS. A Safari, haureu d’activar les eines per a desenvolupadors, fer clic amb el botó dret a la vostra pàgina i seleccionar Inspeccionar contingut. Això us mostrarà l'element i el CSS associats.

Safari té una petita opció per mostrar la versió impresa de la vostra pàgina a l'inspector web:

Safari: vista d'impressió a l'Inspector web

Com fer que el vostre bloc de WordPress s’imprimeixi:

Hi ha un parell de maneres diferents d’especificar el vostre estil per imprimir. Una d'elles és afegir una secció al full d'estil actual que sigui específica del tipus de suport "imprès".

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

L’altra manera és afegir un full d’estil específic al tema del vostre fill que especifiqui les opcions d’impressió. A continuació s’explica:

  1. Pengeu un full d'estil addicional al vostre directori de temes anomenat print.css.
  2. Afegiu una referència al nou full d'estil del fitxer functions.php dossier. Voleu assegurar-vos que el fitxer print.css es carregui després del full d'estil pare i fill, de manera que es carreguin els darrers. També he assignat una prioritat de 100 a aquesta càrrega perquè es carregui després del connector A continuació es mostra la meva referència:

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

Ara podeu personalitzar el fitxer print.css i modificar tots els elements que vulgueu amagar o mostrar de manera diferent. Al meu lloc, per exemple, amago tota la navegació, capçaleres, barres laterals i peus de pàgina de manera que només s’imprimeixi el contingut que vull mostrar.

My print.css fitxer té aquest aspecte. Tingueu en compte que també he afegit marges, un mètode acceptat pels navegadors moderns:

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

Com es veu la vista d'impressió

A continuació s’explica la visualització de la meva impressió si s’imprimeix des de Google Chrome:

Visualització d'impressió de WordPress

Estil d'impressió avançat

És important tenir en compte que no tots els navegadors es creen iguals. És possible que vulgueu provar cada navegador per veure l’aspecte de la vostra pàgina. Alguns fins i tot admeten algunes funcions de pàgina avançades per afegir contingut, establir marges i mides de pàgina, així com diversos altres elements. Smashing Magazine té molt article detallat sobre aquestes impressions avançades opcions.

A continuació, es detallen alguns detalls del disseny de pàgina que he incorporat per afegir una menció de copyright a la part inferior esquerra, un comptador de pàgines a la part inferior dreta i el títol del document a la part superior esquerra de cada pàgina:

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

  1. 1
  2. 2

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.