Content Màrqueting

El vostre bloc de WordPress es pot imprimir?

Com vaig completar el post 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’habilitar 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 posat una prioritat de 100 en 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;
  }
}

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.