Taxonomy WordPress (I). Otra forma de trabajar las taxonomías (10)

Dentro de esta serie ‘Crear un plugin desde 0’, vamos a dar un giro radical a su desarrollo. Vamos a retomar la taxonomy WordPress que ya creamos en un artículo pasado, y la vamos a desarrollar como si de un sistema de directorios se tratara. Un pseudo-sistema de directorios para las imágenes de nuestro directorio ‘uploads’.

 

Desarrollo de la idea

La intención es poder agrupar los distintos attachments de nuestro directorio ‘uploads’ bajo un sistema de directorioscarpetas. Para ello, el mejor sistema es mediante taxonomy WordPress. Ahora bien, lo que pretendemos en este plugin es que el sistema de carpetas que creamos se vea como si fuera la ventana gráfica de directorios de un sistema operativo cualquiera.

Para ello, debemos crear una interfaz gráfica, en la que, de alguna manera, podremos operar con nuestros directorios y realizar las operaciones básicas con directorios: nuevo, editar, mover, copiar y eliminar.

Por lo tanto, vamos a ver cómo desarrollamos estas operaciones básicas.

 

Codificación de la taxonomy WordPress

Para empezar, en el mismo plugin de ejemplo podréis ver que el código está muy comentado. Lo he hecho así, por su complejidad técnica, para intentar que no se pierda quien intente seguirlo.

Creación de la taxonomía

Primero, vamos a retomar el código introducido en el artículo ‘Taxonomía para attachments (5). El pseudo sistema de directorios‘, para crear nuestra taxonomy WordPress ‘stmpujante_txn’.

Como consecuencia, este código en el plugin nos creará una opción nueva en el menú de administración de medios, ‘Directorios’. Clicamos en él y entramos en la página de administración de ‘Directorios’.

Página de edición de la taxonomy WordPress 'Directorios'
Página de administración de la taxonomy WordPress ‘Directorios’

Como en nuestro código hemos indicado el argumento ‘hierarchical’ => true, podéis comprobar que la carpeta Sub prueba 4 es un subdirectorio de Prueba 1, como Sub sub prueba 5 lo es de Sub prueba 4. De hecho, sólo Prueba 1Prueba 2 no tienen superiores.

 

Creación de la página submenú

Vamos ahora a reutilizar el código que desarrollamos en el pasado artículo Creación de subpáginas en el backend WordPress, pero sólo las primeras líneas:

 

La estructura es muy sencilla. Básicamente dos columnas, una para el árbol de directorios y otra con los attachments contenidos en cada directorio ( o término de la taxonomy WordPress ). En cada una de ellas, la fila superior servirá para el título, la central para la información principal, y en la inferior incluiremos los ‘trucos invisibles’ (jejeje) y las operaciones a realizar (con los directorios en la columna izquierda, y con los attachments en la derecha).

Pero en este artículo nos centraremos en el árbol de directorios. La idea es que el resultado final sea este:

Resultado final buscado
Resultado final buscado

 

Creación de las ventanas modales

Las ventanas modales las creamos para las diferentes operaciones que vamos a realizar con las carpetas. Por lo tanto, las vamos a crear con display: none , para que permanezcan ocultas hasta que sea necesario. Entonces, el código JavaScript las visualizará.

Además, el mismo código JS ajustará los diferentes datos de aviso al usuario y de las carpetas de destino para algunas operaciones.

Finalmente, estas ventanas modales tienen sendos botones para realizar o cancelar la operación. En el primer caso, el botón de aceptar llamará en el próximo artículo a la función AJAX que realizará las modificaciones en la base de datos y, por tanto, en nuestra página de submenú.

Ventana modal de nuestro plugin
Ventana modal de nuestro plugin

 

Los estilos CSS

Los estilos básicamente se encargan de incluir los iconos de ‘abrir’, ‘cerrar’, ‘carpeta abierta’ y ‘carpeta cerrada’.

 

El código JavaScript

Cinco son las funciones JavaScript que empleamos para nuestro plugin:

  • stmpujanteToggleApertura(). Controla que, cuando clicamos en el icono inicial de la carpeta ‘abrir(+)/cerrar(-)/vacío’, se muestren u oculten las subcarpetas comprendidas dentro de dicha carpeta, en el caso que las haya ( si no, aparecerá el cuadrado vacío y no hará nada ).
  • stmpujanteToggleSeleccion(). El siguiente elemento en cada carpeta es un checkbox que nosotros podemos activar o desactivar. Cuando lo activemos, significará que estamos seleccionando dicha carpeta para una operación. Si seleccionamos diversas carpetas, podremos realizar operaciones grupales con ellas, como mover, copiar o eliminar (como se ve en la imagen superior de la ventana modal).
  • stmpujanteToggleFoco(). Otro elemento importante en nuestro árbol de directorios es el foco. El foco es la carpeta de la cual vamos a ver los attachments que contiene en la ventana de la derecha de la página. Cuando arrancamos el plugin, el foco aparecerá en la carpeta ‘uploads’ y, cada vez que clickemos sobre el nombre de una carpeta, ésta recibirá el foco. Al hacerlo, el nombre de la carpeta se pone en negrilla, y el icono final cambia de la carpeta cerrada a la carpeta abierta.
  • stmpujanteOperacionCarpeta(). Esta función realiza diferentes cometidos: Primero, controla si se trata de una operación individual o de grupo; también incluye los comentarios necesarios para la información del usuario; finalmente, visualiza la ventana modal necesaria para la operación.
  • stmpujanteOpcionesSelect(). Llamada por la anterior función, ésta se encarga de crear las diferentes opciones disponibles para el campo ‘select’ de la ventana modal.

 

Rellenar la matriz principal con una función recursiva

Llamada desde el inicio de la función de creación de la página del submenú, la función stmpujante_funcion_recursiva_carpetas( $nivel, $id ), nos genera la matriz principal $stmpujante_carpetas, la cual contiene todos los pseudo-directorios creados con nuestra taxonomía.

Esta matriz contiene los siguientes campos para cada directorio: id, nombre, nivel, abierta, seleccionada, padre e hijos. Con ellos, podremos construir el resto del plugin.

En resumen, la función es recursiva porque se llama a si misma, y se emplea, entre otras cosas, para recorrer estructuras de tipo árbol, como ya vimos en el segundo artículo de esta serie.

 

Mostrar el árbol de directorios con otra función recursiva

También he tenido que crear una función recursiva para poder mostrar los diferentes ‘directorios’ en la forma en que se ven,  stmpujante_funcion_mostrar_carpetas ( $nivel, $padre ), para poder incluir tablas dentro de tablas. Por ejemplo, el directorio principal ‘uploads’ está dentro de una tabla, la que, a su vez, contiene otra tabla con los primeros términos de la taxonomy WordPress, cada uno de los cuales tienen sus subdirectorios en tablas embebidas, etc, etc. Es la forma más fácil que he encontrado para poder ocultar/mostrar los subdirectorios de un directorio.

 

Campo select para las carpetas

Finalmente, la creación de este campo, con sus respectivas opciones, es cosa de la función stmpujante_funcion_operaciones_carpetas().

 

Trucos de programación y curiosidades

En primer lugar, quiero indicaros que todo el código se ha escrito en JavaScript. Nada de jQuery. Lo he hecho como ejercicio de codificación, ya que cada vez se tiende (o tiendo) a desviar la codificación hacia jQuery, y en este plugin me planteé hacer lo contrario. Pero quede como una curiosidad, y quizá vuelva a jQuery o bien a una solución mixta (lo más probable, da igual mientras funcione).

Por otro lado, hemos de pensar que el código de este plugin se ejecuta, primero, en el servidor ( el código PHP ), lo que genera una respuesta al navegador compuesta por HTML, CSS y JS. A partir de ahí, JavaScript se las tendrá que componer para gestionar todo el funcionamiento de la página del submenú. Para ello, le he facilitado, primero, en la función que crea la página, dos divs, “focalizada” y “seleccionadas”, ocultas, justo al lado del selector de operaciones.

Divs auxiliares

En la primera, JavaScript incluirá el id de la carpeta que tiene el foco actualmente. Insertar un 0 indica al plugin que la carpeta que inicialmente tiene el foco es ‘uploads’.

También, en “seleccionadas”, se dispondrá el id de todas aquellas carpetas que se les ha activado el checkbox. Nos servirá para las operaciones con grupos de carpetas.

Finalmente, la función stmpujante_funcion_mostrar_carpetas(), nos incluye una celda en cada tabla, que contiene el id y el nombre de la carpeta.

Pequeño truco de codificación

Esta celda nos servirá para la confección del campo select de las ventanas modales que lo utilicen.

 

Fichero de ejemplo

En cuanto a la descarga del fichero de ejemplo, como cada semana, tenéis a vuestra disposición el plugin en mi cuenta de GitHub, así como en el grupo de Facebook WordPress en Español.

 

Conclusión y próximo artículo

En conclusión, con el plugin de este artículo hemos empezado a ver la creación de un pseudo sistema de directorios para los attachments, mediante la taxonomy WordPress. Sin embargo, todavía no graba los cambios en la base de datos.

Por eso, en el próximo artículo incluiremos la tecnología AJAX en nuestro plugin, detalladamente, sin prisa, para intentar entender cómo funciona AJAX, y como funciona AJAX en WordPress.

 

Contributors

Como cada artículo, animo a todos a contribuir en esta serie y este plugin mediante opiniones, críticas, comentarios o ideas. De momento, la lista de contributors del plugin es:

miguelthepoohsergiotoca

 

Preguntas, retos y previos

Si queréis empezar a mirar como funciona AJAX en WordPress, tenéis a vuestra disposición el artículo relacionado.

 

Mientras tanto, que tengáis una buena semana.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *