Creación del redux-config

Este archivo es un script de PHP que se ejecuta para definir el comportamiento y la apariencia de tu panel de opciones personalizado. si que comenzemos con su configuración.

if ( ! class_exists( 'Redux' ) ) {
    return;
}

$opt_name = "new";
require_once dirname(__FILE__).'/sections/layout.php';

function plugin_redux_styles() {
    wp_enqueue_style('DGL style plugin', plugin_dir_url(__FILE__) . 'css/admin.css');
}

add_action('admin_enqueue_scripts', 'plugin_redux_styles');
  • Verificación de Dependencia. Esta es una línea de seguridad crucial. Verifica si la clase principal de Redux (Redux) existe (lo que significa que el framework está cargado). Si no existe, el script detiene su ejecución (return;) para evitar errores fatales.
  • Nombre de la Opción (Clave). Define la clave única ("new") que Redux usará para almacenar y recuperar todas tus opciones en la base de datos de WordPress. También es el nombre de la variable global que usarás para acceder a las opciones (ej. $new['color_primario']).
  • Carga de Secciones. Importa el archivo layout.php (ubicado dentro de una subcarpeta sections). Este archivo es donde realmente se definen las pestañas, las secciones y los campos de entrada (texto, colores, sliders, etc.) que aparecerán en el panel.
  • Estilos Personalizados. Este bloque utiliza el hook de WordPress admin_enqueue_scripts para cargar una hoja de estilos personalizada (admin.css). Esto te permite aplicar CSS propio para modificar la apariencia del panel de opciones de Redux en el área de administración.

Ahora empezaremos con los argumentos.

/**
 * ---> SET ARGUMENTS
 * All the possible arguments for Redux.
 * For full documentation on arguments, please refer to: https://github.com/ReduxFramework/ReduxFramework/wiki/Arguments
 * */

$theme = wp_get_theme(); // For use with some settings. Not necessary.
$theme_version = $theme->get( 'Version' );

$args = array(
    'opt_name' => 'new',
    'dev_mode' => false,
    'display_name' => 'Opciones Tema',
    'display_version' => '1.0',
    'page_slug' => 'new-theme-options',
    'page_title' => 'Opciones Tema',
    'intro_text' => 'Opciones del tema XX en su ' . $theme_version,
    'footer_text' => 'Gracias por usar estas opciones para la visualiación de tu web',
    'admin_bar' => TRUE,
    'menu_type' => 'menu',
    'menu_title' => 'Opciones tema',
    'allow_sub_menu' => TRUE,
    'page_parent_post_type' => 'your_post_type',
    'page_priority' => 1,
    'customizer' => false,
    'default_show' => TRUE,
    'default_mark' => '',
    'class' => 'new',
    'hints' => array(
        'icon_position' => 'right',
        'icon_size' => 'normal',
        'tip_style' => array(
            'color' => 'light',
        ),
        'tip_position' => array(
            'my' => 'top left',
            'at' => 'bottom right',
        ),
        'tip_effect' => array(
            'show' => array(
                'duration' => '500',
                'event' => 'mouseover',
            ),
            'hide' => array(
                'duration' => '500',
                'event' => 'mouseleave unfocus',
            ),
        ),
    ),
    'output' => TRUE,
    'output_tag' => TRUE,
    'settings_api' => TRUE,
    'cdn_check_time' => '1440',
    'compiler' => TRUE,
    'global_variable' => 'new_options',
    'page_permissions' => 'manage_options',
    'save_defaults' => TRUE,
    'show_import_export' => true,
    'transient_time' => '3600',
    'network_sites' => TRUE,
    'system_info' => TRUE,
    'show_options_object' => false,
    'templates_path' => dirname(__FILE__) ."/redux-templates/panel",
    'menu_icon'        => plugin_dir_url( __FILE__ ) ."/img/logo-redux.png",
    'admin_bar_icon' => "new-icon",
    'footer_credit'  => "tuweb.com",
);


Redux::setArgs( $opt_name, $args );
  • Prepara dos variables ($theme y $theme_version) para obtener información sobre el tema actual, lo que permite usar la versión del tema en el texto del panel.
  • 'opt_name': Confirma la clave de almacenamiento ('new').
  • 'dev_mode': Puesto en false, indica modo de producción, ocultando enlaces de debug.
  • 'display_name': El título que aparece en la parte superior del panel de opciones.
  • 'display_version': La versión mostrada en el panel (aquí está hardcoded a ‘1.0’ en lugar de usar $theme_version).
  • 'page_slug': La URL interna (/wp-admin/admin.php?page=new-theme-options) para acceder al panel.
  • 'page_title': El título de la pestaña del navegador para la página de opciones.
  • Define el texto informativo que aparecerá en la cabecera y el pie del panel de opciones, incluyendo la versión dinámica del tema.
  • 'admin_bar': Muestra un enlace a las opciones en la barra de administrador superior.
  • 'menu_type': Configurado como 'menu', hace que el panel sea un elemento de menú de primer nivel en el administrador (en lugar de un submenú).
  • 'menu_title': El texto que aparece en el menú de navegación de WordPress.
  • 'allow_sub_menu': Permite que las pestañas del panel actúen como submenús si se configura así.
  • 'page_parent_post_type': Este ajuste está aquí para posible uso futuro, pero normalmente se deja vacío. Aquí está establecido a 'your_post_type', probablemente un placeholder.
  • 'page_priority': Determina la posición del menú; 1 lo coloca cerca de la parte superior, justo después del Dashboard.
  • 'customizer': Puesto en false, deshabilita la integración con el Personalizador (Customizer) de WordPress.
  • 'default_show': Muestra la marca de que una opción ha sido modificada del valor por defecto.
  • 'default_mark': El texto/símbolo para marcar las opciones por defecto (vacío aquí).
  • 'class': Añade una clase CSS (new) al contenedor del panel, útil para tus estilos personalizados.
  • Los 'hints': Definen cómo deben comportarse los tooltips (pequeñas burbujas de ayuda) en el panel, especificando su posición, estilo, y efectos de aparición/desaparición.
  • 'output' / 'output_tag': Permite que Redux inyecte automáticamente CSS/JS generado por las opciones directamente en el front-end.
  • 'compiler': Activa la función de compilación (a menudo usada para Sass/Less o compilaciones de CSS dinámico).
  • 'global_variable': Define el nombre de la variable global de PHP ($new_options) para acceder a las opciones en cualquier parte del tema.
  • 'page_permissions': El nivel de usuario requerido para ver las opciones (manage_options es típicamente para Administradores).
  • 'show_import_export': Habilita las pestañas para importar/exportar la configuración (útil para migración y copias de seguridad).
  • 'transient_time': Tiempo (en segundos) que la configuración se guarda en la caché (3600 = 1 hora).
  • 'network_sites': Permite usar esta configuración en una red de sitios (Multisitio).

Los tres últimos definen los iconos para el menú y la barra de administración, y el crédito que se muestra en el pie de página del panel de opciones.

Registro Final. Llama a la clase principal de Redux para registrar el panel en WordPress, usando el nombre de la opción ("new") y el array completo de argumentos ($args). Esta acción hace que el menú y el panel aparezcan finalmente en el administrador.

Categorias