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’.
Indice
- 1 Desarrollo de la idea
- 2 Codificación de la taxonomy WordPress
- 2.1 Creación de la taxonomía
- 2.2 Creación de la página submenú
- 2.3 Creación de las ventanas modales
- 2.4 Los estilos CSS
- 2.5 El código JavaScript
- 2.6 Rellenar la matriz principal con una función recursiva
- 2.7 Mostrar el árbol de directorios con otra función recursiva
- 2.8 Campo select para las carpetas
- 2.9 Trucos de programación y curiosidades
- 3 Fichero de ejemplo
- 4 Conclusión y próximo artículo
- 5 Contributors
- 6 Preguntas, retos y previos
- 7 Comparte esto:
- 8 Me gusta esto:
- 9 Relacionado
Desarrollo de la idea
La intención es poder agrupar los distintos attachments de nuestro directorio ‘uploads’ bajo un sistema de directorios o carpetas. 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’.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
add_action( 'init', 'stmpujante_crear_directorios', 0 ); function stmpujante_crear_directorios() { // Primero, definimos las etiquetas que veremos en pantalla $etiquetas = array( 'name' => _x( 'Directorios', 'taxonomy general name' ), 'singular_name' => _x( 'Directorio', 'taxonomy singular name' ), 'search_items' => __( 'Buscar por directorio', 'stmpujante' ), 'all_items' => __( 'Todos los directorios', 'stmpujante' ), 'parent_item' => __( 'Directorio superior', 'stmpujante' ), 'parent_item_colon' => __( 'Directorio superior', 'stmpujante' ), 'edit_item' => __( 'Editar directorio', 'stmpujante' ), 'update_item' => __( 'Actualizar directorio', 'stmpujante' ), 'add_new_item' => __( 'Añadir nuevo directorio', 'stmpujante' ), 'new_item_name' => __( 'Nombre del nuevo directorio', 'stmpujante' ), 'menu_name' => __( 'Directorios', 'stmpujante' ), ); // Después, los argumentos $argumentos = array( 'hierarchical' => true, 'labels' => $etiquetas, 'show_ui' => true, 'show_admin_column' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'directorio' ), ); // Finalmente, declaramos la taxonomía register_taxonomy ( 'stmpujante_txn', array( 'attachment' ), $argumentos ); } |
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’.
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 1 y Prueba 2 no tienen superiores.
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:
|
1 2 3 4 5 6 7 8 9 |
add_action( 'admin_menu', 'stmpujante_funcion_crear_submenu' ); function stmpujante_funcion_crear_submenu() { add_submenu_page( 'upload.php', __( 'Sistema de gestión de medios', 'stmpujante' ), __( 'STMPujante', 'stmpujante'), 'manage_options', 'menu_stmpujante', 'stmpujante_funcion_crear_pagina' ); } function stmpujante_funcion_crear_pagina() { |
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:
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ú.
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.
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.
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:
miguelthepooh, sergiotoca
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.
