Módulo 5: Adicionando Configurações no Painel Administrativo

Os plugins no WordPress podem se tornar ainda mais úteis e flexíveis ao incluir páginas de configurações no painel administrativo. Esse módulo vai ensinar como criar e gerenciar páginas de configuração para o seu plugin. Vamos abordar:

  • Como criar páginas de configuração;
  • Como salvar e recuperar configurações do plugin;
  • Uso das funções add_menu_page e add_submenu_page.

Criando Páginas de Configuração

Para criar uma página de configuração no painel administrativo, utilizamos a função add_menu_page. Ela cria um novo item no menu principal do painel administrativo.

Exemplo Básico de uma Página de Configuração

Adicione o seguinte código ao seu arquivo principal do plugin:

function meu_plugin_adicionar_pagina_configuracao() {
    add_menu_page(
        'Configurações do Meu Plugin', // Título da página
        'Meu Plugin', // Nome no menu
        'manage_options', // Permissão necessária
        'meu-plugin-configuracoes', // Slug da página
        'meu_plugin_pagina_configuracao_callback', // Função de callback
        'dashicons-admin-generic', // Ícone do menu
        20 // Posição no menu
    );
}
add_action( 'admin_menu', 'meu_plugin_adicionar_pagina_configuracao' );

function meu_plugin_pagina_configuracao_callback() {
    echo '<h1>Configurações do Meu Plugin</h1>';
    echo '<form method="post" action="options.php">';
    settings_fields( 'meu_plugin_opcoes' );
    do_settings_sections( 'meu-plugin-configuracoes' );
    submit_button();
    echo '</form>';
}

O que este código faz?

  1. add_menu_page: Cria um novo item no menu do painel administrativo.
  2. Função de Callback: Define o conteúdo da página de configuração.
  3. settings_fields e do_settings_sections: Gera os campos de configuração do plugin.

Salvando e Recuperando Configurações

Agora que a página de configuração foi criada, precisamos registrar as configurações que serão salvas no banco de dados e carregadas quando necessário.

Registrando Configurações

Adicione o seguinte código ao seu plugin:

function meu_plugin_registrar_configuracoes() {
    register_setting( 'meu_plugin_opcoes', 'meu_plugin_opcao_texto' );

    add_settings_section(
        'meu_plugin_secao_principal',
        'Configurações Gerais',
        null,
        'meu-plugin-configuracoes'
    );

    add_settings_field(
        'meu_plugin_campo_texto',
        'Texto de Exemplo',
        'meu_plugin_campo_texto_callback',
        'meu-plugin-configuracoes',
        'meu_plugin_secao_principal'
    );
}
add_action( 'admin_init', 'meu_plugin_registrar_configuracoes' );

function meu_plugin_campo_texto_callback() {
    $valor = get_option( 'meu_plugin_opcao_texto', '' );
    echo '<input type="text" name="meu_plugin_opcao_texto" value="' . esc_attr( $valor ) . '" />';
}

O que este código faz?

  1. register_setting: Registra a opção para ser salva no banco de dados.
  2. add_settings_section: Adiciona uma seção de configurações.
  3. add_settings_field: Define um campo dentro da seção.
  4. Função Callback do Campo: Gera o HTML para o campo de entrada.

Adicionando Submenus

Caso você queira criar páginas adicionais como submenus dentro do menu principal, utilize a função add_submenu_page:

function meu_plugin_adicionar_submenu() {
    add_submenu_page(
        'meu-plugin-configuracoes', // Slug do menu pai
        'Submenu do Meu Plugin', // Título da página
        'Submenu', // Nome no submenu
        'manage_options', // Permissão necessária
        'meu-plugin-submenu', // Slug do submenu
        'meu_plugin_submenu_callback' // Função de callback
    );
}
add_action( 'admin_menu', 'meu_plugin_adicionar_submenu' );

function meu_plugin_submenu_callback() {
    echo '<h1>Submenu do Meu Plugin</h1>';
    echo '<p>Este é o conteúdo do submenu.</p>';
}

Conclusão

Com essas ferramentas, você pode criar páginas de configuração completas e intuitivas para o seu plugin, permitindo que os usuários personalizem facilmente suas funcionalidades. No próximo módulo, exploraremos como adicionar widgets personalizados ao WordPress.

Veja o resultado do código:

Código completo até agora:

<?php
/*
Plugin Name: Meu Primeiro Plugin
Description: Um simples plugin para aprender a criar plugins no WordPress.
Version: 1.0
Author: Seu Nome
*/

if ( !defined( 'ABSPATH' ) ) {
    exit; // Proteção contra acesso direto
}

// Função para exibir mensagem no rodapé
function meu_plugin_mensagem_rodape() {
    echo '<p style="text-align: center;">Obrigado por visitar nosso site! - Meu Primeiro Plugin</p>';
}

add_action( 'wp_footer', 'meu_plugin_mensagem_rodape' );

// Função para personalizar o título dos posts
function meu_plugin_personalizar_titulo( $titulo ) {
    // Adiciona o prefixo "[Especial]" ao título
    return '[Especial] ' . $titulo;
}
add_filter( 'the_title', 'meu_plugin_personalizar_titulo' );


// Função criando um shortcode
function meu_plugin_galeria_shortcode() {
    $html = '<div style="display: flex; gap: 10px;">';
    $html .= '<img src="https://aquinosresolvemos.com/wp-content/uploads/elementor/thumbs/NOVA-LOGO-RESOLVE-plwarhumrc67vvde2targiz5ew8d57mub701ju58xi.png" alt="Imagem 1">';
    $html .= '<img src="https://aquinosresolvemos.com/wp-content/uploads/elementor/thumbs/NOVA-LOGO-RESOLVE-plwarhumrc67vvde2targiz5ew8d57mub701ju58xi.png" alt="Imagem 2">';
    $html .= '<img src="https://aquinosresolvemos.com/wp-content/uploads/elementor/thumbs/NOVA-LOGO-RESOLVE-plwarhumrc67vvde2targiz5ew8d57mub701ju58xi.png" alt="Imagem 3">';
    $html .= '</div>';
    return $html;
}
add_shortcode( 'galeria_personalizada', 'meu_plugin_galeria_shortcode' );


function meu_plugin_formulario_shortcode() {
    $html = '<form method="post" action="#">';
    $html .= '<label for="nome">Nome:</label>';
    $html .= '<input type="text" id="nome" name="nome" required>';
    $html .= '<button type="submit">Enviar</button>';
    $html .= '</form>';
    return $html;
}
add_shortcode( 'formulario_simples', 'meu_plugin_formulario_shortcode' );

function meu_plugin_adicionar_pagina_configuracao() {
    add_menu_page(
        'Configurações do Meu Plugin', // Título da página
        'Meu Plugin', // Nome no menu
        'manage_options', // Permissão necessária
        'meu-plugin-configuracoes', // Slug da página
        'meu_plugin_pagina_configuracao_callback', // Função de callback
        'dashicons-admin-generic', // Ícone do menu
        20 // Posição no menu
    );
}
add_action( 'admin_menu', 'meu_plugin_adicionar_pagina_configuracao' );

function meu_plugin_pagina_configuracao_callback() {
    echo '<h1>Configurações do Meu Plugin</h1>';
    echo '<form method="post" action="options.php">';
    settings_fields( 'meu_plugin_opcoes' );
    do_settings_sections( 'meu-plugin-configuracoes' );
    submit_button();
    echo '</form>';
}

function meu_plugin_registrar_configuracoes() {
    register_setting( 'meu_plugin_opcoes', 'meu_plugin_opcao_texto' );

    add_settings_section(
        'meu_plugin_secao_principal',
        'Configurações Gerais',
        null,
        'meu-plugin-configuracoes'
    );

    add_settings_field(
        'meu_plugin_campo_texto',
        'Texto de Exemplo',
        'meu_plugin_campo_texto_callback',
        'meu-plugin-configuracoes',
        'meu_plugin_secao_principal'
    );
}
add_action( 'admin_init', 'meu_plugin_registrar_configuracoes' );

function meu_plugin_campo_texto_callback() {
    $valor = get_option( 'meu_plugin_opcao_texto', '' );
    echo '<input type="text" name="meu_plugin_opcao_texto" value="' . esc_attr( $valor ) . '" />';
}

function meu_plugin_adicionar_submenu() {
    add_submenu_page(
        'meu-plugin-configuracoes', // Slug do menu pai
        'Submenu do Meu Plugin', // Título da página
        'Submenu', // Nome no submenu
        'manage_options', // Permissão necessáriaa
        'meu-plugin-submenu', // Slug do submenu
        'meu_plugin_submenu_callback' // Função de callback
    );
}
add_action( 'admin_menu', 'meu_plugin_adicionar_submenu' );

function meu_plugin_submenu_callback() {
    echo '<h1>Submenu do Meu Plugin</h1>';
    echo '<p>Este é o conteúdo do submenu.</p>';
}


?>