UMA VISITA GUIADA PELO TEMA NOTES BLOG - Smashing Wordpress

Este é um bom momento para incluir algumas palavras sobre o tema Notes Blog. É possível fazer o download do tema gratuitamente em http://notesblog.com e o design e manutenção do tema são assinados por este que vos fala. Na verdade, o tema pretende ser um hospedeiro para temas fi lhos, dos quais falaremos mais tarde, mas como qualquer bom tema, ele funciona perfeitamente bem sozinho.

Falaremos bastante do tema Notes Blog a partir de agora, por isso esta seção irá guiar você pelo o tema básico, decompondo cada uma de suas partes para ilustrar a forma como um tema de WordPress minimalista pode ser construído. Faça o download do tema completo em

http://notesblog.com para que você possa compreender as partes dentro de um panorama.

Lembre-se de que tudo o que diz respeito ao cabeçalho do documento está em header.php, o que diz respeito ao rodapé está em footer.php, e o conteúdo da barra lateral está em sidebar.php. A funcionalidade de comentários está em comments.php e, por fi m, as informações do tema estão no arquivo style.css, juntamente com quaisquer estilos básicos que você possa ter. Isso tudo vai envolver bastante código, embora eu vá me ater às partes mais importantes.

FOLHA DE ESTILO: STYLE.CSS

A primeira coisa que qualquer tema precisa é de uma folha de estilo. Além de conter o código com as informações do tema de fato, no topo, a folha de estilo também é o local onde a maior parte do design deve ser gerenciada. Se você quiser fazer alguma coisa com CSS, deve colocar tudo em style.css.

A primeira coisa que aparece, no topo da folha de estilo, são as informações do tema:

Theme Name: Notes Blog

Theme URI: http://notesblog.com/

Description: The Notes Blog theme is a clean blog theme created for your enjoyment. <a href="http://tdh.me/">Made by TDH</a> and maintained at <a href="http://notes blog.com/">notesblog.com</a>. Requires WordPress 3.1 or higher.

Version: 0.2.8

Tags: light, two-columns, right-sidebar, fi xed-width, threaded-comments, sticky-post,

translation-ready, custom-background, custom-menus Author: Thord Daniel Hedengren

Author URI: http://tdh.me/

License: GNU General Public License License URI: license.txt

Get support and services for the Notes Blog theme: http://notesblog.com

Created and managed by Thord Daniel Hedengren: http://tdh.me

Nada de estranho ou mirabolante até aí. Os designers de temas vão gostar de saber que o campo de descrição suporta algum código HTML básico.

Seguindo adiante, temos um segmento de reset. Em geral, sou contra a prática popular de aplicar um reset de margem e preenchimento em tudo, uma vez que muitos elementos não possuem essas confi gurações. Dito isso, alguns resets são úteis, como o exemplo a seguir, relativamente extenso:

/* ===== RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,

dl, dt, dd, ol, ul, li, fi eldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td { border: 0; margin: 0; padding: 0; vertical-align: baseline; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; }

Atenção para o fato de que ao longo deste livro omiti a maior parte do estilo de fonte e links, que detalham as fontes e cores utilizadas, para economizar espaço. A maior parte do código de estilo é bem simples. Aconselho os leitores a mergulharem mais fundo no código, fazendo o download da versão completa em http://notesblog.com. Simplesmente abra o arquivo style.css para ter uma visão geral, e perceba as diferenças.

A seção de layout é relativamente extensa, e controla todos os elementos principais, mas a aparência do conteúdo dentro dos elementos não está detalhada. A seção completa não é apresentada aqui devido à sua extensão, mas você deve dar uma olhada no código para se familiarizar com a estrutura geral. Você irá perceber algumas classes genéricas, em um primeiro momento, para alinhamento e larguras de coluna típicas, mas depois disso o código consiste essencialmente dos blocos essenciais que compõe o tema. Embora a maior parte desse arquivo seja autoexplicativa, olhe com mais atenção para a seção de

comentários.

ol.commentlist { margin: 20px 0 20px 20px; padding: 20px 20px 1px 20px; background: #e9e9e9; }

li.comment {}

div.comment-author {}

div.comment-author img { fl oat: left; margin-right: 10px; }

div.comment-author cite { font-weight: bold; font-style: normal; } div.comment-meta { margin-bottom: 10px; }

div.comment-body {}

div.comment-body p { margin-left: 16px; padding: 5px 0 5px 20px; border-left: 1px dotted #fff; }

div.reply { margin-top: 0; padding-bottom: 10px; border-bottom: 1px dotted #fff; text-align: right; } li.comment ul.children { margin: 20px 0 0 20px; } li.depth-1 { margin-bottom: 20px; }

li.byuser {} li.bypostauthor {}

li.pingback { padding: 10px 10px 1px 10px; background:#efefef; } li.pingback p, li.pingback div.reply { display:none; }

Isso deve ser bastante autoexplicativo. Os comentários são gerados dentro do elemento

ol.commentlist, e cada comentário é, em si, um item em uma lista. Depois disso, vem a área div#respond, com as formas necessárias para enviar um comentário.

Há apenas duas outras coisas que quero ressaltar em style.css. A primeira delas está rotulada como Elements & Design, no arquivo. Trata-se basicamente de manipulação de imagens, alinhamentos de texto e outras coisas de que o WordPress necessita para a saída padrão.

/* ================= ELEMENTOS & DESIGN */

p.right { text-align:right; } p.center { text-align:center; }

p.admin { color: #aaa; font-size: 12px; }

p.nocomments { padding: 0 20px; font-style: italic; color: #777; } div#content embed, .embedded { text-align:center; margin: 0 0 14px 0; padding-left:0; border:0; } /* para vídeos */

blockquote { margin: 0 0 16px 20px; padding: 0 20px; border: 1px solid #e9e9e9;

border-width: 0 0 0 1px; }

blockquote.pullquote { width: 220px; padding: 5px 0; border: 0; font-size: 18px; line-height: 150%; }

blockquote.pullquote p { margin-bottom: 0; } ol.commentlist li blockquote { border: 0; padding:0; } /* Imagens e alinhamentos */

.alignleft, blockquote.alignleft { margin: 0 20px 20px 0; } .alignright, blockquote.alignright { margin: 0 0 20px 20px; }

img.aligncenter, .aligncenter { margin: 0 auto 16px auto; text-align:center; } .frame { padding: 1px; border: 1px solid #e9e9e9; }

.wp-caption { padding: 20px 18px; border: 1px solid #e9e9e9; color: #888; font-style: italic; text-align:center; }

p.wp-caption-text { margin: 10px 0 0 0 !important; padding:0; font-size: 12px; line-height: 14px !important; }

div.gallery { margin-bottom: 14px; } dl.gallery-item {}

img.attachment-thumbnail { border:0; }

dd.gallery-caption { margin-top: 8px; font-size: 12px; color: #777; ont-style: italic; }

/* Ajustes rápidos de cor */ div.postmeta { color: #777; } span.alert { color: red; }

div#content strong { color: #333; }

Entre os elementos que chamam atenção no código acima estão as classes de imagem (img.frame foi uma adição minha; incluo isso em quase todos os meus temas para acrescentar bordas elegantes às imagens) e as classes para legendas de imagem wp-caption. Outro elemento que merece destaque é o estilo que o Notes Blog possui para formatos de postagem (do inglês, “post formats”). Os formatos de postagem precisam ser ativados antes de sua utilização, mas são extremamente úteis. As tarefas que costumavam ser manipuladas com categorias ou campos personalizados podem agora ser gerenciadas pelos formatos de postagem, usando conditional tags para gerenciar o conteúdo de forma diferente ou aplicando estilos ao conteúdo, como é o caso no exemplo abaixo:

/* ============

FORMATOS DE POSTAGEM */

.format-aside { margin-left: 25px; margin-right: 25px; padding: 0 10px 0 20px; border-left: 1px solid #efefef; }

.format-aside h2.entry-title { margin-bottom: 6px; font-size: 16px; line- height: 16px; }

.format-aside div.entry-meta { display:none; } .format-aside div.entry-content {}

.format-aside div.entry-content p { color: #666; font-size: 14px; margin- bottom: 14px; }

Como você pode ver, trata-se de apenas um formato de postagem, chamado aside, nesse exemplo. A classe format-aside é automaticamente gerada porpost_class(), que você verá mais adiante neste capítulo.

Isso não foi tão complicado assim, não é mesmo? Lembre-se de que o Notes Blog pretende ser um tema simples para servir de base para você construir o seu, por isso grande parte dos elementos decorativos que você normalmente acrescentaria fi caram de fora, assim como as imagens.

CABEÇALHO DO TEMA: HEADER.PHP

Quando o tema ativo é carregado, ele começa com o arquivo header.php. É aqui que você coloca todos os metadados, dispara o WordPress com wp_head() e normalmente coloca o cabeçalho da sua página:

<!DOCTYPE html>

<?php

// Imprimir o título certo if (is_home () ) {

bloginfo('name');

} elseif (is_category() || is_tag()) {

single_cat_title(); echo ' • ' ; bloginfo('name'); } elseif (is_single() || is_page()) {

single_post_title(); } else { wp_title('',true); }

?> </title>

<link rel="profi le" href="http://gmpg.org/xfn/11" />

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

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php

// Javascript para comentários

if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); // Use este gancho para inserir o que quiser em HEAD notesblog_inside_head(); // Iniciar o WordPress wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="site"> <?php

// Use este gancho para inserir o que quiser antes de wrap notesblog_above_site(); ?> <div id="wrap"> <div id="header"> <div class="header-widgetarea"> <ul id="header-widgets"> <?php

// Acrescentar a área de widgets ao lado do logotipo, empty por padrão dynamic_sidebar('beside-the-logo'); ?> </ul> </div> <?php if (is_home() || is_front_page()) { ?> <h1 id="site-header">

<a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>">

<?php bloginfo('name'); ?> </a>

<?php } else { ?>

<div id="site-header">

<a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"> <?php bloginfo('name'); ?> </a> </div> <?php } ?> </div> <div id="blog"> <div id="top-navigation"> <?php wp_nav_menu('top-navigation'); ?> </div> <?php

// Use este gancho para fazer o que quiser entre o menu e o conteúdo principal

notesblog_below_menu(); ?>

A primeira coisa típica do WordPress que aparece aqui é a title tag (tag de título). Aqui, utilizo conditional tags para gerar um título levemente diferente dependendo de onde o visitante estiver, dentro do site. Se você estiver em uma página, obterá o título da página, um arquivo de tag fará a tag aparecer no título, e assim por diante. É possível escrever coisas bem elaboradas aqui, mas eu mantive a coisa simples para esta versão. Seguindo adiante, o trecho Comment

javascript pode causar alguma confusão. O que quero fazer é carregar o JavaScript necessário para as respostas para discussões (threads) nos comentários, mas apenas em postagens simples e páginas (daí a conditional tag is_singular(), que verifi ca apenas isso). Eu utilizo wp_enqueue_script() para garantir que isso seja carregado corretamente com o WordPress, a partir da pasta wp-include/js/.

Na mesma seção, você também encontrará notesblog_inside_head(), um gancho que permite aos desenvolvedores inserir o código onde ele está localizado — neste caso, dentro da seção head do site. Você aprenderá mais sobre isso mais adiante, mas por enquanto é o sufi ciente saber que a presença dessa pequena linha, juntamente com a declaração de sua existência em functions.php (do qual também falaremos mais adiante) torna possível inserir código ali a partir do exterior, por assim dizer. Mais além, em index.php você encontrará outros dois ganchos: notesblog_above_site() e notesblog_below_menu(). É uma boa ideia colocar wp_head() logo antes de fechar a tag head; é isso que inicializa o WordPress. Além disso, observe body_class() na tag body, que faz mais ou menos o que

post_class() faz pelas postagens, ou seja, adiciona várias classes CSS dependendo do local em que o visitante se encontra, dentro do site. Isso é muito útil para os designers de temas. Você talvez perceba a ausência desta linha:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

Isso se deve ao fato de que você não quer que as pessoas erradas descubram qual a versão do WordPress que você está rodando. Por que facilitar para os hackers mais do que o necessário, não é mesmo?

A linha dynamic_sidebar() é uma área de widget, situada ao lado do logotipo. A

propósito, embora eu use bloginfo() para a saída do título do site, a URL apontando para a página inicial é um echo de home_url(), o que é uma prática recomendada hoje em dia. Você também vai perceber que, dependendo de se você está na página inicial (verifi cação com

is_home() e is_front_page(), respectivamente), o título será envolvido por uma tag

h1, caso contrário, ele aparece dentro de div#site-header, mas ambos terão a mesma aparência. (Consulte o arquivo style.css para confi rmar essa informação!) A razão para isto é apenas para agradar aos mecanismos de busca. Na primeira página, o título do site é o

cabeçalho mais alto, mas em uma postagem, por exemplo, o título do site não é tão importante quanto o título da postagem, então nesse caso vou incluir o título do site em uma div, e deixar que o título da postagem seja h1.

Por fi m, temos wp_nav_menu(), que é uma área de menu, assim como dynamic_

sidebar() é uma área de widget. Falaremos de todas essas coisas bacanas em maior profundidade à medida que formos adiante. Os widgets e menus são declarados e defi nidos em functions.php, e então populados no admin do WordPress usando a interface adequada. Os arquivos de tema usam as tags dynamic_sidebar() para widgets e wp_nav_menu() para menus, como marcadores (placeholders) onde será exibido o conteúdo que colocar nelas.

MODELO PRINCIPAL: INDEX.PHP

Houve um tempo em que index.php continha todos os arquivos de fallback de que você precisasse, uma vez que esse é o modelo que será usado na ausência de um modelo mais adequado. No entanto, hoje você pode extrair o loop, que é o que faz funcionar o WordPress, dos arquivos de modelo para arquivos de loop. Por isso mesmo o index.php do tema Notes Blog é curto e grosso:

<?php get_header(); ?>

<div id="content" class="widecolumn"> <?php

// Buscar loop-index.php, fallback para loop.php get_template_part( 'loop', 'index' );

?> </div>

<?php get_sidebar(); ?> <?php get_footer(); ?>

É bem simples, como você pode ver. Primeiramente, você carrega o modelo com header.php

get_ header(), e então começa a div de conteúdo. Nesse arquivo, você encontra uma tag

get_template_part(), que inclui o loop, buscando primeiramente loop-index.php e, na ausência dele, revertendo para loop.php. No Notes Blog, não há um arquivo loop-index.php, por isso o tema irá carregar loop.php (sobre o qual vai aprender muito em breve).

O modelo index.php termina chamando primeiramente o modelo sidebar.php com get_

LOOP: LOOP.PHP

Você aprendeu sobre o loop no capítulo anterior, mas vamos refrescar sua memória rapidamente por aqui. O loop de fallback em Notes Blog é, obviamente, loop.php, mas há alguns loops utilizados para a primeira página, assim como para postagens individuais, páginas e visualização de anexos. Dê uma olhada em loop.php, onde tudo isso está detalhado:

<?php

// Sempre que possível, exibir a navegação no topo if ( $wp_query->max_num_pages > 1 ) : ?>

<div id="nav-above" class="navigation"> <div class="nav-previous">

<?php next_posts_link( _ _( '<span class="meta-nav">←</span> Older posts', 'notesblog' ) ); ?>

</div>

<div class="nav-next">

<?php previous_posts_link( _ _( 'Newer posts <span class="meta-nav">→</span>', 'notesblog' ) ); ?> </div>

</div> <?php endif; ?> <?php

// Erro 404 Página Não Encontrada ou arquivos vazios, etc. if ( !have_posts() ) : ?>

<div id="post-0" class="post error404 not-found"> <h1 class="entry-title">

<?php _e( 'Not Found', 'notesblog' ); ?> </h1>

<?php _e( 'Sorry, there is nothing here. You might want to try and search for whatever it was you were looking for?', 'notesblog' ); ?> </p> <?php get_search_form(); ?> </div> </div> <?php endif; ?> <?php // Loop básico

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

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php

// Use este gancho para fazer o que quiser acima do título da postagem notesblog_above_post_title_listing();

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"> <?php the_title(); ?> </a> </h2> <?php

// Use este gancho para fazer o que quiser abaixo do título da postagem notesblog_below_post_title_listing();

?> <?php

// Para arquivos e resultados de busca, use the_excerpt() if ( is_archive() || is_search() ) : ?>

<?php

// Para todo o restante else : ?>

<?php wp_link_pages( array( 'before' => '<div class="page-link">' . _ _( 'Pages:', 'notesblog' ), 'after' => '</div>' ) ); ?> </div> <?php endif; ?> </div> <?php comments_template( '', true ); ?> <?php // Finalizar o loop endwhile; ?> <?php

// Sempre que possível, exibir a navegação na parte inferior if ( $wp_query->max_num_pages > 1 ) : ?>

<div id="nav-below" class="navigation"> <div class="nav-previous"> <?php next_posts_link( _ _( '<span class="meta-nav">←</span> Older posts', 'notesblog' ) ); ?>

</div>

<div class="nav-next">

<?php previous_posts_link( _ _( 'Newer posts <span class="meta-nav">→</span>', 'notesblog' ) ); ?> </div>

</div> <?php endif; ?>

Acho que o código já está bem documentado com comentários, mas mesmo assim, vou guiar você através dele.

A primeira coisa é um bloco para exibição de navegação, caso você precise fazer isso. Isso contemplaria saltar para a página anterior e para a próxima página em um arquivo de categoria, por exemplo.

<?php

// Sempre que possível, exibir a navegação no topo if ( $wp_query->max_num_pages > 1 ) : ?>

<div id="nav-above" class="navigation"> <div class="nav-previous">

<?php next_posts_link( _ _( '<span class="meta-nav">←</span> Older posts', 'notesblog' ) ); ?>

</div>

<div class="nav-next">

<?php previous_posts_link( _ _( 'Newer posts <span class="meta-nav">→</span>', 'notesblog' ) ); ?> </div>

</div> <?php endif; ?>

Você encontrará um bloco semelhante no fi nal de loop.php, já que você quer que a navegação apareça tanto no topo da página quanto na parte inferior, quando ela é necessária.

Seguindo adiante, você chega à manipulação de mensagem de erro 404 (página não

encontrada). Isso é o que vai mostrar se o WordPress não consegue encontrar a postagem ou página que o usuário buscava, geralmente devido a defeitos em um link. Naturalmente, aqui um arquivo de modelo 404.php assumiria o comando, mas o tema Notes Blog não inclui esse arquivo.

<?php

// Erro 404 Página Não Encontrada ou arquivos vazios, etc.

No documento Smashing Wordpress - Além Do Blog (páginas 81-106)