08 jun

Tutorial WordPress: Como criar abas em sua Theme Options Page

Categoria: - Comentários (8)

Usar abas na interface de usuário pode ajudar muito na organização do conteúdo. Alguns temas do WordPress possuem muitas opções de configuração, imagine se todo esse conteúdo fosse mostrado em uma página apenas, que complicado seria.

Ainda bem que o WordPress possui a Settings API para nos auxiliar na montagem das páginas de opções e neste tutorial, irei mostrar como criar essas páginas de opções divididas em abas.

No final desta página eu estarei disponibilizando o arquivo em que implementei um teste de código, baixe-o e customize-o da forma que quiser.

Criando as abas

O primeiro trecho de código mostra como produzir as abas:

Primeiro, definimos um array que contém todas as nossas abas. A primeira aba, Home, será onde iremos configurar alguma opção para aparecer na página inicial do nosso site. A aba General, poderá ser uma página contendo as opções utilizadas em todo o site, e, por último, a aba Footer, para incluir um código no rodapé.

Lembrando que este é apenas um exemplo de uso e que você poderá criar as abas que quiser, quantas quiser, com o conteúdo que quiser.

WordPress Theme Settings Page

WordPress Theme Settings Page (clique na imagem para ampliar)

Observe que se a aba está aberta, uma classe adicional, nav-tab-active, é adicionada.

Exibindo o conteúdo entre abas

O conteúdo da página de configurações é exibido com auxílio da função de callback add_theme_page (que é uma abstração de add_submenu_page, com o parent_slug definido para themes.php), que em nosso exemplo será nomeado wptester_settings_page.

Se a variável recuperada através de $_GET['tab'] estiver definida, então, esta será a aba a ser exibida, caso contrário, a aba padrão será a ‘homepage’.

Seguindo ainda na mesma função, temos que exibir o conjunto correto de campos. Dependendo do valor passado em $_GET['tab'], nós iremos exibir os campos referentes àquela aba.

Todas as configurações serão armazenadas em um único array a fim de evitar que sejam feitas várias consultas.

Salvando as configurações em abas

Agora precisamos saber qual slot do array iremos salvar. Dependendo da aba que está sendo exibida, um grupo de dados armazenados no array serão mostrados. Se a gente simplesmente salvar todos os slots do array, nós iremos sobrescrever todos os dados e teremos salvo dados desnecessários.

Para salvar apenas o grupo de campos que estão sendo exibidos na aba ativa, vamos usar a função condicional
switch() mais uma vez.

WordPress Theme Settings - Settings Saved

WordPress Theme Settings – Saved (clique na imagem para ampliar)

Agora que os dados foram salvos, precisamos que o WordPress redirecione o usuário de volta para a aba apropriada na página de configurações.

Dependendo do valor definido na variável $_GET['tab'], vamos usar a função wp_redirect para enviar o usuário para a aba padrão ou para uma das outras abas.

Recuperando os dados armazenados

Os dados inseridos na nossa página de configurações serão armazenados na tabela wp_options (ou SEU_PREFIXO_options se você definiu um prefixo personalizado ao instalar o seu WordPress).

Sabemos que os dados foram armazenados num array e o nome (option_name) é wptester_theme_settings. Para fazer um teste rápido, para ver se tudo está funcionando, você pode inserir o código abaixo, no local onde gostaria que as informações fossem impressas:

O comando acima vai imprimir na tela todas as informações que foram armazenadas no array. Observe que utilizamos a função get_option() para pegar as informações do banco de dados.

Agora que vimos que tudo foi armazenado direitinho, podemos pegar os valores individualmente, assim:

Baixe o código-fonte utilizado neste tutorial

A maioria dos temas que possui um número considerável de opções utiliza abas em suas páginas de configurações. Vale lembrar que esta é uma das muitas formas de apresentar esta página de configurações. Uma outra forma seria utilizar meta box retráteis, como acontece na maior parte da interface do WordPress. No entanto, as abas permitem uma melhor separação de cada conjunto de opções.

Baixe aqui o código-fonte completo que eu utilizei neste tutorial. Para ativa-lo basta colocar o arquivo admin_settings.php dentro da pasta do seu tema e depois abrir o seu arquivo functions.php e colocar o código abaixo:

Qualquer dúvida, crítica ou sugestão, faça um comentário! Espero ter ajudado com mais este tutorial que mostra um pouco mais do poder do nosso amado WordPress :-)

Comentários ( 8 )

  • Excelente! Muito difícil achar um tutorial em português que explique tão bem.

    Parabéns! (y)

Envie seu comentário

Resize-me!