Cómo evitar errores comunes de desarrollo de temas de WordPress

Publicado: 2021-02-16

WordPress es conocido por ser increíblemente flexible, especialmente cuando se trata del desarrollo de temas y complementos. Si alguna vez desea ver una prueba, solo pregúntele a un grupo de desarrolladores cómo implementarían una característica específica. Lo más probable es que reciba varios métodos diferentes para lograr el mismo resultado. Los foros de soporte están llenos de este tipo de ejemplos.

Pero con esa flexibilidad también está la realidad de que es fácil hacer las cosas de la manera “incorrecta”. Ahora, en este caso, "incorrecto" significa que algo es ineficiente o un poco difícil de mantener en el futuro. Si bien puede funcionar en el sentido de ser funcional, generalmente hay mejores formas de hacer las cosas.

Echemos un vistazo a cinco de los errores más comunes que se encuentran en el desarrollo de temas, junto con alternativas que le ahorrarán futuros dolores de cabeza.

1. Uso de URL absolutas en plantillas

Si alguna vez ha mirado el código HTML que produce una página o publicación de WordPress, notará que tanto las imágenes como los enlaces internos usan URL absolutas (completas). Pero esta no es la mejor manera de hacer las cosas al agregar código a las plantillas de su tema.

Como ejemplo, supongamos que está desarrollando un sitio web que utiliza una URL temporal. Una URL absoluta codificada en una plantilla significa que tendrá que realizar cambios de código manualmente cuando esté listo para lanzar el sitio en su dominio permanente. Si bien esto se puede hacer, es demasiado fácil olvidar todos los lugares donde este tipo de código podría estar al acecho.

WordPress tiene formas integradas de determinar la URL correcta, extraída directamente del área Settings > General del Tablero.

Para un enlace, hacer eco esc_url( home_url() ) proporcionará una ruta completa a la página de inicio. Entonces, en lugar de colocar explícitamente la URL en su código, puede agregar un enlace simple a su página de inicio de la siguiente manera:

 <a href="<?php echo esc_url( home_url() ); ?>" />Home</a>

Además, también puede usar esto para apuntar a páginas secundarias. Por ejemplo, si quisiéramos vincular a la página Acerca de nosotros de nuestro sitio, podríamos usar el siguiente código:

 <a href="<?php echo esc_url( home_url() ); ?>/about-us/" />About Us</a>

Un fragmento similar también funciona para las imágenes. Este ejemplo extrae una imagen de la subcarpeta /images/ de nuestro tema activo:

 <img src="<?php echo esc_url( get_stylesheet_directory_uri() ) ; ?>/images/hello.png" />

2. Agregar guiones y estilos directamente a una plantilla

El uso de scripts y estilos de terceros con WordPress es un mundo propio. Cuando empiece a crear temas, es posible que sienta la tentación de simplemente colocar etiquetas <script> o <style> , o incluso un código de incrustación de fuentes de Google directamente en el encabezado de su tema. Por lo general, así es como se hacen las cosas con los sitios HTML estáticos, por lo que tiene sentido hacer lo mismo aquí.

Pero, como casi todo lo demás en WordPress, hay una mejor manera de hacerlo. En su lugar, aproveche wp_enqueue_script() y wp_enqueue_style() , que agregan scripts y hojas de estilo en los lugares correctos para usted. También hace que la administración de activos sea mucho más fácil, ya que todo se llama desde el archivo functions.php de su tema.

En lugar de reinventar la rueda aquí, el Manual de temas de WordPress tiene una guía fantástica sobre cómo agregar correctamente scripts y estilos a su tema.

Tome decisiones de desarrollo inteligentes

3. Llamar a instancias externas de jQuery

En una nota relacionada, uno de los secretos ocultos de WordPress es que ya incluye una copia de jQuery, junto con varias funciones de interfaz de usuario populares. Por lo tanto, no necesita instalar jQuery ni llamarlo de forma remota. Esto facilita aprovechar la popular biblioteca de JavaScript e implementar elementos como pestañas, selectores de fecha, cuadros de diálogo y mucho más.

El único inconveniente es que debe habilitar específicamente los elementos que desea usar a través del archivo functions.php de su tema. Si bien eso crea una pequeña curva de aprendizaje, también reduce la hinchazón.

Y, a decir verdad, no es demasiado difícil implementar un elemento de interfaz de usuario jQuery deseado. Por ejemplo, para habilitar el uso de las pestañas de jQuery UI, simplemente agregue el siguiente fragmento a su functions.php :

 function my_jquery_elements() { wp_enqueue_script( 'jquery-ui-tabs', array('jquery')); add_action( 'template_redirect', my_jquery_elements ', 10 );

Esto le dice a WordPress que cargue el elemento de su biblioteca ya existente. A partir de ahí, diseñe sus pestañas y defínalas como se especifica en la documentación de jQuery UI.

4. Llevar la personalización demasiado lejos

La capacidad de agregar campos personalizados y tipos de publicaciones personalizadas puede facilitar mucho la vida tanto de los desarrolladores como de los editores de contenido del sitio. Ofrecen comodidad, una mejor organización del contenido y una experiencia de usuario más intuitiva. Pero a veces lo llevamos demasiado lejos.

Soy un gran admirador de los campos personalizados, por ejemplo. Pero incluso admito que ha habido momentos en los que he personalizado un tema hasta el punto de la inflexibilidad. Los campos son excelentes para configuraciones en las que sabemos exactamente qué contenido se debe ingresar, como los campos del perfil de un miembro del personal.

Sin embargo, puede complicarse cuando hay inconsistencias en los tipos de contenido que alguien quiere agregar. Los clientes son conocidos por tener excepciones "menores" en el contenido que pueden dificultar el uso de personalizaciones. La lógica condicional puede explicar algo de esto, pero solo puede llevarlo hasta cierto punto antes de que la interfaz de usuario se salga de control.

No hay reglas estrictas y rápidas para este tipo de personalización. Lo único que realmente podemos hacer es usar nuestro mejor juicio sobre lo que debe personalizarse y lo que es mejor dejarlo en el editor de contenido de WordPress o incluso en un complemento de nicho. Cuando agreguemos campos o tipos de publicaciones, solo sepa que las cosas podrían cambiar en el futuro e intente construir con eso en mente.

5. No comentar el código

Voy a hacer otra admisión aquí: comentar el código no es uno de mis puntos fuertes. No es que no use comentarios en absoluto, sino que no son muy articulados. Por lo general, señalaré el comienzo y el final de elementos particulares sin mucha información intermedia. ¿Debería estar haciendo más? Probablemente.

Comentar es importante porque al menos proporciona algunos puntos de referencia dentro del código. Al buscar en archivos PHP o JS que contienen más de una cosa, querrá saber dónde encontrar un elemento en particular.

Incluso si usted es el único que alguna vez editará ese código, los comentarios son muy recomendables. Si, por ejemplo, necesita cambiar algo dentro de seis meses, es poco probable que recuerde el lugar exacto donde colocó un fragmento de código.

Entonces, no voy a ser un gran hipócrita y les imploro que comenten todo con mucha profundidad. Pero diré que incluso un esfuerzo mínimo aquí hace que el mantenimiento futuro sea más fácil para usted o para otro desarrollador que tenga que revisar su trabajo.

Código mínimamente comentado

Mejores técnicas con el tiempo

Crear su propio tema de WordPress puede ser una gran experiencia. Pero se necesita un poco de práctica para captar los detalles más finos de la creación de un tema bien codificado y fácil de mantener. Cuanta más experiencia ganes, más evolucionarán tus técnicas.

Puedo decir honestamente que los primeros temas que armé no fueron tan eficientes como lo son ahora. Y también estoy seguro de que es posible que aún no estén a la altura cuando los vea un desarrollador verdaderamente experto. En ese sentido, nuestra evolución es constante.

Finalmente, me gustaría señalar que personalmente he cometido cada uno de los errores mencionados anteriormente. Solo a través de prueba y error, junto con varias visitas al Codex, descubrí cómo comenzar a hacer las cosas al "estilo WordPress".

La lección es que todos vamos a cometer errores. Pero cada uno nos brinda la oportunidad de aprender y mejorar.