O teu blog de WordPress é para imprimir?

Imprimir CSS

Como completei a publicación de onte en ROI das redes sociais, Quería enviarlle unha vista previa ao CEO de Dotster, Clint Page. Non obstante, cando imprimei nun PDF, a páxina era un desastre.

Aínda hai moita xente que quere imprimir copias dun sitio web para compartir, consultar máis tarde ou simplemente arquivar con algunhas notas. Decidín que quería facer o meu blog para imprimir. Foi moito máis doado do que pensei que sería.

Como amosar a súa versión impresa:

Necesitarás comprender os conceptos básicos de CSS para conseguilo. O máis difícil é usar a consola de desenvolvedor do seu navegador para probar a visualización, ocultación e axuste do contido para que poida escribir o seu CSS. En Safari, terás que habilitar as ferramentas para desenvolvedores, facer clic co botón dereito na túa páxina e seleccionar Inspeccionar contido. Isto amosarache o elemento e CSS asociados.

Safari ten unha pequena opción para amosar a versión impresa da súa páxina no inspector web:

Safari - Vista de impresión en Web Inspector

Como facer o teu blog de WordPress para imprimir:

Hai un par de xeitos diferentes de especificar o seu estilo para a impresión. Un deles é só engadir unha sección na folla de estilo actual que sexa específica do tipo de soporte de "impresión".

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

O outro xeito é engadir unha folla de estilo específica ao tema fillo que especifique as opcións de impresión. Vexa como:

  1. Cargue unha folla de estilo adicional ao seu directorio de temas chamada print.css.
  2. Engada unha referencia á nova folla de estilo no seu functions.php arquivo. Quere asegurarse de que o ficheiro print.css se cargue despois da folla de estilo pai e fillo para que se carguen os últimos estilos. Tamén coloquei unha prioridade de 100 nesta carga para que se cargue despois do complemento Aquí ten o aspecto da miña referencia:

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

Agora podes personalizar o ficheiro print.css e modificar todos os elementos que desexas ocultar ou amosar de xeito diferente. No meu sitio, por exemplo, oculto toda a navegación, cabeceiras, barras laterais e pés de páxina para que só se imprima o contido que desexo amosar.

My print.css o ficheiro ten este aspecto. Teña en conta que tamén engadín marxes, un método que aceptan os navegadores modernos:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

Como se ve a vista de impresión

Aquí ten como se ve a miña vista de impresión se se imprime desde Google Chrome:

Vista de impresión de WordPress

Estilo de impresión avanzado

É importante ter en conta que non todos os navegadores son iguais. É posible que queiras probar cada navegador para ver como se ve a túa páxina. Algúns incluso admiten algunhas funcións avanzadas de páxina para engadir contido, establecer marxes e tamaños de páxina, así como outros elementos. Smashing Magazine ten un moi artigo detallado sobre estas impresións avanzadas opcións.

Aquí tes algúns detalles do deseño de páxina que incorporei para engadir unha mención de copyright na parte inferior esquerda, un contador de páxinas na parte inferior dereita e o título do documento na parte superior esquerda de cada páxina:

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

2 Comentarios

  1. 1
  2. 2

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.