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

En la publicación anterior de esta serie, revisamos el tema del trabajo con Ajax en WordPress. En última instancia, el objetivo es mejorar una serie anterior que se ejecutó en el sitio hace unos años..

Para reiterar, no es que las técnicas enseñadas en la serie original fueran incorrectas, sino que el software cambia con el tiempo, por lo que siempre es bueno revisar conceptos que se cubrieron hace años y tratar de actualizarlos a algo que sea más actual y más resistente. por nuestros esfuerzos de desarrollo.

Recordemos de la publicación anterior, vimos el siguiente comentario de la serie original:

Vamos a dar una breve descripción de lo que es Ajax, cómo funciona, cómo configurarlo en el frente y cómo entender los enganches que proporciona WordPress. También construiremos un pequeño proyecto que ponga la teoría en práctica. Veremos el código fuente y también nos aseguraremos de que esté disponible en GitHub,.

Y en esa publicación, revisamos algunas formas avanzadas de incorporar la API WordPress Ajax en nuestros proyectos mediante la programación de procedimientos. En este post, tomaremos el código que escribimos en la primera parte de esta serie y lo refactorizaremos para que use un enfoque orientado a objetos..

En última instancia, el objetivo no es explicar por qué un paradigma debe usarse sobre el otro; en cambio, es para mostrar cómo podemos lograr la misma funcionalidad independientemente del enfoque que elija al crear sus complementos.

Planeando el plugin

Antes de comenzar a refactorizar el código, algo que debemos considerar es cómo Vamos a disponer los distintos archivos. Después de todo, parte del proceso de comenzar un nuevo proyecto, o incluso de saltar a uno anterior, es planificar cómo se realizará el trabajo..

Para este complemento en particular, vamos a necesitar lo siguiente:

  • un archivo bootstrap que es responsable de inicializar la clase principal y comenzar el complemento
  • una clase que se encarga de cargar las dependencias como el JavaScript
  • una clase que sirve como la principal clase de plugin

Como puedes ver, no hay también Mucho de lo que tenemos que hacer al plugin. También reorganizaremos algunos de los archivos para que tengan una estructura de directorios consistente, y nos aseguraremos de documentar correctamente todo el código para que cumpla con los estándares de codificación de WordPress..

Dicho esto, vamos a empezar.

Organizando los archivos

Antes de escribir cualquier código, avancemos y hagamos lo siguiente:

  1. Crear un bienes directorio.
  2. Crear un js Directorio que se ubicará en el bienes directorio.
  3. Movimiento frontend.js al js directorio.

La razón para hacer esto es que nos estamos moviendo hacia un estilo de programación orientado a objetos. Parte de esto incluye organizar nuestros archivos para que sigan las convenciones que a menudo se consideran paquetes..

En nuestro caso, el bienes directorio incluye todas las cosas necesarias para que el programa se ejecute. Para algunos complementos, esto podría ser JavaScript, CSS, imágenes, fuentes, etc. En este caso, tenemos un solo archivo JavaScript.

El cargador de dependencia

A continuación, debemos introducir una clase que será responsable de cargar las dependencias para nuestro proyecto. Para este complemento en particular, la única dependencia que tenemos es el archivo JavaScript que acabamos de colocar en el bienes directorio.

Parte de la programación orientada a objetos es asegurarse de que cada clase tenga un propósito específico. En este caso, la clase que vamos a introducir será la responsable de cargar el JavaScript utilizando la API de WordPress..

Empecemos creando la estructura básica de la clase:

A continuación, agregaremos un método que será responsable de encolar el JavaScript según la API de WordPress.

enqueue_scripts ();  / ** * Encola los scripts de front-end para obtener la información del usuario actual * a través de Ajax. * * @access private * * @since 1.0.0 * / private function enqueue_scripts () wp_enqueue_script ('ajax-script', plugin_dir_url (dirname (__FILE__)). 'asset / js / frontend.js', array ('jquery ')); wp_localize_script ('ajax-script', 'sa_demo', array ('ajax_url' => admin_url ('admin-ajax.php')));  

Después de eso, debemos tomar las funciones responsables de manejar las solicitudes de Ajax y proporcionar respuestas y luego agregarlas a la clase. Ya que estarán dentro del contexto de una clase, necesitamos agregar una nueva función que los registre con WordPress.

Vamos a crear un setup_ajax_handlers función. Se parece a esto:

A continuación, necesitamos mover las funciones a esta clase. Tenga en cuenta que las funciones que originalmente tenían el prefijo _sa Ya no están marcados como tales. Ya que están en el contexto de la clase, podemos eliminar el prefijo y también eliminar el guión bajo a favor de privado palabra clave.

user_is_logged_in ($ user_id) && $ this-> user_exists ($ user_id)) wp_send_json_success (wp_json_encode (get_user_by ('id', $ user_id)));  función privada user_is_logged_in ($ user_id) $ is_logged_in = true; if (0 === $ id_usuario) wp_send_json_error (nuevo WP_Error ('-2', 'El visitante no está registrado actualmente en el sitio.')); $ is_logged_in = false;  devuelve $ is_logged_in;  función privada user_exists ($ user_id) $ user_exists = true; if (false === get_user_by ('id', $ user_id)) wp_send_json_error (new WP_Error ('-1', 'No se encontró ningún usuario con el ID especificado ['. $ user_id. ']')); $ user_exists = false;  devolver $ user_exists; 

Luego guardaremos este archivo en una incluye Directorio en la raíz del directorio del plugin. los incluye El directorio es a menudo donde se localiza el código que se usa a lo largo de un proyecto. Se podría decir más sobre este directorio en particular, pero eso es contenido para una publicación más larga.

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

enqueue_scripts ();  / ** * Encola los scripts de front-end para obtener la información del usuario actual * a través de Ajax. * * @access private * * @since 1.0.0 * / private function enqueue_scripts () wp_enqueue_script ('ajax-script', plugin_dir_url (dirname (__FILE__)). 'asset / js / frontend.js', array ('jquery ')); wp_localize_script ('ajax-script', 'sa_demo', array ('ajax_url' => admin_url ('admin-ajax.php')));  / ** * Registra las funciones de devolución de llamada responsables de proporcionar una respuesta * a las solicitudes de configuración de Ajax en el resto del complemento. * * @since 1.0.0 * / public function setup_ajax_handlers () add_action ('wp_ajax_get_current_user_info', array ($ this, 'get_current_user_info')); add_action ('wp_ajax_nopriv_get_current_user_info', array ($ this, 'get_current_user_info'));  / ** * Recupera información sobre el usuario que está conectado actualmente en el sitio. * * Esta función está destinada a ser llamada a través del lado del cliente del lado público * del sitio. * * @since 1.0.0 * / public function get_current_user_info () $ user_id = get_current_user_id (); if ($ this-> user_is_logged_in ($ user_id) && $ this-> user_exists ($ user_id)) wp_send_json_success (wp_json_encode (get_user_by ('id', $ user_id)));  / ** * Determina si un usuario ha iniciado sesión en el sitio utilizando la ID de usuario especificada. Si no, *, el siguiente código de error y mensaje se devolverán al cliente: * * -2: el visitante no está conectado actualmente en el sitio. * * @access private * @since 1.0.0 * * @param int $ user_id El ID del usuario actual. * * @return bool $ is_logged_in Si el usuario actual ha iniciado sesión o no. * / función privada user_is_logged_in ($ user_id) $ is_logged_in = true; if (0 === $ id_usuario) wp_send_json_error (nuevo WP_Error ('-2', 'El visitante no está registrado actualmente en el sitio.')); $ is_logged_in = false;  devuelve $ is_logged_in;  / ** * Determina si un usuario con la ID especificada existe en la base de datos de WordPress. Si no, entonces * se devolverán al cliente el siguiente código de error y el mensaje: * * -1: no se encontró ningún usuario con el ID especificado [$ id_usuario]. * * @access private * @since 1.0.0 * * @param int $ user_id El ID del usuario actual. * * @return bool $ user_exists Si el usuario especificado existe o no. * / función privada user_exists ($ user_id) $ user_exists = true; if (false === get_user_by ('id', $ user_id)) wp_send_json_error (new WP_Error ('-1', 'No se encontró ningún usuario con el ID especificado ['. $ user_id. ']')); $ user_exists = false;  devolver $ user_exists;  

La clase principal

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

A continuación, agregaremos un par de propiedades que estableceremos cuando se cree una instancia de la clase:

Después de eso, crearemos un constructor y una función de inicialización que se utilizará para configurar el complemento en movimiento:

version = '1.0.0'; $ this-> loader = new Dependency_Loader ();  / ** * Inicializa este complemento y el cargador de dependencias para incluir * el JavaScript necesario para que el complemento funcione. * * @access private * @since 1.0.0 * / public function initialize () $ this-> loader-> initialize (); $ this-> loader-> setup_ajax_handlers ();  

En el código anterior, el constructor establece las propiedades y crea las dependencias necesarias para configurar el complemento en movimiento..

Cuando inicializar se llama, el complemento se iniciará y llamará al método de inicialización en la clase de dependencia que creamos anteriormente en este tutorial.

El bootstrap

Lo último que debemos hacer es tomar el archivo principal que tenemos, usar PHP incluir funcionalidad, y asegúrese de que conoce los archivos PHP necesarios que tenemos.

Después de eso, debemos definir un método que inicialice el archivo del complemento principal y ponga todo en movimiento..

inicializar(); 

La versión final del archivo bootstrap debería verse así:

inicializar();  acme_start_plugin (); 

Primero, el archivo verifica si se está accediendo directamente al verificar si se ha definido una constante de WordPress. Si no, entonces la ejecución se detiene.. 

Después de eso, incluye las diversas clases que creamos a través de este tutorial. Finalmente, define una función que se llama cuando WordPress carga el complemento que inicia el complemento y pone todo en movimiento..

Conclusión

Y eso nos lleva al final de esta serie de dos partes. Esperamos que haya aprendido no solo algunas de las mejores prácticas para incorporar Ajax en sus proyectos de WordPress, sino también un poco sobre la documentación tanto del código de procedimiento como del código orientado a objetos, así como de ver la diferencia en la cantidad de código distribuido..

En una publicación futura, puedo revisar algunos de los conceptos orientados a objetos que se presentaron aquí y cubrirlos con mucho más detalle. Por ahora, sin embargo, eche un vistazo al complemento utilizando el enlace de GitHub en la barra lateral de esta página.

Recuerde, puede ver todos mis cursos y tutoriales en mi página de perfil, y puede seguirme en mi blog y / o Twitter en @tommcfarlin, donde hablo sobre el desarrollo de software en el contexto de WordPress..

Como de costumbre, no dude en dejar sus preguntas o comentarios en el feed a continuación, y trataré de responder a cada una de ellas..