Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Caja de herramientas inteligente para el Desarrollador WordPress: Kirki

by
Read Time:6 minsLanguages:
This post is part of a series called Tools of the Smart WordPress Developer.
Toolbox of the Smart WordPress Developer: Series Introduction
Toolbox of the Smart WordPress Developer: Theme Check

Spanish (Español) translation by Lucas Nicolas Frezzini (you can also view the original English article)

¡Bienvenido a la segunda parte de la serie "Caja de herramientas inteligente para el Desarrollador WordPress"! En esta parte, vamos a exponer Kirki, un gran kit Personalizador para los desarrolladores de temas de WordPress.

¡Empecemos!

Una Palabra en el Personalizador

La versión 3.4 de WordPress introdujo una nueva API llamada Theme Customization API y la pantala "Theme Customizer". (En la versión 4.1, la palabra "Tema" fue descartada ya que no es exclusivamente un "Personalizador de temas"). Nos permite añadir opciones de personalización en el menú Apariencia > Personalizar, con la oportunidad para cambiar los ajustes de tema simultáneamente mientras previsualiza el sitio Web.

No creo mucha expectativa al principio, pero la comunidad lo adoptó con el tiempo, y poco a poco tenemos más entusiasmo con esta API práctica. Dos años después de su lanzamiento, la Customizer API se ha convertido en una maravillosa utilidad que incluso nos permite publicar entradas y personalizar la pantalla de inicio de sesión.

No es una exageración decir que Customizer es uno de las API de WordPress más valiosas debido a su capacidad de cambiar completamente la experiencia de los usuarios.

Si desea obtener más información sobre este tema, puede ver nuestra serie de Customizer, escrito por Lee Pham.

Comenzando con Kirki: Desarrollo fácil para la pantalla de Customizer

Kirki es una gran herramienta para mejorar la experiencia de los usuarios del tema. Se centra únicamente en la personalización del tema y extiende por defecto los controles del Customizer con toogles, inputs de rango e imágenes como radio buttons.

Una vez que llegas a conocer cómo funciona, la construcción de una pantalla de personalización del tema será más fácil que nunca.

Una llamada a la acción: Kirki está lista para la traducción y necesita tu ayuda para traducir este proyecto de código abierto en diferentes idiomas. Voy a manejar la traducción en Turco, y sería genial si pudieras ayudar a traducir Kirki en tu lenguaje natural. Si quieres contribuir con la traducción, contacta a Aristeides Stathopoulos, creador de Kirki, para más detalles.

Agregar Kirki en tus Temas y Configurarlo

Conectar su tema con Kirki es muy fácil, realmente. Solo necesitamos descargar su última versión desde GitHub, extraer el contenido en una carpeta dentro de tu tema, e incluir el archivo principal del plugin (usando la función include_once()) en el archivo functions.php de tu tema.

Acá hay un ejemplo:

Sencillo, ¿no?. A continuación, puede crear una configuración para evitar conflictos con otros temas o plugins que utilicen Kirki, así:

¡Hecho!

Usando Kirki en tu Tema

Ahora hemos aprendido acerca de cómo integrar y configurar Kirki en nuestros temas, es hora de ver algunos ejemplos de cómo construir nuestra página de personalización del tema.

Comencemos con lo básico. Aquí está el código de una instalación básica con algunos paneles y secciones sin ningún campo de control:

Ahora, vamos a ver sobre los campos de control que Kirki proporciona.

Tipos de campo de control de Kirki

Después de crear las secciones y paneles, se puede rellenar las secciones con "campos de control". Aquí está el código para agregar un campo dentro de una sección:

Como dije antes, Kirki amplía la lista de campos de control por defecto por unos nuevos. Para escribir un tutorial más "completo", voy a incluir los campos de control básicos así como los campos de un control adicional de Kirki.

  1. texto le permite agregar una entrada de texto simple.
  2. textarea le permite añadir un componente textarea.
  3. editor le perimite agregar un editor WYSIWYG.
  4. radio le permite agregar radio buttons.
  5. checkbox le permite agregar checkboxes.
  6. color y color-alpha (soporta transparencia) le permiten seleccionar un color con un selector de color agradable.
  7. background le permite agregar un completo fondo CSS customizado.
  8. palette le permite agregar una paleta de colores.
  9. select le permite agregar un menú deplegable.
  10. select2 le permite agregar un "mejor" menu de selección, diferente al que viene por defecto en la etiqueta HTML <option>
  11. select2-múltiple le permite añadir un menú de selección con opciones múltiples. (Conjetura salvaje: esto podría fusionarse con el campo select2 en el futuro.)
  12. dropdown-pages le permite añadir un menú desplegable de las páginas de la base de datos en forma de  listado.
  13. upload le permite añadir al uploader nativo.
  14. image le permite añadir un selector/cargador de imágenes nativo.
  15. radio-image le permite añadir a las imágenes la acción de actuar como radio buttons.
  16. radio-buttonset le permite añadir a un set de botones la acción de actuar como radio buttons.
  17. number le permite añadir el campo de tipo numero nuevo de HTML5
  18. slider le permite añadir un slider tipo rango nuevo de HTML5
  19. multicheck le permite añadir una lista de múltiples campos checkbox
  20. switch le permite añadir un botón "switch" que actué como checkbox, pero mucho mejor.
  21. toggle le permite agregar un botón "toggle" que actué como un checkbox.
  22. sortable le permite añadir una lista de controles checkbox filtrable.
  23. custom le permite añadir un campo de control personalizado, que es básicamente cualquier fragmento de código HTML válido.

Dando estilos en Kirki

Kirki tienes algunas configuraciones muy geniales para personalizar el Customizer de tu tema. Puede mostrar un logotipo sobre los campos de control, establecer un esquema de color diferente para el Customizer y así sucesivamente.

  • logo_image: especifica la URL para la imagen del logo.
  • description: especifica una texto de descripción que será mostrada luego de hacer click en el logo.
  • color_active: especifica el color del estado "active" para los items del menú, los botones de ayuda y demás.
  • color_light: especifica el color "secundario" para los controles bloqueados o inactivos.
  • color_select: especifica el color para el estado "selected" para, digamos, cosas seleccionadas.
  • color_accent: especifica el color de "acento" que utiliza el control deslizante y las imágenes seleccionadas.
  • color_back: especifica el color de fondo del Customizer.
  • url_path: especifica la ruta URL que usara Kirki, para cargar los archivos CSS guardados en la carpeta /assets/.
  • stylesheet_id: el ID para la cola de procesos CSS.

Para configurar estas opciones de estilos, necesita utilizar el filtro kirki/config. Acá hay un ejemplo de como configurar Kirki:

Obteniendo los valores

¿Tienes que usar los valores en tu tema que almacena Kirki, cierto? Entonces, se hace de esta manera:

Simple como eso. Por supuesto, tu puedes usar las funciones básicas como get_option() y get_theme_mod().

Terminando por hoy

Herramientas como esta hacen que WordPress sea aún más amistoso para los usuarios y fácil de desarrollar con él, ¿no lo crees?  Como dije en la introducción de la serie, el poder de WordPress viene de su comunidad, y herramientas como esta son la clave para el crecimiento de la comunidad. Kirki ofrece más de lo que escribí en este tutorial, y Ari (el autor) promete que continuará desarrollando Kirki, en sus palabras, tanto tiempo como le sea necesario.

¿Qué opinas sobre Kirki? Dispara a tus pensamientos en la sección de comentarios abajo. Y si te gustó el artículo, ¡no olvides compartir con tus amigos!

¡Nos vemos en la siguiente parte donde que vamos a hablar del sitio de GenerateWP!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.