Página para Impressão no WordPress

Página de Impressão no WordPress

Página de Impressão no WordPress
Página de Impressão no WordPress

É interessante facilitar a impressão das páginas do seu site ou blog. As vezes o usuário desperdiça muita tinta e toner de impressora ao imprimir um conteúdo que não deseja.

Neste pequeno tutorial vamos tornar as páginas de nosso tema wordpress compatíveis com layout de impressão.

Caso você ainda não tenha conhecimentos sobre como criar um tema WordPress, acesse este tutorial: http://blogwordpress.com.br/criar-tema-wordpress-parte-1/

Código da página web

Vamos partir do princípio que o layout tem uma div que exibe o conteúdo da página web. Geralmente alguns webdesigners e desenvolvedores nomeiam esta div como o nome de “content”, “main” ou “conteudo”. Em nosso exemplo vamos chama-la de “conteudo”.

Veja a marcação abaixo:

<!DOCTYPE html><html lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Imperfeito - O Blog!</title><link type='text/css' rel='stylesheet' href='css/geral.css' />
</head>
<body><div id="container"><div id="topo"></div>
<div id="menu"><ul><li><a href="index.html" title="P&aacute;gina Principal" hreflang="pt">P&aacute;gina Principal</a></li><li><a href="quem_somos.html" title="Quem Somos" hreflang="pt">Quem Somos</a></li><li><a href="responsabilidade_social.html" title="Responsabilidade Social" hreflang="pt">Responsabilidade Social</a></li><li><a href="projetos.html" title="Projetos" hreflang="pt">Projetos</a></li>
<li><a href="entrevista.html" title="Entrevistas" hreflang="pt">Entrevistas</a></li><li><a href="banco_imagens.html" title="Banco de Imagens" hreflang="pt">Banco de Imagens</a></li><li><a href="cidadania_serrana.html" title="Cidadania Serrana" hreflang="pt">Cidadania Serrana</a></li><li><a href="downloads.html" title="Downloads" hreflang="pt">Downloads</a></li>
<li><a href="#" title="V&iacute;deos" hreflang="pt">V&iacute;deos</a></li><li><a href="mapa_site.html" title="Mapa do Site" hreflang="pt">Mapa do Site</a></li><li><a href="fale_conosco.html" title="Fale Conosco" hreflang="pt">Fale Conosco</a></li></ul></div>
<div id="conteudo"><h1>Loren Ipsun</h1><h2>Loren Ipsun ipsun loren ipsun</h2><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p></div>
<div id="auxiliar"><div id="coluna1"><img src="img/banner_vertical_video.gif" alt="Banner 1" /></div><div id="coluna2"><img src="img/banner-vertical-blog-copy_.jpg" alt="Banner 2" /></div></div>
<div id="rodape"></div></div></body></html>

Veja um exemplo de nossa página aqui.

A folha de estilo para visualização no site vai ficar assim:

/* CSS Document */

body {
	margin: 0;
	padding: 0;
	background-color: #191970;
	font-family: sans-serif;
	font-size: 1em;
}

h1, h2, h3, h4, h5, h6, h7 {
	margin: 2px;
}
h1 {
	background-color: #6495ED;
	color: #000080;
}
h2 {
	background-color: #B0C4DE;
	color: #0000CD;
}
a:link {
	color: #0000CD;
	padding: 0 1px 0 1px;
}
a:visited {
	color: #0000CD;

}
a:hover {
	color: #0000CD;
	background-color: #ff0;
	border: 1px solid #f00;
	text-decoration: none;
	padding: 0;
}
a:active {
	color: #0000CD;
}

p {
	line-height: 25px;
	margin-top: 35px;
}

#back_full {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
}

#container {
	width: 980px;
	height: auto;
	background-color: #fff;
	margin: auto;
	padding: 5px;
	border: 3px solid #fff;
	z-index: 2;
}

#topo {
width: 100%;
height: 200px;
background-color: #27408B;
background-image: url("../img/topo.jpg");
background-repeat: no-repeat;
}

#menu {
	margin-top: 10px;
	width: 145px;
	float: left;
	color: #fff;
}
#menu ul {
	margin: 0;
	padding: 0;
	background-color: #CAE1FF;
}
#menu ul li {
	width: auto;
	background-color: #9AFF9A;
	color: #fff;
	border: #fff solid 1px;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
#menu a:link {
	color: #000;
	font-weight: bold;
	border-left: #003399 solid 5px;
	text-decoration: none;
	padding: 5px;
	display: block;
}
#menu a:visited {
	text-decoration: none;
	color: #fff;
}
#menu a:hover {
	text-decoration: none;
	color: #000;
	background-color:  #fff;
	font-weight: bold;
	border: none;
	border-left: #ccff00 solid 5px;
}
#menu a:active {
	text-decoration: none;
	color: #fff;
}

#conteudo {
	width: 440px;
	height: auto;
	float: left;
	padding: 5px;
	margin-top: 10px;
	margin-left: 5px;
	background-color: #fff;
}

#auxiliar {
	background-color: #fff;
	width: 372px;
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	float: right;
}
#auxiliar #coluna1 {
	width: 180px;
	margin-bottom: 10px;
	float: left;
}
#auxiliar #coluna2 {
	width: 180px;
	margin-bottom: 10px;
	float: right;
}
#auxiliar img {
	margin-bottom: 10px;
	width: 180px;
}

#rodape {
	width: 100%;
	height: 150px;
	background-color: #ccc;
	clear: both;
}

Criar a folha de estilo para impressão

Veja a codificação da folha de estilos para impressão:

/* CSS Document */
#container {
width:100%;
height:auto;
}

#topo {
display:none;
}

#menu {
display:none;
}

#conteudo {
margin:15px;
width:90%;
height:90%
}

#auxiliar {
display:none;
}

#rodape {
display:none;
}

Perceba que deixamos as outras div´s com o atributo display com valor none. Assim somente o conteúdo da div conteudo vai aparecer na impressão da página.

Chamando a folha de estilos na página web

No header da página você deve inserir o link para a folha de estilo de impressão.

Veja o exemplo:

<head>
<title>Imperfeito - O Blog!</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>

Veja a um exemplo da mesma página, agora com a folha de estilos para impressão.

Faça um teste no seu browser. Em nosso exemplo vamos utilizar o Mozilla Firefox.

Abra o seu browser, acesse a página de exemplo do tutorial que está no endereço http://www.blogwordpress.com.br/wp-content/uploads/criar_folha_de_estilo_wordpress/exemplo02/ e clique na opção para visualizar página para impressão, conforme o exemplo mostrado na imagem abaixo:

Visualizar Página de Impressão no Firefox
Visualizar Página de Impressão no Firefox

Ao clicar usar a opção de visualização de página do Firefox, você verá apenas os dados contidos na “div #conteudo”. Veja o exemplo da página de impressão abaixo:

Exemplo de Página de Impressão WordPress no Firefox
Exemplo de Página de Impressão WordPress no Firefox

Inserindo o Link da Folha de Estilo para Impressão no Tema WordPress

Abra o arquivo “header.php” do seu tema WordPress.

Insira esta linha de código antes da tag de fechamento do “header” da página web.

<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />

Através do link mostrado acima, estamos informando ao documento web que o arquivo “print.css” é responsável por estilizar o conteúdo da página na impressora.

Apartir de agora seus temas ficarão compatíveis com impressão. Deixe seus recados na caixa de comentários em caso de dúvidas.