Share
En el último artículo, definimos una metodología simple para todo lo que se requiere para establecer una nueva Sección, Configuración y Controles dentro del Personalizador de Temas..
En este artículo, vamos a seguir haciendo más de lo mismo; sin embargo, vamos a agregar nuevas configuraciones y controles a la sección existente, pero vamos a ver una variedad de opciones diferentes como botones de radio, cuadros de selección y cuadros de entrada.
Así que con eso dicho, continuemos.
Recordemos del último artículo, que nuestra metodología es la siguiente:
Accentsconagua
get_theme_mod Haremos esto para cada uno de los nuevos controles en las siguientes configuraciones y controles. Cuando sea necesario, hablaremos sobre la validación de datos y el saneamiento según sea necesario..
Una vez que hayamos llegado al final del artículo, una versión del código de este artículo también estará disponible para descargar desde GitHub..
Agreguemos una nueva opción al Personalizador de temas que le permita al usuario elegir entre esquemas de color: uno es el esquema de color negro sobre blanco predeterminado, el otro será el inverso.
Para hacer esto, primero necesitamos agregar una configuración y un control a nuestros tcx_register_theme_customizer función. Agregue las siguientes dos llamadas de función a continuación:
$ wp_customize-> add_setting ('tcx_color_scheme', array ('default' => 'normal', 'transport' => 'postMessage')); $ wp_customize-> add_control ('tcx_color_scheme', array ('section' => 'tcx_display_options', 'label' => 'Color Scheme', 'type' => 'radio', 'choices' => array ('normal' => 'Normal', 'inverso' => 'Inverso'))); Note arriba que estamos agregando una nueva configuración identificada por el tcx_color_scheme Identificación y obviamente estamos usando el mensaje posterior tipo de transporte.
En segundo lugar, observe que también hemos proporcionado una defecto valor que se establece en normal. Este valor es lo que nos lleva al add_control llamada.
Tenga en cuenta que lo estamos vinculando a la tcx_display_options que definimos en el último artículo. Le hemos dado la etiqueta. Esquema de colores ya que obviamente eso es lo que estamos cambiando, y estamos estableciendo el tipo de control como radio botón.
Para hacer esto, necesitamos pasar una serie de opciones donde la primera clave es el valor de la opción y el segundo valor es la etiqueta para el botón de opción.
Esta Es por eso que el valor por defecto para el add_setting llamada está configurada para normal.
Ahora, deberíamos poder guardar nuestro trabajo, actualizar el Personalizador de temas y luego ver la nueva opción.
Pero en este punto, todavía no hará mucho..
Ahora, tenemos que saltar en js / theme-customizer.js y añade el siguiente bloque de código:
wp.customize ('tcx_color_scheme', function (value) value.bind (function (to) if ('inversa' === to) $ ('body') .css (background: '# 000', color: '#fff'); else $ ('body') .css (background: '#fff', color: '# 000'););); Esto le indica al Personalizador de temas que cambie el cuerpoEl color de fondo y el color de la fuente según la configuración de los botones de opción.
Al implementar este código, debería poder actualizar el Personalizador de temas y luego ver los cambios que se producen. La cosa es que los valores no se guardan realmente en la base de datos..
get_theme_mod Lo último que necesitamos implementar para asegurarnos de que los datos se lean de la base de datos para cambiar el esquema de color es agregar un estilo a la estilo bloque en el tcx_customizer_css función:
fondo: # 000; color: #fff; fondo: #fff; color: # 000;
Lo suficientemente fácil de entender, ¿verdad? Funciona exactamente de la misma manera que nuestro código JavaScript, excepto que en realidad se aplica al tema cuando se carga la página en lugar de solo al verlo..
Ahora, continuaremos el proceso introduciendo otra configuración y otro control usando nuestra metodología, de modo que nuestros usuarios podrán seleccionar una fuente global para su tema.
Para ello, utilizaremos un seleccionar Elemento con un conjunto de opciones desde las cuales el usuario puede elegir el frente deseado..
En este punto, la metodología debería ser muy familiar..
Primero, definiremos una configuración para el tcx_font que usaremos para hacer referencia a lo largo del código un poco más tarde:
$ wp_customize-> add_setting ('tcx_font', array ('default' => 'times', 'transport' => 'postMessage')); Al igual que con la configuración anterior, nos proporcionan defecto Valor que definiremos momentáneamente cuando implementemos un nuevo control..
Como se mencionó anteriormente, vamos a dar a los usuarios la posibilidad de seleccionar una fuente usando un seleccionar elemento. Esto es muy similar a la forma en que funcionan los botones de opción, ya que proporcionaremos una matriz con claves y valores que definen la fuente; sin embargo, el actual tipo del elemento sera diferente.
Así que con eso dicho, agregue el siguiente código a la tcx_register_theme_customizer función:
$ wp_customize-> add_control ('tcx_font', array ('section' => 'tcx_display_options', 'label' => 'Theme Font', 'type' => 'select', 'choices' => array ('times' => 'Times New Roman', 'arial' => 'Arial', 'courier' => 'Courier New'))); Esto introducirá un seleccionar Elemento en el Personalizador de temas con las siguientes tres opciones para fuentes:
Y ahora, tenemos que escribir las opciones de fuente para que cambien dinámicamente la fuente del tema.
Para ello, abre. js / theme-customizer.js y luego agregar el siguiente bloque de código. Tenga en cuenta que esto va a ser un poco más complicado de lo que estamos acostumbrados a hacer en el Personalizador de Temas de JavaScript..
Primero, asegúrate de que tienes var sFont definido en la parte superior del archivo JavaScript justo encima de la primera llamada a wp.customize.
A continuación, agregue el siguiente bloque de código:
wp.customize ('tcx_font', function (value) value.bind (function (to) switch (to.toString (). toLowerCase ()) case 'times': sFont = 'Times New Roman'; break; case 'arial': sFont = 'Arial'; break; case 'courier': sFont = 'Courier New, Courier'; break; case 'helvetica': sFont = 'Helvetica'; break; default: sFont = 'Times New Roman '; break; $ (' body ') .css (fontFamily: sFont););); Aunque la función es un poco más larga, en realidad es bastante simple: estamos tomando el valor entrante y luego usando una interruptor / caja para determinar qué fuente fue seleccionada. En función del valor seleccionado, se lo asignamos a la sFont variable.
Y, para propósitos de codificación defensiva, si uno no está definido o algo sale mal durante el transporte, entonces vamos a predeterminar Times New Roman.
Finalmente, el entonces aplica el valor de sFont al Familia tipográfica atributo de la cuerpo elemento usando jQuery css función.
get_theme_mod Ahora, para mantener la coherencia con nuestra metodología, necesitamos actualizar nuestra tcx_customizer_css Función para que la fuente se aplique correctamente al cuerpo..
Esto es en realidad una simple llamada:
Familia tipográfica:
Hecho.
Finalmente, permitamos que el usuario ajuste el mensaje de copyright que aparece en la parte inferior de la plantilla de pie de página.
Vamos a ajustar la plantilla ahora. Actualmente, debería verse así:
© Todos los derechos reservados
Pero vamos a actualizarlo para que se vea así:
©
Aunque esto se está poniendo un poco Por delante de nuestra metodología, es necesario que definamos para que el Personalizador de temas pueda aprovechar el nuevo lapso Elemento, y para que podamos mostrar el mensaje de copyright como lo define el usuario..
Primero, introduciremos nuestra configuración final:
$ wp_customize-> add_setting ('tcx_footer_copyright_text', array ('default' => 'Todos los derechos reservados', 'sanitize_callback' => 'tcx_sanitize_copyright', 'transport' => 'postMessage')); Pero tenga en cuenta que hay una cosa que es diferente a las entradas anteriores y es la clave y el valor "sanitize_callback". Esto define una función que debe activarse cuando los datos se serializan en una base de datos; después de todo, no hacemos contenido ilegal al ingresar a la base de datos.
Entonces, para hacer esto, definiremos una función llamada tcx_sanitize_copyright eso eliminará todas las etiquetas, barras diagonales y otras etiquetas ilegales que deben ser serializadas en la base de datos:
función tcx_sanitize_copyright ($ input) return strip_tags (stripslashes ($ input));
Simplemente devolvemos el valor de la entrada saneada.
A continuación, es hora de agregar el control real para la configuración.
$ wp_customize-> add_control ('tcx_footer_copyright_text', array ('section' => 'tcx_display_options', 'label' => 'Copyright Message', 'type' => 'text')); Aquí, de nuevo, lo estamos vinculando a la tcx_display_options y le damos la etiqueta "Mensaje de Copyright" para que los usuarios lean la tabla. Finalmente, hemos definido esto como una texto entrada.
Por supuesto, en este momento, sabe que no podemos hacer nada con el control hasta que lo hayamos conectado al JavaScript..
El JavaScript para esto es muy fácil, especialmente si has dado el lapso elemento una identificación única como lo hicimos anteriormente.
wp.customize ('tcx_footer_copyright_text', function (value) value.bind (function (to) $ ('# copyright-message') .text (to););); Esencialmente, toma el valor de la a argumento y luego lo establece como el valor de la lapsotexto de.
get_theme_mod Y finalmente, aunque ya lo hemos hecho en la plantilla, continuaremos y revisaremos el código aquí:
©
Note que estamos leyendo el valor de tcx_footer_copyright_text y luego estamos imprimiendo ese valor en la pantalla.
Y por ahora, eso es todo! Hemos analizado algunos de los controles básicos, dado al usuario una gran cantidad de control sobre el aspecto de este tema, aunque sea muy básico, y hemos cubierto cómo introducir el saneamiento de datos junto con el proceso de serialización..
Lo único que queda por cubrir son algunos de los controles integrados más avanzados que ofrece WordPress. Entonces, en el siguiente artículo, veremos algunas de esas características y cómo implementarlas, también..
!
