Cree su propio panel de opciones de tema de WordPress con Redux Framework

Redux framework es uno de los marcos de panel de opciones más populares, avanzados y de uso gratuito para temas y complementos de WordPress. Su flexibilidad le brinda la libertad de crear cualquier tipo de opciones y configuraciones para su proyecto de WordPress.

En este tutorial, le mostraré cómo puede instalar, personalizar y usar el marco de Redux en su propio tema.

Caminaremos por los siguientes pasos:

Instalación
Configuración general
Creación de un panel de opciones
Uso de opciones dentro de un tema

Nota: Me referiré a Redux Framework simplemente como Redux a lo largo de este tutorial. Esto no debe confundirse con Redux, el "contenedor de estado predecible para aplicaciones JavaScript".

1. Instalación

Hay tres formas en que puede incluir Redux en su proyecto:

Instálalo como un complemento separado
Inclúyelo en el núcleo de tu tema.
Inclúyelo en un plugin dependiente del tema.

Instálelo como un complemento separado

Por defecto, Redux se puede instalar como un complemento. Si va a la página del complemento de WordPress de Redux Framework, verá que puede descargarlo como un complemento regular e instalarlo en su sitio de WordPress con cualquier tema. Esto no crea ninguna opción sin embargo; todo lo que puede hacer es activar el modo de demostración con opciones de muestra.

Para obtener un panel de opciones con opciones personalizadas para su tema o complemento, deberá crear un archivo config.php separado. Lea más acerca de cómo funciona esto:

Por lo tanto, las ventajas y desventajas de este enfoque son:

Contras	Pros
Instalación de complementos separados que debe almacenarse como archivo zip en su servidor o dentro de la carpeta de temas.	Reduce el tamaño de su tema cuando el panel de opciones no forma parte del núcleo del tema.
Mayor sensación de que el tema / complemento depende del desarrollo y las herramientas de terceros.	Se evitan numerosas advertencias y errores del plugin Theme Check..

Inclúyelo en tu núcleo temático

No hay nada que lo detenga, incluido Redux en su tema, a menos que esté en conflicto con el complemento Theme Check. La lógica es la misma que antes, todavía necesita un archivo config.php con sus opciones personalizadas, pero ahora evita la instalación adicional de complementos..

Contras	Pros
Aumenta el tamaño del paquete de temas..	Evitar la instalación adicional de plugins..
Los posibles conflictos y problemas pueden surgir del tema Checkin plugin.	El panel de opciones de tema se siente más conectado a su tema y más integrado.
Siempre que se actualice el complemento, también deberá actualizar su tema..

Incluirlo en un complemento dependiente del tema

En mi opinión, este enfoque es la mejor manera de incluir el marco de Redux. El proceso es tan simple como la instalación normal de un plugin, la única diferencia es que ahora es parte del complemento del complemento requerido de su propio tema.

Los temas premium modernos por lo general vienen con elementos personalizados, tipos de publicaciones personalizadas, etc., todos los cuales pertenecen a un complemento, por lo que el enfoque lógico es crear un complemento adicional vinculado a su tema. En ese complemento adicional puede incluir su panel de opciones de tema. Aprenda más sobre la creación de complementos dependientes de temas en este tutorial:

Contras	Pros
No encontró :)	Evitar la instalación adicional de plugins..
	El panel de opciones de tema se siente más integral a tu tema.

El proceso de configuración de Redux no se ve afectado por el método de instalación, por lo que depende de usted cómo incluir Redux en su proyecto. Dicho esto, sigo prefiriendo la última opción, así que ese es el enfoque que usaré para describir la configuración.

2. Configuración general

Si examina la carpeta predeterminada del complemento de Redux Framework, encontrará muchos archivos y directorios, pero todo lo que necesita aquí es la carpeta ReduxCore.

La carpeta ReduxCore

Copie todo el contenido de esa carpeta en su carpeta de complementos adicionales. Crea una carpeta, llámala como quieras, por ejemplo panel de opciones, y poner el contenido de ReduxCore en él. A continuación, crea un archivo vacío dentro de esa carpeta y llámalo config.php. A continuación necesitaremos reduxframework, lo que haremos sin conflicto, por lo que si el complemento se instala en el entorno de WordPress, el sitio no se bloqueará.

En el archivo principal de su complemento, agregue el código:

¡Eso es todo! Su Redux Framework ahora está integrado, aunque todavía no verá ningún panel de opciones, ya que primero necesitamos crear algunas opciones. Todo esto se hará en el archivo config.php que creamos.

3. Creando un panel de opciones

Como guía y punto de partida, puede usar el archivo sample-config.php que se proporciona con el complemento Redux. Este contiene todo el código necesario para comenzar a crear sus propias opciones personalizadas. Por ahora vamos a resaltar el proceso de configuración principal..

Abra su archivo config.php y al principio agregue este código (la apertura la etiqueta no será necesaria si ya está presente):

 Esta verificación se asegura de que Redux Framework esté activo, de lo contrario, todas las opciones que creamos no funcionarán y probablemente arrojarán toneladas de errores de PHP.
 Antes de comenzar a crear nuestras opciones, primero necesitamos una configuración adicional. Cree una variable que almacene todas sus opciones y pueda usarse dentro de sus archivos de temas:
$ opt_name = "your_variable_name";
 Hazlo único, usando prefijos, por ejemplo: tu nombre de marca tu nombre.
Después de eso, agregue el código:
$ theme = wp_get_theme ();
Esto es necesario para configurar cualquier argumento de Redux que use información sobre el tema instalado.
Argumentos
 En este punto necesitamos agregar los siguientes argumentos:
$ args = array ('opt_name' => $ opt_name, 'display_name' => $ theme-> get ('Name'), 'display_version' => $ theme-> get ('Version'), 'menu_type' => 'submenu', 'allow_sub_menu' => true, 'menu_title' => esc_html __ ('Theme Settings', yourdomdomain '),' page_title '=> esc_html __ (' ThemeSettings ', yourtextdomain'), 'google_api_key' => "" ' google_update_weekly '=> false,' async_typography '=> true,' admin_bar '=> true,' admin_bar_icon '=> ",' admin_bar_priority '=> 50,' global_variable '=> $ opt_name,' dev_mode '=> false,' update_notice '=> false,' customizer '=> true,' page_priority '=> null,' page_parent '=>' themes.php ',' page_permissions '=>' manage_options ',' menu_icon '=> ", last_tab' => ", 'page_icon' => 'icon-themes', 'page_slug' => 'themeoptions', 'save_defaults' => true, 'default_show' => false, 'default_mark' =>", 'show_import_export' => cierto );
 Aquí hay muchos argumentos, pero no te preocupes, resaltaré los más importantes..
 menu_type
 Si desea que su página de opciones de tema aparezca como un elemento de menú de nivel superior separado, debe establecer este valor en menú, si necesita que sus opciones de tema aparezcan como un submenú (prefiero ponerlas bajo Apariencia) establece el valor en submenu.
 dev_mode
 Puede habilitar esto durante el desarrollo, pero no olvide deshabilitarlo al publicar el tema.
 update_notice
 Como Redux formará parte de su proyecto, no querrá que sus usuarios reciban avisos de actualización de Redux Framework, así que configúrelo falso.
 personalizador
 Si desea mostrar sus configuraciones personalizadas como parte del personalizador de WordPress, simplemente configure este argumento en cierto.
 La matriz de argumentos contiene muchos más elementos y, si desea información sobre cada uno, puede encontrar detalles en sample-config.php. Para nuestras necesidades, hemos personalizado los argumentos lo suficiente. Ahora vamos a establecer los argumentos.
Redux :: setArgs ($ opt_name, $ args);
 Añadiendo secciones
Ahora que su panel de temas está listo, puede agregar secciones con opciones. Piensa en las secciones como si fueran grupos. Si desea agregar (por ejemplo) opciones de encabezado, puede crear una sección de encabezado y agregarle opciones. Para crear cualquier sección necesitarás la siguiente estructura:
Redux :: setSection ($ opt_name, array ('title' => esc_html __ ('Section title', 'yourtextdomain'), 'id' => esc_html __ ('section-unique-id', 'yourtextdomain'), 'icon' => 'nombre-icono', 'campos' => array ()));
 Aquí quiero destacar la carné de identidad atributo-asegúrese de que es único. Puede usar iconos personalizados, pero el paquete de iconos predeterminado es elusiveicons.
 Se crea su sección, por lo que ahora puede agregar opciones a la matriz de campos. Aquí puede encontrar una lista de los tipos de opciones disponibles, así como la estructura del código con explicaciones y puntos destacados.. 
Si quieres que la sección sea una subsección de la sección previamente agregada, solo agrega un nuevo argumento 'subsection' => true. 
La opción en sí no es más que una matriz con argumentos, por ejemplo:
array ('id' => 'opt-checkbox', 'type' => 'checkbox', 'title' => esc_html __ ('Checkbox', 'yourtextdomain'), 'subtitle' => esc_html __ ('No se puede validar hecho en este campo escriba ',' yourtextdomain '),' desc '=> esc_html __ (' Este es el campo de descripción, bueno para información adicional ',' yourtextdomain '),' default '=>' 1 '// 1 = encendido | 0 = apagado), 
 Con este código hemos añadido una casilla de verificación a nuestra sección. Las cosas más importantes aquí son el id (debe ser único) y el tipo (debe ser correcto y seguir la denominación exacta del tipo de campo que proporciona Redux). Una vez más, se pueden encontrar más detalles sobre los campos en el archivo sample-config.php.
 En general, esto es todo lo que necesita saber para crear un panel de opciones. A continuación veremos cómo usar estas opciones..
 4. Usando opciones dentro de un tema
 Redux almacena todas las opciones en una variable global. Recuerda el $ opt_name ¿Variable que hemos creado en el archivo config.php? Esa es la variable que almacena todas sus opciones, y puede acceder a ellas de la siguiente manera.
 Primero, necesitas declarar la variable global. Y esto presenta el primer problema potencial: no se recomienda declarar una variable global fuera de una función o acción. La solución es agregar a su archivo functions.php esta pequeña función:
función yourprefix_theme_options_global_variable () global $ yourglobalvariable; 
Luego, en cada página que desee utilizar sus opciones, ejecute la función primero de esta manera:
yourprefix_theme_options_global_variable ();
 Si necesita la variable global dentro de otra función o acción, puede declararla sin esta función.
Usando opciones
 Si usa opciones sin verificar primero la opción existente, recibirá un aviso de PHP que dice algo sobre variable / índice indefinido. ¿Porque es esto importante? Porque si el usuario activa su tema, pero no activa el complemento que contiene su panel de opciones, verá una colección de avisos de advertencia de PHP sobre variables no definidas. No es ideal.
Hay un buen patrón para evitar esta situación: se ve así:
$ your_option_name = (isset ($ GLOBALS ['yourglobalvariable'] ['youroption']))? $ GLOBALS ['yourglobalvariable'] ['youroption']: “yourdefaultvalue for thisoption”;
 Con esta pequeña comprobación, se asegura de no recibir avisos de variables / índices no definidos. Si no desea asignar valores predeterminados o crear una variable, puede usar este patrón en su lugar: 
If (isset ($ GLOBALS ['yourglobalvariable'] ['youroption']) // haz las cosas ...
Conclusión
Gracias por leer, ¡espero que esto le ayude a comenzar a utilizar Redux para sus opciones de tema! Si tiene alguna pregunta o sugerencia, por favor deje un comentario a continuación.
Enlaces útiles
 reduxframework.com
  ReduxFramework en Facebook
  @ReduxFramework en Twitter
 



		
			
	   
	




Diseño web