La guía completa para personalizar el tema de WordPress

WordPress 4.7 se ha lanzado con muchas características nuevas y excelentes (que puede consultar aquí), incluidas algunas experiencias de usuario y actualizaciones de la interfaz de usuario a customs. Si escucha sobre el personalizador por primera vez, es una función del administrador de WordPress (acceso al aspecto> personalización) que permite a los usuarios cambiar el tema utilizando una interfaz Wysiwyg y personalizar los colores, fuentes, texto y cualquier otra cosa quieres cambiar. En esta publicación, le presentaré cómo se puede utilizar el personalizador en temas para crear una mejor experiencia de usuario y se ha introducido todo el nuevo y extraordinario WordPress 4.7.
Una introducción para personalizar la personalización del tema del tema se introdujo por primera vez en WordPress 3.4 y le permite obtener una vista previa de los cambios que realiza. Puedes jugar todo lo que quieras sin cambiar tu sitio en vivo. Y cuando haya realizado los cambios, haga clic en Guardar y todo se aplicará al instante. Personalización del tema de WordPress en acción. Como desarrolladores, tenemos acceso a las funcionalidades básicas, como editar el sitio o la imagen del encabezado y también podemos crear controles personalizados para lo que queramos a través de la API de personalizaciones.
Desarrollo para personalizar el tema Hay tres áreas de interés al codificar el personalizador. Deberá crear los controles de personalización, CSS y/o la lógica que implementa la configuración en el tema y, opcionalmente, la función de vista previa en vivo que ofrece una mejor experiencia de usuario. Los primeros pasos antes de comenzar, para crear un entorno en el que podamos trabajar. Para este tutorial, creemos un tema nuevo y muy simple. De hecho, ni siquiera calificará como un tema adecuado, solo usaré un archivo index.php simple para crear una página de destino. Mi bolsa inicial para este proyecto personalizador.

Puede descargar el tema inicial que uso o puede seguir con el código GitHub para crearlo solo. Si visita el personalizador en el administrador de WordPress, ya puede controlar el título del sitio, la descripción y el CSS adicional (la final es una nueva función en 4.7) de su sitio. Esto se debe al hecho de que, por defecto, el Personalizador muestra cambios actualizando toda la página. Lo haremos mucho más fácil más adelante, pero por ahora estará bien.
Adición adicional de CSS en el tema de personalización

Poniendo las bases para comenzar por sentar las bases para nuestros esfuerzos de personalización. Crearé un archivo Customer.php y me aseguraré de preguntarlo en Functions.php.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
El archivo de personalizador comenzará con una acción conectada que contenga todas nuestras secciones, configuraciones y controles.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Secciones, configuraciones y comandos Las secciones representan la navegación dentro del personalizador. Ya debería ver cuatro de ellos: identidad del sitio, menús, primera página estática y CSS adicional. Al definir una sección, podemos crear una nueva entrada a la navegación y podemos completarla con controles. Los controles son los elementos visuales, la interfaz de usuario, que nos permiten manipular la configuración. Estos pueden ser campos introductorios, áreas de texto, selectores de color y otros tipos de controles que sirven para crear una mejor experiencia para el usuario. Las configuraciones son los datos que queremos aceptar y usar nuestro tema. Creamos controles para permitir a los usuarios manipular fácilmente la configuración. Creación de una sección para agregar una nueva sección Usaremos el método $ wp_customize-> add_section (). Se necesitan dos argumentos: un identificador de sección y una serie de opciones adicionales, como el título de la sección visible y su posición en la lista de secciones.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Recuerde que el código anterior y cualquier otro código que cree secciones, controles o configuraciones debe colocarse en la función CD_Customizer_Settings ().
Nuestra sección ahora está grabada, pero no aparecerá hasta que agregemos un cheque. Crear una configuración Configuración Informe a WordPress que nuestro tema utilizará un valor que el usuario puede modificar. Se agregan utilizando el método $ wp_customize-> add_setting () que toma dos parámetros: el identificador para la configuración y una serie de opciones que contienen información como el valor predeterminado.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
El transporte se actualiza por defecto, pero lo agregué, porque lo cambiaremos más tarde. Actualizar significa que cuando se modifica la configuración, WordPress debe actualizar la visualización. Las implementaciones más sofisticadas del cliente permiten avances en vivo que solo modifican el elemento afectado, a diferencia de la página completa. La creación de un control controla el vinculación del usuario. Se agregan con $ wp_customize-> add_control (). Desde el punto de vista de los argumentos, este método es ligeramente más complejo que los anteriores. Si el primer argumento es un objeto de control, entonces se requiere un solo argumento, una instancia del objeto. El objeto probablemente tendrá sus propios argumentos adicionales. El primer argumento también puede ser un identificador, en cuyo caso se requiere un argumento de la segunda opción. En nuestro caso, utilizaremos la clase WP_CUSTOMIZE_COLOLOR_CONTROL para crear un elemento selector de color.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
El primer parámetro de este objeto debe ser el objeto $ wp_customize, el segundo debe ser el control de los controles. Tiendo a hacer esto lo mismo con la configuración que controla. La tercera matriz contiene algunas opciones, como la etiqueta, la ID de la sección donde se colocará la identificación de configuración que controla. Ahora tenemos un par completo de configuraciones de control que aparecerán en nuestra nueva sección. Todavía no hace nada, pero la configuración está allí y su valor realmente cambia.
Configuración de color de personalizador. Generación CSS Para que esto funcione de manera efectiva, tendremos que aplicar el valor de establecer nuestro tema. En este caso, queremos asegurarnos de que el cuerpo siempre tenga el valor del color de fondo como nuestra nueva configuración. La idea 5F48A994DB4268D78B47370C4AAA9C0 está cargada.
Tenga en cuenta que este código no debe colocarse dentro de CD_Customizer_Settings () como lo hemos hecho con controles, secciones y configuraciones. Todas estas son cosas bastante estándar, lo único a tener en cuenta es cómo se recupera el valor. La función get_theme_mod () se hará cargo de la configuración del tema actual; El primer parámetro es el nombre de la configuración, el segundo es el valor predeterminado. La función se puede usar, por supuesto, en el código del tema para cambiar la funcionalidad. Podríamos, y crearemos pronto, un control y una configuración que se puede usar para ocultar/mostrar el botón. Usaremos get_theme_mod () se utilizará en el archivo index.php para mostrar/ocultar selectivamente el botón.
Vistas previas en vivo tenemos un sistema ordenado, pero sería mucho más suave si los cambios de color y otras ediciones fueran instantáneas. Las vistas previas en vivo nos permiten usar JavaScript para modificar selectivamente los elementos. Para comenzar, para crear un archivo Customer.js y asegúrese de que esté en línea.

Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
El contenido de este archivo debe ser un cierre muy simple, colocaremos todo nuestro código en él.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Luego, asegúrese de que el valor de la opción de configuración de la configuración esté configurado en PostMessage. Finalmente, pegue lo siguiente a Customizer.js, cerrando el archivo.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Personalizar la función () toma dos parámetros, el nombre de la configuración de escucha y una función que realiza una acción. A su vez, la función desencadena otra función que conecta el valor de nuestra configuración y nos permite usarla en su tiempo libre. Aquí lo usé para cambiar el CSS del artículo del cuerpo. El siguiente es la diversión: oooh … ¡hermosos colores!
Vista previa en vivo para la funcionalidad básica La capacidad de cambiar el título y la descripción del blog ya existe debido a la magia del código básico. Aplicemos la vista previa en vivo y estos elementos. Aunque no hemos definido estas opciones y controles, todavía tenemos los medios para modificarlas. Usaremos el método get_setting () en la clase de personalización para obtener y modificar las opciones para una configuración.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
El código anterior debe agregarse a la función CD_Customizer_Settings (). El paso final es agregar el código JavaScript que se activará cada vez que se cambie el valor de la configuración.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0


Al final de este proceso, debe ver la actualización del título del blog y la descripción al ingresar el texto.
Actualizar el texto con la personalización
Otros ejemplos hay tantas cosas que puede hacer con la personalización que pensé que sería una buena idea incluir algunos ejemplos. Comencemos con algunos comandos que rigen el comportamiento del botón. Mostrar/ocultar secciones para mostrar/ocultar un elemento, elegí crear un elemento de botón de radio. Usaremos dos parámetros para add_control (), lo que significa que la primera es una cadena simple, no un objeto de control. El segundo parámetro tendrá todos los detalles que el control necesita para construir la interfaz de usuario. Aquí está el código completo que debe colocarse en CD_Customizer_Settings ().
En el index.php envolví el botón en una declaración condicional que verifica el valor de configuración y muestra el botón apropiado.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Tenga en cuenta que por ahora he establecido el método de transporte para actualizar. Cuando el botón está oculto, no se carga en absoluto en la página, por lo que debemos hacer más que mostrar/ocultar un elemento a través de JavaScript. ¡Aprenderemos a hacerlo aún mejor pronto!

Mostrar y ocultar un botón con el personalizador.
Cambios en el texto que continúa con las modificaciones de nuestros botones, hagamos el texto editable. Ya tenemos la sección de botones, todo lo que necesitamos es una configuración y un control simple del campo de texto.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Para construir la opción en el tema, reemplazaremos el texto codificado con get_theme_mod () y get_theme_mod () definiremos un valor predeterminado apropiado.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Finalmente, tratemos con la vista previa en vivo en el archivo Customizer.js.

La idea se carga 5F48A994DB4268D78B47370C4AA9C0UTIlización de órdenes de edición parciales y cortas cuando miramos la opción de mostrar los botones, utilizamos la actualización, porque parecía que el uso solo no era realmente posible. Cuando el botón está oculto, no está cargado, por lo que no podemos simplemente mostrarlo con JavaScript haciéndolo visible. Aquí es donde intervienen los parciales. Estos le permiten escribir un código más modular que sea adecuado para crear y personalizar el tema por igual. En lugar de actualizar la página completa cuando cambia el elemento, puede actualizar ese elemento único. Comencemos generando nuestro botón con la ayuda de una función. Creé CD_SHOW_MAIN_BUTTON () y lo usé en el archivo de índice principal, envolviéndolo en un contenedor.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
La función en sí es exactamente como nuestro código antes, pero ahora se puede reutilizar en otro lugar.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
El último paso es decirle a WordPress que actualice selectivamente el elemento. Establezca la configuración CD_Button_Display en PostMessage y agregue lo siguiente al CD_Customizer_Settings ().
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Esto le dice a WordPress que queremos actualizar selectivamente cuando CD_BUTTON_DISPLAY configuró CD_BUTTON_DISPLAY. El selector en el que queremos actualizar todo se da en el segundo argumento y se define la función que genera el contenido. Si intenta el cliente ahora, verá que el botón se vuelve opaco, luego cargue el contenido correcto, en lugar de actualizar todo el sitio. La buena noticia es que los comandos de edición cortos se agregarán automáticamente para usted. Agregar una diapositiva de intervalo El personalizador tiene muchos comandos, desde campos de texto simples hasta cargas de imagen. Si trabaja en una aplicación a gran escala, es posible que necesite entradas más sofisticadas, como una gama o incluso algo completamente personalizado. El personalizador le permite crear fácilmente sus propios elementos de UI definiendo las clases de control. Creemos nuestro propio interruptor de intervalo que permite a los usuarios seleccionar valores con un mecanismo de mango pequeño. Vamos a construir el control: Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Primero debemos verificar la existencia de la clase WP_Customize_Control porque no siempre se carga cuando todas nuestras opciones lo son. Luego extendemos la clase con la nuestra, declarando la propiedad de $ type y la función render_content (). Necesitamos eliminar el control HTML, teniendo cuidado de usar $ this-> value () cuando necesitamos el valor actual y $ this-> link () en lugar del parámetro de nombre. He creado una implementación muy simple del control deslizante con un poco de mágico jQuey para garantizar que el valor sea visible en un campo de texto y la modificación del campo de texto afectará al control deslizante. Agregué algunas opciones (min, max, paso) a la diapositiva que atribuí a las propiedades en el constructor. Para probarlo, crearé un pequeño medidor que muestra el número de fotos actualmente en el sitio. En el archivo index.php, agregue lo siguiente. Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
Ahora es el momento de crear configuración y control. El control utilizará la diapositiva de intervalo recién creada.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
La creación de una vista previa en vivo es casi trivial ahora, todo lo que tengo que hacer es asegurarme de que el elemento correcto esté sobrescribido por el código JavaScript.
Cargue la idea 5F48A994DB4268D78B47370C4AA9C0
La diapositiva de personalización del tema en acción.
¡Obtenga personalización! Ahora debería poder trabajar en el tema de personalización para crear mejores controles para su tarea. Es extremadamente importante usar el tema fácil e intuitivo, y la personalización ofrece una base excelente para ello. Lea la lista Si desea conocer todo lo que es personalización del tema, eche un vistazo a los siguientes enlaces:
Las personalizaciones del agua
¿Qué hay de nuevo en WordPress 4.7 Personalización de la personalización en WordPress 4.7
Personalización de la referencia de control de API
Herramientas para mejorar la personalización de UX
La API de personalización
WP_Customizer_Control Documentation
¿Ha creado excelentes comandos personalizados o una experiencia de personalización completa?¡Cuéntanos en los comentarios a continuación!

Etiquetas:
personalización