Tópico 9 — Redux Framework no WordPress | Guia Técnico WordPress, Banco de Dados e Next.js

1. O que é o Redux Framework

O Redux Framework é uma biblioteca que permite criar painéis de configuração no painel administrativo do WordPress. Ele facilita o gerenciamento de opções de tema e dados globais que podem ser utilizados no front-end de forma estruturada.

Objetivo entender a criação, estrutura e consumo das opções do Redux dentro de um tema WordPress.

2. Instalação e Configuração

Você pode instalar o Redux diretamente pelo painel de plugins ou adicioná-lo via Composer.

Instalação via Composer

composer require reduxframework/redux-framework

Após a instalação, o Redux cria um menu no painel administrativo chamado Redux ou Opções do Tema.

3. Estrutura Básica de um Painel Redux

Um painel de opções Redux é configurado em um arquivo PHP dentro do tema, geralmente em inc/redux-config.php.

Exemplo de configuração

<?php
if ( ! class_exists( 'Redux' ) ) {
  return;
}

$opt_name = "matilha_options";

Redux::setArgs( $opt_name, [
  'opt_name' => $opt_name,
  'menu_title' => 'Configurações Matilha',
  'page_title' => 'Painel do Tema',
  'menu_icon' => 'dashicons-admin-generic',
  'page_slug' => 'matilha-opcoes',
  'customizer' => true,
]);

Redux::setSection( $opt_name, [
  'title'  => 'Identidade Visual',
  'id'     => 'identidade',
  'desc'   => 'Defina cores e logotipo.',
  'fields' => [
    [
      'id' => 'cor_principal',
      'type' => 'color',
      'title' => 'Cor Principal',
      'default' => '#7aa2f7',
    ],
    [
      'id' => 'logo_principal',
      'type' => 'media',
      'title' => 'Logo do Site',
    ],
  ]
]);
?>

Observação As opções definidas aqui são salvas na tabela wp_options sob o nome configurado em $opt_name.

4. Utilizando as Opções no Front-End

Para acessar as opções do Redux no seu tema, utilize a função get_option() passando o nome definido como $opt_name.

functions.php — consumo das opções

<?php
$opcoes = get_option('matilha_options');
$cor_principal = $opcoes['cor_principal'];
$logo = $opcoes['logo_principal']['url'];
?>

<style>
:root {
  --cor-principal: <?php echo $cor_principal; ?>;
}
</style>

<img src="<?php echo esc_url($logo); ?>" alt="Logo do site">

5. Exemplo Avançado — Criando Múltiplas Seções

Podemos dividir o painel em várias seções, agrupando opções por categoria.

redux-config.php — múltiplas seções

Redux::setSection( $opt_name, [
  'title' => 'Rodapé',
  'id'    => 'rodape',
  'fields' => [
    [
      'id' => 'texto_rodape',
      'type' => 'text',
      'title' => 'Texto do Rodapé',
      'default' => '© Matilha Digital 2025',
    ],
    [
      'id' => 'links_sociais',
      'type' => 'slides',
      'title' => 'Links Sociais',
      'placeholder' => [
        'title' => 'Título',
        'url' => 'https://...',
      ],
    ],
  ],
]);

Benefício Cada seção facilita a organização das opções e reduz a complexidade visual no painel.

6. Integrando Redux ao Elementor

As opções do Redux podem ser utilizadas em páginas criadas com Elementor via shortcode, permitindo o uso dinâmico de valores configurados no painel.

Criando shortcode para uso no Elementor

<?php
function matilha_info_redux() {
  $opt = get_option('matilha_options');
  $texto = $opt['texto_rodape'];
  return '<p>' . esc_html($texto) . '</p>';
}
add_shortcode('matilha_info', 'matilha_info_redux');
?>

Uso Insira [matilha_info] em um widget de texto no Elementor.

7. Boas Práticas

Evite criar opções redundantes. Mantenha nomes curtos e claros.
Organize seções por domínio (Identidade, Layout, Rodapé, etc.).
Use sempre funções de sanitização ao imprimir valores (esc_html, esc_url).
Faça backup das opções antes de grandes atualizações de tema.

Resultado Painel profissional, seguro e integrado à estrutura do tema e do Elementor.