Cómo crear controles personalizados para el personalizador de temas de WordPress
Publicado: 2015-06-17La función Personalizador de temas de WordPress (también conocida como "Personalizador") brinda a los desarrolladores la capacidad de personalizar la apariencia de su tema e incluso ayudarlos a obtener una vista previa de los cambios realizados en el tema en tiempo real. En la era actual, donde la carrera para atraer clientes hacia un sitio web se está intensificando, a menudo sentirá la necesidad de personalizar el diseño de su sitio web. Y gracias al personalizador de temas, puede ahorrar mucho de su valioso tiempo al obtener una vista previa en vivo de los cambios realizados en su diseño de WordPress.
El personalizador de temas de WordPress se introdujo como parte de la API de personalización de temas (que se introdujo en la versión 3.4 de WordPress). Si desea realizar cambios en la configuración de su tema, deberá utilizar los controles personalizados que se incluyen con el tema. personalizador como una casilla de verificación, campo de texto, radio y algunos otros Pero, ¿qué sucede si desea agregar sus propios controles personalizados a su tema de WordPress?
Para ayudarlo a comprender cómo puede crear y agregar controles personalizados para satisfacer sus necesidades específicas, le demostraremos cómo crear tres controles personalizados para realizar algunos cambios en el pie de página de nuestro tema. Sin embargo, para comenzar con el proceso, primero deberá familiarizarse con la clase WP_Customizer_Control.
Conociendo la clase "WP_Customizer_Control"
Para generar un control personalizado, debe crear una nueva clase y ampliarla utilizando la clase WP_Customizer_Control. Esta clase utiliza el método “$wp_customize->add_control()” para agregar su propio control personalizado a la pantalla de personalización del tema de su sitio de WordPress. Además, para acceder a este método, debe usar el objeto $wp_customize disponible en el enlace de acción: customize_register.
Consideremos un ejemplo que ilustra cómo puede agregar un control personalizado existente a su sección de tema (en el gancho de acción 'customize_register') de la siguiente manera:
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
En el ejemplo anterior, estamos creando un control que dará a los usuarios la posibilidad de elegir una nueva imagen de encabezado.
Ejemplos que demuestran: ¿Cómo crear más controles personalizados?
Esta sección se divide en tres pasos diferentes, en los que cada paso contiene código que generará un control personalizado para el área de texto de su personalizador de temas. Agregaremos el código en el archivo footer.php del tema de WordPress, para realizar cambios en el pie de página a través de los nuevos controles de área de texto.
Paso 1: crear un control de área de texto simple
Como discutimos anteriormente, para crear un nuevo control personalizado, necesitamos definir una clase que se usará para extender la clase WP_Customize_Control. Esencialmente, esta clase se usa junto con la API de personalización de temas de WordPress para agregar un control de entrada (es decir, un control personalizado) en la pantalla de personalización de temas. Veamos el código para implementar esta tarea:
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
En este código, el enlace de acción customer_register se usa para informar a WordPress sobre la función personalizada que hemos creado con el nombre: theme_footer_customizer. Como sabrá, la clase WP_Customize_Manager ayuda a controlar el personalizador de temas de WordPress, por lo que el control personalizado se convertirá en parte de esta clase. Sin embargo, para acceder a su control, deberá usar el objeto "wp_customize" que es una instancia del enlace customize_register.
En nuestro caso, el objeto wp_customize se usa para definir una nueva sección de pie de página que se incluirá en el área de texto. Por lo tanto, cualquier cosa que escriba en la sección de pie de página "área de texto" se mostrará en el pie de página de su tema como se muestra en la siguiente captura de pantalla:
En esta captura de pantalla, puede ver que se agregó una nueva "sección de texto de pie de página" a su tema. El texto escrito en esta sección se mostrará en el pie de página de tu tema.
Paso 2: agregar un control personalizado para cambiar el color de fondo
Entonces, ahora que hemos creado un control de área de texto, puede agregarle muchos controles personalizados diferentes. En este ejemplo, agregaremos un control personalizado a nuestra nueva sección de texto de pie de página que ayudará a cambiar el color de fondo del pie de página. Para hacerlo, simplemente agregue el siguiente fragmento de código en el archivo footer.php de su tema:
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
Como puede ver en la captura de pantalla anterior, al elegir un color apropiado de la "Configuración de color del pie de página", el color de fondo del pie de página ha cambiado a gris.
Paso 3: agregar un control personalizado para agregar un logotipo
Otro control que estamos agregando a la sección de texto de pie de página es "Logotipo de pie de página". Como su nombre lo indica, el control 'Logotipo de pie de página' ayudará a agregar un logotipo al pie de página. Para agregar este control, deberá incluir el siguiente fragmento de código en el archivo footer.php:
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
¡Vamos a terminar!
Es posible que el proceso de creación de controles personalizados lleve un poco de tiempo. Pero no puede pasar por alto el hecho de que cuanto mejores controles agregue a la pantalla de personalización del tema de su sitio web, más tiempo se podrá ahorrar a sus usuarios, lo que conducirá a una experiencia de usuario mejorada. Por lo tanto, si planea crear algunos controles personalizados por su cuenta para agregarlos al personalizador de temas de WordPress, esta publicación será una guía útil para usted.
