01 de marzo de 2017 Marc Coiduras

Cómo crear una hoja de estilo css para imprimir en WordPress


  • Muy buenos días amigos, entre ayer y hoy he estado añadiendo una hoja de estilo css para imprimir en WordPress para mi página web.

    Y como es obvio, voy a compartirlo en mi artículo de hoy en forma de mini tutorial.

    Yo todavía estoy peleandome con la hoja de estilos CSS de mi tema premium, es algo que tendrás que hacer también si tu tema es premium.

    Como no soy partidario de que a día de hoy se imprima en papel una página web, estoy preparando mi hoja de estilos para que se imprima el menor número de páginas.

    Hoja de estilo css para imprimir en WordPress

    WordPress facilita el estilo de tu sitio web con los temas, muchos de los cuales se prueban a fondo en diferentes ordenadores y navegadores antes de ser lanzados.

    1. ¿Pero qué hay sobre tener tu sitio de WordPress diseñado para la impresión?
    2. ¿Afecta eso al SEO de mi página en WordPress?

    1) A algunas personas les gusta imprimir páginas web y leerlas en su tiempo libre, así que considera diseñar tu sitio WordPress para imprimir.

    2) Ya sabes que Google está cada vez más cerca de que el algoritmo de su buscador, tome más en cuenta las preferencias de los usuarios que las técnicas SEO.

    Así que nunca está de más, añadir está opción en nuestro WordPress.

    Primeros problemas con la impresión de tu página web

    De forma predeterminada, cuando un usuario imprime una página web de WordPress que no está diseñada para la impresión, la hoja de estilo se quita y la página se imprime como si no hubiera ninguna hoja de estilo.

    Tiende a parecerse a una larga línea de información que comienza con tu encabezado, el contenido, luego la larga lista que es tu barra lateral y por último el pie de página.

    Para ver qué aspecto tiene tu sitio web con WordPress en formato de impresión, haz clic derecho en cualquier parte de tu página web y elige la opción “Imprimir”.

    No es muy bonita, ¿verdad?

    Y como dije al principio, bastante desperdicio de papel con esa lista tan larga de enlaces de tus tags de la barra lateral que imprimen más de dos o tres páginas.

    Página web bonita para imprimir

    Para que tu sitio sea bonito cuando se imprime, debemos centrarnos en la arquitectura del sitio, la estructura que contiene el contenido dentro de cada sección.

    Afortunadamente, el sistema de archivos modular de WordPress Themes tiende a hacer este proceso mucho más fácil, ya que las principales áreas estructurales están claramente asignadas.

    La estructura principal para la mayoría de los sitios de WordPress es la siguiente, aunque los nombres pueden ser diferentes en tu tema.

    #header
    #content
    #comments
    #sidebar (or #menu)
    #footer

    Encontrarás los estilos para estas secciones en tu hoja de estilo style.css en la carpeta de tu Tema para WordPress.

    La forma en que se cambian estas secciones en preparación para la impresión depende de ti.

    Puedes imprimir la barra lateral pero no el pie de página, o incluir el pie de página, pero no la barra lateral.

    Cambiar estilos de fuente y tamaños o incluso hacer que se impriman imágenes o no.

    Creación de estilo de impresión

    El navegador debe ser “instruido” para buscar los estilos de impresión en la hoja de estilo, y deben estar en su propia sección.

    En tu hoja de estilo, normalmente en la parte final, agrega lo siguiente para iniciar tus estilos de impresión:

    /* Print Styles */
    @media print {
    body { background:white; color:black; margin:0; }
    }

    Definición de estilos de impresión

    En la nueva sección, agrega los selectores de estructura de tu sitio (nombres) como estos (en tu caso puede ser diferente, examine el código de tu página):

    /* Print Style Sheet */
    @media print {
    body { background:white; color:black; margin:0; }
    #header { }
    #content { }
    #comments { }
    #sidebar { }
    #footer { }
    }

    Para que una sección se muestre, simplemente agrega display: block a las declaraciones o atributos del selector.

    #content { display:block; }

    Para no incluir una sección, por lo que no se imprimirá, agrega display: none a las declaraciones del selector.

    #footer { display:none; }
    

    El uso de display: none en cualquier elemento de tu página web puede hacer desaparecer el elemento cuando se imprime.

    Si tienes anuncios u otros elementos que no deseas que aparezcan al imprimir, agregue display: none al selector en la sección de impresión de tu hoja de estilos.

    Opciones extra

    Si quieres configurar que las imágenes aparezcan en la impresión, puedes utilizar el siguiente código CSS:

    img.centered { display: block;margin-left: auto;margin-right: auto; }
    img.right { padding: 4px;margin: 0 0 2px 7px;display: inline; }
    img.left { padding: 4px;margin: 0 7px 2px 0;display: inline; }
    .right { float: right; }
    .left { float: left; }
    img { page-break-inside:avoid;page-break-after:avoid; }

     

    Conclusión

    Como veis, configurar la hoja de estilos para que aparezcan elementos a la hora de imprimir nuestra página web es muy fácil.

    Y bueno, como dije anteriormente, examina el código de tu página web, para averiguar el nombre de los elementos que se muestran para poder elegir cual mostrar.

    Espero que este artículo te ayude con la configuración de tu hoja de estilo CSS para imprimir en WordPress.

    Recursos



  • Marc Coiduras

    Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
    Zona Web
    Google+
    Reddit
    Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
    Zona movil
    Tagged: ,
    Artículos relacionados
    Hola amigos, ¿qué tal el día? Esta tarde os traigo una mini guía de WordPress
    Hola amigos, en el artículo de hoy vamos a ver cómo solucionar la vulnerabilidad reverse
    Saludos amigos, que tal estos días? Yo he estoy ocupado, creando un plugin para añadir
    Hola amigos, qué tal el fin de semana? Yo he estado haciendo unas pequeñas modificaciones

    About the Author

    Marc Coiduras Hola, mi nombre es Marc Coiduras y soy diseñador web, localizado en Valencia, España.

    Deja un comentario

    CONTACTA CONMIGO PARA CUALQUIER COSA

    Te doy la bienvenida a ponerte en contacto conmigo para obtener más información
    sobre cualquiera de mis productos o servicios.