Share
Agregar una hoja de estilo de impresión a su sitio de Wordpress es un acierto. El entorno le agradecerá la aplicación de este artículo a su sitio web. Es una característica tan simple de implementar, y la mayoría de las personas simplemente la pasan por alto. Le mostraré lo fácil que es agregar una hoja de estilo de impresión simple a su sitio de Wordpress. Le daré una excelente base de una que puede usar en su sitio de inmediato y le mostraré algunos consejos para que pueda pasar al siguiente nivel..
Deberá actualizar el archivo header.php de su tema para que sepa que la hoja de estilo que actualizaremos también se usará para imprimir. Abre header.php, busca:
Necesitamos actualizar el atributo de los medios para incluir la impresión. La pantalla le dice al navegador "Esta es la hoja de estilo que debe usar para saber cómo mostrar los elementos dentro del navegador". Necesitamos decirle "También puede usar esta hoja de estilo cuando el usuario está imprimiendo". Así que ahora parece:
A continuación, abra su hoja de estilo, style.css. Al final del documento, agregue:
@import "print.css";
Es clave que el código esté en la parte inferior de la hoja de estilo para asegurarse de que los estilos de pantalla no heredan los estilos que usamos para imprimir y para que los estilos de impresión no se anulen con los estilos de su sitio. Una vez hecho esto, cree un archivo en el mismo directorio con el nombre print.css. Aquí es donde añadiremos todo nuestro estilo para imprimir..
A continuación se muestra una versión modificada del estilo de impresión para el tema predeterminado de Wordpress "TwentyTen". Muchos sitios web comparten estos mismos elementos, por lo que no es necesario reinventar la rueda con el desarrollo de uno. Lo que voy a hacer es desglosar los elementos clave, para que sepa por qué se incluyeron y qué estilos debe buscar para agregarlos a sus propios elementos personalizados..
@media print body background: #fff none! important; color: # 000; #wrapper claro: ambos! importante; pantalla: bloque! importante; flotar: ninguno! importante; posición: relativa! importante; #header border-bottom: 2pt solid # 000; parte inferior de relleno: 18 puntos; #colophon border-top: 2pt solid # 000; # site-title, # site-description float: none; altura de la línea: 1.4em; margen: 0; relleno: 0; # site-title font-size: 13pt; .entry-content font-size: 14pt; altura de la línea: 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; ancho: 100%; #content, .one-column #content margin: 24pt 0 0; ancho: 100%; .wp-caption p font-size: 11pt; # site-info, # site-generator float: none; ancho: auto; #colophon ancho: auto; img # wpstats mostrar: ninguno; # site-generator a margin: 0; relleno: 0; # entry-author-info border: 1px solid # e7e7e7; #main display: inline; .home .sticky border: none;
Primero, debes notar cómo están envueltos todos tus estilos de impresión:
@media print
Todos los objetos que corresponden a la funcionalidad de impresión tienen un estilo entre estos paréntesis. Si agrega cualquier estilo, asegúrese de que esté dentro de estos paréntesis. Si está fuera, CSS no sabrá nada mejor y asumirá que es parte de los medios de la pantalla.
body background: #fff none! important; color: # 000;
Este es uno de los elementos clave para crear un estilo de impresión. Por lo general, todo lo que sea fácil de imprimir no debe tener fondo, y todos los colores deben ser en blanco y negro..
#wrapper claro: ambos! importante; pantalla: bloque! importante; flotar: ninguno! importante; posición: relativa! importante;
Estos son estilos básicos que aseguran que todo se vea uno encima del otro. Al limpiarlo se asegurará de que todo en #wrapper caiga bajo el elemento anterior, y cualquier cosa después de que caiga después de la envoltura para que las cosas no se empujen una al lado de la otra. No debe tener un flotador y la posición debe permanecer relativa. Lo que esto hará es asegurarse de que el contenido se lea de izquierda a derecha y que ningún objeto se superponga entre sí; será un documento que fluye.
#header border-bottom: 2pt solid # 000; parte inferior de relleno: 18 puntos;
Notará algunas propiedades que realmente le dan estilo al elemento a lo largo de la hoja de estilos de impresión. Estos son absolutamente aceptables. Muchas veces, el color separa elementos en un diseño. Como todo está en blanco y negro, es difícil hacerlo. Así que cosas como agregar un borde negro a la parte inferior de un elemento y agregar un espacio debajo lo ayudarán a separarlos claramente.
.entry-content font-size: 14pt; altura de la línea: 1.6em; .entry-title font-size: 21pt;
Es una buena idea considerar el tamaño del texto del contenido que está imprimiendo. El tamaño que ve en la pantalla en comparación con lo que los ojos pueden leer es muy diferente. Considere un tamaño de fuente más pequeño, 14 puntos es mucho lo que siento. Puedo considerar incluso ir más pequeño que eso. Tener una altura de línea que ayude al flujo de contenido también es muy útil. Asegúrese de dejar algo de espacio entre las líneas para que el texto impreso no sea ilegible. Además, dar a los títulos un tamaño de fuente más grande ayudará a distinguirlos del contenido.
#access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important;
Este será uno de tus atributos de elementos más utilizados. 'display: none' va a ocultar el elemento por completo. La página impresa lo tratará como si ni siquiera estuviera allí, por lo que si oculta todas sus imágenes, no mostrará un lugar en blanco donde normalmente estarían; el elemento se eliminará completamente del diseño y se representará el siguiente contenido disponible. Lo uso mucho para incluir elementos innecesarios en mi impresión, como imágenes, navegación y barras laterales.
#container, #header, #footer margin: 0; ancho: 100%;
Este elemento es asegurarse de que todos los elementos que envuelven el contenido de la página tengan un ancho del 100% para que ocupen todo el margen disponible en el documento impreso. A veces, los diseñadores establecen un ancho de 900 píxeles o similares, lo que permitiría que solo se imprima en un área de 900 píxeles..
#contenido, .una columna #contenido margen: 24pt 0 0; ancho: 100%;
En la hoja de estilo de la pantalla, esta sería la parte izquierda del contenido. Tendría una barra lateral a su derecha. Notará que ahora ya no tiene un ancho limitado a ese espacio, ocupará el margen completo disponible en el documento impreso. Tiene un ancho del 100% y la barra lateral ya no podrá ajustarse a su lado. De hecho, la barra lateral debería tener una pantalla: ninguna en algún lugar de la hoja de estilos de impresión. También hay un atributo de margen que lo separará del contenido a su alrededor para que se destaque..
img # wpstats mostrar: ninguno;
Este es un gran ejemplo de cómo ocultar imágenes que tienen el ID de "wpstats". Puede crear su propia clase llamada hideInPrint para agregar a las imágenes que desea eliminar al imprimir. El código para eso sería:
img.hideInPrint mostrar: ninguno;
Este artículo es solo una base: obviamente puede agregar sus propios estilos de marca únicos para crear un estilo de impresión personalizado. Aquí, le mostramos los elementos que debe tener en cuenta al implementar una hoja de estilo de impresión en su propio proyecto; ¡El resto del estilo dependerá de usted en su propio proyecto! Conocer el pensamiento detrás del "por qué" se usaron ciertos atributos, lo ayudará a comprender qué necesitará su proyecto.
Accentsconagua