() translation by (you can also view the original English article)
WordPress ya no es solo una plataforma de blogs, sino que puede utilizarse para desarrollar aplicaciones web complejas para muchos propósitos. WordPress proporciona una variedad de API, lo que nos permite desarrollar más en su base.
Podemos extender WordPress para satisfacer nuestras necesidades usando la API de plugins. Con esta poderosa API podemos desarrollar soluciones que satisfagan nuestras necesidades para escenarios casi infinitos; por lo tanto, para convertirte en un maestro de WordPress, tienes que dominar tus APIs de una vez.
En esta serie, veremos la API de los plugins de WordPress así como la API de los widgets y como podemos usarlos para desarrollar soluciones específicas para nuestras necesidades.
Lo que haremos
Durante el curso de esta serie de tres partes, construiremos un plugin de WordPress desde cero. Este plugin mostrará una lista de los próximos eventos en el front-end para que los usuarios sepan lo que viene a continuación. El administrador podrá publicar información sobre nuevos eventos, y podrá editarlos o borrarlos.
Hay un dicho:
No planificar es planificar el fracaso.
Planearemos cada detalle y aspecto de nuestro plugin antes de empezar a escribir el código. De esta manera, vamos a aclarar lo que vamos a hacer y cómo lo vamos a hacer. También nos aseguraremos de tener todos los activos necesarios que usaremos más tarde antes de empezar a escribir nuestro código.
Comenzaremos registrando un tipo de mensaje personalizado para nuestros eventos. Esto nos facilitará el manejo eficiente de las cosas. Ese tipo de mensaje personalizado incluirá:
- un title field (un campo de título)
- un description field (un campo de descripción)
- field for featured image (campo para imagen destacada)
Además de estos standard fields (campos estándar), también incluiremos tres meta campos personalizados para:
- event start date (fecha de inicio del evento)
- event end date (fecha de finalización del evento)
- event venue (lugar del evento)
Para la fecha de inicio y fin del evento, incorporaremos el selector de fechas de jQuery UI en nuestro tablero de mandos.
Los tres campos personalizados anteriores guardarán sus valores en post meta y consultaremos nuestros eventos en el front-end en base a estos campos personalizados usando la meta consulta.
En lo que respecta a los tipos de publicaciones personalizadas, WordPress solo muestra columnas para el título, el autor y la fecha de publicación de la publicación en la pantalla de edición posterior, pero no nos limitamos a eso. Añadiremos columnas personalizadas para la fecha de inicio del evento, la fecha de finalización y el lugar del evento para una mejor accesibilidad del usuario.
Por último, en lo que respecta al front-end, es conveniente hacer un widget que muestre una lista de todos los eventos que están programados en un futuro próximo. Con la poderosa Widget API, codificaremos nuestro widget personalizado que podremos añadir en nuestra barra lateral o área de pie de página.
Estableciendo las bases
Comencemos por crear la estructura básica de directory/file (directorio/archivo). Navega al directorio wp-content/plugins y crea un nuevo directorio llamado upcoming-events. Dentro de eso, crea más directorios para:
cssjsimg
Además, crea los siguientes archivos PHP:
index.phpupcoming-events.php
Como habrás notado, hemos creado un archivo adicional upcoming-events.php además del archivo estándar index.php. Escribiremos todo nuestro código dentro del archivo upcoming-events.php. Es una buena práctica dejar caer un archivo index.php dentro de tus directorios de activos, ya que bloqueará a cualquiera que intente averiguar el contenido del directorio en el navegador.
Crearemos los archivos style.css y script.js dentro de las carpetas css y js respectivamente.
Dentro del archivo index.php, agrega el siguiente código:
1 |
<?php // Silence is gold |
Aquí, solo estamos colocando un texto de marcador de posición dentro del index.php.
Dentro del archivo upcoming-events.php, añade la siguiente declaración de plugin:
1 |
<?php
|
2 |
/**
|
3 |
* Plugin Name: Upcoming Events
|
4 |
* Plugin URI: https://imbilal.com
|
5 |
* Description: A plugin to show a list of upcoming events on the front-end.
|
6 |
* Version: 1.0
|
7 |
* Author: Bilal Shahid
|
8 |
* Author URI: http://imbilal.com
|
9 |
* License: GPL2
|
10 |
*/
|
Habiendo terminado con la estructura básica de archivos, pasaremos a recoger los activos necesarios que necesitamos en nuestro plugin. Uno de estos activos es la hoja de estilo para jQuery UI datepicker. Por defecto, WordPress usa jQuery y el núcleo de la interfaz de usuario de jQuery en todas sus páginas en el tablero. Solo necesitamos incluir los estilos para tu widget de selección de fechas.
Para ello, navega con tu navegador hasta http://jqueryui.com y:
- Haz clic en el botón Custom Download (descarga personalizada) a la derecha
- En la siguiente página, desmarca la casilla de verificación Cambiar todo bajo el título de Componentes. Esto desmarcará todas las casillas de verificación
- Desplázate hacia abajo a la sección de Widgets y marca la casilla de verificación Datepicker
- En la parte inferior de la página, selecciona el tema de color que desees de la sección Themes (Temas). Usaremos el tema predeterminado UI Lightness de la interfaz de usuario para nuestro tutorial
- Haz clic en el botón de descarga para descargar el paquete personalizado
Extrae el paquete descargado y copia sobre el contenido de css/ui-lightness al directorio upcoming-events/css.
¿Qué sigue después?
Eso es todo sobre la planificación. En la próxima entrega de la serie, comenzaremos a escribir nuestro código.
Lo que haremos:
- registrar el tipo de post personalizado para el evento
- añadir cajas meta a la pantalla de edición de eventos
- añadir los estilos y guiones necesarios a nuestro administrador
- incorporar el selector de fechas de jQuery UI para introducir las fechas de los eventos
- añadir columnas de administración personalizadas a la pantalla de "Todos los eventos".
Mantente atento al siguiente artículo de la serie.
