Plantilla del personalizador de temas de WordPress

Plantilla del personalizador de temas de WordPress
  1. 1. Introducción al personalizador de temas de WordPress
  2. 2. Interactuando con WordPress Theme Customizer
  3. 3. Actualmente leyendo: Plantilla del personalizador de temas de WordPress
  4. 4 4. Ampliación de la plantilla del personalizador de temas de WordPress
  5. 5 5. Plantilla del personalizador de temas: opciones condicionales, temas secundarios y complementos

Actualización: este artículo se editó el 19 de febrero de 2013 para reflejar los cambios realizados en Theme Customizer Boilerplate.


Con suerte, leyó y disfrutó de las dos primeras publicaciones de la serie Theme Customizer: Introducción a WordPress Theme Customizer e Interactuando con Theme Customizer. Ahora es el momento de pasar al curso principal y comenzar a armar la plantilla estándar del Personalizador de temas que podrá usar en sus temas. Esta publicación contiene algunos bloques largos de código, así que presta atención a los comentarios en línea.

Nota: Si prefiere usar la repetitiva de inmediato, puede descargarla de Github y cambiar los campos en la matriz $ options conectándose al gancho de filtro “thsp_cbp_options_array”.

Lo que estamos creando

Estructura del directorio del personalizador temático Boilerplate

Estructura del directorio del personalizador temático Boilerplate

  • customizer.php – Este es el archivo principal del Personalizador del tema principal, el que agrega secciones, configuraciones y controles utilizando datos de la matriz de opciones
  • controles personalizados.php – Clases de controles personalizados y un gancho de acción que le permite agregar sus propios controles personalizados
  • helpers.php – Funciones de ayuda, utilizadas para recuperar opciones de tema, opciones predeterminadas, etc..
  • opciones.php – Opciones de muestra y un enlace de filtro que le permite editar la matriz de opciones y usar sus propios campos
  • customizer-controls.css – CSS básico para el control personalizado de radio reemplazado por imagen

La idea es poder copiar estos archivos a un subdirectorio en el directorio de su tema, incluir el archivo customizer.php de functions.php y cambiar todo lo que quiera, incluido y especialmente la matriz de opciones, mediante el uso de ganchos de plantilla de personalización de tema (explicado en la parte 4). Actualizar: Anteriormente, solo editaba options.php, pero el uso de ganchos hace que las cosas sean mucho más limpias.

Ahora usemos un ejemplo real: agregaremos un control de texto a una nueva sección del Personalizador de temas. La matriz se coloca en una función auxiliar y se le aplica un filtro cuando se devuelve. De esta manera, puede agregar más opciones desde un tema o complemento secundario. Aquí está:

/ **
* Función auxiliar que contiene una variedad de opciones de tema.
* *
* @return array $ options Matriz de opciones de tema
* @uses thsp_get_theme_customizer_fields () definido en customizer / helpers.php
* /
función thsp_get_theme_customizer_fields () {

/ *
* Uso de la función auxiliar para obtener la capacidad requerida predeterminada
* /
$ required_capability = thsp_settings_page_capability ();

$ opciones = matriz (


// ID de sección
'new_customizer_section' => array (

/ *
* Estamos comprobando si esta es una sección existente
* o uno nuevo que necesita ser registrado
* /
'istent_section '=> false,
/ *
* Argumentos relacionados con la sección
* Codex: http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array (
'title' => __ ('Nuevo título de sección', 'my_theme_textdomain'),
'description' => __ ('Descripción de la nueva sección', 'my_theme_textdomain'),
'prioridad' => 10
),

/ *
* La matriz 'fields' contiene todos los campos que deben ser
* agregado a esta sección
* /
'fields' => array (

/ *
* ==========
* ==========
* Campo de texto
* ==========
* ==========
* /
// ID de campo
'new_text_field' => array (
/ *
* Establecer argumentos relacionados
* Codex: http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => array (
'default' => __ ('Valor de texto predeterminado', 'my_theme_textdomain'),
'type' => 'opción',
'capacidad' => $ required_capability,
'transport' => 'actualizar',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Controlar argumentos relacionados
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => array (
'label' => __ ('Nueva etiqueta de control de texto', 'my_theme_textdomain'),
'type' => 'text', // Control de campo de texto
'prioridad' => 1
)
)

)

),

);

/ *
* El gancho de filtro 'thsp_customizer_options' le permitirá
* Agregar / eliminar algunas de estas opciones de un tema secundario
* /
return apply_filters ('thsp_customizer_options', $ opciones);

}

Actualizar: El conjunto permanece igual, pero ahora también puede pasar el conjunto de opciones a un gancho de filtro, consulte la Parte 4 para obtener más detalles..

Parece complicado a primera vista, lo sé, pero déjame explicarte.

los $ opciones La matriz consta de secciones (solo una en este caso, nueva_sección_de_personalizador), cada sección tiene sus argumentos, campos y un valor booleano (sección_existente) para indicar si es una nueva sección, o simplemente estamos agregando algunos campos a una existente uno. La matriz de argumentos es idéntica a la que pasarías $ wp_customize-> add_section método. La matriz de campos es un poco más compleja.

Actualizar: La matriz de opciones en los argumentos de control ahora es una matriz multidimensional.

Cada campo consta de una configuración de Personalizador y un control de Personalizador. Por eso tenemos los arrays setting_args y control_args. Son casi exactamente lo mismo que las matrices de argumentos a las que pasarías $ wp_customize-> add_setting y $ wp_customize-> add_control métodos. La única diferencia es la matriz de “opciones” en los argumentos de control, $ wp_customize-> add_control requiere que sea una matriz de pares de clave simple => valor y en su lugar estamos utilizando una matriz multidimensional.

De esta manera, es posible pasar más datos a cada una de las opciones, por lo que si, por ejemplo, está cargando fuentes de Google en su tema, podrá tener cadenas que le permitirán cargar la fuente correcta dentro de la matriz de opciones . Puedes ver un ejemplo de esto tema que utiliza la plantilla de personalización.

Entonces, si ya conoces esos tres métodos, todo es muy familiar.

Agregar un control de casilla de verificación es casi lo mismo, solo necesita cambiar ‘tipo’ a ‘casilla de verificación’ en la matriz ‘control_args’:

/ *
* ==============
* Campo de casilla de verificación
* ==============
* /
'new_checkbox_field' => array (
'setting_args' => array (
'default' => verdadero,
'type' => 'opción',
'capacidad' => $ required_capability,
'transport' => 'actualizar',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => array (
'label' => __ ('Nueva etiqueta de control de radio', 'my_theme_textdomain'),
'type' => 'checkbox', // Control de campo de casilla de verificación
'prioridad' => 2
)
),

La radio y los controles de selección son casi iguales, solo necesita especificar las opciones dadas:

/ *
* ===========
* ===========
* Campo de radio
* ===========
* ===========
* /
'new_radio_field' => array (
'setting_args' => array (
'default' => 'opción-2',
'type' => 'opción',
'capacidad' => $ thsp_cbp_capability,
'transport' => 'actualizar',
),
'control_args' => array (
'label' => __ ('Nueva etiqueta de control de radio', 'my_theme_textdomain'),
'type' => 'radio', // Radio control
'elecciones' => matriz (
'option-1' => array (
'label' => __ ('Opción 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Opción 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Opción 3', 'my_theme_textdomain')
)
),
'prioridad' => 3
)
),

/ *
* ============
* ============
* Seleccionar campo
* ============
* ============
* /
'new_select_field' => array (
'setting_args' => array (
'default' => 'opción-3',
'type' => 'opción',
'capacidad' => $ thsp_cbp_capability,
'transport' => 'actualizar',
),
'control_args' => array (
'label' => __ ('Nueva etiqueta de campo de selección', 'my_theme_textdomain'),
'type' => 'select', // Seleccionar control
'elecciones' => matriz (
'option-1' => array (
'label' => __ ('Opción 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Opción 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Opción 3', 'my_theme_textdomain')
)
),
'prioridad' => 4
)
)

Y finalmente, dos tipos de control complejos integrados en WordPress: carga de archivos y carga de imágenes:

/ *
* ===========
* ===========
* Subir archivo
* ===========
* ===========
* /
'new_file_upload_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'opción',
'capacidad' => $ thsp_cbp_capability,
'transport' => 'actualizar',
),
'control_args' => array (
'label' => __ ('Carga de archivo', 'my_theme_textdomain'),
'type' => 'upload', // Control de campo de carga de archivo
'prioridad' => 5
)
),

/ *
* ============
* ============
* Carga de imagen
* ============
* ============
* /
'new_image_upload_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'opción',
'capacidad' => $ thsp_cbp_capability,
'transport' => 'actualizar',
),
'control_args' => array (
'label' => __ ('Carga de imagen', 'my_theme_textdomain'),
'type' => 'image', // Control de campo de carga de imagen
'prioridad' => 6
)
)

Tenga en cuenta que usé ‘Type’ => ‘option’ al establecer argumentos para todos estos campos. Esto permitirá que todos los valores se almacenen como un valor en su base de datos. La alternativa es ‘Type’ => ‘theme_mod’ pero por ahora sigamos con la “opción”.

Uso de la matriz de opciones para agregar secciones, configuraciones y controles del personalizador

Si no está seguro de cómo interactuar con el Personalizador de temas de WordPress, vaya y verifique, porque eso es lo que haremos ahora. La única diferencia es que, en lugar de agregar secciones, configuraciones y controles de uno en uno, automatizaremos el proceso utilizando la matriz serializada que creamos. Vamos a saltar a eso:

función thsp_cbp_customize_register ($ wp_customize) {

/ **
* Controles personalizados
* /
require (dirname (__ FILE__). '/custom-controls.php');


/ *
* Obtenga todos los campos usando una función auxiliar
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Obtenga el nombre de la entrada de DB bajo la cual se almacenarán las opciones
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Recorre la matriz y agrega secciones de Personalizador
* /
foreach ($ thsp_sections como $ thsp_section_key => $ thsp_section_value) {

/ **
* Agrega la sección de personalización, si es necesario
* /
if (! $ thsp_section_value ['existente_sección']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Añadir sección
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // terminara si

/ *
* Recorrer la matriz de 'campos' en cada sección
* y agrega configuraciones y controles
* /
$ thsp_section_fields = $ thsp_section_value ['campos'];
foreach ($ thsp_section_fields como $ thsp_field_key => $ thsp_field_value) {

/ *
* Compruebe si se utiliza 'opción' o 'theme_mod' para almacenar la opción
* *
* Si no se establece nada, el método $ wp_customize-> add_setting tendrá el valor predeterminado 'theme_mod'
* Si se usa 'opción' como tipo de configuración, su valor se almacenará en una entrada en
* {prefijo} _options table. El nombre de la opción está definido por la función thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} más {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Agregar la función de devolución de llamada predeterminada, si no hay ninguna definida
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Agrega configuraciones personalizadas
* /
$ wp_customize-> add_setting (
$ setting_control_id,
$ thsp_field_value ['setting_args']
);

/ **
* Agrega control de personalizador
* *
* El valor 'section' debe agregarse a la matriz 'control_args'
* para que el control pueda agregarse a la sección actual
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* El método $ wp_customize-> add_control requiere que las 'elecciones' sean un simple par de clave => valor
* /
if (isset ($ thsp_field_value ['control_args'] ['elecciones'])) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['elecciones'] como $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['etiqueta'];
}
$ thsp_field_value ['control_args'] ['elecciones'] = $ thsp_cbp_choices;
}


// Comprobar tipo de control
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nuevo WP_Customize_Color_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nuevo WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nuevo WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} más {
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} // fin foreach

} // fin foreach

}
add_action ('personalizar_registro', 'thsp_cbp_customize_register');

Revisando todas las secciones, agregando las que ya no existen, luego revisando todos los campos en cada sección, agregando una configuración y un control para cada una. Eso es todo lo que está pasando aquí.

¿Recuerdas que usamos “type” => “option” para toda la configuración? Por eso ahora tenemos “My_theme_options [$ thsp_field_key]” tanto para configuraciones como para secciones. Esto almacenará todos los valores como una matriz serializada que puede recuperar utilizando get_option (“my_theme_options”). O simplemente puede usar las funciones de ayuda definidas en helpers.php para recuperar valores actuales y valores predeterminados para todos los campos:

/ **
* Obtener valores de opción
* *
* Matriz que contiene todos los valores de opciones
* El valor predeterminado de la opción se usa si el usuario no ha especificado un valor
* *
* @uses thsp_get_theme_customizer_defaults () definido en /customizer/options.php
* @return array Valores actuales para todas las opciones
* @since Theme_Customizer_Boilerplate 1.0
* /
función thsp_cbp_get_options_values ​​() {

// Obtener los valores predeterminados de la opción
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analiza las opciones almacenadas con los valores predeterminados
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Devuelve la matriz analizada
devuelve $ thsp_cbp_options;

}


/ **
* Obtener opciones predeterminadas
* *
* Devuelve una matriz que contiene valores predeterminados para todas las opciones
* *
* @uses thsp_get_theme_customizer_fields () definido en /customizer/options.php
* @return array $ thsp_option_defaults Valores predeterminados para todas las opciones
* @since Theme_Customizer_Boilerplate 1.0
* /
función thsp_cbp_get_options_defaults () {

// Obtenga la matriz que contiene todos los campos de opciones de tema
$ thsp_sections = thsp_cbp_get_fields ();

// Inicializa la matriz para contener los valores predeterminados para todas las opciones de tema
$ thsp_option_defaults = array ();

// Recorrer la matriz de parámetros de opciones
foreach ($ thsp_sections como $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['campos'];

foreach ($ thsp_section_fields como $ thsp_field_key => $ thsp_field_value) {

// Agregue una clave de matriz asociativa a la matriz predeterminada para cada opción en la matriz de parámetros
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} más {
$ thsp_option_defaults [$ thsp_field_key] = falso;
}

}

}

// Devuelve la matriz predeterminada
devuelve $ thsp_option_defaults;

}

Solo hay una cosa más que debo mencionar: la función de devolución de llamada de desinfección que especificamos en la matriz “setting_args”. La función se define en extend.php y simplemente ejecuta datos a través de wp_kses_post función:

/ **
* Función de devolución de llamada de desinfección del Personalizador del tema
* /
función thsp_sanitize_cb ($ input) {

return wp_kses_post ($ entrada);

}

A dónde desde aquí?

Por ahora, puede usar este Boilerplate del Personalizador de temas en sus temas, todo lo que necesita hacer es descargarlo de Github, copiarlo en el directorio de su tema e incluir el archivo principal de functions.php, que es 100% funcional y lo suficientemente bueno para la mayoría temas.

Dado que su tema no es “como la mayoría de los temas”, la próxima semana veremos cómo extender la plantilla usando su filtro y ganchos de acción.

Me encantaría saber cómo crees que esta plantilla podría mejorarse o ampliarse, así que por favor dispara en los comentarios.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map