15 coisas que você deve e não deve fazer para criar um tema eficaz para o WordPress

Hoje, quero falar sobre o que fazer e o que não fazer com os temas do WordPress. Independentemente de você estar criando um tema do WordPress para si mesmo ou para ser lançado para que outras pessoas possam usá-lo, você deve seguir essas dicas o mais rigorosamente possível.

1. Não codifique URLs completas em seus temas

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

Os códigos adequados a serem usados para extrair dinamicamente os URLs completos 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 excelente trabalho ao apresentar todas as tags de modelo que você pode usar, portanto, faça um favor a si mesmo (bem como ao restante das pessoas que podem usar seus temas) e aprenda as tags de modelo do WordPress e, em seguida, utilize-as o máximo possível. Com o uso das tags de modelo, você pode garantir que seus temas não sejam interrompidos ou causem erros quando o usuário final os configurar e os colocar em funcionamento.

3. Não se esqueça dos códigos suspensos de navegação

Quando você está criando seu tema do WordPress, um item que parece ser esquecido são os códigos suspensos para a navegação. É claro que alguns temas podem ter a navegação configurada para não utilizar os uls de vários níveis, mantendo tudo em uma única linha, mas o que acontece com aqueles que têm várias páginas secundárias para cada página principal?

Há 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 de vários níveis: Exemplos e tutoriais
• Menus de vários níveis com jquery e css

4. Torne 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 me deparo com a tarefa de tentar personalizar seções dos meus temas codificando informações neles. Suas barras laterais e vários outros lugares em seu tema (você tem um rodapé de três colunas? faça um widgetize!) devem ser tão fáceis de editar quanto possível. Essa é uma das coisas mais fáceis de fazer em seus temas e beneficiará muito os usuários do tema.

A Automattic tem um ótimo tutorial sobre como colocar widgetize em seu tema. Dê uma olhada aqui.

Não deixe de conferir também o tutorial de temas com wid gets aqui no Theme Lab.

5. Não faça com que os usuários dependam de vários plug-ins para que seu tema funcione

Se você estiver lançando temas gratuitos ou criando temas comerciais para WordPress, deverá levar em conta os interesses dos usuários finais ao criar seus temas. Encher seus temas com 5 a 10 plug-ins necessários não só deixará as pessoas frustradas ao baixar e configurar o tema no site delas, como também fará com que muitas pessoas não façam o download, pois, convenhamos, as pessoas não têm uma capacidade de atenção de mais de 2 a 3 segundos.

Por exemplo, se você for configurar a paginação em seu tema, por que não utilizar este artigo para saber como configurá-la automaticamente em seu tema? O Cats Who Code tem um ótimo tutorial sobre como adicionar paginação ao seu tema sem a necessidade de ativar um plug-in.

6. Mostrar o termo de pesquisa na página de resultados de pesquisa

Por alguma razão, essa é uma dica frequentemente ignorada que você pode (e deve) implementar em seus temas. Trata-se de um código simples, de uma linha, que permite que seu tema lembre ao visitante o que ele acabou de pesquisar. Pode parecer trivial, mas é útil para que, se os resultados trouxerem zero publicações, o visitante saiba a frase exata que pesquisou e possa digitar um termo de pesquisa diferente.

Abaixo está o código usado para substituir o título atual de “Resultados da pesquisa” em seu tema.

<h2>Resultados da pesquisa para <em><?php the_search_query() ?></em> </h2>

7. Não faça uma meia-boca em suas páginas de erro 404

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

Se estiver procurando inspiração para a página 404, a Smashing Magazine tem uma vitrine incrível de páginas 404 de toda a Web que vale a pena conferir.

8. Certifique-se de ter todos os arquivos básicos na pasta do tema

Ao criar um tema do WordPress, é essencial garantir que você possa personalizá-lo o máximo possível desde o início. 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 eu sugiro começar com todos os arquivos básicos abaixo para ter um pouco mais de controle sobre o que é exibido, quando, onde e como.

• style.css
• header.php
• index.php
• sidebar.php
• rodapé.php
• single.php
• página.php
• comentários.php
• 404.php
• functions.php
• archive.php
• formulário de pesquisa.php
• search.php

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

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

Ao criar o seu blog, um dos itens que mais chamam a atenção das pessoas é a possibilidade de assinar o blog por meio de um leitor de RSS. Portanto, em vez de exigir que os usuários do seu tema adicionem essas informações por conta própria, por que não tomar as medidas necessárias para adicionar uma caixa de assinatura de RSS da mesma forma que você faz com a caixa de pesquisa? Adicione um botão de RSS, uma opção de assinatura por e-mail e você também pode adicionar a contagem de assinantes em texto adicionando este trecho de código ao tema, onde deseja que ele seja exibido (substitua “feedburner-id” pelo seu próprio ID do FeedBurner – se você estiver lançando esse tema no mercado, dê uma olhada no número 11 da nossa lista e verifique se ele tem essa opção).

<?php
    //obter contagem legal do feedburner
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Inicializar a sessão Curl
    $ch = curl_init();

    //Defina o curl para retornar os dados em vez de imprimi-los no navegador.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Definir o URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Executar a busca
    $data = curl_exec($ch);

    /Fechar a conexão
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $fb = $xml->feed->entry['circulation'];
    echo $fb;
    //terminar obter uma contagem legal do feedburner
    ?>

10. Adicione estilos CSS para comentários encadeados

Se você estiver criando um tema, deverá estar sempre preparado para comentários encadeados. Esse é um recurso do WordPress que muitos blogs usam para criar interação na seção de comentários. Portanto, preparar sua folha de estilo para comentários encadeados é uma ótima ideia. Chris tem uma excelente postagem sobre códigos CSS para as classes CSS padrão que o WordPress exibe na seção de comentários, proporcionando 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 dos 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 do tema sem precisar editar códigos, você está fazendo algo errado.

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

• Criar 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 número 5 da nossa lista – você deve sempre se certificar de que seus temas funcionem imediatamente. Alguns temas que vi exigem de 5 a 6 etapas antes que o tema possa ser usado no site, incluindo, entre outros, a ativação de plugins e a edição/salvamento do painel de opções do tema. Se o tema exigir determinados itens, certifique-se de que haja um item padrão de backup utilizado.

Por exemplo, no painel de opções do tema que você está criando e/ou usando, verifique se há informações padrão em cada seção, para que as coisas apareçam, independentemente de o usuário final tê-las atualizado ou não. O mesmo vale para os plug-ins. Se você estiver usando um plug-in de paginação do WordPress em seu tema, por que não codificá-lo de modo que o tema reverta para os links anterior/seguinte se o plug-in não estiver ativo?

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

Sim, a maioria dos temas do WordPress em estilo de revista de alguns anos atrás foi criada utilizando campos personalizados a todo momento, mas a maioria das pessoas não vai querer preencher 3, 4 ou 5 campos personalizados para cada publicação. Portanto, facilite as coisas para elas. Se você for mostrar uma imagem da publicação na página inicial do seu tema, pegue este prático código e adicione-o ao arquivo functions.php do seu tema e ele exibirá automaticamente a primeira imagem da publicação, sem a necessidade de um campo personalizado.

// Obter o URL da primeira imagem em uma postagem
função 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];

// nenhuma imagem encontrada exibe a imagem padrão em seu lugar
se(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 quer que você queira que a imagem seja exibida.

Agradecemos aos bons e velhos fóruns de suporte do WordPress por essa dica útil.

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

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

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Resultados da pesquisa para <?php /* Contagem de pesquisa */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' - '); echo $count . ' '; _e('artigos'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Arquivos do autor<?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'); ?> | Arquivo | <?php the_time('F, Y'); ?><?php } ?>
<?php if ( is_day() ) { ?><? bloginfo('nome'); ?> | Arquivo | <?php the_time('F, Y'); ?><?php } ?>
<?php se (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

15. Não se esqueça dos breadcrumbs

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

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

função the_breadcrumb() {
		echo '<ul id="crumbs">';
	se (!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> ');
			se (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>Arquivar para "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Arquivar para "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Arquivar para "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Arquivo do autor"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Arquivos do blog"; echo'</li>';}
	elseif (is_search()) {echo"<li>Resultados da pesquisa"; echo'</li>';}
	
	echo '</ul>';
}

Em seguida, coloque esse trecho de código em qualquer lugar em que você queira que os breadcrumbs sejam exibidos.

<?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 ou duas coisas ao longo do caminho - eu sei que aprendi. Se você gostou da postagem ou tem algo a acrescentar, informe-nos nos comentários.