Configuraciones y controles para una combinación de colores en el personalizador de temas

Lo que vas a crear

El personalizador de temas es una excelente herramienta que permite a los usuarios tener más libertad para modificar un tema sin tener que editar el código. Pero si desea que sus usuarios cambien los colores de su sitio, las cosas pueden complicarse. Agregar un control para cada elemento que pueden cambiar hará que las cosas se vuelvan incómodas y los usuarios pueden terminar con un sitio que parece un desastre llamativo..

En lugar de agregar muchos controles para todos los elementos que desea que los usuarios puedan cambiar, simplemente puede crear una combinación de colores, permitiendo a los usuarios seleccionar algunos colores y luego aplicarlos a un rango de elementos en el tema.

En este tutorial, lo guiaré a través de la primera parte de este proceso, que consiste en configurar los controles de personalización del tema. En la siguiente parte, le mostraré cómo vincular estos controles a su tema para que cuando los usuarios seleccionen los colores, se transfieran al tema..

El punto de partida

Comience por instalar el tema de inicio y activarlo. El personalizador de tema se verá así:

Después de completar el tutorial, su personalizador tendrá dos secciones adicionales.

Configuración del personalizador de temas

El primer paso es crear un archivo en su tema para mantener sus funciones de personalizador. Trabajaré con un tema de inicio básico, basado en el tema creado durante mi serie sobre la creación de un tema de WordPress a partir de HTML estático. He realizado algunas modificaciones para que funcionen con las funciones de combinación de colores, así que si quieres trabajar con este tutorial, te sugiero que descargues el tema de inicio..

En la carpeta principal de su tema, cree una carpeta llamada Cía y en eso, crea un archivo llamado customizer.php.

Abre tu funciones.php archivo y agregue lo siguiente, que incluirá el nuevo archivo que acaba de crear:

include_once ('inc / customizer.php');

Ahora en tu customizer.php archivo, agregue esta función:

función wptutsplus_customize_register ($ wp_customize)  add_action ('personalizar_register', 'wptutsplus_customize_register');

Esto crea una función que contendrá todos sus ajustes y controles, y la engancha a la personalizar_registrar gancho de acción. Tu tema está listo para ir!

Creación de configuraciones y controles de combinaciones de colores

El primer paso es agregar la configuración y los controles para su combinación de colores. Agregará controles para cuatro selectores de color, el color principal, el color secundario y dos colores de enlace.

Añadiendo una nueva sección

Dentro de la función que acaba de crear, agregue lo siguiente:

/******************************************* Esquema de colores **** **************************************** / // agregar la sección para contener las configuraciones $ wp_customize-> add_section ('textcolors', array ('title' => 'Color Scheme',));

Esto crea una sección vacía para sus controles de esquema de color.

Definir argumentos para tus colores

Inmediatamente debajo, agregue:

// color principal (título del sitio, h1, h2, h4. h6, encabezados de widgets, enlaces de navegación, encabezados de pie de página) $ txtcolors [] = array ('slug' => 'color_scheme_1', 'default' => '# 000' , 'label' => 'Main Color'); // color secundario (descripción del sitio, encabezados de la barra lateral, h3, h5, enlaces de navegación al desplazar) $ txtcolors [] = array ('slug' => 'color_scheme_2', 'default' => '# 666', 'label' = > 'Color secundario'); // link color $ txtcolors [] = array ('slug' => 'link_color', 'default' => '# 008AB7', 'label' => 'Link Color'); // color del enlace (activo, activo) $ txtcolors [] = array ('slug' => 'hover_link_color', 'default' => '# 9e4059', 'label' => 'Link Color (on hover)');

Esto agrega una nueva sección al personalizador del tema llamado 'Esquema de color'. Luego configura los argumentos para los cuatro colores con los que trabajará: una babosa, un valor predeterminado y una etiqueta. El valor predeterminado es el color utilizado en el tema, por lo que es posible que desee cambiar el tuyo a los colores de su tema.

Creación de ajustes de color

 A continuación, debe crear la configuración de sus colores utilizando los argumentos que acaba de definir. Debajo del último bloque de código, escriba:

// agregue la configuración y los controles para cada color para cada color ($ txtcolors como $ txtcolor) // AJUSTES $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'type' => 'option', 'capacity' => 'edit_theme_options')); 

Esto utiliza un para cada declaración para trabajar con cada uno de los colores que acaba de definir, creando una configuración para cada uno usando los argumentos que definió. Pero aún debe agregar controles para que los usuarios puedan interactuar con esta configuración utilizando el personalizador de temas..

Añadiendo controles

Dentro de para cada llaves y debajo de la add_setting () La función que acaba de agregar, inserte lo siguiente:

// CONTROLES $ wp_customize-> add_control (nuevo WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'settings' => $ txtcolor ['slug'])));

Esto agrega un selector de color para cada uno de sus colores, usando el WP_Customize_Color_Control () Función, que crea selectores de color para el personalizador de tema..

Todo tu para cada declaración ahora se verá así:

// agregue la configuración y los controles para cada color para cada color ($ txtcolors como $ txtcolor) // AJUSTES $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'type' => 'option', 'capacity' => 'edit_theme_options')); // CONTROLES $ wp_customize-> add_control (nuevo WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'settings' => $ txtcolor ['slug']))); 

Ahora podrá ver su nueva sección cuando abra el personalizador de temas con su tema activado:

Y cuando expanda uno de los controles, podrá ver el selector de color:

En este momento, nada de lo que hagas con el selector de color se reflejará en tu tema, ya que no has agregado ningún CSS para que funcione, lo veremos en la parte 2 de esta serie. Por ahora, agregaremos otra sección para dar a los usuarios un poco más de control sobre su esquema de color..

Creación de ajustes de fondo sólidos y controles

La siguiente sección no permitirá a los usuarios elegir colores, sino que les dará la opción de agregar un fondo sólido al encabezado y / o pie de página de su sitio. Si seleccionan esto, los colores de fondo y de texto de esos elementos cambiarán.

Debajo del código que acaba de agregar, pero aún dentro de su wptutsplus_customize_register () función, agregue lo siguiente:

/ ************************************** Colores de fondo sólidos ******** ******************************* / // agregue la sección que contenga las configuraciones $ wp_customize-> add_section ('background' , array ('title' => 'Solid Backgrounds',)); // agregar la configuración para el fondo del encabezado $ wp_customize-> add_setting ('header-background'); // agregar el control para el fondo del encabezado $ wp_customize-> add_control ('header-background', array ('label' => 'Agregar un fondo sólido al encabezado?', 'section' => 'background', 'settings '=>' header-background ',' type '=>' radio ',' choices '=> array (' header-background-off '=>' no ',' header-background-on '=>' yes ' ,))); // agregar la configuración para el fondo del pie de página $ wp_customize-> add_setting ('footer-background'); // agregar el control para el fondo del pie de página $ wp_customize-> add_control ('footer-background', array ('label' => 'Agregar un fondo sólido al pie de página?', 'section' => 'background', 'configuraciones '=>' footer-background ',' type '=>' radio ',' choices '=> array (' footer-background-off '=>' no ',' footer-background-on '=>' yes ' ,)));

Esto agrega una segunda sección nueva llamada 'Fondos sólidos' y luego le agrega dos controles, los cuales son cajas de radio. En cada caso hay dos opciones: sí y no. En la segunda parte de esta serie, te mostraré cómo definir variables en función de esas elecciones y usarlas para alterar el CSS en el tema.

Ahora puede ver la nueva sección en el personalizador de temas:

Nuevamente, no sucederá nada si selecciona una de las casillas de radio ya que aún no lo ha vinculado al CSS del tema, pero eso vendrá.

Resumen

En esta primera parte, ha agregado la configuración y los controles necesarios para crear la interfaz del personalizador de tema para su combinación de colores.

En la siguiente parte, le mostraré cómo definir variables en función de las elecciones que hagan sus usuarios en el personalizador de temas y luego usar esas variables para configurar el CSS.