Desarrollo de WordPress para usuarios intermedios: preparación de temas para la personalización

En el pasado, si desea dar a los usuarios a su tarea una forma de personalizar aspectos de su sitio o tema, crearía una página con opciones de temas. Pero ahora la mejor manera (y el método esperado para los temas enviados en el administrador de temas) es usar personalizador. Esta es la segunda publicación en nuestro desarrollo de WordPress para la serie de usuarios intermedios. Esta serie sigue nuestros populares tutoriales de desarrollo de WordPress para principiantes, que le han introducido en los elementos básicos de los sitios web de WordPress, cómo comenzar a codificar con PHP y construir temas y complementos.
En este tutorial, le mostraré cómo agregar la funcionalidad del personalizador a su tema. Cubriremos:
Una presentación general del personalizador y su configuración predeterminada,
Los ganchos y las funciones que necesita usar para interactuar con el personalizador,
Agregar secciones a personalizador,
Agregar comandos a sus secciones, incluidos botones de color, texto y radio y
Implementación de entradas de usuario en su tema con configuración.
También analizaremos cómo puede permitir a los usuarios agregar texto a su sitio y también cómo pueden cambiar el estilo utilizando el selector de color de un personalizador.
Nota: Es importante tener un conocimiento práctico sobre PHP, ya que este es el lenguaje básico de WordPress y me referiré a fragmentos de código en esta serie. Vamos a empezar. ¿Se ha perdido un tutorial en nuestra serie de usuarios de WordPress para el desarrollo de WordPress? Puedes mantenerte al día con las siete publicaciones aquí:
Desarrollo de WordPress para usuarios intermedios: desarrollo del tema en detalle
Desarrollo de WordPress para usuarios intermedios: preparación de temas para personalizar WordPress para usuarios intermedios: creación de complementos
Desarrollo de WordPress para usuarios intermedios: tipos de publicaciones y taxonomías personalizadas
Desarrollo de WordPress para usuarios intermedios: consulta y bucles
Desarrollo de WordPress para usuarios intermedios: campos personalizados y de metadatos
Desarrollo de WordPress para usuarios intermedios: internacionalización
Así es, toneladas de conocimiento de WordPress, evaluación de pares, comentarios e certificación de instructores, gratis para los miembros de WPMU Dev. Comience a aprender por qué deberá seguir esta parte de la serie, necesitará un tema para trabajar. Puede usar su propio tema (lo que significa que tendrá que adaptar mi código para que funcione con su tema) o puede usar el tema en el que ha trabajado en la Parte 1 de esta serie. Si lo desea, puede descargar el tema final de la Parte 1, que está en los archivos de origen para este curso. También necesitará un sitio de desarrollo para trabajar (tal vez en su automóvil local) y un editor de código. ¿Necesitas algunos consejos? Aquí le mostramos cómo configurar un entorno local en Windows y cómo hacer esto en una Mac. Además, es posible que desee consultar a nuestros 24 mejores editores de texto para desarrolladores de WordPress.
¿Qué es el cliente? Si ha desarrollado su conocimiento de WordPress hasta el punto en que está estudiando este curso, debería haber usado el personalizador antes, para que no necesite demasiada introducción. El personalizador permite a los administradores del sitio cambiar el contenido o el diseño de un sitio, así como agregar widgets, menús, etc., con una vista previa en vivo que muestra lo que sucede mientras funciona. Así es como se ve el personalizador para mi sitio de demostración en este momento: actualmente tiene cuatro secciones predeterminadas:
Identidad del sitio: donde puede editar el título y la descripción del sitio.

Menús: donde puedes agregar y editar menús.
Widgets-para agregar widgets a las áreas de widgets grabadas.
Página principal estática: use esto para establecer una página estática como página de inicio.
WordPress y no el tema agregan que nuestro tema aún no ha agregado secciones o comandos de personalización. En esta parte de la serie, agregaremos dos secciones, una para el contenido del encabezado y el otro para colores.
Las clases, ganchos y métodos utilizados por personalizado el personalizador tienen su propia API, con diferentes clases, ganchos y funciones con las que tendrá que interactuar y usarlos para agregar la funcionalidad de su tema.
Customize_register Action Hook es el que necesita usar para acceder al personalizador. La mayoría de sus funciones de personalización deben estar conectadas a esto.
También puede usar el gancho wp_head para agregar estilo personalizado a la sección de su sitio en función de la configuración de personalizador; lo haremos con colores en esta parte del curso. La clase WP_Customize_Manager define cómo funcionan la configuración. y las secciones del personalizador. Use métodos en esta clase cuando interactúe con el personalizador.
También hay clases que se aplican a tipos específicos de control, definiendo cómo funciona el valor predeterminado. Estos incluyen las clases WP_CUSTOMIZE_COLOR_CONTROL y WP_CUSTOMIZE_CONTROL. Puede crear su propia clase para expandir y definir versiones personalizadas de los controles que usará en su tema.
Para crear secciones, use el método $ wp_customize-> add_section (). Te mostraré los parámetros para esto a medida que trabajamos en el proceso de adición.
Para agregar un control, use el método $ wp_customize-> add_control ().
Para agregar una configuración que permita que el control haga algo en ellos, use el método $ wp_customize-> add_setting ().
Tenga en cuenta que los últimos tres métodos que hemos descrito son métodos en lugar de funciones, porque son métodos de una clase, no funciones independientes.
Analizaremos cada uno de ellos a medida que configuremos las secciones, controles y configuraciones de personalizador en esta parte del curso. Nociones introductorias: la creación de un archivo incluye para personalizado antes de comenzar a agregar código de personalización, agregando un archivo que contiene todo el código. En lugar de agregar esto al archivo Functions.php del tema, para crear un archivo incluye.
En la carpeta de temas, cree una carpeta llamada.
Dentro de él, cree un archivo vacío llamado Customizer.php. Abra el archivo Functions.php. En la parte superior, agregue eso:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Guarde y cierre el archivo con funciones.
Luego comencemos a trabajar en el nuevo archivo Customer.php.
Abra el nuevo archivo Customizer.php y agregue una etiqueta de apertura add_setting () tiene dos parámetros:
Una identificación única para configurar
valor por defecto
El método $ wp_customize-> add_control () tiene un parámetro, nuevo wpmu_customize_textare_control, quien dice WordPress para crear una nueva instancia de la clase que ya hemos creado. La nueva clase tiene tres parámetros:
$ wp_customize, el objeto de esta clase.
Una identificación única para la configuración.
Una matriz de valores:
Una etiqueta, que está lista para la traducción (de la cual más en una parte posterior de este curso).
La sección en la que será este control.
La configuración a la que envían los datos, que es la identificación única de la configuración ya creada.
Ahora, si regresa a la aduana en su sitio y actualiza la pantalla, se mostrará la sección de datos de contacto:
Y si hace clic en esa sección, verá sus pedidos:
Actualmente, si ingresa algo en estos cheques, no aparecerán en el sitio, pero lo arreglaremos en breve. Primero, agregemos algunos cheques a nuestra segunda sección. Agregar más controles de color y configuraciones, para agregar algunos controles de color que los administradores del sitio pueden usar para cambiar el esquema de color. Debido a que agregamos cuatro cheques aquí, configuraré una variable $ TextColors y luego lo usaré para trabajar a través de cada uno de los colores que queremos agregar y crearé un control para cada uno de ellos. Primero, establezcamos esa variable. En el código que acaba de agregar para los controles de texto, agrégelo:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Guarda el archivo.
Esto crea una variable $ TextColors que contiene una matriz de valores: WPMU_COLOLOR1, WPMU_COLOLOR2, WPMU_LINKS_COLOLOR1 y WPMU_LINKS_COLOLOR2. Para cada uno de estos, hay otra matriz de segundo nivel, con el slog, el color predeterminado y la etiqueta. Batir en tu espalda, acabas de usar una nueva técnica PHP: ¡Matrix vestida con una variable! Ahora, creemos controles. En lugar de crear uno nuevo para cada uno de nuestros cuatro colores, usaremos foreach () para viajar los cuatro colores que ya hemos definido en nuestra variable.

En el código que acaba de agregar para configurar la variable, agregue eso:

La idea 1392D651B0F9933846EB33005050F25 está cargada.
Guarda el archivo.
Esto pasa a través de cada uno de nuestros colores y agrega lo siguiente:
Una configuración, con dos parámetros:
La identificación única que usa la babosa en la matriz variable
Una matriz de valores que incluye el valor predeterminado, nuevamente tomado de la matriz variable y el tipo de control, que es una opción. Un control, utilizando el nuevo wp_customize_cololor_control con tres parámetros:
$ wp_customize
La identificación única, usando la babosa
En una matriz, etiqueta, sección y configuración.

Esto es muy similar a lo que hice para los controles de texto, pero utiliza valores en la matriz que ya hemos definido usando la variable $ TextColors. Si lo desea, es posible que desee intentar devolver y aplicar la misma técnica a los controles y la configuración de texto que ya ha agregado. Ahora eche un vistazo a la aduana en su sitio. Verá un esquema de color con cuatro comandos de color:
Al igual que con los comandos de texto, si elige un nuevo color usando el selector de color, aún no hará ninguna diferencia para su sitio. Así que sigamos adelante y cambiemos eso. La implementación de comandos y configuraciones de personalización en el tema Agregar verificaciones y configuraciones de personalización es un gran primer paso, pero debe hacer que funcionen, lo que significa agregar código a su tema, lo que tomará los valores para su configuración. WordPress los guarda en la base de datos y los mostrará en su tema. Necesitamos hacer dos cosas:
Para los datos de contacto, agregue un gancho al encabezado donde podamos eliminar el texto.
Para los colores, cree un estilo que WP_head WP_head Hook para cambiar los valores de color para las clases de temas.
Primero, datos de contacto. Agregar texto al tema Escribimos la función que toma texto en nuestro archivo Customer.php, dentro de una función que conectaremos a un gancho de acción. Esto significa que necesitamos crear otro gancho de acción en nuestro tema, dentro del encabezado. Abra el archivo Header.php de su base.
Encuentra línea y agrégala inmediatamente debajo:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Guarde y cierre el archivo Header.php.

Ahora tenemos un gancho donde podemos conectar nuestra función. Creemos esa función.
En Customizer.php, agregue la función vacía:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Dentro de su función, agregue lo siguiente:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Guarda el archivo.
Esto agregó cuatro cosas a la marca:
Un elemento de dirección que contiene cualquier otra cosa
Un párrafo con la dirección
Un párrafo con el número de teléfono
Un párrafo con la dirección de correo electrónico dentro de un enlace a esa dirección.
Para hacer esto, utilicé la función get_theme_mod (), que toma los datos almacenados de acuerdo con el conjunto personalizado relevante. Tiene dos parámetros: la identificación de configuración y un valor implícito. Ahora, si mira su sitio, verá el texto predeterminado en el encabezado:
Debido a que el texto dentro del elemento con la clase de encabezado tiene la alineación correcta ya definida por la hoja de estilo, nuestro texto ya es correcto para nosotros. Es posible que desee ajustar el margen debajo del área del widget del encabezado para agregar espacio debajo de ese cuadro de búsqueda (o puede ajustar el margen debajo del elemento del encabezado). Ahora intente editar el texto en Customizer: Agregar el estilo de estilo a continuación, para crear la función para el esquema de color. Antes de agregar el código, identifique lo que queremos apuntar para cada color.
El primer color (WPMU_COLOLOR1) se aplicará a títulos, enlaces en el menú de navegación y fondo del sótano.
El segundo color se aplicará al fondo de navegación.
El tercer color se aplicará a los enlaces en el enlace o visitado.
El cuarto color se aplicará a las conexiones en el estado de desplazamiento con flotante o activo.
Es posible que desee aplicar el esquema de color a diferentes elementos o agregar más colores para elementos o clases adicionales. Antes de agregar el estilo, necesitamos crear la función.
En Customizer.php, agregue esta función:
La idea 1392D651B0F9933846EB33005050F25 está cargada.

Guarda el archivo.

Está conectado al gancho de acción wp_head, por lo que el contenido de la función se agregará a la sección de cada página. Esto no es ideal, porque agregar CSS a cada página no es tan bueno como el uso de una hoja de estilo. Pero esta es la única forma de hacer esto, porque cada color se agrega por una función y no puede codificar las funciones de PHP en una hoja de estilo. Tenga en cuenta que he agregado una etiqueta de apertura <? Php al final de mi función pero no al principio. Esto se debe a que agregaré una etiqueta de cierre dentro de la función: lea más y tendré sentido. Ahora creemos una variable para cada uno de los colores. Dentro de su función, agregue esto:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Guarda el archivo.
Así que ahora tenemos cuatro variables que podemos usar para definir los colores dentro de un elemento. Agreguemos eso.
Bajo sus variables, pero aún dentro de la función, agregue eso:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Existe esa etiqueta PHP, seguida de un elemento para nuestros estilos.
Luego agregue el estilo para el primer color:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Ahora el segundo color:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Y finalmente los dos colores de enlace:
La idea 1392D651B0F9933846EB33005050F25 está cargada.
Guarda el archivo.
Es posible que desee hacer algunos ajustes a los elementos y clases a los que está apuntando, dependiendo de su tema. ¡Aquí está el mío con un esquema muy estridente! Esto probablemente no sea un esquema de color que elegiría usar en su sitio, pero le muestra cómo se implementan los colores. Intentaré algo mejor y luego lo guardaré y lo publicaré:
Ahora sus usuarios pueden cambiar el esquema de color en su sitio utilizando el personalizador. Desafío: agregue su propia configuración y órdenes ahora que ha agregado algunos controles de texto y un esquema de color, ¿por qué no intentar agregar más configuraciones y controles a su base, implementando las técnicas que ha aprendido hasta ahora? Las posibilidades incluyen:
Carga de medios Para hacer esto, cree una nueva instancia de la clase wp_customize_image_control, de manera similar que ya lo ha hecho con la clase de control de color. Luego debe agregar la imagen al sitio (¿tal vez un logotipo en el encabezado?) Usando un gancho, de manera similar como ya lo ha hecho para los datos de contacto.
Estilización de imagen: si agrega carga de medios, puede crear algunas opciones para diseñar esa imagen, como flotar un logotipo a la izquierda del título del sitio o usarlo para reemplazar el título del sitio. Para los controles, puede usar los botones de radio, definiendo ‘tipo’ => ‘radio’ en parámetros para su método $ wp_customize-> add_control (). Luego usaría una variable para almacenar la opción de estilo seleccionada usando get_theme_mod (), de manera similar para los colores anteriores. Finalmente, agregaría estilo para cada una de estas opciones en la hoja de estilo o a través de una función conectada a wp_head. La razón por la que puede usar la hoja de estilo es que usa la opción de agregar una clase a los archivos de plantilla, no agregar estilo a esa clase desde la hoja de estilo. Ancho completo, columnas o con o sin barra lateral. Puede hacer esto para un tipo particular de contenido (como publicaciones o páginas únicas) utilizando una etiqueta acondicionada en la función que adjunta a WP_head con el estilo relevante agregado. Nuevamente, usaría los botones de radio y establecería el estilo usando la función get_theme_mod ().
La posición de los elementos: puede agregar la opción de mover la barra lateral hacia la izquierda o la derecha o mover una imagen del encabezado arriba o debajo del sitio o título. Nuevamente, necesitará botones de radio y una variable que use para definir estilos, usando get_theme_mod ().
Varias opciones de texto, intentan crear texto desde la barra lateral o el sótano que los usuarios pueden editar en Customizer, conectados a los ganchos que ya ha agregado en los archivos SideBar.php y Footer.php. Acción: puede usar comandos de texto para crear un Botón de urgencia comestible, junto con los botones de radio para definir si se activa y dónde aparece.Luego use una etiqueta acondicionada en su función que agrega la caja (a través de un gancho) para verificar si se debe agregar a esa ubicación.
Estas son solo algunas de las posibilidades que tiene disponibles. ¿Por qué no probarlos? Si necesita más inspiración para las aduanas de la aduana, trate de ver algunos de los excelentes temas personalizables disponibles en el Director del Tema y vea si puede recrear lo que han hecho. Sin embargo, no exagere, ¡no desea abrumar a sus usuarios! Si desea verificar el código que creó en esta parte de la serie, no olvide obtener una copia de los archivos de origen de la serie en GitHub. Si se queda atrapado en cualquier momento o su código no funciona, consulte el código antes de publicar una pregunta aquí. ¡La mejor manera de aprender es resolverlo usted mismo! El personalizador es un poderoso personalizador de herramientas es una herramienta excelente para permitir a los usuarios de su tema hacer cambios en su sitio sin escribir ningún código. Si crea temas que otros usan en su sitio, ofrecen más flexibilidad y control sobre cómo se ve su sitio. Y si crea sitios de clientes, el personalizador es una excelente manera de editar el contenido, como los datos de contacto y el texto en la barra lateral, sin tener que escribir ningún código (o convencerlo de que lo haga). Esperamos que esta parte de la serie le haya dado conocimiento de cómo funciona el personalizador y cómo agrega conjuntos y pedidos y le ha dado inspiración para agregarlo a sus propios temas. ¡Diviértete experimentando!
Así es, toneladas de conocimiento de WordPress, evaluación de pares, comentarios e certificación de instructores, gratis para los miembros de WPMU Dev.¿Empiezas a aprender que este tutorial parecía útil?¿Por qué quieres aprender el desarrollo de WordPress?¿De qué quieres saber más?Háganos saber en los comentarios a continuación.
Etiquetas:
desarrollo
Multisim