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.
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:
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.
[…] algumas dicas, truques e boas práticas para o desenvolvimento de temas. Vimos na primeira parte (nesse post) os seguintes […]
Belo post, e muito útil, obrigado por compartilhar
Que bom que pudemos ajudar, Wellington!
meu maior sonho é conseguir escrever dessa maneira tão incrível e
viver de um blog . Parabéns pelo seu artigo