Como diseñador Web, desarrollador o propietario de un sitio web, es raro que necesite imprimir las páginas de su sitio web. A pesar de todo, si surge la necesidad y tiene que enviar sus páginas web a una impresora, debe asegurarse de que se vean tan bien en papel como en pantallas.
Si su sitio web no está listo para imprimir, sus páginas no solo se verán desordenadas en papel, sino que al mismo tiempo pueden mostrarse como una impresión de baja calidad en papel. Por lo visto, eso no es lo que usted o los visitantes de su web quieren ver. Recuerde, no todos los visitantes de la web están leyendo contents web en línea.
En esta publicación, vamos a discutir cómo hacer que un sitio web de WordPress esté listo para imprimir para que cualquier página impresa se vea nítida y ordenada en papel. En primer lugar, ¿cuál es la necesidad de un sitio web listo para imprimir?
Why Make Your WordPress Website Print Ready?
You may rightly wonder why you need your website to be print ready, considering that most internet users use digital devices to browse the web. The truth is, you shouldn't make assumptions about how people read the content on your website. The fact is, most website visitors read content directly online, but it's good to cater to the few who might print your web pages. And considering that preparing a website for printing is not a lot of work, there is little reason not to.
Por lo general, debe atender todas las formas posibles de acceder a su contenido, incluida la impresión. Esencialmente, desea estar listo para cualquier cosa para la que sus visitantes de la web quieran usar su contenido. Si un lector encuentra una publicación relevante para su trabajo, a modo de ejemplo, y decide usarla como punto de referencia en una presentación, querrá imprimirla. Nunca se sabe quién visitará su sitio y cómo utilizará el contenido. Entonces, ¿cómo puede su Blog de WordPress renderizarse con claridad nítida tanto en pantallas digitales como en papel?
Print Ready WordPress Plugins
Como era de esperar con las correcciones de WordPress, siempre hay un complemento al rescate. Escribir su propio CSS para imprimir es poderoso, pero necesita un poco de planificación, sin mencionar las horas adicionales de prueba y solución de problemas que surgen. Entonces, si no quiere ensuciarse las manos escribiendo CSS, simplemente elija un complemento para hacer el trabajo. Hay varios complementos que puede usar según la complejidad del diseño de su blog. Aquí hay algunas selecciones para considerar:
WordPress Easy Social Share Plugin
Easy Social Share, one of CodeCanyon's most popular plugins, is packed with great features that make it easy for your readers to share your blog. Not only does the plugin include support for more than 20 major social networks, but at the same time it includes a useful printing option that you can add to any post or page. And because the Print button is included with all social sharing buttons, this is a quick and easy way to add a print option to your website.
Free Printable WordPress Plugin with PDF Buttons
Print Friendly y PDF Button crean versiones impresas de sus páginas web con solo hacer clic en un botón. A continuación, puede guardar las páginas como PDF o imprimirlas en papel. Admite más de 20 idiomas y ajusta de forma automática el idioma para que coincida con la configuración de idioma del Username. El complemento viene con una gran cantidad de otras funciones y, lo mejor de todo, puede usarlo de forma gratuita (con anuncios). Si desea la versión sin advertising, debe comprar una subscription.
Free WordPress Plugin for WP Print
This is another great little plugin that makes your WordPress blog print ready with no hassle. It doesn't have as many functions as the plugin above, but it does have a respectable set of settings to control page items for printing. On the web page, it displays a single print button that enables users to generate a print-ready version of any page they want.
Custom CSS for printing
If you're comfortable with coding, then a good starting point when you want your WordPress blog to be print-ready is CSS. In fact, making your website print-ready essentially involves writing some CSS styles to hide or show items so they're clear on paper. If your theme isn't print ready or if you want to add custom print styles, make sure to create a child theme first so you can add your custom CSS or install and activate your favorite custom CSS plugin.
Now all you have to do is add your custom print styles (CSS) so your web pages are ready to print and doing it at the same time is easy. Just make a declaration and then write your styles inside that declaration like this:
@media print {/ * your print styles * /}
The declaration is a media query that uses the specified styles to control the appearance of your web pages when printed.
The second method is about putting all your print styles in a separate CSS file. This is a cleaner and more organized way of doing things and is particularly useful when doing maintenance for your blog. Just create a new CSS file, write your styles (not forgetting to start with the @media print statement, and then load your custom print CSS file into your theme. What you put in your style file is completely up to you, but basically, you will include everything you want to appear in the print version of your blog.
Here are some general guidelines when designing for print:
- There are some parts that you don't want to appear in your print version, like the sidebar. In that case, when you use
display: noneTo hide those parts, be sure to rearrange the remaining blocks so your pages don't look cluttered when printed. - Use dots for font sizes rather than em or pixel measurements, which are best for digital displays. Printers, apart from this, work better with dots.
- The print version of your blog should use the full width. On digital devices, it's nice to limit width sizes, but this doesn't look good when printing on paper.
- Eliminate content in the comments section, especially if yours is a very active blog.
- Remove navigation and footer content (just use
display: noneabout those items). In most cases, the text content of your pages is the only thing that matters in printed versions, so it should be your main focus when writing your printed CSS. - Adding to the previous point, at the same time you should consider hiding all images unless they are absolutely necessary to understand the content of the relevant text. Apparently, all other interactive media items should be hidden by default, as they are simply paper clutter. The links at the same time should be removed, as they do not make sense on paper.
WordPress.org tiene un buen ejemplo de una style sheet de impresión que puede usar como referencia al escribir la suya. Míralo here.
Ending
Hacer que un sitio web esté listo para imprimir no se trata de algo en lo que mucha gente piense al crear sus sitios web. A pesar de todo, es importante diseñar tanto para la web como para la impresión desde el principio. No obstante, si no hizo esto y ahora se siente atrapado en un aprieto, es bastante fácil de solucionar. De hecho, dado lo simple que es llevar a la práctica los estilos de impresión en su tema, la mayoría de las persons, incluso los principiantes de WordPress, deberían poder realizar estos cambios por sí mismos, fundamentalmente si utilizan uno de los complementos recomendados previamente.
So, are you planning to make your blog print ready? If you've already taken these steps, how did it go? I'd love to hear all about your experiences in the comments below.
