Consejo Rápido: Agregar una Sencilla Hoja de Estilos de Impresión Simple para WordPress

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Agregar una hoja de estilo de impresión a tu sitio Wordpress es una decisión acertada. Si aplicas lo aprendido en este artículo a tu web, el medio ambiente te agradecerá. Es una característica muy sencilla de implementar, sin embargo la mayoría de la gente se olvida de hacerlo. Te voy a mostrar lo fácil que es añadir una sencilla hoja de estilos de impresión a su sitio de Wordpress. Te voy a proporcionar una excelente base que podrás usar inmediatamente en tu sitio y enseñarte algunos consejos para que puedas pasar al siguiente nivel.

Paso 1. Implementar una Hoja de Estilos de Impresión

Necesitará actualizar el archivo header.php de tu tema para dejar saber que la hoja de estilos que va actualizando se utilizará para la impresión, así. Abren header.php, mira:

1
2	<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Necesitamos actualizar el atributo de los medios de comunicación para incluir la impresión. Pantalla está diciendo que el navegador "Esta es la hoja de estilos que debe utilizar para saber cómo mostrar los elementos dentro del navegador". Tenemos que decirlo "Tú también puedes utilizar esta hoja de estilo cuando el usuario está imprimiendo". Ahora parece que:

1
2	<link rel="stylesheet" type="text/css" media="screen, print" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

A continuación, abre tu hoja de estilos, style.css. Al final del documento, agrega lo siguiente:

1
2	@import "print.css";

Es necesario que el código esté al final de la hoja de estilos para asegurarte que tus estilos para pantalla no hereden los estilos que estamos creando para la impresión y para que los estilos de impresión no sean reemplazados con el resto de estilos de tu sitio. Después de hecho esto, crea un archivo en el mismo directorio con el nombre print.css. Aquí es donde agregaremos todo nuestro estilo para impresión.

Paso 2. Agregar el Estilo de Impresión

A continuación tienes una versión modificada del estilo de impresión para el tema "TwentyTwelve" que acompaña de forma predeterminada a la instalación de Wordpress,". Un montón de sitios web comparten estos mismos elementos, por lo que no es necesario que reinventes nada nuevo en el desarrollo de tu propio estilo. Lo que voy a hacer es analizar los elementos más importantes, para que sepas por qué han sido incluidos y en qué estilos te debes fijar cuando los agregues a tus propios elementos personalizados.


@media print {
  body {
		background: #fff none !important;
		color: #000;
	}
	#wrapper {
		clear: both !important;
		display: block !important;
		float: none !important;
		position: relative !important;
	}
	#header {
		border-bottom: 2pt solid #000;
		padding-bottom: 18pt;
	}
	#colophon {
		border-top: 2pt solid #000;
	}
	#site-title,
	#site-description {
		float: none;
		line-height: 1.4em;
		margin: 0;
		padding: 0;
	}
	#site-title {
		font-size: 13pt;
	}
	.entry-content {
		font-size: 14pt;
		line-height: 1.6em;
	}
	.entry-title {
		font-size: 21pt;
	}
	#access,
	#branding img,
	#respond,
	.comment-edit-link,
	.edit-link,
	.navigation,
	.page-link,
	.widget-area {
		display: none !important;
	}
	#container,
	#header,
	#footer {
		margin: 0;
		width: 100%;
	}
	#content,
	.one-column #content {
		margin: 24pt 0 0;
		width: 100%;
	}
	.wp-caption p {
		font-size: 11pt;
	}
	#site-info,
	#site-generator {
		float: none;
		width: auto;
	}
	#colophon {
		width: auto;
	}
	img#wpstats {
		display: none;
	}
	#site-generator a {
		margin: 0;
		padding: 0;
	}
	#entry-author-info {
		border: 1px solid #e7e7e7;
	}
	#main {
		display: inline;
	}
	.home .sticky {
		border: none;
	}
}

Paso 3. Entender el Estilo de Impresión

Cierra las Etiquetas para Impresión

En primer lugar, debes advertir la forma en la que todos los estilos de impresión están encerrados dentro de:

1
2	@media print {
3	}

Todos los objetos que pertenecen a la función de impresión están encerrados entre corchetes. Si agregas cualquier estilo, asegúrate de que esté dentro de ellos. Si está fuera, CSS no sabrá que hacer con él y asumirá que forma parte de los estilos para pantalla.

Convierte Todo a Blanco y Negro


	body {
		background: #fff none !important;
		color: #000;
	}

Este es uno de los elementos clave en la creación de un estilo de impresión. Por lo general, nada pensado para impresión debería tener un fondo, y no debería existir más color que el blanco y el negro.

Bloquea Tus Elementos y Asegúrate de Que No Se Solapan


	#wrapper {
		clear: both !important;
		display: block !important;
		float: none !important;
		position: relative !important;
	}

Se trata de estilos básicos que te aseguran de que todo se muestra uno después otro. Si lo limpias te asegurarás de que todo lo que está dentro de #wrapper caerá bajo el elemento anterior y todo lo que venga después caerá fuera del wrapper, de forma que ningún elemento interfiera con otro. No debería tener asignada la propiedad float y la posición debe seguir siendo relativa ("relative"). Esto nos asegurará que el contenido se lea de izquierda a derecha, y que no hay objetos que se superpongan entre sí; será un documento que fluye.

Usa Bordes y Espaciado para las Separaciones


	#header {
		border-bottom: 2pt solid #000;
		padding-bottom: 18pt;
	}

Advertirás algunas propiedades que realmente aplican estilo al elemento por medio de la hoja de estilos para la impresión. Éstos son absolutamente aceptables. La mayoría de las veces, el color va a usarse para diferenciar los elementos del un diseño entre sí. Como todo es en blanco o negro, no es fácil conseguirlo. Así que cosas como añadir un borde negro en la parte inferior de un elemento y agregar algo de espacio bajo él puede ayudar a separar claramente dos elementos.

Ten en Cuenta Siempre la Fuente y el Tamaño de la Línea


	.entry-content {
		font-size: 14pt;
		line-height: 1.6em;
	}
	.entry-title {
		font-size: 21pt;
	}

Es una excelente idea tener en cuenta el tamaño del texto del contenido que va a ser impreso. El tamaño legible en pantalla es muy diferente al tamaño que los ojos son capaces de leer. Considerar un tamaño más pequeño de la fuente, 14 pt es mucho creo. Considero que puedo ir incluso más pequeño que el. También es muy útil tener una altura de línea que permite el flujo de contenido. Asegúrate de aplicar algún espacio entre las líneas para que el texto impreso no sea ilegible. También, asignar un tamaño mayor de fuente a los títulos ayudará a distinguirlos del resto contenido.

Ocultar Elementos Innecesarios


	#access,
	#branding img,
	#respond,
	.comment-edit-link,
	.edit-link,
	.navigation,
	.page-link,
	.widget-area {
		display: none !important;
	}

Se trata de uno de sus atributos del elemento más utilizados. ' Mostrar: ninguno ' se va a ocultar el elemento completo. La página impresa tratar como no hay, por lo que si oculta todas las imágenes no muestran un punto en blanco donde estarían normalmente; el elemento se tendrán totalmente de la disposición y hará el siguiente contenido disponible. Yo empleo esto para deshacerme de un montón de elementos innecesarios en mi impresión, por ejemplo imágenes, menus de navegación y columnas laterales (sidebars).

Emplea Todo el Ancho de la Página


	#container,
	#header,
	#footer {
		margin: 0;
		width: 100%;
	}

Este elemento es asegurarse de que todos los elementos que envuelven el contenido de la página tienen un ancho de 100% para que te toman el todo margen disponible en el documento impreso. A veces los diseñadores establecerá una anchura de 900px o como allí, que sólo permitiría imprimir para ocurrir en una zona de 900px.

Los Elementos Pueden Tener Diferentes Énfasis en la Impresión


	#content,
	.one-column #content {
		margin: 24pt 0 0;
		width: 100%;
	}

En la hoja de estilos de pantalla, esta sería la parte izquierda del contenido. Tendría una barra lateral a su derecha. Notarás ahora que ya no tiene una anchura limitada a que espacio, tomará el margen total disponible en el documento impreso. Tiene un ancho de 100% y la sidebar ya no serán capaces de montar al lado de él. De hecho, la barra lateral debe tener una pantalla: ninguno en algún lugar de la hoja de estilos de impresión. También es un atributo de margen que se separa del contenido alrededor de él para que se destacan.

Averigua Qué Imágenes Puedes Eliminar

1
2	img#wpstats {
3	display: none;
4	}

Esto es un gran ejemplo de esconder imágenes que tienen el identificador de "wpstats". Usted puede crear su propia clase llamado hideInPrint a añadir a las imágenes que desea eliminar al imprimir. El código para que se vería como:

1
2	img.hideInPrint {
3	display: none;
4	}

Conclusión

Este artículo sólo proporciona una base - obviamente puedes añadir tus propios estilos, adecuados a tu marca para crear tu estilo personal con los requisitos específicos de la impresión. Aquí, hemos demostrado que los elementos que debes tener en cuenta al implementar una hoja de estilo de impresión en tu propio proyecto; ¡El resto de lo que incluyas en el estilo de tu proyecto depende de ti! Conocer los fundamentos que hay detrás del "por qué" se utilizaron ciertos atributos, te ayudará a descubrir lo que necesitarás en tu proyecto.