Si llevas un sitio web WordPress, seguramente llegará un momento en el que tendrás que lidiar con fragmentos de código, es decir, code snippets. Dado que el mantenimiento de estos code snippets pueden causar un trabajo innecesario si se integran incorrectamente, existen plugins de code snippets. Sin embargo, también hay otras formas de incluirlos en tu sitio web. En este artículo comparamos las mejores formas de añadir code snippets a tu sitio web WordPress. 

En primer lugar, hay que responder a la pregunta: "¿qué es un fragmento de código o "code snippet"? Un code snippet es un pequeño trozo de código que amplía la funcionalidad de tu sitio web. De ahí su nombre. Esto es para indicar que se trata de unas pocas líneas de código. Ejemplos útiles son la posibilidad de incluir vídeos responsivos y permitir formatos de archivo adicionales para la biblioteca multimedia. Lo interesante es que estos fragmentos de código pueden sustituir a un plugin entero. Esto puede mejorar en gran medida la cantidad de código (y, por tanto, el tamaño de los archivos), el rendimiento y también la propensión a errores de tu sitio web.

Hay otros casos en los que es necesario añadir code snippets a tu sitio web WordPress. Si quieres hacer un seguimiento de quién visita tu sitio web, puedes añadir un código de seguimiento en la cabecera o el pie de página. Si deseas utilizar una solución lista para el consentimiento de las cookies en tu sitio, añade un código JavaScript en el encabezado o en el pie de página. 

¿Por qué los plugins de code snippet? 

En muchos sitios web de WordPress, el código se ha adaptado, pero a veces de una manera que no es sostenible. Los fragmentos de código no deben incluirse directamente en el tema "padre" o principal de WordPress. Esto se debe a que se sobrescribirán y eliminarán en cuanto actualices el tema.

Lo mismo ocurre con los plugins. Si cambias el código de un plugin directamente, los cambios probablemente se borrarán durante una actualización. La única manera de conservar tus cambios es si los has guardado o has hecho una copia de seguridad en otro lugar. Algunas actualizaciones de plugins solo añaden nuevas funciones, pero otras también incluyen mejoras de seguridad. Es necesario aplicarlas correctamente para que tu sitio web sea menos vulnerable a los ataques. Por lo tanto, aplicar code snippets de forma incorrecta puede incluso convertirse en un riesgo para la seguridad, ya que puedes tener la idea de dejar la actualización debido al code snippet.

A continuación te presentaré tres formas de insertar código para ser utilizado en un archivo functions.php. Uno de ellos son los plugins de code snippets. Esto no cubre todas las situaciones en las que se quiere personalizar un plugin o un theme, ya que depende de la existencia de hooks apropiados para los cambios necesarios. Los hooks son lugares en el código para interactuar con el núcleo de WordPress, es decir, una especie de "gancho" donde los plugins y themes pueden "engancharse". Así que si no hay un hook para una determinada función deseada, los code snippets (en functions.php) son la forma más sensata.

Crear un plugin para WordPress

Este método requiere un poco de trabajo en el archivo y en el propio sitio web, por lo que debes tener cuidado y mejor hacer una copia de seguridad antes de hacer cualquier cambio. Un plugin tiene al menos una carpeta para el archivo PHP. Intenta pensar en un nombre único para tu carpeta y archivos (puedes añadir un prefijo basado en tu nombre o en el nombre de la empresa, o algo similar (por ejemplo "Raidboxes.io Disk Usage Sunburst").

En este archivo se necesita una cosa más, un header con la información del plugin. Aquí también necesitas ponerle un nombre a tu plugin: 

<?php

/**
* Plugin Name: your plugin name
*/

¡Bien hecho! Ahora has creado tu primer plugin propio. Después del header, simplemente añades los code snippets (los que quieras añadir a functions.php) y subes la carpeta a la carpeta /wp-content/plugins/ en el servidor. Tu plugin ya debería aparecer en el área de administración. 

Prefiero el enfoque de crear un plugin personalizado porque es genial para añadir código a functions.php. También es fácil de configurar. 

Utilizar un plugin WordPress

Para quienes no se atreven a crear sus propios plugins, uno de los plugins code snippet es una gran manera de gestionar tus code snippets o de añadir código personalizado a los sitios web WordPress en general. Probablemente ya estés acostumbrado/a a instalar plugins de terceros, así que esto puede ser más fácil que la primera opción.

Simplemente instala el plugin deseado y navega hasta el nuevo elemento del menú que aparece en el área de administración. Tenga en cuenta que los distintos plugins pueden tener una estructura diferente, pero la mayoría de ellos son sencillos y fáciles de entender. Deberás renombrar cada code snippet que añadas. Esto es muy útil para facilitar la búsqueda de un determinado code snippet. Este enfoque es muy recomendable y puede ahorrarte algunos problemas con muchos fragmentos de código.

Los factores decisivos para la selección de un buen plugin con el que se pueda ejecutar code snippet en tu sitio web son, entre otros, la influencia en el rendimiento de tu sitio web y la facilidad de uso. A continuación te presentaré algunos plugins de code snippet de WordPress.

Los mejores plugins de code snippet para WordPress

Code snippets

Esta extensión fue desarrollada por Code Snippets Pro y es mi favorita. La idea de la extensión es que puedas añadir pequeños fragmentos de código PHP. Proporciona una solución fácil para añadir fragmentos de código HTML, JavaScript o PHP personalizados a tu . El uso del plugin es similar a los otros menús de administración de WordPress y es muy fácil de usar. El plugin te permite añadir fragmentos de código al tema tu mediante una interfaz gráfica. Ten en cuenta que esta extensión no es adecuada para añadir códigos de seguimiento o similares. Esta extensión se utiliza mejor para añadir más funciones al archivo "functions.php" del tema tu .

Características:

• Puedes utilizar código PHP en widgets, sitios y posts.
• Añade PHP para crear formularios de contacto y procesar cualquier tipo de entrada o carga.
• Añade PHP para crear contenido optimizado para el usuario.
• Con PHP puedes personalizar todos los aspectos de la instalación de tu WordPress.

Insertar code snippets PHP

Este plugin fue desarrollado por xyzscripts.com y es una extensión popular que se actualiza regularmente. Con este plugin puedes utilizar código PHP que puede ser fácilmente insertado en el editor normal de WordPress, ya que crea snippet shortcodes para cada código añadido. La inserción también funciona con un shortcode en la barra lateral del widget de texto del sitio. 

Características: 

• En el editor TinyMCE tienes un menú desplegable inteligente
• Convierte fragmentos de PHP en shortcodes para una fácil implementación
• Funcionalidad sencilla y flexible

CSS Pro a medida 

Con el plugin WordPress Custom CSS Pro, puedes añadir fácilmente código CSS personalizado a tu sitio web WordPress. Este plugin WordPress gratuito ofrece algunas funciones útiles, como la vista previa en tiempo real y la numeración de líneas para facilitar la edición del código. 

Características:

• Visualmente como el entorno de Visual Studio Code o Sublime Text
• Es fácil añadir código CSS personalizado a WordPress
• Vista previa en vivo en tiempo real

Insertar encabezados (headers) y pies de página (footers)

Este tipo de plugin facilita la inserción de código en el header o footer. La extensión fue desarrollada por WPbeginner, que también desarrolló el famoso plugin de formularios WPforms. Con este plugin puedes insertar fácilmente code snippets para la integración de servicios como Google Analytics y Facebook Pixel. 

Características: 

• Instalación rápida
• Se pueden insertar fácilmente encabezados, scripts y otros códigos
• Te permite añadir cualquier código o script junto con HTML y JavaScript
• Es la opción más sencilla para insertar códigos de seguimiento

Herramientas integradas en Elementor (Versión Pro)

Si utilizas el page builder Elementor en su versión Pro, no necesitas instalar otro plugin. Elementor tiene una herramienta integrada para insertar códigos de seguimiento y similares. Elementor también admite el cambio de nombre de todos los scripts que añadas a tu sitios web WordPress. Para encontrar el código personalizado de Elementor, sigue estos pasos. Dirígete al Dashboard > Elementor Custom Code. Allí, pega el script que deseas colocar en tu sitio. Ten en cuenta que debes tener una licencia activa de Elementor Pro para utilizar las herramientas de código personalizado integradas en Elementor.

Características: 

• Estructura simple y lógica
• Integrado en el page builder

Utilizar un child theme

Este método es el menos recomendado para añadir code snippets, pero sigue funcionando bien. Es un poco más complicado que crear un plugin. Un child theme debe contener el código y el estilo que se aplica al diseño y al aspecto de tu sitio web, pero un snippet se utiliza generalmente para cambiar la funcionalidad y por lo tanto no cae realmente bajo la "responsabilidad" de un child theme. 

Para crear un Tema Hijo, crea una carpeta con el mismo nombre que tu Tema Padre y con el sufijo "-child" (si la carpeta del Tema Padre se llama "raidboxes.io-theme", la carpeta del Tema Hijo sería "raidboxes.io-theme-child"). 

En esta carpeta necesitas al menos dos archivos: el archivo de hoja de estilo llamado style.css y el archivo PHP llamado child.php.

El archivo style.css debe contener una cabecera con las siguientes especificaciones mínimas:

/* 
Theme Name: Raidboxes.io Theme Child
Template: Raidboxes Theme
Version: 1.0.0
*/

A continuación, añade el code snippet al final del archivo functions.php y sube la carpeta del childe theme al servidor en /wp-content/themes/.

Si todo está bien, puedes abrir el menú Design → Themes en tu área de administración y activar el nuevo child theme. Si quieres saber más, te explicamos cómo crear un child theme en la revista.

Conclusión 

Este artículo te ha proporcionado información básica sobre las diversas formas de incluir code snippets en WordPress. La decisión entre crear tu propio plugin o child theme en WordPress o utilizar un plugin de code snippet depende de ti y solo de tus preferencias, ya que los tres métodos cumplen funcionalmente lo mismo. Lo mejor es utilizar lo que más te convenga.