meta

  • 04.02.2009
  • 08:50 PM
  • admin

Faça uma página de opções para seu tema 2

Feb4

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&ccedil;&otilde;es do Meu Tema',     	
    'Op&ccedil;&otilde;es do Meu Tema',     	
    'manage_options', 						
    'opcoes_tema',         						
    'meu_tema_options'  					
    );
 
}
 
function meu_tema_options() { 
 
    echo '<div class="wrap">';
    echo '<h2>Op&ccedil;&otilde;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&ccedil;&otilde;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&ccedil;&otilde;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&ccedil;&otilde;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&ccedil;&atilde;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&ccedil;&otilde;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&ccedil;&otilde;es do Meu Tema',     	
    'Op&ccedil;&otilde;es do Meu Tema',     	
    'manage_options', 						
    'opcoes_tema',         						
    'meu_tema_options'  					
    );
}
 
function meu_tema_options() { 
    echo '<div class="wrap">';
    echo '<h2>Op&ccedil;&otilde;es do Meu Tema</h2>';
    if ($_REQUEST['updated']=="true") {
        echo '<div id="message" class="updated fade">';
        echo '<p>Op&ccedil;&otilde;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&ccedil;&atilde;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&ccedil;&otilde;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.

assine o feed RSS dos comentários

2 comentários para este post

  1. Caraca até que enfim encontrei alguem que explicasse como faz isso!

    Parábens pelo post! Sensacional!

  2. Ivan says:

    Como faço para fazer isto, mas que ele seja um painel dentro do writer?

Deixe seu comentário

* campos obrigatórios