Hoy, veremos cómo crear un complemento de WordPress muy simple para cualquier aplicación web que necesite insertar un fragmento de código en su sitio.
Para seguir este tutorial, necesita algunos conocimientos de estos conceptos básicos:
- PHP y OOP
- JavaScript (usaremos jQuery y Ajax)
- Desarrollo de WordPress (ya que la mayoría de las funciones son del núcleo de WordPress).
Puede encontrar un resultado funcional de este tutorial en este repositorio de Github.
Estas aplicaciones web pueden ser cualquier cosa, como CrazyEgg, Freshbook, Google Analytics, Facebook Pixel o Feedier. ¿Por qué? Todos necesitan inyectar algo de código HTML / JavaScript en su sitio para varios propósitos.
Este "código" siempre está parametrizado con variables y suele ser una molestia para el propietario del sitio. Esto se debe a que necesita editar las plantillas del tema. Entonces, ¿qué tal si creamos un complemento para hacer eso por nosotros? ¡Bien, hagámoslo!
Paso 1: encuentra tu aplicación web
El objetivo de este tutorial es crear un complemento de WordPress que agregue una página de administración de WordPress. Además, también agregaremos algunas configuraciones para configurar el widget en el sitio de la aplicación e inyectar el código HTML / JS en nuestra página web automáticamente. Nada lujoso, solo algo que funciona bien.
Tenga en cuenta: necesitamos una aplicación web para este tutorial. Usaremos Feedier para este ejemplo. Sin embargo, si tiene otra aplicación web que le gustaría usar en este tutorial, hágalo. Simplemente cambie el nombre de cualquier cosa llamada "feedier" con el nombre de su aplicación y adapte la configuración a lo que esa aplicación necesita. La mayoría de ellos le darán un fragmento para agregar a su sitio con el fin de que funcione.
Aquí hay un breve resumen de Feedier si nunca ha oído hablar de él:
- Es una herramienta de recopilación de comentarios que utiliza encuestas para comprender a sus usuarios
- Es muy flexible
- ¡Es gratis!
- Tiene una buena API (muy importante aquí)
- Tiene un widget en el sitio (muy importante aquí)
- Te permite recompensar a tus clientes
- Te permite crear preguntas condicionales
- Tiene un panel de informes analítico completo
- Le permite administrar los comentarios de forma individual
Aquí está el widget que queremos agregar automáticamente:
Si se registró en Feedier, simplemente puede encontrar el código en la pestaña Compartir de su encuesta:
Paso 2: configura nuestro complemento y su arquitectura
Los complementos de WordPress son muy simples por diseño. Nuestro complemento solo necesitará dos archivos.
- feedier.php : archivo PHP del complemento principal.
- assets / js / admin.js : script de JavaScript para guardar las opciones usando Ajax.
Puede crear un nuevo directorio "feedier" (o el nombre de su aplicación web) en su carpeta wp-content / plugins / .
El archivo más importante será la clase feedier.php del complemento . Aquí está su estructura:
Estamos haciendo algunas cosas aquí:
- Declarando nuestro complemento usando los comentarios del encabezado
- Definir algunas constantes útiles para poder encontrar fácilmente la URL y la RUTA del complemento
- Declarando nuestra clase de complemento que contendrá todo lo que necesitamos en este complemento. Solo necesitamos un método constructor por ahora.
Ya debería ver el complemento en su página de complementos, aunque todavía no está haciendo nada:
Paso 3: crea nuestra página de administración
Para esta parte, agregaremos una nueva página de administración de Feedier a nuestro sitio de WordPress y obtendremos dinámicamente nuestras encuestas de la API de Feedier.
En el constructor de nuestra clase, registremos tres nuevas acciones que se requieren para agregar una página de administración en WordPress:
- addAdminMenu agregará una nueva página en el menú izquierdo de WordPress. También habrá una devolución de llamada a otro método que contiene el contenido de la página.
- Se llamará a storeAdminData cada vez que el usuario haga clic en el botón "Guardar configuración".
- addAdminScripts registrará un nuevo archivo JavaScript en nuestro administrador de WordPress para guardar los datos del formulario. Pero también intercambia algunas variables entre el lado de PHP y el lado de JavaScript.
El primer paso es muy sencillo. Simplemente registramos la página, así:
Como puede ver, usamos funciones de localización de WordPress para todas las cadenas. Tenga en cuenta que el
array($this, ‘adminLayout’)es donde llamamos a otro método que contiene el contenido de la página. El formulario debe adaptarse a su aplicación web.
Aquí, primero necesitamos obtener las claves API de Feedier públicas y privadas. Una vez guardados, utilizaremos la clave privada para recuperar nuestras encuestas de forma dinámica. Siempre que obtenemos las encuestas y no un error de API, mostramos algunas opciones nuevas para configurar el widget.
Al comienzo de este método, puede ver que primero estamos obteniendo los datos guardados con:
$data = $this->getData();Y obteniendo las encuestas de la API Feedier:
$surveys = $this->getSurveys($data[‘private_key’]);Así que declaremos el primero:
Esta función simplemente lee la opción de nuestro complemento y nos devuelve una matriz para que podamos guardar varios valores en la misma opción.
Para que el segundo método funcione, necesitamos la clave privada Feedier. Esto depende del primero en acceder a esta clave guardada en la opción:
La API de Feedier está documentada aquí, por lo que puede ver lo que obtendrá en la respuesta.
En este momento, tenemos una página de administración completamente nueva. Pero no pasa nada cuando se hace clic en el botón de guardar, porque no hay ningún mecanismo de almacenamiento - todavía .
Bastante bien, ¡salvemos nuestros datos!
Como se mencionó anteriormente, guardaremos nuestros datos usando AJAX. Por lo tanto, necesitamos registrar un nuevo archivo JavaScript e intercambiar datos usando la función wp_localize_script ():
También necesitamos agregar un nuevo archivo /assets/js/admin.js . Eso simplemente hará una llamada Ajax, y WordPress enrutará automáticamente la solicitud correctamente al método correcto (ya hecho en el constructor). Puede leer más sobre cómo WordPress maneja inteligentemente las solicitudes AJAX aquí.
En este mismo momento, podemos hacer clic en el botón Guardar y el script anterior hará una solicitud HTTP POST a WordPress. También agregamos un parámetro de acción que contiene: store_admin_data (que declaramos al principio en esta parte del constructor):
add_action( ‘wp_ajax_store_admin_data’, array( $this, ‘storeAdminData’ ) );El método storeAdminData recibirá la solicitud POST y guardará los valores que necesitamos en nuestra opción de WordPress.
Algunas notas sobre el método anterior:
- Usamos un "nonce de WordPress" para manejar la seguridad y asegurarnos de que provenga del sitio web y no de un pirata informático que falsifique la solicitud.
- Identificamos los campos que necesitamos guardar usando un prefijo "feedier_". Una vez recibidos, recorremos todos los datos de $ _POST y solo guardamos esos campos. También eliminamos el prefijo antes de guardar cada campo.
Eso es todo por el proceso de ahorro. Cuando hacemos clic en guardar, podemos ver una solicitud POST y nuestros datos se guardan en la base de datos dentro de la tabla wp_options .
Perfecto, hemos terminado con la página de administración.
Paso 4: Inserte el código dinámico automáticamente en nuestras páginas
Ahora que tenemos nuestras opciones guardadas, podemos crear un widget dinámico que dependerá de las opciones establecidas por el usuario a través de nuestra página de administración. Ya sabemos lo que la aplicación web espera de nosotros.
Algo como:
Thus, the first thing we want to do is to create a new method to our plugin that will print this code depending on the variables set by the user. So, using the architecture we already set up in the last part:
Now, we just need to call this function on every page load to add it at the bottom of the page. To do this, we’ll hook our method to the wp_footer action. By registering a new action into our class’ constructor:
That’s it!
Any questions, feedback, or ideas? Let me know in the comments!
You can find a working version of this tutorial on this Github repository.
2Fwebd/feedier-wordpress-plugin
Contribute to feedier-wordpress-plugin development by creating an account on GitHub.pxlme.me
Note that this is first version of the plugin, and many things can be improved. I’m open to suggestions and improvements. ?
We are building Feedier. It becomes a no-brainer to collect feedback and build relationships with your customers!
Feedier - Next generation feedback
Meet Feedier, the next generation customer feedback software that lets you collect valuable feedback. Reward, engage…feedier.com
Convinced? Sign up for free at feedier.com ?
Don’t forget to clap our article and subscribe to get more amazing articles if you liked it?. You can also find us on Twitter.
This article was initially published on our blog here.
