WordPress Desenvolvimento de Temas – Folha de dicas

Um resumo para auxiliar na memorização de conceitos e funções disponíveis para o desenvolvimento de temas para WordPress.

por Estúdio Haste

Versão A4, no Google Docs

Clique aqui para ser redirecionado para o documento.

Definição de um tema

Um tema é um conjunto de templates responsável pela exibição do conteúdo do site.

Um tema é definido criando um subdiretório na pasta wp-content/themes/{meu-tema}, com um arquivo style.css com um cabeçalho específico que você pode ver aqui: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/#basic-structure

Hierarquia de templates

Um tema é composto por um conjunto de templates, que são arquivos arquivos .php responsáveis pela exibição de cada seção do site.

A hierarquia de templates é a regra de designação de qual template irá exibir cada seção do site. Por exemplo, ao acessar uma página, o template a ser utilizado pode ser o page.php, um post, o single.php.

https://wphierarchy.com/

O loop

O Loop é o mecanismo padrão que o WordPress utiliza para exibir posts em um  template de um tema. Sua estrutura básica é esta:

<?php
if ( have_posts() ) :
    while ( have_posts() ) :
        the_post(); 
        //Insira template tags
    endwhile;
endif;

O loop é necessário mesmo em posts e páginas individuais. https://developer.wordpress.org/themes/basics/the-loop/

Template tags

As template tags são funções especializadas em dar saída ou retornar valores relativos aos posts. Geralmente são usadas dentro dos loops.

As iniciadas com the_ dão saída no dado, as iniciadas com get_the_ retornam o dado.

the_title()
get_the_title()
Exibe/retorna o título do post.

the_content()
get_the_content()
Exibe/retorna o conteúdo do post.

the_permalink()
get_the_permalink()
Exibe/retorna o link do post.

the_date()
get_the_date()
Exibe/retorna a data de publicação do post

the_excerpt()
get_the_excerpt()
Exibe/retorna o resumo do post.

the_post_thumbnail()
Exibe a imagem destacada do post.

the_tags()
Exibe as tags associadas ao post.

the_category()
Exibe as categorias associadas ao post.

get_header()
Inclui o header.php no template.

get_footer()
Inclui o footer.php no template.

get_post_meta()
Retorna uma meta informação do post.

Template Tags

Conditional tags

is_home() – retorna true se a página principal de post está sendo exibida.

is_front_page() – retorna true se a página inicial está sendo exibida.

is_single() – retorna true caso seja um post, de qualquer post type, individual.

is_page() – retorna true caso seja a página individual.

is_archive() – retorna trua caso seja arquivo.

is_category() – retorna true caso seja arquivo de categoria.

is_tag() – retorna true caso seja arquivo de tag.

is_tax() – retorna trua caso seja arquivo de taxonomia.

is_post_type_archive() – retorna true caso seja arquivo de um post type.

has_post_thumbnail() – usado no loop, retorna true se o post possuir imagem destacada.

is_admin() – retorna true caso seja qualquer página do painel.

is_user_logged_in() – retorna true se o usuário estiver conectado.

Conditional Tags

O functions.php

O functions.php é um arquivo que funciona como um plugin “embutido”, em que podemos inserir funcionalidades, geralmente através dos hooks do WordPress.

Você também pode criar funções que estarão disponíveis para uso em qualquer template do tema.

Hooks (ganchos)

Hooks são eventos, em que podemos associar funções a serem executadas em um determinado momento.

Adicionamos uma função minha_funcao() a um hook usando:

add_action()

<?php
add_action('get_footer','minha_funcao', 10 ); // ordem de execução

Quando a template tag get_footer for executada, minha_funcao() também será invocada.

add_filter()

<?php
add_filter( 
    'the_content',
    'minha_funcao',
    10 //ordem de execução 
    1 //qtd. de parâmetros
);

Antes de exibir o conteúdo das de the_content/get_the_content, nossa função será invocada e receberá como parâmetro o conteúdo a ser filtrado, ex:

<?php
function minha_funcao( $content ) { 
    return $content .= ‘<h1>Oi</h1>’;
}

Sidebars

register_sidebar() – realiza o registro de uma sidebar, definindo seu id, nome, descrição e html exibido antes e depois da sidebar e de cada um de seus widgets.

dynamic_sidebar( $id ) – exibe a sidebar do determinado id.

Menus

register_nav_menus() – registra uma determinada área de menu para o tema. Exemplo:

<?php
function registrar_menus() {
    register_nav_menus(
        array(
            'topo'   => 'Topo',
            'rodape' => 'Rodapé'
        )
    );
}
add_action( 'init', 'registrar_menus' );

wp_nav_menu() – exibe um determinado menu registrado no tema. Ex:

<?php
wp_nav_menu( 
    array(
        'theme_location' => 'topo'
    )
);

Enqueue scripts

É importante utilizar as funções do WordPress para carregamento de scripts, gerenciando dependências e tornando mais fácil removê-lo, caso necessário, em algum contexto.

wp_enqueue_script() – coloca um script na fila para ser carregado no tema.

wp_enqueue_style() – coloca uma folha de estilos na fila para ser carregada pelo tema.

wp_dequeue_script() – remove um script da fila para ser carregado.

wp_dequeue_style() – remove uma folha de estilos da fila para ser carregada.

Theme supports

Os temas WordPress precisam registrar que dão suporte a determinadas funcionalidades da plataforma, como imagens em destaque, logo personalizado, paleta de cores no editor, dentre outros.

add_theme_support() – registra que o seu tema dá suporte a determinada feature.

Tamanhos de imagens

Ao fazer upload de uma imagem, o WordPress já cria diversos recortes. Estes tamanhos podem ser modificados no painel configurações > mídia, mas também é possível modificá-los e registrar novos via código.

add_image_size() – registra um novo tamanho de imagem.

Para modificar um tamanho, use:

update_option( 'thumbnail_size_w', 430 );

Tamanhos padrão:

‘thumbnail_size_w’ => 150

‘thumbnail_size_h’ => 150

‘medium_size_w’ => 300

‘medium_size_h’ => 300

‘medium_large_size_w’ => 768

‘medium_large_size_h’ => 0

‘large_size_w’ => 1024

‘large_size_h’ => 1024

WP_Query e get_posts()

Para além do loop padrão, é possível consultar posts utilizando a função get_posts() ou a classe WP_Query.

Exemplo, get_posts():

$lastposts = get_posts(
    array(
        'posts_per_page' => 3
    )
);

get_posts()

Exemplos WP_Query: https://developer.wordpress.org/reference/classes/wp_query/

Internacionalização

O WordPress possui um sistema de internacionalização de código próprio. Para saber mais, veja: https://developer.wordpress.org/themes/functionality/internationalization/

Abaixo as principais funções utilizadas:

__() – retorna a tradução da string.

_e() – exibe a tradução de uma string.

_n() – retorna a tradução no plural ou singular de uma string.

_x() – retorna a tradução de uma string em um determinado contexto.

Documentação

A documentação do WordPress: https://developer.wordpress.org

⚠ Cuidado com páginas do Codex! Esta é a documentação antiga, e apesar de muitas coisas válidas ainda, pode conter exemplos desatualizados.

Onde pedir ajuda?

Fórum de suporte:
https://br.wordpress.org/support/

https://wordpress.org/support/ (en)

Slack da WP Brasil
https://wpbrasil.slack.com/

Telegram
https://t.me/WordPressBrasil

Facebook
https://www.facebook.com/groups/wordpress.brasil

Stack Exchange
https://wordpress.stackexchange.com/ (en)

Onde se informar?

• https://learn.wordpress.org/
• https://br.wordpress.org/news/
• https://www.painelwp.com.br/
• https://hastedesign.com.br/blog/
• https://kinsta.com/pt/blog/