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

Técnicas Ajax Mejoradas para WordPress: Programación Orientada a Objetos

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Nadia Castelli (you can also view the original English article)

En el post anterior de esta serie, tratamos el tema de trabajar con Ajax en WordPress. Finalmente, la meta es mejorar una serie previa que salió en este sitio hace unos años atrñas.

Reiterando, no es que las técnicas enseñadas en la serie original fueran incorrectas, pero el software cambia a lo largo del tiempo, por ende siempre es bueno revisar conceptos cubiertos años atrás e intentar actualizarlos a algo más nuevo y más resiliente para nuestros esfuerzos aplicados al desarrollo.

Repasando el post anterior, le echamos un vistazo al siguiente comentario perteneciente a la serie original:

Vamos a dar una idea muy breve de lo que es Ajax, cómo funciona, cómo configurarlo, y un entendimiento de los ganchos (hooks) que provee WordPress. Además construiremos un pequeño proyecto para poner en práctica la teoría. Avanzaremos a lo largo del código fuente, y nos aseguraremos de que esté disponible en GitHub.

En ese mismo post, vimos algunas maneras avanzadas de integrar la API Ajax para WordPress en nuestros proyectos, empleando programación por procedimientos. En este post, tomaremos el código escrito en la primera parte de esta serie y lo refactorizaremos de forma tal que aplique un enfoque orientado a objetos.

Finalmente, la meta no es explicar por qué un paradigma debería elegirse por sobre el otro; en cambio, es mostrar cómo puedes lograr la misma funcionalidad independientemente del enfoque que elijas al construir tus plugins.

Planificando el Plugin

Antes de empezar a refactorear el código, necesitamos considerar cómo vamos a organizar los archivos. Después de todo, parte del proceso de comenzar un nuevo proyecto—o incluso retomar uno viejo—es planificar cómo se realizará el trabajo.

Para este plugin en particular, necesitaremos lo siguiente:

  • un archivo inicial responsable de inicializar la clase principal y el plugin
  • una clase responsable de cargar dependencias tales como JavaScript
  • una clase que sirva como la clase principal del plugin

Como puedes ver, no necesitamos hacerle demasiado al plugin. También reorganizaremos algunos de los archivos para lograr una estructura de directorio consistente, y nos aseguraremos de documentar apropiadamente todo el código para que siga los Estándares de Código de WordPress.

Dicho esto, comencemos.

Organizando los Archivos

Antes de escribir código, hagamos lo siguiente:

  1. Crear un directorio assets.
  2. Crear un directorio js ubicado en el directorio assets.
  3. Mover frontend.js al directorio js.
The assets directory

El motivo de esto es que estamos migrando a un estilo de programación orientado a objetos. Parte de esto implica organizar nuestros archivos para que sigan convenciones frecuentemente consideradas paquetes.

En nuestro caso, el directorio assets incluye todo lo necesario para hacer correr el programa. Para algunos plugins, esto podría ser JavaScript, CSS, imágenes, fuentes, entre otros. En este caso, tenemos un único archivo JavaScript.

El Cargador de Dependencias

Ahora, necesitamos introducir una clase responsable de cargar las dependencias de nuestro proyecto. Para este plugin en particular, la única dependencia que tenemos es el archivo JavaScript que ubicamos en el directorio assets.

Parte de la programación orientada a objetos implica asegurarse de que cada clase cumple un propósito específico. En este caso, la clase que estamos por introducir será responsable de cargar el archivo JavaScript mediante la API de WordPress.

Comencemos creando la estructura básica de la clase:

Luego, añadiremos un método que será responsable de encolar el archivo JavaScript según la API de WordPress.

Hecho esto, necesitamos tomar las funciones responsables de enviar las peticiones Ajax y devolver las respuestas, y agregarlas a la clase. Como estarán dentro del contexto de una clase, necesitamos agregar una nueva función que las registrará con WordPress.

Crearemos una función llamada setup_ajax_handlers. Luce así:

Luego, debemos mover las funciones dentro de esta clase. Notarás que las funciones que originalmente llevaban prefijo _sa ya no están nombradas así. Dado que están dentro del contexto de la clase, podemos reemplazar dicho prefijo y también el guión bajo, por la palabra reservada private.

Luego, guardaremos este archivo en un directorio includes ubicado en el directorio raíz del plugin. El directorio includes frecuentemente contiene código utilizado a lo largo de todo un proyecto. Podríamos decir más acerca de este directorio particular, pero sería contenido para un post más extenso.

La versión final de esta clase debería verse así:

La Clase Principal

Ahora estamos listos para escribir la clase principal para el plugin. Esta clase particular residirá en el directorio raíz del plugin, y su estructura básica se verá así:

Luego, agregaremos un par de propiedades que setearemos al instanciar la clase:

Hecho esto, crearemos un constructor y una función de inicialización que se usará para poner el plugin en marcha:

En el código anterior, el contructor determina las propiedades e instancia las dependencias necesarias para hacer funcionar el plugin.

Cuando se llama al método initialize, el plugin empezará a correr y llamará al método de inicialización de la clase de la dependencia creada antes en este tutorial.

El Iniciador

Lo último que nos queda por hacer es tomar nuestro archivo principal, utilizar la funcionalidad include de PHP, y asegurarnos que esté atento a los archivos PHP necesarios.

Luego de eso, tenemos que definir un método que inicialice el archivo principal del plugin y ponga todo en movimiento.

La versión final de este archivo iniciador debería verse así:

Primero, el archivo comprueba si está siendo accedido directamente, chequeando si ha sido definida una constante WordPress. Si no, se detiene la ejecución.

Luego, incluye las clases varias que creamos en este tutorial. Finalmente, define una función llamada cuando WordPress carga el plugin que inicializar el plugin y pone todo en funcionamiento.

Conclusión

Esto nos trae al final de esta serie de dos partes. Espero que hayas aprendido no sólo algunas de las mejores prácticas para incorporar Ajax en tus proyectos WordPress, sino también un poco acerca de cómo documentar tanto código por procedimientos como orientado a objetos, así como notar la diferencia en la presentación del código.

En un post futuro, retomaré algunos de los conceptos orientados a objetos aquí presentados, y los cubriré con mucho más detalle. Por ahora, sin embargo, échale un vistazo al plugin utilizando el link a GitHub ubicado en la barra lateral de esta página.

Recuerda, puedes ver todos mis cursos y tutoriales en mi perfil, y puedes seguirme en mi blog y/o Twitter (@tommcfarlin), donde escribo sobre desarrollo de software en el contexto de WordPress.

Como siempre, por favor no dudes en dejar preguntas o comentarios en el espacio debajo de este post, e intentaré responder cada uno de ellos.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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.