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

Permite a los usuarios enviar citas a tu sitio WordPress: Un plugin para enviar citas

by
Length:MediumLanguages:

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

En este tutorial, aprenderás a crear un plugin que permite a los usuarios enviar datos a través de un formulario. También aprenderás aspectos relacionados con la seguridad mediante el uso de nonces.


Lo que vamos a aprender

  • Cómo mostrar y procesar un formulario usando un shortcode.
  • Usar nonces para securizar los envíos del usuario.

Es más sencillo de lo que te puedas imaginar

Habitualmente usamos shortcodes para mostrar datos más o menos sencillos, pero dado que son realmente una forma de expandir una página o entrada y ejecutar código, pueden utilizarse además para tareas bastante complejas, como mostrar y procesar formularios.

Vamos a crear un plugin que permitirá lo siguiente a aquellos usuarios que hayan iniciado sesión:

  • Enviar frases o citas que posteriormente serán moderadas y publicadas.
  • Consultar aquellas de sus citas que no hayan sido publicadas.
  • Eliminar aquellas de sus citas que no hayan sido publicadas.

Y esto es lo que pretendemos conseguir:

Todo el código original está disponible en la parte superior de este tutorial.


Paso 1: Configurar el plugin

La carpeta del plugin está ubicada en la carpeta de tu instalación WordPress, en wp-content/plugins. Crea una carpeta dentro de la carpeta plugins. Llamémosla submit-user-quotes. Ahora, crea el plugin en sí. Llamémosle submit_user_quotes.php. La ruta hacia el archivo del plugin debería ser ahora: wp-content/plugins/submit-user-quotes/submit_user_quotes.php

Todo plugin WordPress necesita alguna información en su header para que WordPress lo identifique y nos dé acceso a él desde la página de plugins de su escritorio.

Puedes editar esta información para adaptarla a tus necesidades.

Verás listado el plugin de la siguiente forma:


Paso 2 Inicialización de la función del plugin

Vamos a crear un tipo de entrada personalizada llamada Quotes (citas) que contendrá todas las citas, y también una taxonomía personalizada llamada quote_category. Esto nos facilitará la administración de las citas, mejor que si las asignásemos a entradas y categorías estándar.

El hook y la función de inicialización

Usaremos el siguiente código de inicialización para crear nuestro tipo de entrada personalizada y nuestra taxonomía personalizada.

Qué hace este código:

Ahora tendremos un menú Quotes en nuestro escritorio y una forma de administrar las citas y sus categorías.


Paso 3 definir un shortcode

Después, definiremos un shortcode que nos permitirá mostrar (y procesar) el formulario de envío de citas para el usuario en una entrada o página.

Aquí usamos la función de WordPress add_shortcode para definir un shortcode llamado suq_form y una función llamada suq_form_shortcode que será invocada siempre que WordPress encuentre el shortcode [suq_form] en una entrada o una página.

Antes de ver la presentación del formulario y procesar las funciones, hablemos un poco sobre…


Seguridad

Debido a que nuestro plugin acepta datos aportados por el usuario, implementaremos los siguientes mecanismos de seguridad:

  • Sólo tendrán acceso al formulario de la entrada aquellos usuarios que hayan iniciado sesión.
  • Usaremos nonces para verificar que los formularios han sido generados con nuestro plugin.
  • Las citas se enviarán usando wp_insert_post que satinizará los datos antes de guardarlos en la base de datos.
  • Los usuarios sólo podrán ver sus propias citas, y los nonces evitarán que puedan eliminar las citas de otros usuarios.

Nonces

Un nonce es un número que sólo se usa en una ocasión. Los usamos para verificar que los datos que nos son devueltos proceden verdaderamente de nuestros formularios.

Aquí generamos un campo nonce usando wp_nonce_field que incluiremos en nuestro formulario pero que permanecerá oculto a la vista.

Como ahora es un campo oculto de nuestro formulario, nos será devuelto cuando el formulario sea enviado. Después podremos comprobar si el nonce es válido empleando wp_verify_nonce:

Si el nonce es válido, esto nos devolverá el valor true.


Paso 4 la función principal

Esta es la función invocada por nuestro shortcode. Mostrará y procesará el formulario enviado y el formulario que lista o elimina citas. Lo vamos a ver en pequeños pasos y en el Paso 5 veremos las funciones de ayuda.

  • Comprueba si el usuario ha iniciado sesión.
  • Coge la variable de WordPress $current_user que necesitaremos para obtener el ID de nuestro usuario.
  • Si el formulario que crea la cita ha sido enviado, existirá un campo suq_form_create_quote_submited que fue generado por nuestra función wp_nonce_field. Después podemos verificar el nonce y proceder al procesado de la cita enviada.
  • Opera algún tipo de validación asegurándote de que el autor y los campos de texto de la cita contienen algo, si no es así, se mostrará un mensaje de error.
  • Construye un array que establezca el estado del post como pendiente (el administrador ahora tendrá que aprobarlo para publicarlo), asignar el tipo de entrada a "quotes" (nuestro tipo de entrada personalizada), y asignar como autor de la cita a aquel usuario que haya iniciado sesión en este momento.
  • Si la cita se introdujo con éxito, establece la categoría para la cita y muestra un mensaje de éxito.
  • Si el formulario para eliminar la cita ha sido enviado, existirá un campo suq_form_delete_submited que fue generado por nuestra función wp_nonce_field. Después podremos verificar el nonce y proceder a procesar el array de citas verificadas para su eliminación.
  • Comprobamos que actualmente tenemos algunas citas verificadas a eliminar comprobando $_POST['sup_delete_quotes']. Si es así, las gestionamos con la función suq_delete_quotes (ver Paso 5).
  • Si las citas han sido eliminadas, mostraremos un mensaje de éxito.
  • Mostramos el formulario de creación de citas.
  • Por último, mostramos el formulario que lista/elimina las citas pasando el ID del usuario a la función suq_get_user_quotes (ver Paso 5).

Paso 5 funciones de ayuda

Aquí veremos las funciones que generan los formularios y la función que elimina las citas seleccionadas.

  • La función acepta 3 argumentos opcionales para reorganizar los campos del formulario. Esto es conveniente para el usuario.
  • Se mostrará un campo nonce que comprobaremos cuando el formulario sea enviado.
  • Mostraremos un menú desplegable para las categorías invocando suq_get_quote_categories_dropdown (consultar la siguiente función).
  • La función acepta 2 argumentos incluyendo el elemento ID de la categoría seleccionada.
  • Usamos la función de WordPress wp_dropdown_categories para crear un menú desplegable que liste las categorías para las citas de la taxonomía quote_category (nuestra taxonomía personalizada).
  • Acepta el ID del usuario porque lo necesitamos para obtener una lista de citas sólo para el actual usuario.
  • Crea $args para especificar nuestro usuario, el tipo de entrada de las citas y las citas que están pendientes (las que todavía no han sido publicadas por el admin).
  • Ejecuta una consulta personalizada usando WP_Query.
  • Devuelve false si nuestra consulta no devuelve citas.
  • Inicia un formulario y genera un nonce para el formulario.
  • Revisa las citas para asegurarse de que también recogemos la categoría de la cita.
  • Genera un nonce para la casilla de verificación de eliminación de la cita, asignando un nombre único para el nonce y concatenando el ID del la entrada.
  • Muestra una tabla con una fila que contiene la información de la cita así como una casilla para eliminarla.

¿Por qué añadir un nonce para cada cita?

Los formularios pueden ser manipulados en el navegador para devolver datos inesperados. En nuestro caso, a cada casilla de verificación se le asignará el valor de una entrada. Pero, ¿qué pasaría si un usuario malicioso altera este valor y provoca que nuestra función elimine una entrada que no estaba listada?

Una forma de evitarlo, es usar nonces para cada fila de datos de la entrada, cerciorándonos de que los nonces son nombrados de forma única con el valor de la entrada a eliminar. Después verificaremos el nonce cuando se envíe el formulario para asegurarnos que el valor devuelto es auténtico.

  • La función acepta un array con los IDs de las citas a eliminar.
  • Cada ID de cita será comprobado para ver si se ha generado un nonce para ella.
  • Si el nonce es verificado, eliminaremos la cita usando la función de WordPress wp_trash_post.

Paso 6 añadir algo de estilo

Sencillamente incluye este estilo el el archivo style.css ubicado en la carpeta de tu tema.


Paso 7 comprobaciones

Activa el plugin, coloca el shortcode en una página, inicia sesión en tu sitio, y compruébalo.

Encontrarás los enlaces del código fuente completo del plugin y una demo en la parte superior de este tutorial.

La carpeta también contiene una plantilla de página para WordPress con un loop personalizado que muestra las citas publicadas de todos los usuarios.


Reflexiones finales

  • Podríamos mejorar este plugin de citas ofreciendo una opción de edición. Tal y como está ahora mismo, los usuarios sólo pueden eliminar sus citas.
  • También podrías incluir una opción para cargar una imagen que las haga más atractivas.
  • Quizá añadir algunos campos personalizados para el tipo de entrada quotes para añadir información meta a las citas.

Enlaces útiles

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