Cómo hacer que su sitio de WordPress sea compatible con la impresora en muy poco tiempo

¿Qué hace que un sitio web sea compatible con la impresora?

Su sitio web tiene toneladas de elementos que facilitan que las personas naveguen por todo su sitio. Menús de navegación, hipervínculos internos, barras laterales… todo eso es bueno para las personas que visitan su sitio en Internet porque les permite encontrar nueva información y moverse entre diferentes páginas.

Pero cuando se trata de imprimir una parte específica del contenido de su sitio, esos elementos se interponen en el camino. Piénselo… las personas no pueden hacer clic en su menú de navegación o interactuar con su barra lateral en la página impresa, por lo que hacer que impriman su menú de navegación superior no es especialmente útil cuando leen su contenido en una hoja de papel.

Además, a veces las fuentes y el tamaño de las fuentes utilizadas en su sitio web no se traducen tan bien en las dimensiones de la página impresa.

Y finalmente, mucha gente va a imprimir su contenido en blanco y negro (¡y la tinta de color es costosa!), por lo que siempre es una buena idea adoptar una apariencia de escala de grises para su contenido compatible con la impresora.

Por esa razón, hacer que su sitio web sea fácil de imprimir implica principalmente:

• Cambiar las fuentes, el tamaño y el espaciado para facilitar la lectura en un tamaño de página normal
• Eliminar elementos extraños como anuncios, navegación y barras laterales que no son útiles en una página impresa
• Colores atenuantes si usa muchos elementos que no sean en blanco y negro

Entonces, ¿cómo puedes realmente hacer eso? Vamos a averiguar…

Cómo hacer que su sitio web sea compatible con impresoras con CSS

En la siguiente sección, le mostraré algunos complementos de WordPress que pueden ayudarlo a hacer que su sitio sea compatible con la impresora sin necesidad de profundizar en ningún CSS. Pero si desea tener control total sobre cómo se ve la versión impresa de su sitio, puede usar selectores de medios para diseñar la versión impresa de su página.

El componente básico de CSS para su contenido compatible con impresoras es este:

@media imprimir {
/* Los estilos específicos de la impresora van aquí */
}

Cualquier estilo CSS que agregue a esta declaración de medios solo afectará la versión impresa de su página.

¿Adónde vas desde allí? Bueno, es difícil dar una respuesta exacta porque mucho depende de su preferencia y tema específicos.

Pero, en general, estas son algunas de las cosas que querrás hacer con CSS:

• Use display:none para eliminar elementos como barras laterales, menús de navegación, formularios de búsqueda y cualquier otra cosa que no sea útil en la página impresa.
• Establezca un tamaño de fuente legible. El gráfico Puntos a píxeles de Reed Design es útil para descubrir cómo se relacionan los píxeles con los tamaños de fuente con los que está familiarizado en programas más fáciles de imprimir como Microsoft Word o Google Docs.
• Use una fuente serif para los estilos de su impresora, ya que a la mayoría de las personas les resulta más fácil leer en la página impresa.
• Cambie los colores, especialmente si está usando un color de fondo con mucha tinta. La mayoría de los navegadores tienen un fondo blanco predeterminado en muchas situaciones, pero es bueno asegurarse porque cualquier problema puede significar una tonelada de tinta desperdiciada.

Haciendo solo las cuatro cosas anteriores, ya debería tener un sitio web bastante fácil de imprimir. Pero si quieres ir más allá, también puedes implementar tácticas más avanzadas. Por ejemplo, puede usar :after para imprimir la URL de cualquier enlace. Esto elimina los medios innecesarios de las publicaciones (como videos, que no son muy útiles en la impresión), y más.

Si desea obtener algunos ejemplos más específicos de estilos CSS aptos para impresoras en acción, una buena publicación para leer es esta de Smashing Magazine porque abarca una página de ejemplo completa.

Algunos complementos de WordPress para hacer que su sitio sea compatible con impresoras

Si prefiere no ensuciarse las manos con CSS, puede, como de costumbre, recurrir a un complemento de WordPress para obtener ayuda. Tiene un montón de opciones diferentes (para verlas todas, consulte nuestra lista de los mejores complementos de impresión de WordPress ), pero aquí hay un par de recomendaciones.

Sin embargo, antes de comenzar, quiero aclarar que estos complementos solo funcionan cuando los usuarios hacen clic en el botón dedicado Imprimir esto proporcionado por cada complemento. No afectarán el estilo de impresión de su sitio si un usuario va directamente a la opción de impresión en su navegador.

WP-Imprimir

WP-Print es un complemento gratuito popular que lo ayuda a crear un sitio de WordPress compatible con impresoras. Además de agregar un botón Imprimir esto dedicado , el complemento también le brinda una interfaz fácil de usar. Esto siempre le permite personalizar muchas de las configuraciones que discutí en la sección CSS anterior.

Tenía curiosidad por ver cómo funciona este complemento con Divi y Divi Builder. Entonces, configuré una publicación de prueba rápida para ver cómo funcionan las cosas. Así es como se ve la versión web de mi publicación de prueba:

Y así es como se ve la versión para imprimir de esa publicación ( recuerde: puede personalizar cómo funcionan las imágenes; mi ejemplo solo usa el valor predeterminado ):

Una cosa especialmente buena del complemento es que agrega automáticamente citas para enlaces en el contenido. También elimina todas las opciones de navegación.

Solo tenga en cuenta: deberá sentirse cómodo investigando los archivos de plantilla de su tema para agregar el botón «Imprimir esto» . Es más o menos un trabajo de copiar y pegar, pero los principiantes pueden encontrarlo un poco confuso.

Precio: Gratis | Más información

Imprimir, PDF, Correo electrónico por PrintFriendly

Antes de continuar, quiero comenzar con la advertencia principal de este complemento: la versión gratuita es compatible con anuncios. No es lo ideal… pero el complemento en sí es bastante agradable y los anuncios no son especialmente intrusivos.

Si eso no es un factor decisivo, o si está dispuesto a actualizarse a profesional, siga leyendo…

El complemento de WordPress de PrintFriendly integra el servicio PrintFriendly en su sitio. Este es un servicio genial que, además de eliminar las partes superfluas de su tema de WordPress, también brinda a sus usuarios cierto control sobre cómo se ve su página impresa.

Al igual que WP-Print, el complemento le brinda un botón de impresión. Cuando se hace clic, ese botón abre una ventana de caja de luz. Aquí es donde los usuarios pueden obtener una vista previa de la versión impresa, así como ajustar el tamaño de la imagen y el texto:

No tiene la genial función de citas de enlaces de WP-Print, pero creo que es excelente por el control que ofrece a sus visitantes. Y otra cosa buena es que también facilita que los lectores compartan o descarguen su publicación como PDF o correo electrónico.

Precio: Gratis con soporte publicitario. La versión Pro comienza en $4 por mes | Más información

Envolviendo las cosas

Si bien es cierto que la mayoría de sus visitantes consumirán su contenido en línea, eso no significa que deba ignorar por completo a las personas que desean imprimir su contenido en papel. Crear un sitio web compatible con la impresora es algo que se hace una sola vez. Y una vez que lo tenga en su lugar, los visitantes pueden imprimir su contenido según sea necesario sin dejar de tener una gran experiencia.

Ahora te toca a ti: ¿alguna vez imprimes contenido de un sitio web? ¿Qué es lo que le gusta y lo que no le gusta de las versiones para imprimir de la mayoría de los sitios web?

Imagen en miniatura del artículo por AVIcon / shutterstock.com