¿Su blog de WordPress se puede imprimir?

Imprimir CSS

Como terminé la publicación de ayer sobre ROI de redes sociales, Quería enviar una vista previa al CEO de Dotster, Clint Page. Sin embargo, cuando imprimí en PDF, ¡la página era un desastre!

Todavía hay mucha gente a la que le gusta imprimir copias de un sitio web para compartir, consultar más adelante o simplemente archivar con algunas notas. Decidí que quería que mi blog se pudiera imprimir. Fue mucho más fácil de lo que pensé.

Cómo mostrar su versión impresa:

Deberá comprender los conceptos básicos de CSS para lograr esto. La parte más difícil es usar la consola de desarrollo de su navegador para probar la visualización, la ocultación y el ajuste del contenido para que pueda escribir su CSS. En Safari, deberá habilitar las herramientas de desarrollo, hacer clic con el botón derecho en su página y seleccionar Inspeccionar contenido. Eso le mostrará el elemento y CSS asociados.

Safari tiene una pequeña y agradable opción para mostrar la versión impresa de su página en el inspector web:

Safari: vista de impresión en el inspector web

Cómo hacer que su blog de WordPress sea fácil de imprimir:

Hay un par de formas diferentes de especificar su estilo para imprimir. Una es simplemente agregar una sección en su hoja de estilo actual que sea específica para el tipo de medio de "impresión".

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

La otra forma es agregar una hoja de estilo específica a su tema hijo que especifique las opciones de impresión. Así es cómo:

  1. Sube una hoja de estilo adicional a tu directorio de temas llamada print.css.
  2. Agregue una referencia a la nueva hoja de estilo en su functions.php expediente. Querrá asegurarse de que su archivo print.css se cargue después de su hoja de estilo principal y secundaria para que sus estilos se carguen en último lugar. También coloqué una prioridad de 100 en esta carga para que se cargue después del complemento. Así es como se ve mi referencia:

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

Ahora puede personalizar el archivo print.css y modificar todos los elementos que desea ocultar o mostrar de manera diferente. En mi sitio, por ejemplo, oculto toda la navegación, encabezados, barras laterales y pies de página para que solo se imprima el contenido que deseo mostrar.

My print.css El archivo tiene este aspecto. Tenga en cuenta que también agregué márgenes, un método aceptado por los navegadores modernos:

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

Cómo se ve la vista de impresión

Así es como se ve mi vista de impresión si se imprime desde Google Chrome:

Vista de impresión de WordPress

Estilo de impresión avanzado

Es importante tener en cuenta que no todos los navegadores son iguales. Es posible que desee probar cada navegador para ver cómo se ve su página en ellos. Algunos incluso admiten algunas funciones de página avanzadas para agregar contenido, establecer márgenes y tamaños de página, así como una serie de otros elementos. Revista Smashing tiene una muy artículo detallado sobre estas impresiones avanzadas opciones.

Aquí hay algunos detalles de diseño de página que incorporé para agregar una mención de derechos de autor en la parte inferior izquierda, un contador de página en la parte inferior derecha y el título del documento en la parte superior izquierda 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 Comentarios

  1. 1
  2. 2

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.