Share
El personalizador de WordPress ha sido desarrollado activamente desde su inicio. Las API están en continua evolución, incluida la API de JavaScript. Sin embargo, es una de las API menos documentadas en el Códice de WordPress. Por lo tanto, solo hay unos pocos registros extensos que muestran cómo aprovechar la API de JavaScript. prácticamente.
Aprovechar la API de JavaScript en el Personalizador de WordPress puede realmente permitirnos ofrecer una experiencia en tiempo real más convincente al tiempo que personalizamos el tema más allá de lanzar el cambio de la ventana Control a la Vista previa.
Es posible que esté familiarizado con el uso de la API de JavaScript del personalizador para enviar un cambio a la ventana de vista previa en tiempo real. Para ello, configuramos el ajuste. transporte modo a mensaje posterior y añada el código JavaScript correspondiente, como sigue.
Accentsconagua
wp.customize ('blogname', function (value) value.bind (function (to) $ ('.site-title a') .text (to);););Sin embargo, también podemos extender la API, por ejemplo, para ocultar, mostrar o mover una Sección, un Panel, un Control, cambiar el valor de una Configuración basada en otro valor de Configuración e interconectar las interacciones Vista previa y Control. Y esto es lo que vamos a ver en este tutorial..
Hemos cubierto el Personalizador de WordPress bastante extensamente con un puñado de artículos y un par de series que cubren los entresijos de las API del Personalizador..
Supongo que ha comprendido el concepto central del Personalizador de WordPress, así como los componentes como Panel, Sección, Configuración y Control. De lo contrario, te recomiendo que dediques un poco de tiempo a nuestros tutoriales y cursos de video sobre el tema antes de seguir adelante..
Para empezar, examinaremos la "Configuración" y los "Controles" en el Personalizador que hemos agregado con el propósito de este tutorial. También veremos el código que los coloca en su lugar..
En este tutorial, nos centraremos en el sitio web "Título del sitio". Y como puede ver arriba, tenemos dos Controles: el campo de entrada nativo de "Título del sitio" de WordPress y nuestra casilla de verificación personalizada para habilitar o deshabilitar el "Título del sitio". Estos dos controles residen en la sección "Identidad del sitio". Y en el lado derecho de la imagen está la Vista previa, donde se puede ver el "Título del sitio" que se representa.
Además, como puede ver a continuación, también tenemos dos Controles que residen en la sección de Colores para cambiar el color del "Título del sitio" y su flotar color del estado.
Nuestro tema aquí incluido se basa en los guiones bajos, que tiene todo el código relacionado con el personalizador ubicado en el /inc/customizer.php expediente.
function tuts_customize_register ($ wp_customize) $ wp_customize-> get_setting ('blogname') -> transport = 'postMessage'; $ wp_customize-> get_setting ('blogdescription') -> transport = 'postMessage'; $ wp_customize-> get_control ('blogdescription') -> prioridad = '12'; $ wp_customize-> get_setting ('header_textcolor') -> default = '# f44336'; $ wp_customize-> get_setting ('header_textcolor') -> transport = 'postMessage'; // Casilla de verificación para mostrar el nombre del blog $ wp_customize-> add_setting ('display_blogname', array ('transport' => 'postMessage',)); $ wp_customize-> add_control ('display_blogname', array ('label' => __ ('Display Site Title', 'tuts'), 'section' => 'title_tagline', 'type' => 'checkbox', 'prioridad '=> 11,)); // Añadir la configuración de color del texto principal y el control. $ wp_customize-> add_setting ('header_textcolor_hover', array ('default' => '# C62828', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage')); $ wp_customize-> add_control (nuevo WP_Customize_Color_Control ($ wp_customize, 'header_textcolor_hover', array ('label' => __ ('Header Text Color: Hover', 'tuts'), 'section' => 'colors', 'Priority' => '11'))); add_action ('personalizar_register', 'tuts_customize_register'); Y como puede ver arriba, hemos realizado algunas modificaciones al código, cumpliendo con nuestra necesidad en este tutorial..
descripción del blog, a 12 para que la casilla de verificación Configuración, display_blogname, aparece debajo del campo de entrada "Título del sitio".display_blogname. Establecemos el prioridad a 11 que, en nuestro caso, reside entre el "Título del sitio" y el campo de entrada "Lema".texto de cabecera color predeterminado para # f44336 y el transporte escriba a mensaje posterior.header_text_color. Del mismo modo, también establecemos la prioridad para 11 para que aparezca justo debajo de la header_textcolor Ajuste.Todos estos ajustes se establecen con mensaje posterior en lugar de con refrescar. los mensaje posterior Esta opción permite que el valor se transporte de forma asíncrona y se muestre en la ventana de vista previa en tiempo real. Sin embargo, también tendremos que escribir nuestro propio JavaScript para manejar el cambio..
Necesitamos crear dos archivos JavaScript: un archivo, personalizador-preview.js, para hacer frente a la vista previa y el otro archivo, customizer-control.js, para manejar los controles dentro del panel del personalizador.
js ├── customizer-preview.js // 1. Archivo para manejar la Vista previa ├── customizer-control.js // 2. Archivo para manejar los Controles ├── navigation.js skip-link-focus- fix.js
Dentro personalizador-preview.js es el siguiente código.
(function ($) // Codes here.) (jQuery);
Actualmente es una función de JavaScript cerrado vacío. Discutiremos más específicamente cómo previsualizamos los cambios en la ventana de Vista previa en el siguiente tutorial de esta serie.
En el otro archivo, customizer-control.js, Añadimos el siguiente código:
(function ($) wp.customize.bind ('ready', function () var customize = this; // Codes here);) (jQuery);Como puede ver arriba, envolveremos el código en este archivo en el Personalizador Listo evento. Esto asegurará que todo dentro del Personalizador esté completamente listo, incluyendo la Configuración, los Paneles y los Controles, antes de comenzar a ejecutar cualquier función personalizada..
Finalmente, una vez que hayamos agregado el código, cargaremos estos dos archivos JavaScript en dos ubicaciones diferentes.
// 1. función customizer-preview.js función tuts_customize_preview_js () wp_enqueue_script ('tuts_customizer_preview', get_template_directory_uri (). '/Js/customizer-preview.js', array ('personalizar-preview'), n, true,) add_action ('personalizar_preview_init', 'tuts_customize_preview_js'); // 2. customizer-control.js function tuts_customize_control_js () wp_enqueue_script ('tuts_customizer_control', get_template_directory_uri (). '/Js/customizer-control.js', array ('personalizar-controls', 'jquery) cierto ); add_action ('custom_controls_enqueue_scripts', 'tuts_customize_control_js');los personalizador-preview.js archivo se cargará dentro de la ventana de vista previa del personalizador a través de la personalizar_preview_init Gancho de acción. los customizer-control.js El archivo se cargará en el back-end del Personalizador, donde se puede acceder a los elementos de Configuración y Control a través de la personalizar_controls_enqueue_scripts Gancho de accion.
WordPress ha invertido mucho en PHP desde su inicio. Por lo tanto, no será una sorpresa que la mayoría de los desarrolladores que apoyan el ecosistema sean más competentes y estén más familiarizados con las API de PHP que con las API de JavaScript..
Es solo recientemente que ha integrado JavaScript extensivamente a través del Personalizador y WP-API. Agarrar las API de JavaScript en el Personalizador de WordPress puede ser todo un desafío. Como se mencionó, es el lado de WordPress el que está menos documentado actualmente. Por lo tanto, vamos a pasar a través de este tema a fondo.
Mientras tanto, si está buscando otras utilidades que lo ayuden a desarrollar su creciente conjunto de herramientas para WordPress o para que el código se estudie y adquiera más conocimientos en WordPress, no olvide ver lo que tenemos disponible en Envato. Mercado.
Aquí hemos preparado todos los elementos esenciales para trabajar con las API de JavaScript de WordPress. Y terminaremos aquí. En la siguiente parte de la serie, descubriremos más de lo que se encuentra debajo de las API de JavaScript en WordPress, y comenzaremos a escribir scripts funcionales que puede implementar inmediatamente en su tema..
Manténganse al tanto!
