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

Creación de meta boxes de WordPress mantenibles: el front-end

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating Maintainable WordPress Meta Boxes.
Creating Maintainable WordPress Meta Boxes: The Layout
Creating Maintainable WordPress Meta Boxes: Finish The Front-End

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

Esta serie se centra en ofrecer consejos y estrategias que podamos emplear para escribir plugins de WordPress, en concreto aquellos que emplean cajas meta o meta boxes, que estén organizados lógicamente y sean fáciles de mantener.

En los dos primeros artículos de esta serie, presentamos la estructura de directorio inicial, configuramos el código para el plugin y discutimos qué haría este. En el último artículo, comenzamos a crear el meta box y a introducir las pestañas que contendrán cada una de las características que vamos a trabajar.

Este artículo seguirá construyendo sobre lo que hemos hecho hasta ahora. Vamos a introducir contenido en cada una de las pestañas, implementando una funcionalidad que nos permite alternar dicho contenido, y comenzaremos a introducir los campos para el contenido en la primera pestaña.

Plantillas de pestañas

Antes de implementar las pestañas que alternarán entre todas las opciones posibles, necesitamos introducir parciales, plantillas, vistas, o como quieras llamarlas para que tengamos archivos específicos para manejar nuestra información.

En primer lugar, dirígete al directorio admin/views/partials y añade los siguientes archivos (todos los cuales pueden estar vacíos, por ahora, aunque a continuación proporciono algún código básico):

  • drafts.php
  • resources.php
  • published.php

Cada uno de estos archivos corresponderá a una de las pestañas en la interfaz de meta boxes. Vamos a seguir adelante y a introducir algún contenido de marcador de posición para cada una de las pestañas. Antes de que terminemos con el artículo, implementaremos la interfaz de usuario de la primera pestaña, pero de momento esto nos dará algo visual con lo que trabajar antes de continuar elaborando la funcionalidad real de la pestaña.

1. Drafts

Añade el siguiente código a drafts.php.

Echaremos un vistazo a este parcial más adelante en el artículo.

2. Recursos

Agrega el siguiente código a resources.php.

Echaremos un vistazo a este parcial más adelante en esta serie.

3. Publicado

Añade el siguiente código en published.php.

También echaremos un vistazo a este parcial más adelante en la serie.

Actualizar la vista principal

Tenemos que hacer una cosa más antes de comprobar esto en el escritorio de WordPress: Tenemos que incluir realmente estos archivos en la vista del meta box para poder ver la información.

Esto es fácil de hacer. En primer lugar, abre authors-commentary-navigation.php. Añade el siguiente código al archivo (ten en cuenta que todo el nuevo código es una serie de instrucciones include_once).

Suponiendo que hayas creado todos los archivos y los hayas incluido correctamente, estamos listos para echar un vistazo al escritorio. Si todo se ha implementado adecuadamente, deberías ver algo como esto:

Obviamente, no queremos que todo el contenido aparezca en la primera pestaña, así que debemos hacer algunos cambios. Así que hagámoslo.

Ocultar vistas inactivas

En última instancia, nuestro objetivo es utilizar los estilos y funciones que ya vienen integrados en WordPress. Cada vez que introduces algo que esté fuera de la funcionalidad nativa de WordPress será algo cuya responsabilidad y cuyo mantenimiento vas a estar a tu cargo a lo largo del tiempo.

Además de eso, también estás trabajando para crear un plugin que esté tan estrechamente integrado como sea posible con la interfaz de usuario de WordPress. Con este objetivo, usaremos una combinación de estilos integrados y estilos personalizados además de JavaScript para lograr exactamente lo que queremos conseguir.

Sabemos que lo primero que queremos hacer es ocultar todo a excepción de la primera vista (es decir, todo excepto Drafts).

Para ello, es necesario añadir un atributo de clase hidden (class="hidden") a los parciales a las pestañas Resources y a la pestaña Published.

Cada uno de los siguientes archivos debe tener este aspecto:

drafts.php:

resources.php:

published.php:

Y el resultado de este pequeño cambio debe ser el siguiente:

Tranquilo, ¿verdad? Esta es exactamente la razón por la que recomiendo seguir con la funcionalidad y los estilos principales de WordPress tanto como sea posible.

Alternar las pestañas

Por supuesto, todavía necesitamos introducir el código para alternar los datos entre las pestañas, ¿verdad? Así que hagámoslo ahora.

En primer lugar, tenemos que asegurarnos de que la primera pestaña está marca como activa. Suponiendo que has estado siguiendo todos los pasos de este tutorial y su correspondiente repositorio GitHub, el código debería tener este aspecto:

Lo cual es genial porque ya marca tu primera pestaña como activa con el uso del atributo de clase nav-tab-active. Tenemos el trabajo hecho para nosotros:

  1. Cuando el usuario hace clic en una pestaña, la marca como activa y elimina la clase activa de cualquier otra pestaña. Si haces clic en una pestaña activa, no pasa nada.
  2. Cuando se selecciona una nueva pestaña activa, debe mostrarse el parcial correspondiente.

Ahora, existen distintas formas de lograr el paso dos. Lo haremos de una manera que está documentada y explicada en a lo largo de este artículo, simplemente sé consciente de que existen otras alternativas que probablemente veas y que no son necesariamente erróneas.

La conclusión es que hay una serie de maneras de gestionar esto, aquí nosotros lo estamos haciendo de una de las muchas maneras disponibles.

Así que primero, vamos a añadir un archivo JavaScript a admin/assets/js al cual llamaremos tabs.js. El esqueleto del archivo debe tener el siguiente aspecto:

A continuación, asegúrate de que estamos importando el JavaScript solo en las páginas de entrada. Para ello, introducimos un gancho en nuestro constructor en el cual ya hemos incluido algunas hojas de estilo. El constructor completo es el siguiente:

Y luego implementamos la función:

En este punto, tenemos todo lo que necesitamos para implementar el JavaScript que controla las pestañas. A continuación, encontrarás el código comentado de esto y una breve explicación siguiendo el fragmento de código, así:

En caso de que los comentarios de código no sean claros, el código anterior configura un controlador de eventos para todas las pestañas. Cuando se hace clic en una pestaña, busca si tiene la clase nav-tab-active. Si es así, entonces no pasa nada.

De lo contrario, alternamos la pestaña, ocultamos el contenido que estaba activo y mostramos el nuevo contenido quitando el nombre de clase hidden que añadimos anteriormente en el artículo.

Por ahora, deberías ser capaz de cambiar entre pestañas y ver cada una de las tres distintas implementaciones sin ningún problema. Dicho esto, vamos a seguir adelante y pasar a la implementación de la funcionalidad de la primera pestaña.

Adición de la interfaz de usuario de Drafts

Aunque no completaremos la totalidad de la funcionalidad durante este tutorial, tendremos nuestro trabajo preparado para nosotros en el siguiente artículo. Supongamos que para los objetivos de este plugin, la interfaz de usuario de Drafts será un lugar que el usuario simplemente usará como un bloc borrador para anotar ideas.

Puede incluir enlaces a artículos, enlaces a tweets, notas breves sobre el esquema, algunas frases, etc. Generalmente, sirve como un contenedor para todos los artefactos que el autor pueda estar usando a lo largo de su artículo.

Con ese fin, vamos a usar un área de texto (textarea) simple y único. Además, no queremos introducir más elementos de interfaz de usuario de los necesarios, por lo que no incluiremos ningún botón de envío. En su lugar, guardaremos los datos cada vez que el usuario haga clic en el botón "Actualizar" del editor de entradas.

De esa manera, todo se guardará al mismo tiempo.

Una vez más, no entraremos en el proceso de validación, desinfección y serialización, simplemente vamos a colocar un área de texto dentro de los parciales Drafts y así estar preparados para el siguiente artículo.

Abre drafts.php, añade el siguiente código, tu código final debería tener este aspecto:

Después de esto, actualiza el archivo admin.css para asegurarte de que el área de texto (textarea) encaje bien con el resto del meta box:

Ahora, cuando veas el meta box, deberías ver un textarea bien formateado con el meta box con pestañas que funcionan al se hacer clic.

Próximamente...

En el siguiente artículo, continuaremos implementando la interfaz de usuario para cada una de las pestañas que existen en el meta box.

A continuación, comenzaremos el proceso de desinfección, serialización y validación a medida que empecemos a guardar realmente la información que el usuario coloque en el cuadro meta. También seguiremos adelante con la introducción de campos adicionales en el plugin.

Hasta entonces, echa un vistazo al repositorio de GitHub (ahora estamos en la versión 0.3.0 del plugin), y no dudes en dejar cualquier comentario o consulta en la sección de comentarios que viene a continuación y te responderé tan pronto pueda.

Advertisement
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.