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

Cómo usar botones tipo radio con taxonomías

by
Read Time:9 minsLanguages:

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

Las características de las taxonomías personalizadas de WordPress son fantásticas, ya que te permiten organizar tus publicaciones en varias taxonomías, haciendo todo el trabajo duro por ti. Sin embargo, también puede ser un poco restrictivo. Al editar tus publicaciones, tus términos de taxonomía tienen su propia 'metabox', y aparecen como una lista de casillas de verificación (para taxonomías jerárquicas) o como una nube de etiquetas (para taxonomías no jerárquicas). Esas son tus dos opciones.

Esto puede presentar un problema cuando deseas asegurarte de que solo se pueda seleccionar un término para cada publicación. Por supuesto, podrías usar en el hook save_post y eliminar los términos 'excesos', pero esto no es particularmente fácil de usar y ciertamente no proporciona una excelente interfaz de usuario. A veces, sería más estéticamente deseable presentar tus taxonomías de una manera diferente. Este artículo te mostrará cómo hacerlo, y todo el código del que hablaremos debe agregarse al archivo functions.php de tu tema. Nos centraremos en los botones de opción, pero podrías usar cualquier otro método de entrada, por ejemplo, un menú desplegable.


Paso 1 Eliminar la metabox de taxonomía predeterminada

WordPress produce automáticamente taxonomía de tipo 'metabox', por lo que nuestro primer trabajo es eliminarla para que podamos producir la nuestra en su lugar. Asumiré que nuestro nombre de taxonomía es 'mitaxonomia' (si quisieras alterar las etiquetas o categorías de WordPress en metabox, reemplazarías esto con 'category' o 'post_tag').

Para eliminar el metabox usaremos remove_meta_box, que debería llamarse desde dentro de una función de tipo hook en el admin_menu. remove_meta_box acepta tres argumentos.

  1. ID: Este es el atributo de identificación dado al elemento div que contiene el metabox. Por lo general, esto sería 'mytaxonomydiv' para las taxonomías jerárquicas, o 'tagsdiv-mytaxonomy' para las no jerárquicas.
  2. Post type: El tipo de publicación para la que aparece el metabox (por ejemplo, 'publicación' o 'página', etc.). Si tu metabox aparece para varios tipos de publicaciones diferentes, deberás llamar a la función remove_meta_box para cada una.
  3. Context: Normal, avanzado o lateral.

Paso 2 Agrega tu propio Metabox

Aquí nos conectamos al enlace add_meta_boxes con una función que agregará nuestro metabox. Para hacer eso, la función llamará a add_meta_box, que toma bastantes argumentos, entre los cuales están:

  1. ID: Igual que el anterior, dale algo único.
  2. Title: El título del metabox.
  3. Callback: El nombre de la función que producirá las entrañas de nuestro metabox.
  4. Post type: Igual que el anterior. Nuevamente, deberás llamar a esta función para cada tipo de publicación por separado.
  5. Context: Igual que el anterior.
  6. Priority: La prioridad dentro del contexto donde deberían aparecer los cuadros.

Juntos, lo anterior debería eliminar el metabox predeterminado y reemplazarlo con el tuyo, que actualmente no hace nada más que mostrar el mensaje "Este es mi metabox de taxonomía" ó "This is my taxonomy metabox". El siguiente paso es cambiar la función Callback para mostrar lo que queremos.


Paso 3 Producir los botones de tipo radio

Queremos que nuestro metabox se vea y se comporte lo más parecido posible a los metaboxes predeterminados. Al profundizar en los archivos principales de WordPress, encontrarás el lugar donde se producen los interiores de un metabox, aquí. Nuestra función personalizada a continuación imitará la función principal, pero con algunos cambios en la forma en que se muestran nuestros términos.

Repasemos nuestra función poco a poco. El primer bit configura algunas de las variables. Solo necesitas cambiar la variable $taxonomy para que coincida con el nombre de tu taxonomía. Ten en cuenta también la variable $name. Estamos dando a los campos de entrada el nombre tax_input[mytaxonomy]. Este es el nombre de la entrada dentro del metabox predeterminado. Al hacer esto, WordPress manejará automáticamente la actualización del término de taxonomía de una publicación.

Vamos a querer el ID del término actual de la publicación (solo esperamos uno).

Si echas un vistazo al metabox de la categoría de WordPress, verás una pestaña que mostrará los términos 'más utilizados'. Para reproducir eso necesitaremos los 10 términos más populares. Usamos la función get_terms nuevamente, pero esta vez seleccionando como máximo 10 términos y ordenados por conteo (el número de publicaciones que tienen esta taxonomía).

A continuación, queremos mostrar las pestañas 'Todas las categorías' y 'Más utilizadas' (se recomienda usar las etiquetas de taxonomía siempre que sea posible). Si no quieres pestañas, simplemente puedes eliminar este bit:

A continuación, queremos establecer qué mostrar cuando estamos en la pestaña 'todas las categorías':

Esto realmente solo muestra una lista dentro de un elemento div, y cada elemento de la lista es una opción de radio. Por supuesto, simplemente puedes reemplazar esta lista con un menú desplegable o cualquier otra cosa que desees.

Ahora hacemos lo mismo para la pestaña 'más utilizada':


Paso 4 Nuestra función Callback completa

El código completo de nuestra función es


Paso 5 Un poco de JavaScript...

Fui cuidadoso al nombrar cada ID y los botones de tipo radio en la función callback. Si pruebas todo lo anterior ahora, encontrarás que WordPress maneja automáticamente la actualización de los términos de la publicación. Además, el JavaScript de WordPress maneja automáticamente la navegación de pestañas. Hay un pequeño hipo. Los botones de opción 'todas las categorías' no están sincronizados con los 'más utilizados'. Si has decidido prescindir de la pestaña 'más utilizada', puedes ignorar esta sección. De lo contrario, solo necesitamos agregar un poco de JavaScript para solucionar este problema.

Queremos agregar un poco de JavaScript a la página, por lo que dentro de nuestra función callback usaremos un enlace que se activará cuando se agregue JavaScript en el administrador. Es decir, el enlace o 'hook' admin_enqueue_scripts. Como agregamos nuestra función a este hook dentro de nuestra función callback, solo se carga cuando es necesario. Simplemente agrega esta línea en la parte superior de nuestra función callback anterior:

Cuando los archivos javascript se cargan en la página de administración se activará nuestra función. Esta función no hace más que registrarse y poner en cola nuestro javascript, que queremos cargar en el pie de página:

Ahora para el javascript que realmente necesitamos, crea un archivo en la carpeta js de tu tema. Lo llamaremos radiotax.js, y aquí está el código para poner dentro:

Entonces, ¿qué hacen estas pocas líneas? Cada vez que haces clic sobre un botón de tipo radio, desmarcará todos los demás (en ambas pestañas) y luego marcará los botones de tipo radio que corresponden a ese término.


Conclusión

Y con eso hemos terminado. WordPress se encarga de todo lo demás por nosotros. Sin embargo, hay margen de mejora... ¿qué hay de agregar nuevos términos? Lo he omitido en nuestro metabox, porque en realidad es increíblemente difícil de hacer. Implicaría mucho más javascript y también un poco de acción en el lado del servidor.


Actualización:

Según lo solicitado por Roberto, aquí hay un enlace al código completo en GitHub. Es una clase con la implementación del código utilizado en este tutorial, por lo que para comenzar solo debes cambiar las variables estáticas de la clase en la parte superior.

Advertisement
Did you find this post useful?
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.