Advertisement
  1. Code
  2. WordPress

Más consejos para mejores prácticas en el desarrollo de WordPress

by
Read Time:14 minsLanguages:

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

Bienvenido a la segunda parte de esta serie. En el primer artículo, explicamos los Estándares de Código de WordPress, cómo evitar los conflictos en las nomenclaturas, los comentarios en el código, y algunos consejos básicos de seguridad.

Hoy, vamos a profundizar un poco más, escribiremos algo más de código y aprenderemos algunas técnicas para mejorar el rendimiento y la seguridad de nuestros plugins. Los temas que veremos hoy son los siguientes:

  1. Cómo y cuándo debería incluir mis scripts y mis estilos
  2. Cómo realizar llamadas Ajax correctamente
  3. Filtros y acciones para proporcionar libertad a tus usuarios

¡Abre tu editor de código y prepárate para empezar a jugar con WordPress!

¿Cómo y cuándo debería incluir mis scripts?

Lo primero que tienes que recordar es que WordPress tiene dos fantáscticas funciones (wp_enqueue_script y wp_enqueue_style) que te permiten incluir tus scripts y estilos. Por tanto, por favor, no los incluyas manualmente en el header o usando el gancho de acción wp_head.

Si usas los métodos de WordPress, los plugins para la cache y minificado serán capaces de incluir tus scripts en sus funciones, serás capaz de elegir dónde ubicarlos, en el pie de página (footer) o en la cabecera (header), muy fácilmente, podrás añadir scripts dependientes y usar también todos los trucos explicados más abajo junto a otras características.

Incorrecto:

Correcto:

No te voy a proporcionar un completo tutorial sobre cómo usar wp_enqueue_xxxx, ya que hay multitud de ellos (¡y el Codex es un recurso excelente!), simplemente estoy intentando hacer un breve apunte sobre cómo deberías añadir scripts en tus temas y tus plugins.

Lo que siempre deberías recordar es dejar la mínima huella posible. Esto significa que no deberías incluir archivos allí donde no esté previsto que existan.

Podrías pensar “si es solo un archivo, no va a afectar al sitio web”, pero esta mentalidad es como lanzar un papel al suelo en el parque porque solo se trata de un trozo de papel, pero lo cierto es que las cosas no funcionan así: Si todos los desarrolladores dejasen sus scripts por ahí en cualquier sitio, el usuario final acabaría teniendo un sitio inflado, y eso no es lo que queremos.

Ahora que hemos visto esto, veamos algunos consejos sobre cómo incluir nuestros scripts solo cuando sean necesarios.

1. Nunca incluyas archivos del front end en el backend ni viceversa

¡Pero espera! Vayamos un paso más allá e incluyamos los scripts únicamente en aquellas páginas que los necesiten. Un excelente método para conseguirlo es registrarlos primero y después ponerlos en cola en las páginas que los necesiten

2. Incluye archivos solo en aquellas páginas que lo necesiten

3. ¿Estás encolando scripts que usarás con shortcodes?

4. Incluye los estilos con condicionales

Aunque los otros fragmentos de código son válidos tanto para los scripts como para los estilos, el siguiente solo funcionará con wp_enqueue_style (al menos de momento).

Puedes ver algunos ejemplos más en el Codex. Otro ejemplo excelente que puedes usar para empezar a construir todos tus plugins es WordPress Plugin Boilerplate. Echa un vistazo al código para ver cómo se incluyen los estilos y los scripts. El plugin Wpfavs (basado en WordPress Plugin Boilerplate) es un buen ejemplo sobre cómo crear un plugin para el backend de WordPress.

2. Cómo realizar llamadas Ajax correctamente

Para este tema compartiré algunos malos hábitos que he visto con mucha frecuencia al trabajar con Ajax en WordPress y que podríamos expresar en las siguientes frases:

  • Las llamadas Ajax no deberían hacerse directamente a un archivo
  • Las llamadas Ajax deberían usar un valor único
  • Si es necesario, comprueba los permisos de los usuarios
  • Las variables JavaScript deberían incluirse con wp_localize_script

Soy consciente de que jQuery hace que las llamadas Ajax sean muy sencillas, y que basta con crear un archivo denominado ajax.php, incluir wp_load.php en él y ejecutar nuestro Ajax ahí. Pero esta no es la “forma WordPress”, no es seguro que funcione en el futuro. Más aún, es menos segura y te perderás un montón de funcionalidad que nos ofrece WordPress.

La forma correcta consiste en usar los ganchos de acción wp_ajax_my_action y wp_ajax_nopriv_my_action. La diferencia principal entre ambos es que el primero se usa para los usuarios que hayan iniciado sesión y el segundo para los que no lo hayan hecho.

Advierte que deberías cambiar “my_action” por el nombre actual de tu acción. Veremos cómo funciona esto en un momento.

Veamos todo esto mediante un simple ejemplo gracias a un poco de código e imaginación. Imagina que queremos mostrar 5 entradas cuando cualquier usuario (haya o no iniciado sesión) haga clic sobre un botón. Vamos a llamar a esta función cool_ajax_example, así que empecemos añadiendo las funciones Ajax de devolución de llamada que nos devolverán los datos.

Puedes incluir este código en tu archivo functions.php o dentro de un plugin.

Como puedes ver, ambos ganchos usan la misma función de devolución de llamada que devolverá los datos. Observa además que el nombre de nuestra acción está al final del nombre del gancho wp_ajax_cool_ajax_example

Es muy importante escribir correctamente el nombre de la acción en todos los sitios o esto no funcionará en absoluto.

Antes de continuar con la función de devolución de llamada vamos a pasar al jQuery necesario para la llamada Ajax. El script jQuery se disparará cuando presionemos un simple botón HTML, y necesitamos enviar esta petición al archivo admin-ajax.php que es el script que maneja todas las solicitudes AJAX en Wordpress. También tenemos que añadir un valor único ya que como hemos dicho queremos que sea seguro, por eso aquí entra en acción la función wp_localize_script.

Si incluiste tus scripts de forma correcta, tal y como hemos explicado al principio de este artículo, tendrás el nombre del manejador del script (en nuestro ejemplo anterior 'script-handler'), por tanto, usémoslo para pasar nuestros valores PHP a nuestro archivo javascript. Puedes incluir este fragmento de código justo tras la función wp_enqueue_function usada para incluir el JavaScript.

Como puedes ver wp_localize_script es un método muy sencillo para pasar cualquier variable PHP a nuestros archivos JavaScript e imprimirá xhtml válido gracias a las etiquetas <![CDATA[. El anterior código se mostrará en la cabecera cuando el archivo JavaScript con el nombre script-handler sea cargado y tendrá un aspecto similar a esto:

Ahora es el momento de crear un archivo JavaScript, llamémosle my.js y tendrá un aspecto parecido a este:

Observa cómo estamos usando el valor único y ajax_url que pasamos con wp_localize_script. Comprueba también que estamos pasando un valor POST llamado "action" que coincide con el nombre de la acción que usamos en los ganchos wp_ajax.

Ahora es el momento de terminar nuestra función de devolución de llamada. Los primero que tenemos que hacer es comprobar que el valor único esté bien y después podremos devolver algunas entradas.

En este caso necesitas algo más complejo como por ejemplo comprobar siempre los permisos del usuario al eliminar una entrada, como he mencionado al principio de este tema. Por ejemplo, si quieres que solo los administradores puedan hacer cierta acción en tu script puedes hacer algo como esto:

Con todos los anteriores consejos, ahora eres un maestro en Ajax en WordPress y puedes realizar cualquier acción que desees. Intenta jugar con lo anterior y ajústalo a tus necesidades. A mí personalmente me gusta jugar con datos json y hago echo json_encode() en lugar de simplemente hacer echo en mis scripts, pero este es otro asunto.

3. Filtros y acciones

El objetivo de esta sección no es enseñarte cómo funcionan los filtros y las acciones, ya existen excelentes tutoriales sobre este tema que lo explican en gran detalle. Lo que te voy a explicar aquí es por qué deberías añadir filtros y acciones en tus plugins y mostrarte algunos ejemplos para facilitar su comprensión.

Pero primero introduzcamos estos conceptos:

  • Ganchos: Un gancho de acción se añade en un determinado punto de tu plugin, por lo general alrededor de las acciones importantes (por ejemplo: antes del contenido, después del contenido). Cualquier usuario podrá después engancharse a él mediante funciones para que su código sea ejecutado en ese punto. Cuando un gancho de acción se ejecuta, todas las funciones que están conectadas, o "enganchadas", a él también serán ejecutadas.
  • Filtros: Un gancho de filtro también se coloca en el plugin para otras funciones. En este caso los filtros permiten que los datos sean manipulados o modificados antes de que sean usados. Así que normalmente los ubicas con variables que quieres que los usuarios puedan manipular.

Comprueba la API de Plugins para obtener más información sobre los ganchos de acción y los filtros.

¿Por qué debería hacer mis plugins extensibles?

Es muy sencillo: Porque hace que tu plugin sea mejor. De esa forma tanto los desarrolladores como los usuarios normales serán capaces de extender, adaptar o mejorar tu plugin más allá de su propósito original sin afectar su núcleo.

Toma como ejemplo un plugin para eCommerce. Gracias a los ganchos y filtros serás capaz de crear nuevos plugins que se enganchen 

Suena bien, pero ¿en qué lugar de mi plugin debería añadirlos?

No te vuelvas loco añadiendo acciones y filtros por todos lados. Al principio encontrarás esto un poco difícil o fastidioso, así que intenta pensar como si fueses otro desarrollador estudiando un nuevo plugin y pregúntate "¿Necesito un gancho de acción aquí?" Además, un gran porcentaje de acciones y filtros serán añadidos bajo demanda una vez empieces a recibir solicitudes de soporte (sí, ¡siempre las recibirás!) o comentarios de sus usuarios.

Como todo en la vida, una vez esto se convierta en un hábito verás con mayor claridad dónde debes incluirlos.

Unas cuantas recomendaciones para cuando debas incluir filtros:

  • Cuando se configuran arrays, es una buena opción agregar un filtro para permitir que los usuarios las modifiquen.
  • Cuando se configuran objetos de datos sucede lo mismo. Podrías querer permitir a los usuarios modificar el objeto antes de que este sea utilizado
  • Cuando sean configuradas las cadenas de datos podrías añadir filtros para permitir a los usuarios cambiarlas.

Vamos a usar la función de devolución de llamada usada en este artículo para ver un ejemplo de las recomendaciones anteriores. Para crear variables filtrables en este caso usaremos apply_filters()

Como puedes ver he añadido un filtro a la variable $args que se ejecutará justo antes de que WP_Query ejecute la consulta. Con un sencillo filtro cualquier usuario podrá cambiar, por ejemplo, el número de entradas que serán devueltas.

Puedes usar filtros en distintos escenarios, simplemente usa tu imaginación. Por ejemplo, en mi plugin WordPress Social Invitations permito que los usuarios cambien la hoja de estilo del popup mediante un filtro en caso de que deseen un estilo completamente distinto.

O en esta ocasión, cuando el plugin envía emails doy la oportunidad de cambiar "Correo electrónico de" que usará wp_mail().

Cuando se trata de acciones, esto cambia un poco. Querrás añadir acciones de ganchos en las siguientes situaciones (aunque no se limitan a estas):

  • Antes de que la tarea se ejecute,
  • Después de que las tareas sean ejecutadas,
  • Mientras las tareas se ejecutan para, por ejemplo, extender el código.

Para crear estas áreas en las que podremos enganchar las acciones usamos la función do_action(). Apliquémoslas en nuestro ejemplo.

Como puedes ver, estoy pasando un argumento a los ganchos con get_the_ID(). Cualquier función que se enganche en nuestra acción será capaz de usar este argumento. Veamos algunos ejemplos:

Además, puedes usar el gancho do_action() para ejecutar otras acciones en lugar de añadir nuevo código como en el ejemplo anterior. Por ejemplo, en WordPress Social Invitations tengo un gancho de acción que se dispara cada vez que es enviado un mensaje. Después, usando el plugin myCRED puedo enganchar la acción para ofrecer puntos al usuario que sencillamente envíen el mensaje.

Como puedes ver añadir ganchos y filtros no solo aportará beneficios a tu plugin, también beneficiará a los desarrolladores y a los usuarios. Entonces, ¿por qué no empiezas a añadir algunos filtros y acciones?

Conclusión

Hoy hemos aprendido cómo incluir scripts y estilos, cómo hacer llamadas Ajax al modo de WordPress y algunos consejos básicos para los filtros y las acciones. Ya tenemos un montón de información para desarrollar un buen plugin y ahora ya puedo afirmar que esta serie está llegando a su fin.

En el próximo y último artículo, hablaré sobre la internacionalización, la depuración y la documentación para concluir lo que creo que son las mejores cosas a considerar al desarrollar un plugin.

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.