Como Criei um Post Footer no Thesis Theme. – Tutorial

A todos os leitores e visitantes do DinheiroPT, provavelmente já repararão que recentemente foi criado, logo após o conteúdo do post uma área onde identifica o Autor do artigo, outra apresenta os artigos relacionados e ainda outra que permite opções de subscrição do blog e uma área para publicidade.

Não vale a pena informar os Leitores que se ainda não possuem o fantástico Thesis Theme então este artigo não é para os vossos blogs, mas, ainda está a tempo de começar a usufruir deste fantástico Tema WordPress, começando já por ler este artigo “Porquê Thesis Theme é o melhor Tema WordPress”.

Vamos então ao que interessa. O primeiro passo a efectuar é actualização dos vossos dados pessoais no Painel de Administração do WordPress em Utilizadores/ Autores.

Agora estão aptos para por a funcionar este fantástico Post Footer e podem usar todas as imagens que possui, mas antes de seguir em frente aqui vai um foto do que pode ter ainda hoje no vosso blog.

1º PASSO

Painel de Administração do Thesis e em custom.css colem o seguinte código

/* AUTHOR BOX */
.custom #comments { clear: both; }
.postauthor { background: #DDF5E9; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 1.7em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }
.postauthor p.hlight { font-size: 11px; text-transform: uppercase; }
.postauthor p.hlight span { color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px; }
/* BOXES */
#similar h3, #rightcol h3 { font-size: 1.8em; letter-spacing: normal; padding-top: 15px; }
#similar { float: left; width: 50%; padding: 0 32px; background:#FFFFFF url('http://www.dinheiropt.com/wp-content/uploads/2010/05/related.jpg') no-repeat scroll 0 0; border-right: 3px solid #FFFFE0;}
#similar p { margin-bottom: 0px; padding: 8px 2.5em 10px 10px; margin-top: 50px; }
#similar a { font-size: 1.4em; line-height: 1.5em; text-decoration: underline; }
#similar a:hover { border: 0; text-decoration: none; }
#similar h3 { padding-left: 5px; }
#similar span.date { color: #888; letter-spacing: 1px; text-transform: uppercase; }
#rightcol { float: right; width: 40%; background:#FFFFFF url('http://www.dinheiropt.com/wp-content/uploads/2010/05/subscrive.jpg') no-repeat scroll 0 0;  }
#rightcol p { font-size: 14px; line-height: 1.5em; padding: 10px 2.5em 10px 0;  }
#rightcol h3 { padding: 0; }
#rightcol ul {  list-style-position: inside; list-style-position: none; margin-left: 1em; }
#rightcol ul a { font-size: 14px; }
#rightcol ul a:hover { border: 0;  }
#rightcol li { margin-bottom: 10px; }
#subscribe {  float: right; padding: 19px 10px; margin: 40px 15px 0 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#custom {  float: right; margin: 40px 0 0 0; padding: 19px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Como podem verificar o código é exactamente o que possuo no meu blog o qual podem editar conforme pretenderem e adaptarem ao layout do vosso blog.

2º PASSO

Painel de Administração do Thesis e em custom_functions.php colem os eguinte código.

function post_footer() {
	if (is_single())
	{
	?>
	<div class="postauthor">
		<?php echo get_avatar( get_the_author_id() , 100 ); ?>
		<h4>Artigo por <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
		<p><?php the_author_description(); ?></p>
		<p class="hlight"><?php the_author_firstname(); ?> já escreveu <span><?php the_author_posts(); ?></span> fantásticos artigos para o DinheiroPT.</p>
	</div>

	<div id="similar">
		<h3></h3>
		<p><?php similar_posts(); ?></p>
	</div>

	<div id="rightcol">
		<div id="subscribe">
			<h3></h3>
			<p>Só gostou deste artigo irá definitivamente adorar os que virão. Subscreva o feed e mantenha-se actualizado.</p>
			<ul>
				<li><a href="http://feeds.feedburner.com/dinheiroptcom">Subscrever RSS Feed</a></li>
				<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=dinheiroptcom&amp;loc=pt_BR">Subscrever RSS Email </a></li>
			</ul>
		</div>

		<div id="custom">
			<center><a href="http://www.dinheiropt.com/comprar-thesis" title="Comprar Thesis Theme"><img src="http://www.dinheiropt.com/wp-content/uploads/2010/05/thesispostfooter.jpg" alt="Comprar Thesis Theme"/></a></center>
		</div>
	</div>
	<?php
	}
}
	add_action('thesis_hook_after_post_box', 'post_footer');

De igual modo devem actualizar tudo o que pretenderem por forma a adaptarem aos vossos blogs.

Até já…