O QUE �?

PLANOS
MIGRE
CLIENTES
SOBRE
CONTATO
Dicas b�sicas para o desenvolvimento de temas WordPress #1
Aventure-se no c�digo!, Come�ando certo, Geral, Temas
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.