Blog

Dicas básicas para o desenvolvimento de temas WordPress #1

Nesse post, vamos abordar os princípios básicos no desenvolvimento de temas para WordPress. Falaremos sobre dicas, cuidados, funções, acessibilidade e outros pontos importantes para desenvolver e manter um tema de qualidade e seguro.

Existem muitas ferramentas para otimizar o seu tempo de desenvolvimento, como frameworks e plugins de que já falamos aqui no blog. Mas é importante conhecer o básico de como se inicia esse processo por vários motivos. Um deles é para entender até mesmo como funcionam esses frameworks, para em casos de emergência conseguir solucionar e não se tornar dependente dos desenvolvedores da ferramentas que usou.

Lembrando que vamos falar mais da parte técnica do WordPress, é interessante que você domine HTML/CSS antes de iniciar o desenvolvimento de temas, pois é com isso que você vai controlar a organização e layout de seu tema.

O que é um tema para WordPress?

Um tema é uma série de arquivos .php, folhas de estilo, imagens e arquivos JavaScript que definem uma aparência específica e funcionalidades ao seu site em WordPress. Esses arquivos ficam guardados em pastas distintas para cada tema no diretório /wp-content/themes do seu WordPress.
Uma confusão muito comum, principalmente em quem não trabalha com WordPress, é na distinção entre o core do WordPress e o tema que está em uso. O WordPress vem pronto; o que desenvolvemos é um tema específico para esse site.

O codex do WordPress indica, como meio de aprendizagem, estudar os temas que vêm por padrão quando você instala o WordPress. Alguns exemplos são os temas Twenty Fourteen, Twenty Thirteen e outros mantidos e distribuídos pela Automattic.

Hierarquia e organização dos arquivos

A hierarquia de templates (modelos) e a organização de arquivos dentro da pasta do seu tema são itens muito importantes. Veja abaixo o fluxograma que apresenta os caminhos que o WordPress faz de acordo com a página em que está sendo visitada. Template é o nome dado ao arquivo que está sendo usado para exibir determinada página.

Hierarquia_de_Arquivos_de_Tema_WordPress

Observando na imagem, entenderemos as requisições feitas para exibir um template para a URL em questão. Vamos a um exemplo:

Se for um archive (arquivo), é feita uma verificação para entender se esse é um arquivo de tags, autor, categorias, taxonomia ou um arquivo por datas.

Veja mais sobre hierarquia nesse post do blog.

E então é requisitado o arquivo de acordo com essa verificação, por exemplo, se o arquivo for uma categoria, o arquivo requisitado será o category-$slug.php. Esse arquivo, category-$slug.php pode ser usado para determinar um modelo para cada categoria, basta substituir $slug pelo slug de sua categoria, ou seja, em uma categoria futebol, esse arquivo teria o seguinte nome category-futebol.php.

Caso o WordPress não encontre esse arquivo personalizado pelo slug, o próximo que ele vai requirir é o category-$ID.php. Esse arquivo funciona da mesma forma do anterior, mas com a opção de trabalhar com ID ao invés do slug.

E então, não encontrando esse também, o WordPress faz a requisição do arquivo category.php, que é uma espécie de default dentro dessa hierarquia de modelos para exibição das categorias.

Caso nenhum desses três arquivos específicos para categoria exista, o WordPress procura pelo archive.php, que é o default para quando a primeira verificação desse processo retornou true para is_archive().

Ainda assim, se esse arquivo também não existir, o último recurso utilizado é rodar essa página com o index.php.

Com isso, podemos falar sobre a organização dos arquivos dentro da pasta do tema. Com apenas um style.css e o index.php o seu tema já funciona, esses são os dois arquivos mínimos que o WordPress precisa para entender que aqueles arquivos são mesmo um tema. O functions.php é o arquivo onde você adiciona as funções necessárias para o seu tema, ele é um arquivo opcional, mas com certeza o seu tema terá um desse.

Com a construção do tema, a quantidade de arquivos vai aumentar bastante, e para manter uma boa legibilidade disso é bom manter um padrão de organização. Veja o diagrama abaixo de como tenho organizado em meus trabalhos:

folders-1

O primeiro momento é a raiz do tema, onde tenho as pastas /assets, /parts, /inc, /languages, /src e os arquivos do tema. Na segunda etapa temos a organização dentro da pasta assets, onde estão organizados os estilos, fontes, imagens e scripts. E dentro de /js, organizo as bibliotecas que uso e no arquivo main.js aplico as customizações de JavaScript e/ou jQuery.

Na pasta /parts eu organizo partes do layout que aparecem mais de uma vez no tema, por exemplo o calendário de uma agenda, crio um arquivo calendario.php dentro dessa pasta, e sempre que preciso dele, faço uma chamada com a função get_template_part().

Em /inc é onde coloco classes e scripts PHP, como por exemplo uma classe de metaboxes. E para inseri-los no tema adiciono no functions.php com

require_once get_template_directory() . '/inc/metaboxes.php';

Esse é apenas um exemplo, mas o objetivo aqui é manter uma organização que seja facilmente interpretada por qualquer desenvolvedor.

Header

O header é o arquivo responsável por montar o topo do HTML do seu tema, portanto as tags <html>, <head>, <title> e <body> devem ser configurados nesse arquivo. Uma atenção nesse arquivo pode ajudar com posicionamento de SEO, bastando configur de forma correta o <title> e as <meta> tags.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="description" content="Keywords">
    <meta name="author" content="Name">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/path/favicon.ico" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

Esse é um exemplo de header.php – não esqueça de adicionar o hook wp_head() (veja mais sobre hooks nesse post), pois é ele que algumas funções usam para imprimir estilos, scripts e outras informações que precisam estar dentro da tag <head>.

Para quem está acostumado com HTML, vai sentir falta da inclusão do style.css e outros arquivos de .js, mas no WordPress a forma indicada é que isso seja feito pelo functions.php e então direcionado ao hook wp_head().

Functions

Como sabemos e vimos aqui no blog, o functions.php é um arquivo onde podemos inserir funções e comandos que rodam em todo o WordPress, até mesmo na administração quando o tema está ativado. Vou comentar aqui algumas coisas que são úteis para ter no início de desenvolvimento de um tema.

É nesse arquivo que devemos incluir classes, como por exemplo a metaboxes.php que comentei acima. E também a inclusão de scripts e styles corretamente, veja esse exemplo:

function theme_enqueue_scripts() {
 $template_url = get_template_directory_uri();

// Loads main stylesheet.
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), null, 'all' );

// jQuery.
 wp_enqueue_script( 'jquery' );

// Bootstrap.
 wp_enqueue_script( 'bootstrap', $template_url . '/assets/js/libs/bootstrap.min.js', array(), null, true );

 // General scripts.
 // Main jQuery.
 wp_enqueue_script( 'main-js', $template_url . '/assets/js/main.js', array(), null, true );

 if ( is_home() ) {
   // Scripts or styles only home
 }
  // Load Thread comments WordPress script.
  if ( is_singular() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
 }
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts', 1 );

É importante manter a organização nesse arquivo também. Assim como em todo o tema, mantenha todos seus códigos muito bem comentados. E para o functions.php não ficar muito grande, separe itens em arquivos na pasta /inc.

 

Principais funções

Vamos agora conhecer algumas funções básicas e nativas do WordPress.

<?php the_title(); ?> – Imprime o título da página/post em exibição. Ou, dentro de um loop, exibe o título de cada post;
<?php the_content(); ?> – Imprime o conteúdo completo da página/post em exibição. Ou, dentro de um loop, exibe o conteúdo completo de cada post;
<?php the_excerpt(); ?> – Imprime um resumo de 55 palavras da página/post em exibição. Ou, dentro de um loop, exibe o resumo de cada post;
<?php get_header(); ?> – Retorna o header.php;
<?php get_sidebar(); ?> – Retorna o sidebar.php;
<?php get_footer(); ?> – Retorna o footer.php;
<?php wp_nav_menu(); ?> – Retorna um menu;
<?php do_shortcode(); ?> – Usado para imprimir o conteúdo de um [shortcode] via .PHP;
<?php get_categories(); ?> – Retorna as categorias do post em exibição;

Conclusão

Lembre-se de fazer o desenvolvimento com o debug mode ligado. Essa configuração é feita no wp-config.php (na linha define(‘WP_DEBUG’, false); ). Com esse item ativado, o WordPress vai mostrar pequenos erros que, quando corrigidos, podem tornar o seu site mais acessível e com menos possibilidade de conflitos com servidores.

Aproveite essas dicas e coloque a mão na massa. Em breve publicaremos mais posts com esse mesmo assunto para auxiliar no desenvolvimento de temas.

Deixe um comentário

Hospede seu projeto em WordPress com alto desempenho