15 Dicas e Não Dicas de Tematização Eficaz do WordPress

Hoje quero abordar algumas das dicas e não dicas de tematização do WordPress. Independentemente de você estar criando um tema do WordPress para você ou para lançamento, para que outras pessoas possam usá-lo, você deve seguir estas dicas e não dicas o mais próximo possível.

1. Não codifique URLs completas diretamente em seus temas

Ao criar seus temas, pode haver momentos em que imagens são usadas, para ícones de mídia social ou ícones de feed RSS, e durante esses pontos em sua codificação, você pode querer codificar a URL completa (por exemplo: /wp-content/themes/nome-do-seu-tema/images/imagem.jpg), mas isso causará erros no site sempre que a pessoa que usa seu tema alterar o nome da pasta do tema.

Os códigos adequados a serem usados para buscar as URLs completas dinamicamente estão abaixo.

<?php bloginfo('stylesheet_directory'); ?>/images/image.jpg

2. Utilize as tags de modelo o máximo possível

O WordPress faz um ótimo trabalho ao apresentar todas as tags de modelo que você pode usar, então faça um favor a si mesmo (assim como a todas as outras pessoas que podem usar seus temas) e aprenda as tags de modelo do WordPress – em seguida, utilize-as o máximo possível. Ao usar tags de modelo, você garante que seus temas não quebrem ou causem erros quando o usuário final o configurar e o colocar em funcionamento.

3. Não se esqueça dos códigos de menu suspenso

Ao criar seu tema do WordPress, um item que parece ser negligenciado são os códigos de menu suspenso para sua navegação. Claro, alguns temas podem ter a navegação configurada para não utilizar os `ul` de vários níveis, mantendo tudo em uma única linha, mas e quanto àqueles de nós que têm várias páginas filhas para cada página pai principal?

Existe uma solução para isso. Você pode conferir alguns dos tutoriais abaixo sobre como codificar menus suspensos de vários níveis.

• Como implementar uma barra de navegação multinível perfeita
• Menus de navegação suspensos multinível: Exemplos e tutoriais
• Menus de vários níveis com jquery e css

4. Deixe seu tema pronto para widgets

Na minha opinião, como usuário final, não há nada pior do que implantar um tema e se preparar para configurar tudo, apenas para perceber que agora estou diante da tarefa de tentar personalizar seções dos meus temas codificando informações neles. Suas barras laterais e vários outros locais em seu tema (você tem um rodapé de três colunas? Torne-o widgetizável!) devem ser o mais fácil possível de editar. É uma das coisas mais fáceis de fazer em seus temas e beneficiará muito os usuários do seu tema.

A Automattic tem um ótimo tutorial sobre como adicionar widgets ao seu tema. Confira aqui.

Certifique-se também de conferir o tutorial sobre temas com widgets aqui no Theme Lab.

5. Não faça os usuários dependerem de vários plugins para que seu tema funcione

Se você está lançando temas gratuitamente ou criando temas comerciais para WordPress, deve levar em consideração o melhor interesse de seus usuários finais ao construir seus temas. Poluir seus temas com 5-10 plugins necessários não só frustrará as pessoas ao baixar e configurar seu tema em seu site, mas também fará com que muitas pessoas nem o baixem, porque, sejamos honestos, as pessoas não têm períodos de atenção maiores que 2-3 segundos.

Por exemplo, se você vai configurar a paginação em seu tema, por que não usar este artigo para aprender como configurá-la em seu tema automaticamente. Cats Who Code tem um tutorial muito bom sobre como adicionar paginação ao seu tema sem a necessidade de ativar um plugin.

6. Mostre o termo de pesquisa na página de resultados da pesquisa

Por alguma razão, esta é uma dica frequentemente ignorada que você pode (e deve) implementar em seus temas. É um código simples de uma linha que permite que seu tema lembre o visitante do que ele acabou de pesquisar. Pode parecer trivial, mas é útil, pois se os resultados retornarem zero posts, o visitante saberá a frase exata que pesquisou e poderá então digitar um termo de busca diferente.

Abaixo está o código usado para substituir o título "Resultados da Pesquisa" em seu tema.

<h2>Search Results for <em><?php the_search_query() ?></em> </h2>

7. Não faça suas páginas de erro 404 pela metade

Em vez de apenas deixar sua página 404 dizer "404 - página não encontrada", por que não dar aos seus visitantes mais opções? Adicionar uma lista de categorias, posts recentes, posts populares, uma caixa de pesquisa e (se você quiser monetizar sua página 404) um anúncio pode dar um toque especial à sua página 404 em comparação com as páginas sem graça e inúteis encontradas na maioria dos temas do WordPress.

Se você está procurando inspiração para páginas 404, a Smashing Magazine tem uma seleção incrível de páginas 404 da web que vale a pena conferir.

8. Certifique-se de que você tem todos os arquivos básicos na pasta do seu tema

Ao construir um tema para WordPress, garantir que você possa personalizá-lo o máximo possível desde o início é essencial. Começar com uma combinação de arquivos index.php, header.php, sidebar.php e footer.php pode parecer uma boa ideia para os minimalistas, mas sugiro começar com todos os básicos abaixo para lhe dar um pouco mais de controle sobre o que é exibido – quando, onde e como.

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• page.php
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• search.php

Para mais informações sobre esses arquivos de modelo e o que eles fazem, confira a página hierarquia de modelos no WordPress.org.

9. Não se esqueça da integração RSS

Ao construir seu blog, um dos itens que mais chama a atenção das pessoas é a capacidade de se inscrever no seu blog através de um leitor RSS. Então, em vez de exigir que os usuários do seu tema adicionem essa informação por conta própria, por que não dar os passos para adicionar uma caixa de inscrição RSS, assim como você faz com a caixa de pesquisa. Adicione um botão RSS, uma opção de inscrição por e-mail e você também pode até adicionar a contagem de inscritos em texto adicionando este trecho de código ao seu tema onde você gostaria que fosse exibido (substitua "feedburner-id" pelo seu próprio ID do FeedBurner – se você estiver lançando este tema publicamente, dê uma olhada no item #11 da nossa lista e certifique-se de que você tem isso como uma opção).

<?php
    //get cool feedburner count
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Initialize the Curl session
    $ch = curl_init();

    //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Set the URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Execute the fetch
    $data = curl_exec($ch);

    //Close the connection
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $fb = $xml->feed->entry['circulation'];
    echo $fb;
    //end get cool feedburner count
    ?>

10. Adicione estilos CSS para comentários encadeados

Se você está criando um tema, deve estar sempre preparado para comentários encadeados. É um recurso do WordPress que muitos blogs usam para gerar interação em sua seção de comentários. Portanto, preparar sua folha de estilos para comentários encadeados é uma ótima ideia. Chris tem um ótimo post sobre códigos CSS para as classes CSS padrão que o WordPress gera em sua seção de comentários, dando ao seu tema uma seção de comentários estilizada sem a necessidade de tocar no arquivo comments.php.

11. Não lance um tema sem um painel de opções

Algumas pessoas podem não concordar com isso, mas acredito que faz parte da progressão natural de temas do WordPress. Se o seu tema não estiver executando algum tipo de painel de opções do WordPress com a capacidade de editar, personalizar e alterar itens no seu tema sem ter que editar códigos, você está fazendo algo errado.

Se você não tem certeza de como criar seu próprio painel de opções de tema, os links abaixo mostrarão como fazer isso.

• Crie painéis de opções personalizados com o WordPress 2.9
• Como criar um painel de opções melhor para o WordPress

12. Certifique-se de que seus temas funcionem imediatamente

Isso anda de mãos dadas com o item #5 em nossa lista – você deve sempre garantir que seus temas funcionem imediatamente. Alguns temas que vi exigem 5-6 etapas antes que o tema seja funcional no site, incluindo, mas não se limitando a, ativação de plugin e edição/salvamento do painel de opções do tema. Se o tema exigir certas coisas, certifique-se de que haja um item padrão de backup usado.

Por exemplo, no painel de opções do seu tema que você está criando e/ou usando, certifique-se de que haja informações padrão em cada seção, para que as coisas apareçam, independentemente de o usuário final as ter atualizado ou não. O mesmo vale para plugins; se você estiver usando um plugin de paginação do WordPress em seu tema, por que não codificá-lo para que o tema reverta para os links anterior/próximo se o plugin não estiver ativo.

13. Não faça uso excessivo de campos personalizados

Sim, a maioria dos temas do WordPress no estilo de revista de alguns anos atrás foram criados utilizando campos personalizados em todos os lugares, mas a maioria das pessoas não vai querer preencher 3, 4 ou 5 campos personalizados para cada post. Então, facilite as coisas para eles. Se você vai mostrar uma imagem do post na página inicial do seu tema, pegue este útil pedaço de código e adicione-o ao arquivo functions.php de seus temas e ele pegará automaticamente a primeira imagem dos posts, sem a necessidade de um campo personalizado.

// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Depois de adicionar esse código, basta adicionar <?php echo catch_that_image(); ?> nos arquivos do seu tema onde você gostaria que a imagem aparecesse.

Graças aos bons e velhos fóruns de suporte do WordPress por esta dica útil.

14. Faça SEO na sua tag <title>

Uma ótima maneira de garantir que seu tema esteja o mais pronto para SEO possível é remover a tag <title> padrão encontrada no arquivo header.php do seu tema e substituí-la pelos códigos abaixo. Isso dará aos títulos do seu tema um pouco mais de força e ajudará nos esforços de SEO que os usuários do seu tema vão querer colocar em prática – tudo isso sem exigir que eles toquem em nada.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Author Archives<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name;  ?>|<?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php single_cat_title(); ?> | <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?><?php } ?>
<?php if ( is_day() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

15. Não se esqueça das migalhas de pão

Como um complemento de navegação em seus temas, os breadcrumbs (na minha opinião) devem ser utilizados o máximo possível. Não é bom apenas para fins de SEO, mas também permite que o visitante navegue pelo seu site muito mais rapidamente. Existem plugins do WordPress para breadcrumbs, mas graças ao Cats Who Code, agora sabemos como adicionar uma função de breadcrumb aos nossos temas do WordPress.

Primeiro, adicione os códigos abaixo ao arquivo functions.php do seu tema (personalizado um pouco a partir da postagem original do Cats Who Code, linkada acima).

function the_breadcrumb() {
		echo '<ul id="crumbs">';
	if (!is_home()) {
		echo '<li><a href="';
		echo get_option('home');
		echo '">';
		echo 'Home';
		echo "</a></li>";
		if (is_category() || is_single()) {
			echo '<li>';
			the_category(' </li><li> ');
			if (is_single()) {
				echo "</li><li>";
				the_title();
				echo '</li>';
			}
		} elseif (is_page()) {
			echo '<li>';
			echo the_title();
			echo '</li>';
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
	elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
	
	echo '</ul>';
}

Em seguida, coloque este trecho de código onde você quiser que suas migalhas de pão sejam exibidas.

<?php the_breadcrumb(); ?>

Obrigado por ler o artigo

Obrigado por dedicar seu tempo para ler o artigo. Espero que você tenha gostado e aprendido uma coisa ou duas ao longo do caminho - eu sei que aprendi. Se você gostou da postagem ou tem algo a acrescentar, avise-nos nos comentários.