Faça uma página de opções para seu tema 2
Essa é uma ótima dica para quem produz temas sobre medidas para terceiros. O desenvolvedor pode fazer um tema que tenha a capa customizável através de um painel de controle, um dos muitos exemplos de uso.
Como isso é possível? Usando a estrutura de plugins do Wordpress. Mas no nosso exemplo, não faremos um plugin propriamente dito, pois esse painel será ativado junto com o tema. Então temos que escrever nosso “plugin” no arquivo functions.php, que deve estar dentro da pasta do seu tema (se esse arquivo não existir, crie-o agora).
O arquivo functions.php é uma espécie de “inicializador” de funções; as classes e funções que o programador escrever nesse arquivo serão carregadas automaticamente pelo WP, sem a necessidade de ativação, tal qual é feito com os plugins.
O que faremos/veremos neste tutorial:
- escrever uma função que adiciona um painel de opções no admin do WP;
- gravar opções na tabela wp_options do Wordpress;
- recuperar opções salvas para usar no tema através da função get_options();
- criar dois recursos básicos para demonstrar o que podemos fazer com opções do WP.
Vamos começar criando o link para o painel de administração do tema. Insira este trecho de código no arquivo functions.php do seu tema (de novo: se ele não existe, crie este arquivo – o código completo do plugin está no fim deste artigo):
<?php add_action('admin_menu','meu_tema_options_admin'); function meu_tema_options_admin () { add_menu_page( 'Opções do Meu Tema', 'Opções do Meu Tema', 'manage_options', 'opcoes_tema', 'meu_tema_options' ); } function meu_tema_options() { echo '<div class="wrap">'; echo '<h2>Opções do Meu Tema</h2>'; echo '</div>'; } ?>
Salve o arquivo e mande-o para a pasta do seu tema. Depois, acesse o painel do WP. Tem que aparecer um link como esse:
Clicando no link “Opções do Meu Tema”, a página que abrirá será semelhante a esta:
Não se preocupe, nós já vamos encher essa página de conteúdo. Mas antes, uma explicação sobre as funções que fizeram o link e a página serem criados.
A função meu_tema_options_admin() é as responsável por criar o link para a página de administração do tema. Dentro dela inserimos a função do WP add_menu_page(). Através dela inserimos (1) o título de página no header; (2) o que vai ser escrito na barra de menus; (3) o nível de acesso mínimo que um usuário deve ter para acessar essa página, ou a string “manage_options”, representando as opções default; (4) o arquivo a ser chamado para abrir a página – em nosso caso, não será chamado arquivo nenhum; e (5) a função que será invocada para montar a página propriamente dita. Ela deve ser escrita com o mesmo nome da função, mas sem os “()”.
O WP inicializa esse menu com um “hook” (gancho), que é executado quando um evento ocorre. O hook para criar o menu é add_action, com os parâmetros “admin_menu” (um tipo de action) e a função a ser chamada para criar o menu (”meu_tema_options_admin”).
Agora a função que monta a página: a nossa chama-se “meu_tema_options”. É uma função em php simples, que não recebe nenhum parâmetro. Vamos passar então para o recheio dessa página, começando com o seguinte código (use-o dentro da função meu_tema_options):
function meu_tema_options() { echo '<div class="wrap">'; echo '<h2>Opções do Meu Tema</h2>'; echo '<form method="post" action="options.php">'; wp_nonce_field('update-options'); echo '<table class="form-table">'; echo '<tbody>'; echo '<tr valign="top">'; echo '<th scope="row"><label for="id_cat_destaque">ID da categoria em destaque</label></th>'; echo '<td><input id="id_cat_destaque" type="text" size="40" value="'.get_option('cat_destaque').'" name="cat_destaque"/></td>'; echo '</tr>'; echo '</tbody>'; echo '</table>'; echo '<p class="submit">'; echo '<input type="hidden" name="action" value="update" />'; echo '<input type="hidden" name="page_options" value="cat_destaque" />'; echo '<input type="submit" name="Submit" value="Atualizar opções" />'; echo '</p>'; echo '</form>'; echo '</div>'; }
Suba o arquivo e atualize a página de opções. O resultado:
O que montamos? Um formulário simples, com algumas tags especiais que dirá ao Wordpress o seguinte:
- recupere o valor da opção “cat_destaque” e exiba no formulário;
- caso não exista (ainda) essa opção, cria-lá com o valor da caixa de texto ao clicar em submit;
- caso exista (a opção), atualizar o valor dela se necessário.
Para tal, inserimos alguns campos chaves que farão com que o formulário tenha destino certo ao clicar em “Atualizar opções”:
- a action do formulário deve ser options.php;
- a função wp_nonce_field(’update-options’) deve estar logo abaixo a abertura do form;
- para cada campo de opção, inserimos get_option(’nome_opcao’) para recuperar este valor, e o nome do campo deve ser o mesmo da opção;
- um campo do tipo hidden com o nome action e valor update;
- e por fim outro campo hidden com os nomes das opções a serem inseridas/atualizadas – o nome do campo deve ser page_options e os valores separados por vírgula, para cada opção: value=”valor1,valor2,valor3″.
Nesse campo de exemplo que criamos, o usuário irá inserir o ID de uma categoria qualquer que recuperaremos depois para fazer um destaque dela na home do nosso blog. Mas antes, vamos inserir mais uma opção em nossa página (atualize a função com o código a seguir):
function meu_tema_options() { echo '<div class="wrap">'; echo '<h2>Opções do Meu Tema</h2>'; echo '<form method="post" action="options.php">'; wp_nonce_field('update-options'); echo '<table class="form-table">'; echo '<tbody>'; echo '<tr valign="top">'; echo '<th scope="row"><label for="id_cat_destaque">ID da categoria em destaque</label></th>'; echo '<td><input id="id_cat_destaque" type="text" size="40" value="'.get_option('cat_destaque').'" name="cat_destaque" /></td>'; echo '</tr>'; echo '<tr valign="top">'; echo '<th scope="row"><label for="id_texto_about">Texto de apresentação</label></th>'; echo '<td><textarea id="id_texto_about" cols="40" rows="7" name="texto_about">'.get_option('texto_about').'</textarea></td>'; echo '</tr>'; echo '</tbody>'; echo '</table>'; echo '<p class="submit">'; echo '<input type="hidden" name="action" value="update" />'; echo '<input type="hidden" name="page_options" value="cat_destaque,texto_about" />'; echo '<input type="submit" name="Submit" value="Atualizar opções" />'; echo '</p>'; echo '</form>'; echo '</div>'; }
Atualize novamente a página de opções, e você terá agora dois campos de opções: um caixa de texto para inserir o ID da categoria que o blogueiro quer de destaque, e uma área de texto com um espaço para escrever um texto “sobre mim”.
RECUPERANDO OPÇÕES
Essa é a parte mais fácil, basta usa a função get_option() com o nome da opção que você quer recuperar. Em nosso exemplo, vamos montar uma lista de títulos com últimos 5 posts da categoria que está inserida na opção cat_destaque usando get_posts():
<?php $cat_destaque = get_option('cat_destaque'); // aqui eu chamo o ID da categoria $destaque = get_posts('numberposts=5&orderby=ID&order=DESC&category='.$cat_destaque); foreach($destaque as $post) : ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php endforeach; ?>
Para chamar o texto “sobre mim” das opções, o princípio é o mesmo, e você pode inserir em qualquer lugar do tema. Abra o arquivo sidebar.php e insira em qualquer lugar dela:
<h2>Sobre mim</h2> <p><?php echo get_option('texto_about'); ?></p>
Ufa! Agora, para inserir novas opções, é só duplicar as opções existentes e usá-las PARA QUALQUER FINALIDADE! A sua imaginação é limite. O código completo da página functions.php a seguir (adicionei a mensagem de atualização com fade, padrão no WP):
<?php /* Opções do meu tema ---> Plugin para atualizar seções do meu blog/site */ add_action('admin_menu','meu_tema_options_admin'); function meu_tema_options_admin () { add_menu_page( 'Opções do Meu Tema', 'Opções do Meu Tema', 'manage_options', 'opcoes_tema', 'meu_tema_options' ); } function meu_tema_options() { echo '<div class="wrap">'; echo '<h2>Opções do Meu Tema</h2>'; if ($_REQUEST['updated']=="true") { echo '<div id="message" class="updated fade">'; echo '<p>Opções salvas com sucesso.</p>'; echo '</div>'; } echo '<form method="post" action="options.php">'; wp_nonce_field('update-options'); echo '<table class="form-table">'; echo '<tbody>'; echo '<tr valign="top">'; echo '<th scope="row"><label for="id_cat_destaque">ID da categoria em destaque</label></th>'; echo '<td><input id="id_cat_destaque" type="text" size="40" value="'.get_option('cat_destaque').'" name="cat_destaque" /></td>'; echo '</tr>'; echo '<tr valign="top">'; echo '<th scope="row"><label for="id_texto_about">Texto de apresentação</label></th>'; echo '<td><textarea id="id_texto_about" cols="40" rows="7" name="texto_about">'.get_option('texto_about').'</textarea></td>'; echo '</tr>'; echo '</tbody>'; echo '</table>'; echo '<p class="submit">'; echo '<input type="hidden" name="action" value="update" />'; echo '<input type="hidden" name="page_options" value="cat_destaque,texto_about" />'; echo '<input type="submit" name="Submit" value="Atualizar opções" />'; echo '</p>'; echo '</form>'; echo '</div>'; } ?>
Cuidado na hora de mexer com seu arquivo functions.php:
- em muitos temas já existem várias funções nesse arquivo. Procure adicionar novas funções discriminando em comentários a utilização de cada uma;
- retire qualquer espaço em branco e/ou quebras de linha do final do functions.php, ou um erro eocorrerá em TODO O SEU BLOG (”header were already sent…”).
Este artigo foi baseado nesta página do Codex do Wordpress.






Caraca até que enfim encontrei alguem que explicasse como faz isso!
Parábens pelo post! Sensacional!
Como faço para fazer isto, mas que ele seja um painel dentro do writer?