Seu blog WordPress é compatível com impressão?

Imprimir CSS

Como concluí a postagem de ontem em ROI de mídia social, Eu queria enviar uma prévia dele ao CEO da Dotster, Clint Page. Quando imprimi em PDF, porém, a página estava uma bagunça!

Ainda existem muitas pessoas por aí que gostam de imprimir cópias de um site para compartilhar, consultar posteriormente ou apenas arquivar com algumas notas. Decidi que queria tornar meu blog amigável para impressão. Foi muito mais fácil do que pensei que seria.

Como exibir sua versão impressa:

Você precisa entender os fundamentos do CSS para fazer isso. A parte mais difícil é usar o console do desenvolvedor do navegador para testar a exibição, ocultação e ajuste do conteúdo para que você possa escrever seu CSS. No Safari, você precisará habilitar as ferramentas do desenvolvedor, clicar com o botão direito na sua página e selecionar Inspecionar Conteúdo. Isso mostrará o elemento e o CSS associado.

O Safari tem uma pequena opção interessante para exibir a versão impressa da sua página no inspetor da web:

Safari - Visualização de impressão no Web Inspector

Como tornar seu blog WordPress amigável para impressão:

Existem algumas maneiras diferentes de especificar seu estilo para impressão. Uma é apenas adicionar uma seção em sua folha de estilo atual que seja específica para o tipo de mídia de “impressão”.

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

A outra maneira é adicionar uma folha de estilo específica ao seu tema filho que especifica as opções de impressão. Veja como:

  1. Faça upload de uma folha de estilo adicional para o diretório do seu tema chamada print.css.
  2. Adicione uma referência à nova folha de estilo em seu functions.php Arquivo. Você vai querer garantir que o arquivo print.css seja carregado após a folha de estilo pai e filho para que seus estilos sejam carregados por último. Eu também coloquei uma prioridade de 100 neste carregamento para que ele carregue após o plug-in. Aqui está a minha referência:

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 você pode personalizar o arquivo print.css e modificar todos os elementos que deseja ocultar ou exibir de forma diferente. No meu site, por exemplo, oculto toda a navegação, cabeçalhos, barras laterais e rodapés para que apenas o conteúdo que desejo exibir seja impresso.

My print.css arquivo se parece com isso. Observe que também adicionei margens, um método aceito pelos navegadores modernos:

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

Como é o Print View

Esta é a aparência de minha visualização de impressão se impressa no Google Chrome:

Visualização de impressão WordPress

Estilo de impressão avançado

É importante observar que nem todos os navegadores são criados iguais. Você pode testar cada navegador para ver a aparência de sua página entre eles. Alguns até oferecem suporte a alguns recursos de página avançados para adicionar conteúdo, definir margens e tamanhos de página, bem como uma série de outros elementos. A Smashing Magazine tem uma artigo detalhado sobre esta impressão avançada opções.

Aqui estão alguns detalhes de layout de página que incorporei para adicionar uma menção de direitos autorais no canto inferior esquerdo, um contador de página no canto inferior direito e o título do documento no canto superior esquerdo de cada página:

@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 Comentários

  1. 1
  2. 2

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.