Há algum tempo que desejávamos iniciar esta série de artigos, a partir da qual esperamos ajudá-lo a aprender como criar um template WordPress. Esta série irá analisar passo-a-passo todas as diferentes fases do desenvolvimento de um template para WordPress, e para que você consiga analisar e implementar todas elas, decidimos partir esta ideia em vários artigos mais simples de assimilar e explorar. No final da série, certamente conseguirá criar seu template WordPress!
Os templates wordpress são hoje em dia cada vez mais procurados e podem ser facilmente criados com o intuito de serem vendidos em mercados como a Theme Forest ou a Mojo Themes. Qualquer pessoa que deseje entrar neste mundo fascinante do desenvolvimento de templates para wordpress, pode posteriormente comercializá-los nesses mercados e começar a ganhar dinheiro produzindo templates de qualidade.
Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!
Vejamos algumas das competências do template que vamos desenvolver ao longo dos próximos artigos:
- Otimização para motores de busca
- Marcação com suporte Microformato da Google
- Semântica da estrutura de marcação válida e lógica que pode ser usada em qualquer template
- Layouts de CSS inteligentes
- Classes dinâmicas para o corpo, postagens e comentários
- Trackbacks e comentários em árvore separados
- 2 áreas para widgets que desaparecem quando não estão ocupadas
- Tudo o resto que é normal num template WordPress
No final desta série de tutoriais, com o código feito e pronto a ser implementado, você poderá fazer praticamente tudo aquilo que desejar com ele. Você pode inclusive olhar para o resultado final como a sua framework WordPress de trabalho.
CONSTRUINDO O FICHEIRO COMMENTS.PHP
Qualquer desenvolvedor que se preze odeia programar o template de comentários do WordPress. Na verdade ele poderá tornar-se uma verdadeira confusão. Na versão 2.7, o WordPress introduziu felizmente uma forma mais fácil de criar templates para comentários — o que na verdade não foi grande ajuda se você desejar separar seus comentários e trackbacks ou desejar introduzir algumas funcionalidades customizadas. Continua sendo confuso.
Felizmente para você, tentámos recriar um template de forma mais fácil. Continua confuso, mas ainda assim mais simples, presumo. Para este tutorial sobre o desenvolvimento do template de comentários, vamos tentar guiá-lo sobre o que vai acontecer, mostrar-lhe algumas porções de código interessantes e que você vai necessitar de adicionar ao ficheiro functions.php, e depois então apresentar o código completo e final. Se tudo correr bem, no final fará sentido.
Vejamos o que irá acontecer neste template.
- Prevenir o carregamento de páginas por robots
- Verificar se há comentários
- Contar o número de comentários e trackbacks (ou pings)
- Se existirem comentários, mostrar esses comentários — com navegação para paginação de comentários
- Se existirem trackbacks, mostrar os trackbacks
- Se os comentários estiverem ligados, mostrar o formulário de “resposta”
Na verdade é muita coisa para um template só, mas penso que conseguiremos explicar-lhe como tudo isso funciona.
CHAMANDO OS COMENTÁRIOS E TRACKBACKS DE FORMA CUSTOMIZADA
Agora, com o WordPress 2.7 foi lançada a função wp_list_comments() que apresenta uma lista desordenada de comentários e trackbacks para os seus artigos (em árvore também). Pode ser conveniente se você assim o desejar. Mas para nós não. Nós queremos comentários em árvore separados dos trackbacks, e customizados à nossa maneira.
Para criar o código do template de comentários vamos dar-lhe algum trabalho. Você irá necessitar de criar chamadas customizadas para a sua lista de Comentários e Trackbacks. Adicione as seguintes 2 funções ao seu ficheiro functions.php.
// Chamada customizada de comentários
function custom_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
$GLOBALS['comment_depth'] = $depth;
?>
<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
<div class="comment-author vcard"><?php commenter_link() ?></div>
<div class="comment-meta"><?php printf(__('Posted %1$s at %2$s <span class="meta-sep">|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>', 'seu-template'),
get_comment_date(),
get_comment_time(),
'#comment-' . get_comment_ID() );
edit_comment_link(__('Edit', 'seu-template'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>
<?php if ($comment->comment_approved == '0') _e("\t\t\t\t\t<span class='unapproved'>Your comment is awaiting moderation.</span>\n", 'seu-template') ?>
<div class="comment-content">
<?php comment_text() ?>
</div>
<?php // echo the comment reply link
if($args['type'] == 'all' || get_comment_type() == 'comment') :
comment_reply_link(array_merge($args, array(
'reply_text' => __('Reply','seu-template'),
'login_text' => __('Log in to reply.','seu-template'),
'depth' => $depth,
'before' => '<div class="comment-reply-link">',
'after' => '</div>'
)));
endif;
?>
<?php } // end custom_comments
// Chamada customizada para listar trackbacks
function custom_pings($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
?>
<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
<div class="comment-author"><?php printf(__('By %1$s on %2$s at %3$s', 'seu-template'),
get_comment_author_link(),
get_comment_date(),
get_comment_time() );
edit_comment_link(__('Edit', 'seu-template'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>
<?php if ($comment->comment_approved == '0') _e('\t\t\t\t\t<span class="unapproved">Your trackback is awaiting moderation.</span>\n', 'seu-template') ?>
<div class="comment-content">
<?php comment_text() ?>
</div>
<?php } // end custom_pings
Iremos necessitar também de uma função customizada que o custom_comments() está chamando. Esta função irá fazer a marcação do gravatar que estamos a usar, mas que ele se enquadre no esquema de microformato para hcard.
// Produz um avatar compatível com hCard
function commenter_link() {
$commenter = get_comment_author_link();
if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {
$commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );
} else {
$commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );
}
$avatar_email = get_comment_author_email();
$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );
echo $avatar . ' <span class="fn n">' . $commenter . '</span>';
} // end commenter_link
Se você pretende mudar a dimensão original do seu gravatar, troque o valor de 80 na função get_avatar( $avatar_email, 80 ) ). O valor 80 é a dimensão em pixeis para o seu gravatar.
O TEMPLATE DE COMENTÁRIOS
Vejamos então o template de comentários com algums comentários PHP que o vão ajudar a compreender melhor as funcionalidades presentes no template.
<?php /* O template de comentários! */ ?>
<div id="comments">
<?php /* Correr algumas verificações para robots artigos protegidos com password */ ?>
<?php
$req = get_option('require_name_email'); // Verifica se os campos são obrigatórios.
if ( 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']) )
die ( 'Please do not load this page directly. Thanks!' );
if ( ! empty($post->post_password) ) :
if ( $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password ) :
?>
<div class="nopassword"><?php _e('This post is password protected. Enter the password to view any comments.', 'seu-template') ?></div>
</div><!– .comments –>
<?php
return;
endif;
endif;
?>
<?php /* Verificar se há comentários e fazer coisas! */ ?>
<?php if ( have_comments() ) : ?>
<?php /* Contar o número de comentários e trackbacks (ou pings) */
$ping_count = $comment_count = 0;
foreach ( $comments as $comment )
get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;
?>
<?php /* Se existire comentários, mostrar os comentários */ ?>
<?php if ( ! empty($comments_by_type['comment']) ) : ?>
<div id="comments-list" class="comments">
<h3><?php printf($comment_count > 1 ? __('<span>%d</span> Comments', 'seu-template') : __('<span>One</span> Comment', 'seu-template'), $comment_count) ?></h3>
<?php /* Se existirem comentários suficientes, construir a paginação de comentários */ ?>
<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>
<div id="comments-nav-above" class="comments-navigation">
<div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>
</div><!– #comments-nav-above –>
<?php endif; ?>
<?php /* Uma lista ordenada de comentários, custom_comments(), in functions.php */ ?>
<ol>
<?php wp_list_comments('type=comment&callback=custom_comments'); ?>
</ol>
<?php /* Se existirem comentários suficientes, construir a navegação */ ?>
<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>
<div id="comments-nav-below" class="comments-navigation">
<div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>
</div><!– #comments-nav-below –>
<?php endif; ?>
</div><!– #comments-list .comments –>
<?php endif; /* if ( $comment_count ) */ ?>
<?php /* Se existirem trackbacks(pings), mostrar os trackbacks */ ?>
<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<div id="trackbacks-list" class="comments">
<h3><?php printf($ping_count > 1 ? __('<span>%d</span> Trackbacks', 'seu-template') : __('<span>One</span> Trackback', 'seu-template'), $ping_count) ?></h3>
<?php /* Uma lista ordenada de trackbacks, custom_pings(), in functions.php */ ?>
<ol>
<?php wp_list_comments('type=pings&callback=custom_pings'); ?>
</ol>
</div><!– #trackbacks-list .comments –>
<?php endif /* if ( $ping_count ) */ ?>
<?php endif /* if ( $comments ) */ ?>
<?php /* Se os comentários estiverem ligados, criar o formulário de resposta */ ?>
<?php if ( 'open' == $post->comment_status ) : ?>
<div id="respond">
<h3><?php comment_form_title( __('Post a Comment', 'seu-template'), __('Post a Reply to %s', 'your-theme') ); ?></h3>
<div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p id="login-req"><?php printf(__('You must be <a href="%s" title="Log in">logged in</a> to post a comment.', 'seu-template'),
get_option('siteurl') . '/wp-login.php?redirect_to=' . get_permalink() ) ?></p>
<?php else : ?>
<div class="formcontainer">
<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">
<?php if ( $user_ID ) : ?>
<p id="login"><?php printf(__('<span class="loggedin">Logged in as <a href="%1$s" title="Logged in as %2$s">%2$s</a>.</span> <span class="logout"><a href="%3$s" title="Log out of this account">Log out?</a></span>', 'seu-template'),
get_option('siteurl') . '/wp-admin/profile.php',
wp_specialchars($user_identity, true),
wp_logout_url(get_permalink()) ) ?></p>
<?php else : ?>
<p id="comment-notes"><?php _e('Your email is <em>never</em> published nor shared.', 'your-theme') ?> <?php if ($req) _e('Required fields are marked <span class="required">*</span>', 'seu-template') ?></p>
<div id="form-section-author" class="form-section">
<div class="form-label"><label for="author"><?php _e('Name', 'seu-template') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'seu-template') ?></div>
<div class="form-input"><input id="author" name="author" type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>
</div><!– #form-section-author .form-section –>
<div id="form-section-email" class="form-section">
<div class="form-label"><label for="email"><?php _e('Email', 'seu-template') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'seu-template') ?></div>
<div class="form-input"><input id="email" name="email" type="text" value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>
</div><!– #form-section-email .form-section –>
<div id="form-section-url" class="form-section">
<div class="form-label"><label for="url"><?php _e('Website', 'seu-template') ?></label></div>
<div class="form-input"><input id="url" name="url" type="text" value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>
</div><!– #form-section-url .form-section –>
<?php endif /* if ( $user_ID ) */ ?>
<div id="form-section-comment" class="form-section">
<div class="form-label"><label for="comment"><?php _e('Comment', 'seu-template') ?></label></div>
<div class="form-textarea"><textarea id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea></div>
</div><!– #form-section-comment .form-section –>
<div id="form-allowed-tags" class="form-section">
<p><span><?php _e('You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:', 'seu-template') ?></span> <code><?php echo allowed_tags(); ?></code></p>
</div>
<?php do_action('comment_form', $post->ID); ?>
<div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php _e('Post Comment', 'seu-template') ?>" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>
<?php comment_id_fields(); ?>
<?php /* O código termina aqui. Está feito. Vamos encerrá-lo. */ ?>
</form><!– #commentform –>
</div><!– .formcontainer –>
<?php endif /* if ( get_option('comment_registration') && !$user_ID ) */ ?>
</div><!– #respond –>
<?php endif /* if ( 'open' == $post->comment_status ) */ ?>
</div><!– #comments –>
E está feito! Acaba de criar o seu template de comentários com estilo e alguns pormenores bem interessantes.
ESTÁ ACOMPANHANDO? TEM DÚVIDAS?
Este sétimo artigo teve como base a programação do template de comentários e sua devida otimização. O mais importante neste momento é que você compreenda os passos que vamos dando e caso tenha dúvidas, poderá colocá-las sem problema. Contamos com a sua participação e as suas dúvidas. Está gostado? Participe com seus comentários!
Se não deseja perder pitada desta nova série sobre Como criar um Template WordPress, considere assinar a nossa newsletter e receber todos os próximos artigos por email e comodamente. É grátis!
Até Já!
