Download (baixado 2084 vezes)

• HTML5 e CSS3
• @Font-Face
• Paginação de Posts e Comentários
• Comentário do autor do blog destacado
• Função replay nos comentários
• Suporte a thumbnail
• Posts relacionados, arquivos e resultados da busca com thumbnail
• Imagem com largura do post (como uso aqui no blog: class="alignnone" e largura 600px)

Dúvidas nos comentários desse post ou na página de Perguntas.

Regras de sempre: não pode redistribuir, usar comercialmente e nem restirar os créditos. Have fun

Faz a mesma função do plugin Different Posts Per Page, ou seja, mostra números diferentes de posts nos arquivos, busca e categorias.

O número de posts mostrados na Home do site, pode ser definido em Settings/Reading "Blog pages show at most".

Para mostrar um número diferente desse nas páginas arquivos, busca e categorias, basta alterar o loop dos arquivos search.php e archive.php, substituindo:

<?php while (have_posts()) : the_post(); ?>

por

<?php query_posts($query_string.'&posts_per_page=10'); while (have_posts()) : the_post(); ?>

O valor "10" é a quantidade de posts que você quer mostrar. Basta alterar da maneira que achar melhor.

Function Reference: http://codex.wordpress.org/Template_Tags/query_posts

Mostra uma lista com os posts mais populares.

Adicione ao seu arquivo sidebar.php

<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> [<?php echo $commentcount ?>]</li>
<?php } } ?>
</ul>

Troque o "5" pela quantodade de posts que você quer mostrar.

Mostra uma imagem no lugar do nome da categoria.

Mostrar imagens de todas as categorias de cada post

Vamos supor que você tenha mais de uma categoria associada a um post e queira mostrar uma imagem para cada uma delas. Para isso, adicione onde quer que as imagens da categoria apareçam (index.php, single.php...):

<?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
echo "<a href=\"/category/";
echo $catname;
echo "/\">";
echo "<img src=\"/wp-content/cat-icons/";
echo $catname;
echo ".png\" alt=\"$catname category image\" /></a>\n";
}
?>

Crie uma pasta com o nome cat-icons dentro da pasta "wp-content".

As imagens que você dará para cada categoria deverão ter o nome da categoria. Por exemplo, a minha categoria "Photos", tem uma imagem com o nome "photos.png". Se quiser salvar as imagens em outro formato como jpeg por exemplo, basta substituir na linha 9 .png por .jpeg

Envie as imagens de cada categoria para /wp-content/cat-icons.

Tutorial original: http://www.jtpratt.com

Mostrar apenas uma imagem por post

Eu tenho várias categorias para cada post e queria mostrar a imagem apenas da categoria parent, ou seja a categoria mãe, então modifiquei o código anterior. Veja um exemplo, a categoria "Blog" é a parent, a mãe, as demais mostradas, são child, ou seja as categorias filhas:

Então para associar uma imagem para a categoria "Blog" na hora de fazer o post eu marco "Blog" e se desejar uma ou mais das categorias filhas.

Para mostrar a imagem, adicione onde quer que as imagens da categoria apareçam (index.php, single.php...):

<?php $parentscategory =""; foreach((get_the_category()) as $category){
if ($category->category_parent == 0) {
$catname =$category->category_nicename;
echo "<a title=\"Categoria $catname\" href=\"/category/";
echo $catname;
echo "/\">";
echo "<img src=\"/wp-content/cat-icons/";
echo $catname;
echo ".png\" alt=\"$catname category image\"/></a>\n";
}
}
echo substr($parentscategory,0,-2); ?>

Modifique da mesma forma que a primeira parte do tutorial e configure o CSS como desejar. O resultado será esse:

Formulário de contato simples para WordPress

1. Faça o download do arquivo contact-form.zip, descompacte e envie para a pasta do seu tema.

2. Acesse o arquivo pelo painel de administração (Appearance/Editor), dê um ctrl + F para localizar seuemail@mail.com em 2 locais e substitua pelo email onde você quer receber seu contato.

3. Para adicionar o formulário a uma página, vá em Pages/Add New e ao lado direito localize "Template". Escolha a opção "Contact Form", salve e publique a página.

O resultado pode ser visto na minha página de Contato .

O formulário original: www.techtipsgeek.com foi traduzido, validado o html, corrigida a função replay e adicionado o campo "site/blog"

Mostra os feeds de outro site no seu blog sem a necessidade de plugin. Trabalha da mesma forma que o plugin WP-RSS Import.

Basta adicionar ao seu arquivo sidebar.php ou onde preferir:

<?php include_once(ABSPATH.WPINC.'/feed.php');
$rss = fetch_feed('http://feeds.feedburner.com/trueluv');
$maxitems = $rss->get_item_quantity(5);
$rss_items = $rss->get_items(0, $maxitems);
?>
<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'
title='<?php echo 'Postado '.$item->get_date('j F Y | g:i a'); ?>'>
<?php echo $item->get_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>

Na linha "2" troque http://feeds.feedburner.com/trueluv pelo endereço de feeds a ser mostrado.

Na linha "3" o número 5 determina a quantidade de posts a serem mostrados.

Tuto original: www.wpbeginner.com

Mais uma funçãozinha daquelas que a gente adora para substituir o uso de plugins
Como o nome já diz, faz a paginação de posts. Exemplo:

1. Abra o arquivo functions.php do seu tema e adicione:

function pagination($pages = '', $range = 5)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == ''){
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages){
$pages = 1;
}
}
if(1 != $pages){
echo "<div class=\"pagination\"><span class=\"current\">Página ".$paged." de ".$pages."</span>";
if($paged > 1 && $showitems < $pages) echo "<a title=\"Anterior\" href='".get_pagenum_link($paged - 1)."'>&laquo;</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a title=\"Página $i\" href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<a title=\"Próxima\" href=\"".get_pagenum_link($paged + 1)."\">&raquo;</a>";
echo "</div>\n";
}
}

Lembrando que deve estar sempre dentro de <?php e ?>

2. Abra seu arquivo index.php do seu tema (se quiser também pode colocar no search.php e archive.php) e adicione onde quer que mostre a paginação:

<?php pagination()?>

3. Adicione ao seu arquivo CSS e modifique como quiser:

.pagination {
clear: both;
margin:3px 1px;
text-align:center;
}
.pagination a {
margin:3px 1px;
padding: 3px 6px;
color: #fff;
background-color: #a1a1a1;
}
.pagination a:hover,.pagination .current, {
margin:3px 1px;
padding: 3px 6px;
color: #a1a1a1;
background-color: #f8f8f8;
}

Original daqui: wordpressapi.com, traduzido e modificado por mim.

Troquei a função desse tutorial porque o primeiro que postei, não funcionava corretamente na paginação dos arquivos.

Formulário de Contato
Compatível com WordPress 3.1. Para outras versões do wordpress, verifique a compatibilidade ou a disponibilidade de outra versão do plugin no site do autor.
Página do plugin: wordpress.org/extend/plugins/grunion-contact-form/

01. Faça o download do plugin Grunion Contact Form, descompacte e faça o upload para sua pasta de plugins (wp-content / plugins) e ative. Ou Clique em Plugins/Add New e instale o plugin.

02. Para adicionar o formulário a um post ou página, basta clicar no ícone "Add a Custom Form" como mostra a imagem abaixo:

03. Na janela que se abrirá, você pode adicionar ou remover campos e na aba "Email Notifications" configurar o email onde você quer receber o contato e o assunto:

Depois de configurar, é só clicar em "Add this form to my post".

04. Além de receber os formulários por email, você também pode visualizar todos eles clicando no menu lateral do painel de controle do WP em "Feedbacks".

Mostra posts relacionados com imagem e sem a necessidade de plugin.

01. Há duas formas de usar essa função, pode ser relacionando os posts por tags ou por categorias. Adicione uma das duas no seu arquivo index.php e/ou single.php:

Por Tags

<?php $orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 4, // Número de posts relacionados.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
f( $my_query->have_posts() ) {
echo '<h3>Posts Relacionados</h3><br />';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<div class="relacionados">
<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
<?php if(has_post_thumbnail()) {
the_post_thumbnail(array(120,120), array( 'class' => 'thumb' ));
} else {echo '<img src="/imagens/default.jpg" width="120" height ="120" class="thumb"/>';
}?></a>
<span class="titulo"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span>
</div>
<?
}
echo '';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Por Categorias

<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 4, // Número de posts relacionados.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<h3>Posts Relacionados</h3><br />';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<div class="relacionados">
<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
<?php if(has_post_thumbnail()) {
the_post_thumbnail(array(120,120), array( 'class' => 'thumb' ));
} else {echo '<img src="/imagens/default.jpg" width="120" height ="120" class="thumb"/>';
}?></a>
<span class="titulo"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span>
</div>
<?
}
echo '';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Observe que na linha "10" é possível alterar a quantidade de posts a serem mostrados.
Na linha "21" em 120,120 você define largura e altura.
E por fim, na linha "22" altere o endereço "/imagens/default.jpg" pelo endereço de sua imagem default, que aparecerá no caso do post não possuir uma.

2. Adicione ao seu CSS:

.relacionados {
margin:0 5px 0 0;
padding: 0 9px;
width:120px;
float:left;
}
.relacionados .titulo {
padding:0 0 0 5px;
font-size: 11px;
width:130px;
text-align: center;
}
.thumb{
float: left;
margin: 0px 8px 5px 3px;
background-color: #f8f8f8;
padding: 6px;
}

Altere como achar necessário.

Obs. Para este tutorial funcionar corretamente, você tem que habilitar o uso de thumbnails no seu tema: http://true-luv.com/post-thumbnail/

Traduzido e modificado daqui: wpbeginner.com

A imagem "sem imagem" utilizada aqui no TL não está disponível para ser usada em outros blogs/sites. Obrigada.

Essa função é bem legal para blogs com vários autores. Como o título já diz, ela mostra uma listagem com avatar de todos os usuários registrados. Exemplo

1. Adicione ao arquivo functions.php do seu tema:

function contributors() {
global $wpdb;
$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");
foreach($authors as $author) {
echo "<li>";
echo "<a href=\"".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "\">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div id="authorlist">';
echo "<a href=\"".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "\">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "</div>";
echo "</li>";
}
}

Quem usa o plugin User Photo, deve substituir a linha:

echo get_avatar($author->ID);

por

echo userphoto($author->ID);

2. Para deixar em duas colunas como no exemplo, adicione ao CSS do seu tema:

#authorlist{
width: 100%;
margin: 0 0 5px 0;
border:none;
}
#authorlist ul{
margin: 0;
padding: 0;
}
#authorlist ul li {
float:left;
margin:0;
padding:0;
list-style-type:none;
}
#authorlist li {
display: block;
width: 247px;
height: 60px;
height: auto;
margin: 0 0 0 2px;
padding: 2px;
border-bottom:0px solid #e8e8e8;
}
#authorlist img.photo {
width: 30px;
height: 30px;
margin: 5px 10px 5px 0;
padding: 4px;
}
#authorlist div.authname {
margin: 19px 0 0 10px;
}
html>body .links ul li a {
width: 247px;
}

3. Onde você quer que a listagem apareça, use:

<div id="authorlist"><ul><?php contributors(); ?></ul></div>

Tutorial adaptado daqui: wpbeginner

Listagem apenas com o nome dos usuários registrados

Se você quer uma lista simples, apenas com o nome dos usuários registrados, esquece tudo que já foi dito e use apenas:

<?php wp_list_authors('show_fullname=1&optioncount=0'); ?>

Os parâmetros dessa função podem ser vistos aqui: http://codex.wordpress.org/Function_Reference/wp_list_authors