WordPress para el Desarrollo de Aplicaciones Web: Eventos, Acciones y Filtros

A lo largo de esta serie, hemos estado echándole un vistazo a cómo se puede utilizar WordPr ess para crear aplicaciones web.

Hasta este punto, hemos establecido que WordPress es una base - en lugar de un framework - y ya hemos hablado un poco sobre cómo hay que evitar tratar de meter con un calzador a WordPress en otro tipo de patrón de diseño, que el de su tipo nativo.

Para ello, hemos establecido que WordPress utiliza un patrón de diseño dirigida por eventos, y que esto se representa mejor con su sistema de acciones y filtros.

Aunque el propósito general de esta serie es proporcionar un estudio de cómo se puede utilizar WordPress para el desarrollo de aplicaciones web, creo que es importante echar un vistazo a algunos ejemplos prácticos de lo potente que es el sistema de ganchos (hooks) para entender cuánto - como desarrolladores - podemos personalizar WordPress para que se adapte a nuestras necesidades.

Así que en este artículo, vamos a echar un vistazo a algo del código que representa algunas acciones comunes que se pueden lograr usando los hooks de WordPress, así como algunas funciones levementes no estandarizadas.

Por último, al final del artículo, debes tener una clara comprensión de por qué aprovechar la naturaleza impulsada por eventos de WordPress es clave en la construcción de aplicaciones y por qué no deberíamos intentar que WordPress y sus patrones subyacentes sean algo que no son.

Ganchos: Acciones y Filtros

En el artículo anterior, dimos dos definiciones - una específicamente para las acciones y una específicamente para los ganchos:

Las acciones son eventos en el ciclo de vida de la página de WordPress cuando ciertas cosas han ocurrido, algunos recursos se cargan, ciertas instalaciones están disponibles y, dependiendo de qué tan temprano se haya producido la acción, algunas cosas todavía tienen que cargar.

Los filtros son funciones con las que WordPress pasa los datos en ciertos puntos del ciclo de vida de la página. Son principalmente responsables de interceptar, administrar y devolver los datos antes de representarlos en el explorador o guardar los datos desde el navegador a la base de datos.

Esto es clave en la comprensión de los dos tipos de eventos de WordPress porque van a ser las veces donde deseas adelantarte a un proceso, seguir un proceso, o manipular la información antes de representarla en la pantalla.

Conocer la diferencia en las acciones y los filtros es clave en la construcción de aplicaciones, plugins y themes en WordPress.

Para ello, vamos a hacer una pausa en el debate sobre por qué WordPress puede ser utilizado para aplicaciones web y vamos echar un vistazo práctico a varias acciones y filtros para asegurarnos de que todos entendemos cómo funciona el sistema de eventos, los tipos de cosas que podemos hacer con él y ojalá conseguir que la creatividad fluya en cuanto a cómo éstos se pueden utilizar para crear una experiencia más personalizada.

Acciones Comunes

En primer lugar, echaremos un vistazo a varias acciones, con cada una aumentando en complejidad respecto a la anterior, con el fin de ayudar a demostrar qué tan potentes pueden llegar a ser las acciones.

1. Agregando un archivo de JavaScript en la cabecera

Esta acción es tan común que es probable incluso que rote más entre los desarrolladores de nivel intermedio. Aún así, el punto permanece: este es un ejemplo de una clásica acción de WordPress que se utiliza en casi cada tipo de tema que existente.

En definitiva, aprovecha el gancho de wp_enqueue_scripts. Este activa la secuencia de la carga en la página y te permite indicarle a WordPress los archivos fuente que debe incluir además de donde debería incluirlos (como en, en el encabezado o el pie de página).

1

function example_add_theme_scripts() {

2

  wp_enqueue_script( 're-example-script', get_stylesheet_directory_uri() . '/js/example.js', array( 'jquery' ), '1.0.0', FALSE );

3

}

4

add_action( 'wp_enqueue_scripts', 're_add_theme_scripts' );

¿Esto es fácil de entender, de acuerdo?

Agarra el script del archivo example.js del tema de ejemplo desde el directorio de JavaScript, asegúrate de que esté marcada para ser dependiente de que jQuery se cargue en primer lugar, ten en cuenta que sea la versión 1.0.0 del script, y que no queremos cargarlo en el pie de página.

2. Personalizando el enlace Leer Más.

Fuera-de-la-caja, WordPress ofrece la posibilidad de añadir un enlace 'leer más...' o de "Continuar leyendo..." que se logra mediante el uso de la etiqueta <!--more--> en el editor del artículo.

Puedes darle estilo con los estilos nativos, pero digamos que deseas agregar código adicional que encaje mucho mejor a tu tema, siendo más fácil de integrar con un diseño responsivo o algo similar.

Puedes entonces utilizar la siguiente acción:

1

function example_add_more_link_class( $link, $text ) {

2

3

	$html = '<div class="more-link-wrapper">';

4

		$html .= '<div class="more-link">' . $link . '</div>';

5

	$html .= '</div>';

6

7

	return $html;

8

9

}

10

add_action( 'the_content_more_link', 'example_add_more_link_class', 10, 2 );

Ten en cuenta que nos estamos enganchando en the_content_more_link que acepta el ancla y el texto del ancla para el enlace más.

Dentro de la función, luego envolvemos el enlace real en su propio contenedor div para que podamos tener un mayor control sobre el estilo del enlace.

3. Obtener el nombre de una persona mediante Ajax

Este ejemplo en particular asume que estás usando Ajax en tu proyecto y que ya has configurado las instalaciones apropiadas para asegurarte de que puedes hacer solicitudes asincrónicas.

Esto también supone que el dato que se envía desde el lado del cliente hacia el servidor es el ID de un usuario de quien deseas retornar su nombre.

1

function example_get_user_name() {

2

3

	$user = null;

4

5

	if ( isset( $_GET['user_id'] ) && 0 < strlen( trim( $_GET['user_id'] ) ) ) {

6

7

		$user = get_user_by( 'id', $_GET['user_id'] );

8

9

		if ( FALSE == $user ) {

10

			echo $user->first_name;

11

		} else {

12

			echo '-1';

13

		}

14

15

	} // end if

16

17

	die;

18

19

} // end re_get_employee_by_name

20

add_action( 'wp_ajax_example_get_user_name', 'example_get_user_name' );

21

add_action( 'wp_ajax_nopriv_example_get_user_name', 'example_get_user_name' );

Así en el ejemplo anterior, primero comprobamos que el user_id se encuentra en la colección de $_GET y, si es así, entonces intentará recuperar el usuario de ese ID.

Si el usuario existe, luego hará un echo del nombre del usuario al cliente; sino de lo contrario, hace echo de un '-1'. Este entonces nos da la flexibilidad para responder adecuadamente en el lado del cliente.

Filtros Comunes

Al igual que con las acciones mencionadas, vamos a echar un vistazo a varios filtros que aumentarán ligeramente en complejidad para que así podamos ver algunas de las cosas que somos capaces de hacer con los filtros que nos otorgan una mayor flexibilidad en nuestros proyectos de WordPress.

1. Agregando Contenido al Final de un Artículo Individual

Aunque el título de esta acción en concreto debe ser claro, digamos que quieres añadir una frase al final de cada artículo en tu blog, pero deseas hacerlo sólo en los artículos individuales.

Esto se logra con el siguiente código:

1

function example_append_post_content( $content ) {

2

3

	if ( is_single() ) {

4

5

		$html = '<div class="post-suffix">';

6

			$html .= 'This content will appear at the end of a post.';

7

		$html .= '</div>';

8

9

		$content .= $html;

10

11

	}

12

13

	return $content;

14

15

}

16

add_filter( 'the_content', 'example_append_post_content' );

Esto es fácil de entender, ¿de acuerdo?

El filtro the_content pasa el contenido real del post a la función de gancho. A partir de ahí, estamos libres de manipular los datos de una manera que nos convenga.

En nuestro caso, primero comprobamos si es una sola página. Si es así, luego vamos a añadir un contenedor post-suffix con una sola frase, anexarlo al contenido y luego devolverlo.

Si no es un artículo sencillo, entonces el contenido se devolverá como normal.

2. Redirigir a los Usuarios Después de Iniciar Sesión

Otro tipo de filtro que podrías querer aprovechar es redirigir a los usuarios después de que han iniciado una sesión en la aplicación.

Por ejemplo, tal vez si son un administrador, deban dirigirse al panel del post; de lo contrario, deberían ser redirigidos a la página principal del sitio.

Para lograr esto, podemos tomar ventaja del filtro de login_redirect:

1

function example_login_redirect( $redirect_to, $request, $user  ) {

2

	return ( isset( $user->roles ) && is_array( $user->roles ) && in_array( 'administrator', $user->roles ) ) ? home_url( '/wp-admin/' ) : home_url();

3

} // end soi_login_redirect

4

add_filter( 'login_redirect', 'example_login_redirect', 10, 3 );

En el código anterior, hemos proporcionado un filtro personalizado en el gancho de login_redirect que realiza lo siguiente:

• Si el usuario es un administrador, redirígelo al tablero
• De lo contrario, dirigirlos a home_url del sitio.

Bastante fácil.

Aunque es un ejemplo relativamente sencillo, debería hacerte pensar más en las cosas avanzadas que puedes hacer basándote en funciones o capacidades de usuario.

Por ejemplo, en lugar de simplemente redireccionarlos a ciertos aspectos de la aplicación, puede mostrarles varias piezas de información basada en, por ejemplo, sus roles.

3. Personalización de Emails

Este ejemplo en particular es un poco más complicado porque vienen las llamadas add_filter en el contexto de otra función que tiene una llamada de terceros.

En concreto, vamos a enviar un correo electrónico pero queremos asegurarnos de que hemos modificado el tipo de contenido, el remitente y el nombre antes de enviar el contenido.

Para ello, primero necesitamos definir una función:

1

function example_exmail_user( $input ) {

2

3

	// Code removed from brevity.

4

	// Assume $message is defined as the content of the email

5

6

	add_filter( 'wp_mail_content_type', create_function( '', 'return "text/html";' ) );

7

	add_filter( 'wp_mail_from', 'example_mail_from' );

8

	add_filter( 'wp_mail_from_name', 'example_mail_from_name' );

9

10

	if ( wp_mail( $input['email-address'], 'Your Account Has Been Created!', $message ) ) {

11

12

		// Redirect back home

13

		wp_redirect( home_url() );

14

15

	} else {

16

17

		// Specify a page to which to direct upon an error

18

19

	}

20

21

	exit;

22

23

}

24

25

function example_mail_from( $email ) {

26

	return 'donotreply@emailaddress.com';

27

}

28

29

function example_mail_from_name( $name ) {

30

	return 'Example Web App';

31

}

Después de esto, tenemos que definir las funciones que se enganchan en el filtro que se especifica arriba. Es decir...

• wp_mail_content_type
• wp_mail_from
• wp_mail_from_name

Como se puede ver, los filtros pueden complicarse relativamente rápidamente, pero son poderosos y si entiendes lo que estás haciendo, y cómo todas las piezas encajan, por así decirlo, entonces realmente podrás hacer cosas increíbles.

Sólo Alcanzando la Superficie

Como con la mayoría de los tutoriales y los ejemplos en este sitio, sólo estamos alcanzando la superficie de lo que se puede hacer usando el sistema de ganchos de WordPress.

Por supuesto, estos ejemplos deben ser justamente eso - ejemplos de qué tan potentes pueden ser los filtros y las acciones a la hora de personalizar la experiencia de WordPress.

Aunque este artículo y el código de ejemplo se entienden para servir como un ejemplo práctico de algunas de las cosas que puedes hacer, no pretenden ser la guía definitiva para trabajar con los ganchos.

En cambio, deberían mostrar cómo podemos empezar a aprovechar lo que está disponible en la API de WordPress al construir una aplicación web.

A continuación...

En el siguiente artículo, vamos a empezar mirando varias facilidades que nos ofrece WordPress justo fuera de la caja. Vamos a ver cómo son de útiles en la construcción de aplicaciones web, cómo aprovecharlas para nuestro trabajo específico y cómo pueden ser de útiles en la construcción de aplicaciones web.

Después de esto, echaremos un vistazo a cuántas de estas características trabajan bien dentro del contexto de una aplicación web, y cómo podemos usar ganchos para personalizar aún más el comportamiento que proporcionan.