Share
¡Bienvenido a la segunda parte de la serie "Caja de herramientas del desarrollador de Smart WordPress"! En esta parte, analizaremos Kirki, un excelente kit de herramientas de personalización para desarrolladores de temas de WordPress..
Vamos a empezar!
WordPress versión 3.4 introdujo una nueva API llamada API de personalización de temas y la pantalla "Personalizador de temas". (En la versión 4.1, se eliminó la palabra "Tema" ya que no es exclusivamente un "personalizador de tema".) Nos permite agregar opciones de personalización en el Apariencia> Personalizar menú, con la oportunidad de cambiar la configuración del tema simultáneamente mientras se obtiene una vista previa del sitio web.
Al principio, no generó mucho entusiasmo, pero la comunidad lo adoptó a lo largo del tiempo, y gradualmente nos entusiasmamos más y más con esta API práctica. Más de dos años después de su lanzamiento, la API del personalizador se ha convertido en una maravillosa utilidad que incluso nos permite publicar publicaciones y personalizar la pantalla de inicio de sesión..
No es exagerado decir que Customizer es una de las API más valiosas de WordPress debido a su capacidad para cambiar por completo la experiencia de los usuarios..
Si desea obtener más información sobre este tema, consulte nuestra serie sobre el Personalizador, escrita por Lee Pham.
Kirki es una gran herramienta para mejorar la experiencia de los usuarios de un tema. Se enfoca únicamente en la personalización del tema y extiende los controles predeterminados del Personalizador con interruptores, entradas de rango e imágenes como botones de radio.
Una vez que sepas cómo funciona, construir una pantalla de personalización de tema será más fácil que nunca.
Una llamada a la acción: Kirki está listo para la traducción y necesita su ayuda para traducir este proyecto de código abierto a diferentes idiomas. Voy a manejar la traducción al turco, y sería genial si pudieras ayudar a traducir Kirki a tu idioma. Si desea contribuir, contacte a Aristeides Stathopoulos, autora de Kirki, para más detalles..
Agrupar tu tema con Kirki es muy fácil, en realidad. Solo necesita descargar la última versión de GitHub, extraer el contenido en una carpeta de su tema e incluir el archivo principal del complemento (usando el include_once () función) en su tema funciones.php expediente.
Aquí hay un ejemplo:
Pedazo de pastel, ¿no es así? Debajo de eso, puede crear una configuración para evitar conflictos con otros temas o complementos que también usan Kirki:
'edit_theme_options', 'option_type' => 'option', 'option_name' => 'my_theme',)); ?>
Hecho!
Ahora que hemos aprendido cómo integrar y configurar Kirki en nuestros temas, es hora de ver algunos ejemplos de cómo crear nuestra página de personalización de temas..
Empecemos con lo básico. Aquí está el código de una instalación básica con algunos paneles y secciones pero sin ningún campo de control:
Accentsconagua
10, 'title' => __ ('My Title', 'textdomain'), 'description' => __ ('My Description', 'textdomain'),)); / ** * Agregar secciones * / Kirki :: add_section ('custom_css', array ('title' => __ ('CSS personalizado'), 'description' => __ ('Agregar CSS personalizado aquí'), 'panel' => ", // Normalmente no se necesita. 'Priority' => 160, 'capacity' => 'edit_theme_options', 'theme_supports' =>", // Rarely needed.)); ?> Ahora, veamos acerca de los campos de control que Kirki proporciona.
Después de crear sus paneles y secciones, puede completar las secciones con "campos de control". Aquí está el código para agregar un campo dentro de una sección:
'text', 'setting' => 'text_demo', 'label' => __ ('This is the label', 'kirki'), 'description' => __ ('This is the control description', 'kirki' ), 'help' => __ ('Este es un texto de ayuda adicional.', 'kirki'), 'section' => 'my_section', 'default' => __ ('Este es un texto predeterminado', 'kirki '),' prioridad '=> 10,)); ?> Como dije antes, Kirki. se extiende la lista de campos de control por defecto con los nuevos. Por el bien de escribir un tutorial más "completo", incluiré los campos de control centrales así como los campos de control adicionales de Kirki.
texto le permite añadir una entrada de texto simple.textarea te permite añadir un textarea.editor le permite agregar un editor WYSIWYG.radio te permite añadir botones de radio.caja le permite agregar casillas de verificación.color y color-alfa (admite transparencia) le permite seleccionar un color con un buen selector de color.fondo le permite agregar un personalizador de fondo CSS completo.paleta te permite añadir una paleta de colores.seleccionar le permite añadir un menú desplegable.seleccionar2 le permite agregar un menú de selección "mejor", diferente del predeterminado select2-multiple le permite añadir un menú de selección con múltiples opciones. (Suposición salvaje: Esto podría ser fusionado con el seleccionar2 campo en el futuro.)páginas desplegables le permite agregar un menú desplegable que enumera las páginas en la base de datos.subir le permite agregar el cargador nativo.imagen le permite agregar el selector de imagen nativo / cargador.imagen de radio Te permite añadir imágenes actuando como botones de radio..botón de radio le permite agregar un conjunto de botones que actúan como botones de radio.número le permite agregar una entrada de número HTML5.deslizador le permite agregar un control deslizante de rango HTML5.verificación múltiple le permite agregar una lista con múltiples entradas de casilla de verificación.cambiar le permite agregar un botón de "cambio" que actúa como una casilla de verificación, pero más bonito.palanca le permite agregar un botón de "alternar" que también actúa como una casilla de verificación.ordenable le permite agregar una lista ordenable de controles de casilla de verificación.personalizado le permite agregar un campo de control personalizado, que es básicamente cualquier fragmento de código HTML válido.Kirki tiene algunos ajustes muy buenos para que hagas un Personalizador personalizado para su tema Puede mostrar un logotipo sobre los campos de control, establecer un esquema de color diferente para el Personalizador, etc..
Logotipo: Especifica la URL de la imagen del logotipo.descripción: Especifica un texto de descripción que se mostrará al hacer clic en el logotipo.color_active: Especifica el color "activo" para elementos de menú, botones de ayuda y tales.color_light: Especifica el color "secundario" para los controles deshabilitados e inactivos.color_select: Especifica el color "seleccionado" para, bueno, material seleccionado.color_accent: Especifica el color de "acento" que se usa en los controles deslizantes y en la selección de imágenes.color_back: Especifica el color de fondo para el personalizador.url_path: Especifica la ruta URL de Kirki, utilizada para cargar archivos CSS en su /bienes/ carpeta.stylesheet_id: El ID de la hoja de estilo para establecer como el identificador en los procesos de puesta en cola de CSS.Para configurar estas opciones de estilo, necesitará usar el kirki / config filtrar. Aquí hay un ejemplo de cómo configurar Kirki:
Tienes que usar los valores en tu tema que Kirki almacena, ¿verdad? Así es cómo:
Simple como eso. Por supuesto, todavía puede utilizar el núcleo get_option () y get_theme_mod () funciones.
Herramientas como esta hacen que WordPress sea aún más fácil de usar y fácil de desarrollar, ¿no crees? Como dije en la introducción de la serie, el poder de WordPress proviene de su comunidad, y este tipo de herramientas 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 para, en sus palabras, todo el tiempo que sea necesario.
¿Qué piensas de Kirki? Dispara tus pensamientos en la sección de Comentarios a continuación. Y si te gustó el artículo, no olvides compartirlo con tus amigos.!
Nos vemos en la siguiente parte donde cubriremos el plugin Theme Check..
