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

Construcción de un widget temporizador de cuenta atrás

by
Difficulty:IntermediateLength:MediumLanguages:

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

A todos nos encanta una celebración, y ahora que la Pascua ha terminado, esperamos con ansias la próxima ocasión. ¿Cuánto falta para la próxima ocasión que te gusta celebrar? Sea lo que sea, vamos a construir un plugin para añadir un widget con un temporizador de cuenta atrás a nuestra barra lateral que muestre cuánto tiempo de espera nos queda.


1. Sacar ventaja

Hay una serie de cosas que tenemos que hacer cada vez que estamos desarrollando un plugin de WordPress, y aún más específicamente, un widget. Gracias a uno de nuestros autores aquí en Tuts+, Tom McFarlin, podemos ponernos en marcha rápidamente mediante el uso de WordPress Widget Boilerplate.

Para usar el Widget Boilerplate de WordPress, descárgalo, descomprímelo y mueve el directorio widget-boilerplate a tu directorio /wp-content/plugins/. A continuación, cámbiale el nombre a wptuts-countdowner.

Dentro de ese directorio encontrarás el archivo PHP principal, plugin.php, al cual cambiaremos también el nombre a wptuts-countdowner.php.

Ahora ya estamos listos preparados para empezar con el código.


2. Rehacer las credenciales de Boilerplate

Dentro del archivo wptuts-countdowner.php ya está todo el trabajo duro hecho para nosotros gracias al boilerplate. Para empezar, solo tenemos que personalizarlo para reflejar el nombre de nuestro plugin. Luego, una vez que hayamos escrito nuestro propio código, también podemos deshacernos de los trozos adicionales del boilerplate que no vayamos a necesitar.

La información del encabezado del plugin tendrá este aspecto:

Así que arréglalo para que incluya los detalles de nuestro plugin:

También tendremos que cambiar algunas referencias a lo largo del código del boilerplate para cambiar las referencias genéricas de manera que usen el nombre de nuestro plugin. La mayoría de los lugares donde tendrás que hacerlo se indican con un 'TODO'.

Busca y reemplaza 'widget-name' por 'wptuts-countdowner', y también 'Widget_name' por 'Wptuts_Countdowner'. Ahora el plugin tiene su propio nombre!

Ahora tienes un plugin que puedes activar en tu Escritorio de WordPress. Una vez activado, cuando mires la pantalla de widgets (Apariencia -> Widgets), verás los comienzos de nuestro widget:

Figure-01

Como puedes ver, en este momento tiene un aspecto bastante genérico. Por lo tanto, actualiza el siguiente código:

Para reflejar el nombre y la descripción de nuestro widget:

Ahora tenemos esto:

Figure-02

3. Recopilar información del usuario

Nuestro widget va a necesitar un nombre y una fecha para que el evento cuente hacia atrás (o hacia adelante).

Por lo tanto, necesitamos crear un formulario que pueda ser utilizado para la configuración cuando nuestro widget sea añadido a una barra lateral. El Widget Boilerplate de WordPress separa la parte HTML en archivos de visualización para separar las distintas cuestiones de forma limpia y clara. Configuraremos nuestras variables en el método y, a continuación, el propio formulario en la vista de administrador.

Este es el método. Cambios para nuestro plugin indicados con destacados.

Habrás observado que al final del método, hay un include para la visualización. Así que abre /wp-content/plugins/wptuts-countdowner/views/admin.php. Añade el siguiente código a ese archivo:

Ahora puedes actualizar el Escritorio de WordPress y agregar el widget a tu barra lateral, la cual tendrá este aspecto:

Figure-03

Lamentablemente, todo lo que pongas en esos campos aún no será guardado, por eso necesitamos modificar el método update de la siguiente manera:

¡Ahora tenemos un administrador de widgets funcional! Puedes arrastrar el widget a la barra lateral y guardar los detalles de un evento, como la Navidad:

Figure-04

4. Mostrarlo en el front-end

Ahora tenemos los detalles del evento para poder hacer la cuenta atrás, vamos a mostrarla en la barra lateral del front-end del sitio.

Al igual que con el formulario de administración, estamos usando también una vista para el front-end, para mantener el HTML separado. Abre tu archivo /wp-content/plugins/wptuts-countdowner/views/widget.php y añade lo siguiente:


5. Conteo de los días

Así que tenemos ahora un evento y una fecha / hora mostrándose, pero eso no nos proporciona una cuenta atrás. Necesitamos añadir un poco de código para determinar cuántos días existen entre la fecha de nuestro evento y la fecha actual. Debido a que nuestra fecha podría ser una pasada o futura, también necesitaremos añadir una palabra de sufijo para indicar de cuál de los dos tipos es.

Aquí está el código que añadiremos a la parte frontal del widget:

Lo que estamos haciendo ahí es conseguir el actual sello del tiempo en segundos para el evento, y para el día de hoy. Luego obtenemos su versión legible por humanos (es decir, 267 días). También descubrimos, basándonos en si la fecha del evento es una fecha pasada o futura, qué palabra de sufijo usar.

Ahora tenemos un sufijo, será mejor que lo añadamos a la vista:

Ahora tenemos algo que tiene un aspecto un poco más respetable y un poco más de sentido.

Figure-05

6. Elegir una fecha

Es un poco feo tener que escribir manualmente una fecha, así que vamos a añadir el selector de fecha jQuery UI Datepicker, ya que ya vienen incluido en WordPress.

Sin embargo, hay una cosa que no está incluida, es el CSS para el selector de fechas. Así que toma el directorio de archivos e imágenes CSS del repositorio de interfaz de usuario WP Admin jQuery de Helen Hou-Sandi en GitHub y colócalos en tu directorio /wp-content/plugins/wptuts-countdowner/css/.

Luego necesitamos que WordPress los cargue modificando los métodos register_admin_scripts y register_admin_styles del boilerplate, de la siguiente manera:

register_admin_scripts

register_admin_styles

Por último, añade el código jQuery al archivo admin.js del boilerplate para enlazar el selector de fecha al campo.


7. Limpieza

El boilerplate contiene algunas cosas que no hemos utilizado en este plugin, por lo que sería una buena idea aligerar su peso y eliminarlas. Los archivos extra son estos:

  • /css/admin.css
  • /css/widget.css
  • /js/widget.js

Y estos métodos en el archivo wptuts-countdowner.php:

  • activate
  • deactivate
  • register_widget_scripts
  • register_widget_styles
  • Also la línea wp_enqueue_style( 'wptuts-countdowner-admin-styles', plugins_url( 'wptuts-countdowner/css/admin.css' ) ); del método register_admin_styles

Conclusión

¡Ahí lo tienes! Un plugin de WordPress basado en Widget Boilerplate que te permite mostrar cuántos días existen hasta (o desde) un evento.

Espero que te haya parecido útil, por favor comparte tus pensamientos en la sección de comentarios que viene a continuación.

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.