Plantilla está no es un personalizador de temas de WordPress -
Actualización: este artículo se editó el 19 de febrero de 2013 para reflejar los cambios realizados en el Boilerplate del personalizador de temas.
Esperamos haber dirigido y discutido las dos publicaciones de la serie Theme Customizer: Introducción al personalizador de temas de WordPress e interacción con el personalizador de temas. Ahora es el momento de ir a la meseta es el modelo principal de la plataforma desde el personalizador de temas que nos apoyan en sus temas. Esta publicación contiene algunos registros de códigos largos, que podrán atraer la mayoría de los comentarios.
Nota: Si prefiere usar el texto inmediatamente, puede descargar el Github y cambiar los archivos en la matriz $ options enganchá dozivaite al gancho en el filtro 'thsp_cbp_options_array'.
Estamos creando
Estructura de los directorios de guías de plantas
- personalizador.php - Este es el archivo de planta principal del Personalizador de los temas, que agrega secciones, configuraciones y controles utilizando los datos de la matriz de opciones.
- controles personalizados.php - Clases de cheques personalizados y un cuadro de acción que le permite agregar sus cheques personalizados
- ayudantes.php - Funciones de ayuda, usuarios para recuperar opciones de temas, opciones predefinidas, etc.
- opciones.php - Opciones de muestra y una almohadilla de filtro que le permitirá editar la matriz de opciones y usar sus campamentos de propiedad
- personalizador-controles.css - CSS se puede controlar mediante un ajuste de imagen de radio personalizado
La idea es copiar estos archivos en un subdirectorio de su directorio, incluido el archivo personalizable. ). Actualizar: Anteriormente, solo editaba options.php, pero el uso de ganchos se me ha puesto muy difícil.
Ahora usamos una muestra real: agregamos un control del texto en una nueva sección del Personalizador. con opciones de un tema secundario. Aquí lo tienes:
/**
* Helper function that holds array of theme options.
*
* @return array $options Array of theme options
* @uses thsp_get_theme_customizer_fields() defined in customizer/helpers.php
*/
function thsp_get_theme_customizer_fields() {
/*
* Using helper function to get default required capability
*/
$required_capability = thsp_settings_page_capability();
$options = array(
// Section ID
'new_customizer_section' => array(
/*
* We're checking if this is an existing section
* or a new one that needs to be registered
*/
'existing_section' => false,
/*
* Section related arguments
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
*/
'args' => array(
'title' => __( 'New Section Title', 'my_theme_textdomain' ),
'description' => __( 'New section description', 'my_theme_textdomain' ),
'priority' => 10
),
/*
* 'fields' array contains all the fields that need to be
* added to this section
*/
'fields' => array(
/*
* ==========
* ==========
* Text field
* ==========
* ==========
*/
// Field ID
'new_text_field' => array(
/*
* Setting related arguments
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
*/
'setting_args' => array(
'default' => __( 'Default text value', 'my_theme_textdomain' ),
'type' => 'option',
'capability' => $required_capability,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/*
* Control related arguments
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
*/
'control_args' => array(
'label' => __( 'New text control label', 'my_theme_textdomain' ),
'type' => 'text', // Text field control
'priority' => 1
)
)
)
),
);
/*
* 'thsp_customizer_options' filter hook will allow you to
* add/remove some of these options from a child theme
*/
return apply_filters( 'thsp_customizer_options', $options );
}
Actualizar: La matriz se puede encontrar en el medio, pero ahora también puede encontrar la matriz de opciones para una fuente de filtro; consulte la Parte 4 para más detalles.
Es complicado verlo a primera vista, pero está claro.
Alce $ opciones La matriz consta de secciones (solo una en este caso, new_customizer_section), cada sección tiene sus argumentos, campos y un valor booleano (existing_section) para indicar si es una nueva sección, o simplemente hay campos existentes al simplemente. La matriz de argumentos es idéntica a la que se ajusta al método $wp_customize->add_sectionLa matriz de campos está un poco más llena.
Actualizar: La matriz de opciones y argumentos de control es ahora una matriz multidimensional.
Cada día tiene una configuración personalizada y un control personalizado. Es porque tenemos las matrices setting_args y control_args. Son exactamente iguales a las matrices de argumentos que pasan los métodos $wp_customize->add_setting y $wp_customize->add_controlLa diferencia es la matriz de 'opciones' en los argumentos de control, $wp_customize->add_control se requiere para una matriz de palabras clave => valor simple y estamos usando una matriz multidimensional en su lugar.
De esta manera, es posible pasar más datos sobre cada una de las opciones, por lo que, por ejemplo, estás cargando archivos de Google sobre el tema, puedes tener los permisos que te permitan cargar la correcta dentro de la matriz de opciones. . . Puede ver una muestra de este tema que usa Custom Boilerplate.
Entonces, ya ya conoce esos tres métodos, le resultará mnogo poznat.
Agregue un control del cuadro de verificación es el cuadro del mouse, solo necesita cambiar el 'tipo' al 'cuadro de verificación' en la matriz 'control_args':
/* * ============== * Checkbox field * ============== */ 'new_checkbox_field' => array( 'setting_args' => array( 'default' => true, 'type' => 'option', 'capability' => $required_capability, 'transport' => 'refresh', 'sanitize_callback' => 'thsp_sanitize_cb', ), 'control_args' => array( 'label' => __( 'New radio control label', 'my_theme_textdomain' ), 'type' => 'checkbox', // Checkbox field control 'priority' => 2 ) ),
Los controles de radio y selección son los mismos, solo necesitas especificar las opciones:
/* * =========== * =========== * Radio field * =========== * =========== */ 'new_radio_field' => array( 'setting_args' => array( 'default' => 'option-2', 'type' => 'option', 'capability' => $thsp_cbp_capability, 'transport' => 'refresh', ), 'control_args' => array( 'label' => __( 'New radio control label', 'my_theme_textdomain' ), 'type' => 'radio', // Radio control 'choices' => array( 'option-1' => array( 'label' => __( 'Option 1', 'my_theme_textdomain' ) ), 'option-2' => array( 'label' => __( 'Option 2', 'my_theme_textdomain' ) ), 'option-3' => array( 'label' => __( 'Option 3', 'my_theme_textdomain' ) ) ), 'priority' => 3 ) ), /* * ============ * ============ * Select field * ============ * ============ */ 'new_select_field' => array( 'setting_args' => array( 'default' => 'option-3', 'type' => 'option', 'capability' => $thsp_cbp_capability, 'transport' => 'refresh', ), 'control_args' => array( 'label' => __( 'New select field label', 'my_theme_textdomain' ), 'type' => 'select', // Select control 'choices' => array( 'option-1' => array( 'label' => __( 'Option 1', 'my_theme_textdomain' ) ), 'option-2' => array( 'label' => __( 'Option 2', 'my_theme_textdomain' ) ), 'option-3' => array( 'label' => __( 'Option 3', 'my_theme_textdomain' ) ) ), 'priority' => 4 ) )
Y finalmente, los dos tipos de controles de control que están integrados en WordPress: carga de archivos y carga de genes:
/* * =========== * =========== * File Upload * =========== * =========== */ 'new_file_upload_field' => array( 'setting_args' => array( 'default' => '', 'type' => 'option', 'capability' => $thsp_cbp_capability, 'transport' => 'refresh', ), 'control_args' => array( 'label' => __( 'File upload', 'my_theme_textdomain' ), 'type' => 'upload', // File upload field control 'priority' => 5 ) ), /* * ============ * ============ * Image Upload * ============ * ============ */ 'new_image_upload_field' => array( 'setting_args' => array( 'default' => '', 'type' => 'option', 'capability' => $thsp_cbp_capability, 'transport' => 'refresh', ), 'control_args' => array( 'label' => __( 'Image upload', 'my_theme_textdomain' ), 'type' => 'image', // Image upload field control 'priority' => 6 ) )
quiero saber que hacer 'tipo' => 'opción' para establecer argumentos para todas estas cosas. Esto permite agregar todos los valores como un valor en su base de datos. la alternativa es 'tipo' => 'tema_mod' pero por ahora estamos con 'opciones'.
Uso de la matriz de opciones para agregar secciones, configuraciones y controles de personalización
Si no desea interactuar con el personalizador de temas de WordPress, verifique y verifique, es por eso que lo odiamos ahora. que cremas. Saltemos a eso:
function thsp_cbp_customize_register( $wp_customize ) {
/**
* Custom controls
*/
require( dirname(__FILE__) . '/custom-controls.php' );
/*
* Get all the fields using a helper function
*/
$thsp_sections = thsp_cbp_get_fields();
/*
* Get name of DB entry under which options will be stored
*/
$thsp_cbp_option = thsp_cbp_option();
/**
* Loop through the array and add Customizer sections
*/
foreach( $thsp_sections as $thsp_section_key => $thsp_section_value ) {
/**
* Adds Customizer section, if needed
*/
if( ! $thsp_section_value['existing_section'] ) {
$thsp_section_args = $thsp_section_value['args'];
// Add section
$wp_customize->add_section(
$thsp_section_key,
$thsp_section_args
);
} // end if
/*
* Loop through 'fields' array in each section
* and add settings and controls
*/
$thsp_section_fields = $thsp_section_value['fields'];
foreach( $thsp_section_fields as $thsp_field_key => $thsp_field_value ) {
/*
* Check if 'option' or 'theme_mod' is used to store option
*
* If nothing is set, $wp_customize->add_setting method will default to 'theme_mod'
* If 'option' is used as setting type its value will be stored in an entry in
* {prefix}_options table. Option name is defined by thsp_cbp_option() function
*/
if ( isset( $thsp_field_value['setting_args']['type'] ) && 'option' == $thsp_field_value['setting_args']['type'] ) {
$setting_control_id = $thsp_cbp_option . '[' . $thsp_field_key . ']';
} else {
$setting_control_id = $thsp_field_key;
}
/*
* Add default callback function, if none is defined
*/
if ( ! isset( $thsp_field_value['setting_args']['sanitize_cb'] ) ) {
$thsp_field_value['setting_args']['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}
/**
* Adds Customizer settings
*/
$wp_customize->add_setting(
$setting_control_id,
$thsp_field_value['setting_args']
);
/**
* Adds Customizer control
*
* 'section' value must be added to 'control_args' array
* so control can get added to current section
*/
$thsp_field_value['control_args']['section'] = $thsp_section_key;
/*
* $wp_customize->add_control method requires 'choices' to be a simple key => value pair
*/
if ( isset( $thsp_field_value['control_args']['choices'] ) ) {
$thsp_cbp_choices = array();
foreach( $thsp_field_value['control_args']['choices'] as $thsp_cbp_choice_key => $thsp_cbp_choice_value ) {
$thsp_cbp_choices[$thsp_cbp_choice_key] = $thsp_cbp_choice_value['label'];
}
$thsp_field_value['control_args']['choices'] = $thsp_cbp_choices;
}
// Check control type
if ( 'color' == $thsp_field_value['control_args']['type'] ) {
$wp_customize->add_control(
new 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(
new 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(
new WP_Customize_Upload_Control(
$wp_customize,
$setting_control_id,
$thsp_field_value['control_args']
)
);
} else {
$wp_customize->add_control(
$setting_control_id,
$thsp_field_value['control_args']
);
}
} // end foreach
} // end foreach
}
add_action( 'customize_register', 'thsp_cbp_customize_register' );
Coincidencia de todas las secciones, agregando las que no existen, revisando todas las secciones de cada sección, agregando una configuración y un control para cada sección. Eso es todo al respecto.
¿Quiere que 'escribamos' => 'opción' para todas las configuraciones? Es porque ahora tenemos "Opciones para_mi_tema[$thsp_field_key]" tanto por la configuración como por las secciones. This is an altocenará todos los valores como una matriz serializada que puede recuperar usando get_option ('my_theme_options')El simple se puede utilizar para definir funciones correctamente ayudantes.php recuperar tanto los valores actuales como los valores predeterminados para todos los campamentos:
/**
* Get Option Values
*
* Array that holds all of the options values
* Option's default value is used if user hasn't specified a value
*
* @uses thsp_get_theme_customizer_defaults() defined in /customizer/options.php
* @return array Current values for all options
* @since Theme_Customizer_Boilerplate 1.0
*/
function thsp_cbp_get_options_values() {
// Get the option defaults
$option_defaults = thsp_cbp_get_options_defaults();
// Parse the stored options with the defaults
$thsp_cbp_options = wp_parse_args( get_option( thsp_cbp_option(), array() ), $option_defaults );
// Return the parsed array
return $thsp_cbp_options;
}
/**
* Get Option Defaults
*
* Returns an array that holds default values for all options
*
* @uses thsp_get_theme_customizer_fields() defined in /customizer/options.php
* @return array $thsp_option_defaults Default values for all options
* @since Theme_Customizer_Boilerplate 1.0
*/
function thsp_cbp_get_options_defaults() {
// Get the array that holds all theme option fields
$thsp_sections = thsp_cbp_get_fields();
// Initialize the array to hold the default values for all theme options
$thsp_option_defaults = array();
// Loop through the option parameters array
foreach ( $thsp_sections as $thsp_section ) {
$thsp_section_fields = $thsp_section['fields'];
foreach ( $thsp_section_fields as $thsp_field_key => $thsp_field_value ) {
// Add an associative array key to the defaults array for each option in the parameters array
if( isset( $thsp_field_value['setting_args']['default'] ) ) {
$thsp_option_defaults[$thsp_field_key] = $thsp_field_value['setting_args']['default'];
} else {
$thsp_option_defaults[$thsp_field_key] = false;
}
}
}
// Return the defaults array
return $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 de_k.
/**
* Theme Customizer sanitization callback function
*/
function thsp_sanitize_cb( $input ) {
return wp_kses_post( $input );
}
¿Dónde vamos desde aqu�
Para usar la plantilla para personalizar temas y temas, esto debe ser necesario para descargar Github, copiar al directorio de temas e incluir el archivo principal de functions.php, que es 100% funcional bueno para la mayoría de los temas.
Dado que su tema no es "como la mayoría de los temas", la próxima semana veremos cómo extender el texto está estándar mediante el uso de su filtro y sus ganchos de acción.
Me gustaría saber cómo crear la mejor manera de entender este texto, ya que estará en los comentarios.
Deja una respuesta