Esta é a terceira parte do nosso tutorial sobre plugins para WordPress e hoje nós avançaremos com o nosso estudo, criando uma página administrativa para o nosso Plugin. Na primeira parte do nosso estudo criamos um plugin básico que exibia mensagens em um widget no site do usuário (neste ponto as mensagens eram armazenadas em um array). Na segunda parte, falamos sobre as funções de ativação e desativação de plugins e as usamos para inserir nossas mensagens no banco de dados quando o plugin fosse inicializado e remover tudo quando ele fosse desativado. Evitando assim manter dados inúteis no banco de dados do usuário. Hoje andaremos mais um pouquinho, então mãos à Obra!
Nesta postagem vamos criar para o nosso plugin uma página administrativa onde poderemos adicionar mais mensagens no banco de dados. Para efeito de organização, vamos agrupar nossas funções em um arquivo separado (functions.php) e adicionaremos algumas funções novas nele. Também criaremos um arquivo, com o código da nossa página administrativa. Nosso css ficará no arquivo da própria página administrativa, mas futuramente ele também será separado. Então nosso diretório ficará assim:
Para criarmos o nosso menu vamos usar a função do WordPress add_menu_page(). Ela será chamada dentro da nossa função mw_create_menu() que usaremos como parâmetro na action ‘admin_menu’.
<?php
function mw_create_menu() {
add_menu_page(
'Widget Messages',
// Título da Página
'Widget Messages',
// Título do Menu
'manage_options',
// Nível de permissão exigido para do usuário ter acesso
'message_widget',
// Slug do nosso menu
'mw_adm_page',
// Nome da função que será chamada para construir a página
'dashicons-format-quote'
// Icone que será exibido antes do nome do menu.
);
}
?>
Além desses parâmetros temos o ’position’ que eu não usei. Ele serve para determinar a posição em que o menu será inserido. O nosso vai entrar após os itens padrões do menu. Feito isso, precisamos configurar nossa action ‘admin_menu’, associando nossa função a ela.
<?php
add_action( 'admin_menu', 'mw_create_menu' );
?>
Neste ponto nosso menu já estará sendo exibido, mas se clicarmos nele, a página vai apresentar um erro poque ainda não criamos a função que vai renderizar ela. Esse é o nosso próximo passo.
Essa função será bem simples porque servirá apenas para fazer o include do arquivo que contem o código HTML da página.
<?php
function mw_adm_page(){
include( MW_PATH . "mw_adm_page.php");
}
?>
Vamos criar uma página simples com informações do autor e um formulário para inserir novas mensagens. O formulário será enviado pelo método POST, então pegaremos as informações e salvaremos no banco de dados, na nossa tabela ‘messages_widget’.
Código HTML da nossa página, que colocaremos no nosso arquivo ‘mw_adm_page.php‘.
<?php
# verifica permissões do usuário e caso ele
# não esteja habilitado, a página não será
# exibida.
if ( !current_user_can( 'manage_options' ) ) { return false; }
?>
<div class='mw_wrap'>
<div class='mw_box'>
<div class='mw_brand clearfix'>
<img src='<?php echo plugin_dir_url( __FILE__ ) . "aspas.png";?>' width='150px'>
</div>
<div class='clearfix'>
<h3 class='mw_adm_h3'>
<?php _e('About','message_widget'); ?>
</h3>
<p>
<?php _e('Plugin to show random citations in your WordPress blog.','message_widget');?>
</p>
<ul>
<li>
<span class='dashicons dashicons-admin-users'></span>
<span class='mw_items_adm'>
<?php _e('Author: ', 'message_widget'); ?>
<a href='https://www.andrebrum.com.br/plugins'>Andre Brum Sampaio</a></span>
</li>
<li>
<a href='https://www.andrebrum.com.br/' target='_blank'>
<span class='dashicons dashicons-admin-links'></span>
<span class='mw_items_adm'>
<?php _e('Author URI: ','message_widget');?>http://www.andrebrum.com.br/
</span>
</a>
</li>
<li>
<a href='https://www.instagram.com/andrebrumsampaio/' target='_blank'>
<span class='dashicons dashicons-instagram'></span>
<span class='mw_items_adm'>
<?php _e('Follow on Instagram: ','message_widget');?>@andrebrumsampaio
</span>
</a>
</li>
<li>
<a target='_blank' href='https://www.facebook.com/andrebrumsampaio/'>
<span class='dashicons dashicons-facebook'></span>
<span class='mw_items_adm'>
<?php _e('Follow on Facebook: ','message_widget');?>"@andrebrumsampaio
</span>
</a>
</li>
<li>
<span class='dashicons dashicons-update'></span>
<span class='mw_items_adm'>
<?php _e('Version: ','message_widget');?>1.0
</li>
</ul>
</div>
<div class="clearfix">
<h3 class='mw_adm_h3'><?php _e('Add New Message','message_widget');?></h3>
<div id='add_messages'>
<?php
# Aqui fazemos a chamada da nossa função que vai verificar
# se existe alguma mensagem para ser adicionada ao banco
# de dados.
mw_new_message();
?>
<form method="POST">
<input type="hidden" name="page" value="message_widget">
<table class="form-table" role="presentation">
<tbody>
<tr>
<th scope="row"><?php _e('Author','message_widget');?></th>
<td>
<div class="wm_item-setting">
<span><?php _e('Author','message_widget');?></span>
<input type="text" class="regular-text" name="wm_author" placeholder="<?php _e('Author','message_widget');?>" value="<?php echo $author; ?>">
</div>
</td>
</tr>
<tr>
<th scope="row"><?php _e('Message','message_widget');?></th>
<td>
<div class="wm_item-setting">
<span><?php _e('Message\'s Author','message_widget');?></span>
<textarea name="wm_message" class="regular-text" placeholder="<?php _e('Message','message_widget');?>"><?php echo $message; ?></textarea>
</div>
</td>
</tr>
</tbody>
</table>
<p class="submit">
<input type="submit" name="submit" id="submit" class="button button-primary" value="<?php _e('Add Message','message_widget');?>"></p>
</form>
</div>
</div>
</div>
<!-- Alguns estilos css. No futuro passaremos
eles para um arquivo separado. -->
<style type="text/css">
.wm_item-setting {
padding: 10px;
}
.wm_item-setting span {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
.wm_items_adm {
margin: 5px 0px;
display: inline-block;
height: 20px;
}
div.mw_wrap {
font-size: 14px;
width: 95%;
}
div.mw_wrap a {
color: inherit;
text-decoration: none;
}
div.mw_wrap .mw_box {
background: #fff;
border: 3px solid rgba(204, 204, 204, 0.74);
padding: 20px;
margin-bottom: 30px;
}
div.mw_wrap .mw_box div.title {
font-size: 37px;
letter-spacing: -4px;
color: #DDE1EA;
float: right;
}
div.mw_wrap h3.mw_adm_h3 {
border-bottom: 1px solid #ccc;
padding-bottom: 3px;
color: #49a2d1;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
Por fim, precisamos criar a função responsável pela inserção de novas mensagens na tabela.
<?php
function mw_new_message() {
global $wpdb;
$author = filter_input(INPUT_POST, 'wm_author');
$message = filter_input(INPUT_POST, 'wm_message');
$table_name = $wpdb->prefix . "messages_widget";
if( isset( $author ) AND !empty( $author ) ) {
if( isset( $message ) AND !empty( $message ) ) {
$value = array('author' => $author , 'msg' => $message);
$wpdb->insert( $table_name, $value );
$db_error = $wpdb->last_error;
if( !$db_error ) {
echo "<span class='wm-info'>Sua mensagem foi adicionada ao Banco de Dados.</span>";
$author = "";
$message = "";
} else {
print_r($db_error);
}
} else {
echo "<span class='wm-info'>O campo mensagem não pode ser em branco</span>";
}
} else {
echo "<span class='wm-info'>Nome do autor é obrigatório.</span>";
}
}
?>
E assim acabamos o código desta fase e se tudo correu bem você deve ter uma página administrativa como a da imagem abaixo. Usei a imagem de uma ‘Aspas’ como logotipo da página só para ilustrar.
Se você chegou direto neste post e gostaria de ver a sequência completa da criação do nosso plugins, você pode acessar a primeira parte aqui e a segunda aqui.
Nosso plugin ainda está em inglês, mas em breve faremos a intercionalização dele.
Espero que tudo tenha dados certo!!
Um comentário
Adicionando Funcionalidades ao Plugin « André Brum em 10/01/2021. […] Para acessar a terceira parte desta série clique aqui. […]