No artigo anterior, O mecanismo de opções do WordPress, falamos sobre a possibilidade de customizar os plugins através do mecanismo de opções do WordPress. Páginas de opções podem ser desenvolvidas num padrão ou de forma customizada. Abordaremos as duas versões de páginas padrão: um padrão utilizado até a versão 2.7 e outra posterior a ela.

NOTA: O modelo de página de opções no padrão WordPress apresentando aqui não é seguro. Será demonstrado para fins de estudos e comparativos com o modelo atual a ser adotado e que será abordado no próximo artigo.

Nossa página de opções se localizará como um submenu em Configurações. Logo, faremos uso da função add_options_page(), através da qual adicionamos novas páginas de opções. Nossos códigos precisarão residir num plugin WordPress, o que significa dizer que nosso arquivo PHP terá um cabeçalho de plugin WordPress como demonstrado abaixo:

<?php
/*
Plugin Name: Criando página de opções no padrão WordPress
Plugin URI: http://leandrovieira.com/
Description: Cuidado! Esse modelo de página de opções é recomendado para versões anterior a 2.7 e não é um modelo seguro.
Author: Leandro Vieira Pinho
Version: 1.0
Author URI: http://leandrovieira.com/
*/
?>

O próximo passo é adicionar o menu ao WordPress, veja como é simples:

<?php
function imasters_criar_menu()
{
    add_options_page( 'Título na tag title', 'Título no menu', 10, 'arquivo-da-pagina-de-opcoes.php' );
}

add_action( 'admin_menu', 'imasters_criar_menu' );
?>

Através do código acima criamos, no menu Configurações, um novo item, o qual somente
administradores (com nível de acesso 10) poderão acessá-lo, e o HTML da
página será montado no arquivo nomeado como
“arquivo-da-pagina-de-opcoes.php”. Meu conselho, ao criar páginas
para seu plugin WordPress, é seguir a mesma linha visual para que assim
a identidade visual seja mantida. O que precisamos fazer é apenas
incluir algumas classes CSS em determinadas tags.

Agora, criaremos a página “arquivo-da-pagina-de-opcoes.php”. O primeiro passo é criar uma tag div que englobará todo o conteúdo da página e definir um título. Veja:

<div class="wrap">
<h2>Título da página de opções</h2>
<!-- restante do conteúdo -->
</div>

Em
seguida, precisaremos de um formulário. Afinal, será través de campos de
formulário que os usuários definirão as opções desejadas. Após o
título, iniciamos a criação do formulário:

<form method="post" action="options.php">

Observe
que a ação será executada na página options.php. Ela requer alguns
requerimentos para processar as opções e retornar à página de origem.
Um desses requerimentos é adicionado através da seguinte função:

<?php wp_nonce_field( 'update-options' ); ?>

A
função mostrada acima irá inserir dois campos ocultos que ajuda o
mecanismo de opções do WordPress a verificar se o usuário pode atulizar
as opções e o redirecionar para a página em questão. Veja um exemplo
desses campos ocultos:

<input type="hidden" value="5ae5ec1e5c" name="_wpnonce" id="_wpnonce"/>
<input
type="hidden"
value="/wordpress-2.8.2/wp-admin/options-general.php?page=arquivo-da-pagina-de-opcoes.php"
name="_wp_http_referer"/>

Os campos de formulário e seus
rótulos são exibidos por padrão no WordPress através de tabelas. Para
mantermos a identidade precisamos adicionar à tabela a classe
form-table como no exemplo abaixo:

<table class="form-table">

O nome dos campos informado no atributo “name” será o mesmo para o nome das opções. Veja:

<tr valign="top">
    <th scope="row">Nome da opção</th>
    <td>
        <input type="text" name="nome_da_opcao" value="<?php echo get_option( 'nome_da_opcao' ); ?>" />
    </td>
</tr>
<tr valign="top">
    <th scope="row">Nome de outra opção</th>
    <td>
        <input type="text" name="nome_de_outra_opcao" value="<?php echo get_option( 'nome_de_outra_opcao' ); ?>" />
    </td>
</tr>

Atente-se
para o uso da função get_option() no atributo “value” dos campos. Com isso
exibiremos o valor das opções quando elas forem salvas. Concluída a
inserção dos campos, feche a tabela.

</table>

Agora,
precisaremos de dois campos ocultos. Um informará que a ação a ser
executada na página “options.php” será de atualização. Logo, o campo
será o seguinte:

<input type="hidden" name="action" value="update" />

O segundo informará à página “options.php” o nome das opções a serem criadas. Observe:

<input type="hidden" name="page_options" value="nome_da_opcao,nome_de_outra_opcao" />

Atente-se
para o fato de os nomes das opções serem separados por vírgula. O próximo
passo é finalizar com o fechamento das tags anteriormente abertas. Veja:

    <p class="submit">
        <input type="submit" class="button-primary" value="Salvar" />
    </p>
</form>
</div>

Para facilitar uma melhor visualização da página que acabamos de criar, observe todos os códigos utilizados.

<div class="wrap">
<h2>Título da página de opções</h2>
    <form method="post" action="options.php">
        <?php wp_nonce_field( 'update-options' ); ?>
        <table class="form-table">
            <tr valign="top">
                <th scope="row">Nome da opção</th>
                <td>
                    <input type="text" name="nome_da_opcao" value="<?php echo get_option( 'nome_da_opcao' ); ?>" />
                </td>
            </tr>
            <tr valign="top">
                <th scope="row">Nome de outra opção</th>
                <td>                   
<input type="text" name="nome_de_outra_opcao" value="<?php echo
get_option( 'nome_de_outra_opcao' ); ?>" />
</td>
            </tr>
        </table>
        <input type="hidden" name="action" value="update" />
        <input type="hidden" name="page_options" value="nome_da_opcao,nome_de_outra_opcao" />
        <p class="submit">
            <input type="submit" class="button-primary" value="Salvar" />
        </p>
    </form>
</div>

Através do vídeo abaixo exploro a brecha de segurança nesse modelo de página de opções no padrão WordPress. Observe:

No próximo artigo criaremos uma página de opções no padrão WordPress a partir da versão 2.7. Até breve. Abraços.