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

Consejos para las mejores prácticas en el desarrollo de WordPress

by
Read Time:12 minsLanguages:

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

En esta serie, hablaremos sobre las cosas más importantes que debes tener en cuenta al desarrollar un plugin de WordPress o un tema de WordPress.

Esta guía tiene como objetivo proporcionar un conjunto de buenas prácticas que serán útiles para los principiantes y también para los desarrolladores expertos que están empezando a trabajar con WordPress

¡Pero espera! Si has estado desarrollando plugins de WordPress durante un tiempo, revisa antes de decidir si esta guía no es para ti. Estoy seguro de que obtendrás algo. Después de todo, todos tenemos algo único que ofrecer.

La mayoría de las explicaciones de esta serie ya existen en el Codex, pero sé que contiene tanta información que puede ser difícil saber por dónde empezar.

Hoy hablaremos sobre los siguientes temas:

  1. Los estándares de codificación de WordPress
  2. Evitar conflictos de nombres de funciones
  3. Comentarios de código
  4. Consejos de seguridad

La serie pretende ser lo más clara posible e incluirá ejemplos buenos y básicos para dar una idea de cómo deben funcionar ciertas cosas al escribir código específico de WordPress.

Ten en cuenta que no todo es obligatorio para escribir un plugin; sin embargo, si recién estás comenzando, ¿por qué no comenzar con el pie derecho?

Intentaré que estas series sean fáciles de leer. Incluiré algunos ejemplos de código buenos y malos. No todo lo que se explica aquí es obligatorio para escribir un plugin, pero si estás comenzando con el desarrollo de Wordpress, ¿por qué no comenzar de la manera correcta? Una vez que se convierta en un hábito, será difícil hacerlo mal.

Estándares de codificación de WordPress

Personalmente hablando, este es uno de mis mayores defectos cuando desarrollo plugins. Si desarrollas herramientas para WordPress, simplemente debes seguir los estándares de codificación de WordPress. Los estándares de codificación ayudan a mejorar la legibilidad del código y ayudan a evitar errores de codificación comunes.

WordPress es un CMS colaborativo y algo tan simple como que todos escriban código de la misma manera hace que leer, escribir y mantener el código sea más fácil para todos. Al principio, puede ser difícil cambiar el estilo de codificación con el que estás acostumbrado a trabajar, pero con el tiempo encontrarás que se convertirá en algo instintivo y tu código será más limpio y mucho más fácil de leer.

En el Manual de WordPress los estándares se dividen en los cuatro idiomas principales utilizados.

  1. Estándares de codificación CSS
  2. Estándares de codificación HTML
  3. Estándares de codificación de JavaScript
  4. Estándares de codificación PHP

Ejemplos

A continuación, te mostraré algunos ejemplos sencillos de estilos de llaves PHP, para que puedas hacerte una idea.

Malos ejemplos

Buenos ejemplos

El segundo ejemplo es mucho más fácil de leer, ¿no? El Manual de estándares de codificación está lleno de ejemplos que te ayudarán a hacer tu código más limpio. Es fácil sorprenderse de cómo algo tan simple como unos pocos espacios y pestañas pueden mejorar la legibilidad de tu código.

Mientras escribía este artículo, compré un tema para un cliente y cuando fui a editar un código me sorprendió lo difícil que fue hacerlo.

Esto es lo que quiero decir:

Un poco aterrador, ¿verdad? Después de unos minutos trabajando con este código, envié un correo electrónico al autor con un enlace al Libro de estándares de codificación.

Evitar conflictos de nombres de funciones

Los conflictos de nombres se producen cuando una función tiene el mismo nombre que una función que ya se definió. Por ejemplo, si en tu tema tienes una función llamada get_the_post_terms() e instalas un plugin que tiene una función con el mismo nombre, obtendrás algo así:

Desafortunadamente, ocurren con mucha más frecuencia de lo que deberían. La cosa es que es fácil de evitar.

Para evitar esto tenemos opciones:

1. Prefija tus funciones

Por ejemplo, si el nombre de tu plugin es "WordPress Cool Plugin", puedes usar un prefijo wcc_ en todas tus funciones.

Entonces, en el ejemplo anterior, el nombre de nuestra función será wcc_get_the_post_terms()

También te recomiendo que coloques un prefijo en tu CSS, o al menos intentes hacerlo más exclusivo para evitar modificar otros estilos de plugins.

2. Pon tus funciones dentro de una clase

Tal vez tu plugin es tan simple que no necesita una clase, pero aún así puedes crear una para mantener las cosas organizadas. En particular, me gusta usar el patrón singleton, pero consulta el sigueinte ejemplo para ver una clase simple con un método estático.

Como puedes ver en este ejemplo, solo prefijé el nombre de mi clase, pero mi función es simple llamada "enviar". Este nombre de método ahora está protegido del espacio de nombres global y no se puede llamar directamente. Para llamarlo tendré que hacer esto:

Código de comentarios

Los comentarios del código son los mejores amigos del desarrollador. Puede que no sea necesario comentar cada función o variable que crees, pero créeme, cuando tu código crece, especialmente cuando recibió contribuciones de otros, puede resultar difícil saber exactamente qué hacer.

Además, como dije antes, WordPress es un CMS colaborativo. Muchos desarrolladores examinarán tu código y, con un poco de ayuda, irán por el camino correcto.

Yo personalmente uso la sintaxis PHPDoc para comentar mis funciones y con Sublime + Docblockr es muy fácil hacerlo.

Veamos cómo comentan los chicos de Wordpress la función wp_mail() ubicada en wp-includes/pluggable.php

Como puedes ver, describen qué hace la función, qué parámetros se necesitan y qué devolverá.

Bastante autoexplicativo, ¿verdad?

Los comentarios no están destinados a usarse solo con PHP. En HTML, por ejemplo, me gusta usar <!--#id-of-div--> al final de grandes bloques de código para no perderme tan fácilmente.

Para CSS, uso comentarios para dividir mi código en diferentes secciones.

Por ejemplo:

¡Comparte tus trucos de comentarios con nosotros!

Consejos de seguridad

¡La seguridad debe tomarse muy en serio! Si tu plugin o tema se vuelve popular, créeme, no querrás ser el culpable de miles de sitios pirateados. Si crees que estoy exagerando, revisa la investigación de Checkmarx realizada en 2013 sobre los 50 mejores plugins de WordPress.

Ahora veamos algunos consejos de seguridad para el desarrollo de WordPress:

Vulnerabilidades de XSS

Para prevenir XSS, tenemos que hacer dos cosas. Desinfecta la entrada de datos y desinfecta los datos de salida. Tenemos varios métodos para desinfectar según los datos y el contexto en el que se utilizan. Por regla general, no es necesario que confíes en los datos de entrada y no confíes en los datos que se van a generar.

Para los datos de entrada, puedes usar, por ejemplo, sanitize_text_field() que verifica un UTF-8 no válido, convierte caracteres < únicos en una entidad, elimina todas las etiquetas, elimina los saltos de línea, las pestañas y los espacios en blanco adicionales y elimina los octetos. Dependiendo del contexto en el que se encuentren, hay diferentes funciones que te ayudarán a desinfectar tus datos.

Lo mismo sucede cuando generas tus datos. Comprueba el siguiente ejemplo sobre cómo generar un vínculo:

esc_url rechaza las URL no válidas, elimina los caracteres no válidos y elimina los caracteres peligrosos

esc_html codifica < > & " ' al generar HTML.

Una vez más, dependiendo de los datos que tengas, hay diferentes funciones para ayudarte. Para JavaScript podrías usar esc_js.

Además de la desinfección, recuerda validar también tu fecha.

Impide el acceso directo a tus archivos

La mayoría de los hosts permiten el acceso directo a los archivos. En tu plugin, esto significa que lo más probable es que surjan algunos errores de PHP y esos errores son información valiosa para los atacantes.

Un código muy básico para evitar esto, que puedes colocar encima de tu script es:

Esto básicamente impide ejecutar el script si no estamos accediendo a él a través de WordPress.

Eliminar todas las advertencias y avisos

No solo los errores de PHP ayudan a los atacantes, los avisos y advertencias también incluyen mucha información valiosa. Cada plugin debe ser codificado usando el modo DEBUG. Esto también ayudará a detectar funciones obsoletas en tu plugin. Para habilitar el modo DEBUG, simplemente busca esta línea en tu wp-config.php y cámbiala a TRUE.

Junto con esto, debes probar el excelente Plugin de la barra de depuración. Al agregar esta otra línea simple, también podrás analizar todas las consultas de la base de datos.

Usar valores de Nonce

Los valores de Nonce son la abreviatura de números usados una vez y se usan para proteger contra falsificaciones de solicitudes entre sitios, o CSRF, que, en otras palabras, son solicitudes inesperadas o duplicadas que podrían causar cambios indeseados permanentes o irreversibles en el sitio web y particularmente en su base de datos. Todo esto podría ser realizado por un atacante o simplemente por simple error de un usuario de confianza.

Dependiendo de dónde necesites el nonce, puedes crearlo de diferentes maneras:

Para usarlo en un enlace, usa wp_nonce_url()

Para utilizarlo en un formulario, usa wp_nonce_field()

Para usarlo en cualquier otro lugar, usa wp_create_nonce()

Si revisas mi ejemplo anterior, verás cómo uso wp_localize_script (de la que hablaré en el siguiente artículo) para incluir mi nonce en un bloque de código JavaScript. Hago esto porque planeo usar jQuery para hacer una solicitud AJAX más tarde y siempre debes incluir nonce en tus llamadas AJAX.

Luego, en tu script simplemente para verificar el nonce, ingresa el siguiente código

Usa las funciones y las bibliotecas de WordPress

Siempre verifica si lo que estás tratando de hacer es posible hacerlo con las funciones principales y bibliotecas de WordPress. De esa manera, tus scripts serán menos propensos a las vulnerabilidades y si aparece alguna, serán corregidos por los colaboradores principales de WordPress y no tendrás que preocuparte por contactar a todos tus clientes.

El ejemplo más famoso de esto es con la biblioteca TimThumb que, hasta hace unos años, era utilizada por miles de plugins y temas. Un día, en 2011 se dio a conocer la vulnerabilidad. Desde entonces, ya podemos usar la función add_image_size() incorporada para este propósito.

Otras funciones comunes están incluidas dentro de funciones de WordPress como cURL que se pueden reemplazar fácilmente por wp_remote_get y wp_remote_post que no solo codificarán los datos, sino que también ofrecerán alternativas, si cURL falla.

Otro ejemplo sería el uso de get_template_part() en lugar de usar las funciones de PHP require() o include(). Si bien son básicamente los mismos, el primero ya sabe dónde se encuentra tu tema y buscará el archivo solicitado en el directorio de ese tema, no emitirá una advertencia o error fatal si el archivo solicitado no existe, puede buscar otros archivos adecuados, si no se encuentra el solicitado y conoce los temas secundarios y los temas principales.

El núcleo de WordPress incluye muchos scripts que podemos usar en nuestros plugins o temas. Así que siempre revisa antes de agregar nuevas bibliotecas.

¿Qué sigue?

Espero que le hayas sacado mucho provecho a este artículo en particular. Como mencioné al principio, la mayor parte de esta información ya existe en el Codex, que debería ser tu primera parada ya que comenzaste con tu aventura de desarrollo de WordPress.

Cuando comencé a desarrollar con WordPress hace unos años, deseaba tener una guía como esta con toda la información junta, así que esa es la razón principal por la que decidí escribir esta serie.

En el siguiente artículo explicaré los siguientes temas:

  1. La forma correcta de agregar JavaScript y hojas de estilo en tu plugin
  2. Cómo usar Ajax en WordPress de la manera correcta
  3. Permitir que tus usuarios hagan cambios con enlaces

Por favor, no dudes en dejar tus comentarios o sugerencias para los dos artículos restantes en estas series.

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.