Probar la configuración de color desde el personalizador de temas sin hacer ningún daño a tu sitio
La pantalla personalizador de temas de WordPress es una gran herramienta que ofrece una vista previa de los cambios a las opciones de un tema antes de su aplicación. Es una gran manera de probar la configuración sin hacer ningún daño a tu sitio. Una de las opciones más interesantes que podemos ofrecer a nuestros usuarios temáticos es la capacidad de cambiar el color del tema con una vista previa en tiempo real para que puedan ver cómo se verán estos cambios para ayudar a acelerar el proceso de personalización.
Añadir soporte para una opción de cambio de color es relativamente simple - vamos a empezar por crear las opciones adicionales para nuestro tema:
$wp_customize->add_setting(
'my_theme_primary_color',
array(
'default' => '#e83a34',
'capability' => 'edit_theme_options',
'transport' => 'postMessage'
)
);
Un elemento clave en el código anterior es el parámetro transport, que permite que la opción modificada sea enviada directamente a la estructura previa a través de Javascript. Este es el elemento clave para hacer que los cambios aparezcan en tiempo real en una vista previa en vivo del sitio.
El siguiente paso es agregar un control que admite nuestros colores adicionales:
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'my_theme_primary_color',
array(
'label' => __('Primary Color', 'my-theme'),
'section' => 'colors',
'settings' => 'my_theme_primary_color'
)
)
);
Nuestro control se agregará a la sección de colores por defecto bajo el nombre Primary Color. Para que funcione, tenemos que envolver las piezas anteriores de código en una función llamada, por ejemplo, my_theme_init_customizer , que se sumará a la acción customize_register:
add_action( 'customize_register', 'mytheme_init_customizer' );
Una vez hecho esto, la pantalla de personalización debe ser más o menos así:
Por el momento nuestro control sigue sin hacer nada porque todavía tenemos que mapear cualquier cambio en el valor de la nueva opción en cualquier lugar. Vamos a hacer eso ahora:
function my_theme_customizer_css() {
$primary_color = get_theme_mod('my_theme_primary_color', '#e83a34');
?>
<style type="text/css">
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
color: <?php echo $primary_color; ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'my_theme_customizer_css' );
El código anterior toma el valor de la opción en la configuración del tema, a continuación, lo inserta en el código CSS en la sección <head> de nuestro tema. A partir de ahora, los cambios de la nueva opción aparecerá en el tema, pero sólo cuando se actualiza la página - todavía tenemos que vincular los cambios en nuestra opción con el código JavaScript adecuado para obtener una vista previa "en vivo" de estos cambios.
En primer lugar, hay que añadir una acción que se basará en la acción wp_footer en el modo de previsualización de temas:
function my_theme_customize_register($wp_customize) {
if ($wp_customize->is_preview() && !is_admin()) {
add_action('wp_footer', 'my_theme_customize_preview', 21);
}
}
add_action( 'customize_register', 'my_theme_customize_register' );
Este código es responsable de la elaboración de la función my_theme_customize_preview en el pie de página cuando se muestra el tema en el modo de vista previa. Por lo tanto, pasamos a la fase final - la definición de la función my_theme_customize_preview:
function my_theme_customize_preview() {
?>
<script>
(function( $ ){
wp.customize('my_theme_primary_color', function(value) {
value.bind(function(final_value) {
final_value = final_value ? final_value : '#e83a34';
$('a, button, input[type="submit"], input[type="button"], input[type="reset"]').css('color', final_value);
});
});
})(jQuery);
</script>
<?php
}
El código anterior funciona porque hemos asignado previamente el parámetro transport al postMessage uno. En la mayoría de los casos una solución de este tipo será más que suficiente.
El código JavaScrit optimalisation
A veces podemos encontrarnos en una situación en la que tenemos que cambiar el color de un gran número de elementos que no pueden ser unificados con unos selectores CSS. En este caso, sugerimos utilizar un código ligeramente diferente:
function my_theme_customize_preview() {
?>
<script>
(function( $ ){
wp.customize('my_theme_primary_color', function(value) {
value.bind( function( to ) {
final_value = final_value ? final_value : '#e83a34';
var new_css = 'a, button, input[type="submit"], input[type="button"], input[type="reset"] { color: ' + final_value + '; }';
if($(document).find('#my-theme-new-css').length) {
$(document).find('#my-theme-new-css').remove();
}
$(document).find('head').append($('<style id="my-theme-new-css">' + new_css + '</style>'));
});
});
})(jQuery);
</script>
<?php
}
El código anterior funciona de una manera más inteligente que nuestro código anterior - creamos código CSS sobre la marcha que se coloca en una etiqueta de estilo que se añade a la final de la sección <head> - esto sobreescribirá todos los demás archivos CSS. Como era de esperar, también quitamos la etiqueta de estilo insertada previamente para evitar que aparezcan cientos de elementos de estilo en la sección <head> cuando un usuario indeciso empieza a hojear los colores disponibles. Por lo tanto, nos encontramos con sólo dos operaciones simples en el árbol de un documento - eliminar y añadir el elemento - en lugar de (potencialmente) varios miles de acciones de selección y modificación.
Artículo original: Add a live preview of a theme"™s color changes to the theme customizer