Los 6 Mejores Plugins para Incluir JavaScript en WordPress

¿Alguna vez has intentado añadir código en tu sitio de WordPress para incluir una nueva función con Javascript? Agregar código personalizado a un tema de WordPress activo no requiere necesariamente que tengas conocimientos de codificación para llevar a cabo la tarea en cuestión.

Sin embargo, si que debes tener en cuenta lo que hace cada código y no copiar y pegar ciegamente fragmentos de código de tutoriales que pueden estar desactualizados, o con errores. Añadir código a través del editor en WordPress también se considera una mala práctica.

Entonces, ¿qué puedes hacer para incluir fragmentos de código JS simples a tu sitio de WordPress correctamente? Además de crear y activar un tema infantil personalizado, hay una serie de plugins que te permiten implementar cualquier código personalizado en casi cualquier área de tu sitio web de WordPress.

Todos los complementos gratuitos que vemos a continuación, permiten implementar rápidamente un código personalizado desde una variedad de lenguajes de programación incluyendo Javascript. Esto ayuda a modificar y personalizar un sitio web de WordPress directamente desde el panel de administrador.

Simple Custom CSS and JS

Este plugin sirve para personalizar la apariencia de tu sitio de WordPress agregando fácilmente códigos CSS y JS personalizados, sin tener que modificar el tema o los archivos de los plugins. Esto es perfecto para añadir ajustes CSS personalizados a tu sitio.

Características:

• Editor de texto con resaltado de sintaxis.
• Imprime el código en línea o incluido en un archivo externo
• También imprime el código en el encabezado o en el pie de página.
• Añade CSS o JS al frontend o dentro del administrador
• Agrega tantos códigos como quieras
• Mantienes tus cambios intactos cuando cambias el tema.

Async JavaScript

Este no es plugin para incluir Javascript, pero me parece interesante añadir a la lista. El complemento lo que hace es eliminar el Javascript del bloqueo de procesamiento en el contenido de la mitad superior de la página.

La función es evitar que el contenido en la parte superior de la página se reproduzca hasta que el javascript haya terminado de cargarse. Esto puede afectar la velocidad de tu página y, en última instancia, la clasificación dentro de los motores de búsqueda. También puede afectar la experiencia de usuario.

Async JavaScript te da control total sobre qué secuencias de comandos añadir un atributo ‘asíncrono’ o ‘diferir’ o excluir para ayudar a aumentar el rendimiento de tu sitio web con WordPress.

Custom CSS and Javascript

Este complemento permite agregar estilos CSS personalizados y código Javascript a todo el sitio web de WordPress. Útil para anular los estilos de tu tema y añadir funcionalidad del lado del cliente.

Características:

• Editor de código con resaltado de sintaxis y guardado de AJAX para evitar volver a cargar el editor en cada guardado.
• Guarda y obtén una vista previa del CSS y Javascript como borrador que solo se aplica a los usuarios que han iniciado sesión con los permisos necesarios, hasta que esté listo para publicar los cambios al público.
• Ver y restaurar revisiones anteriores del CSS y Javascript.
• Minimiza automáticamente el código CSS y Jasascript personalizado para reducir el tamaño del archivo.
• Para el público, el código CSS y Javascript personalizado se sirve desde el sistema de archivos en lugar de la base de datos para un rendimiento óptimo.

Edición personalizada para desarrolladores de CSS y Javascript :

1. Divide el CSS y Javascript en múltiples archivos virtuales para mantener el código organizado (el código todavía se sirve como un archivo CSS y un archivo JS en la interfaz para una mejor eficiencia).
2. Soporta Sassy CSS (SCSS)
3. Vista previa en vivo para el CSS
4. Carga y descarga archivos CSS y Javascript, individualmente o en archivos ZIP.

Head & Footer Code

Digamos que te han dicho que agregues un código personalizado (estilo HTML, JavaScript o CSS) después del «head» por ejemplo para un código de verificación del sitio, estilos personalizados, enlace webfont, etc. , o justo antes del «body»  (como seguimiento de píxeles, código de análisis, código de mapa de calor, etc.), pero hay un problema, y es que no eres programador. Pues no te preocupes porque puedes usar este plugin para hacer lo anterior.

Simplemente dirígete a Herramientas → Head & Footer Code en el panel de administración de tu sitio web e inserta un código personalizado en la sección head o footer (según lo que tengas que hacer).

Si tienes que insertar algún código personalizado específico para un artículo individual (entrada, página, tipo de entrada personalizada), puedes usar el metabox específico del artículo mientras editas la entrada o página. También puedes configurar si ese código específico se debe agregar al código de todo el sitio definido en Herramientas →  Head & Footer Code, o se debe sobrescribir.

Características

• Establece contenido personalizado para la sección head del encabezado de la página
• Establecer contenido personalizado para la sección body del pie de página
• Configura el código personalizado específico del artículo para la sección de la página principal (después del head)
• Configura el contenido personalizado específico del artículo para la sección del pié de página (después de body )
• Elige la prioridad del código personalizado impreso a las secciones del encabezado / pie de página
• También elige qué tipos de entradas habrán habilitado los campos de encabezado / pie de página específicos del artículo
• Y elige si el código de encabezado / pie de página específico del artículo se debe agregar al código de todo el sitio, o reemplazará el código de todo el sitio

Code Embed

Nota para los usuarios de WordPress 5.0 y superior: consulta las Preguntas frecuentes para obtener detalles sobre el uso de este complemento con Gutenberg en la descripción del plugin.

Code Embed te permite insertar código (JavaScript y HTML, no se puede usar para el código del lado del servidor como PHP) en una entrada, sin que el editor cambie el contenido. Esto es increíblemente útil para incrustar scripts de terceros, etc. El complemento es utilizado por muchos sitios grandes, incluido Mozilla.

Las características clave incluyen:

• Añade HTML o JavaScript a las entradas o páginas, especialmente útil para incrustar videos.
• Incrusta código en widgets usando el plugin Widget Logic
• La integración global te permite configurar un código en una entrada o página y luego acceder a él desde otra
• Modifica las palabras clave o los identificadores utilizados para incrustar el código a tu elección.
• Busca el código de inserción a través de una opción de búsqueda simple
• Añade un sufijo simple al código de inserción para convertir vídeos a resultados responsive
• Incrusta un script externo directamente usando solo la URL

CSS & JavaScript Toolbox

CSS & JavaScript Toolbox (o CJT) es un plugin de administración de códigos e inyección que permite personalizar fácil y rápidamente la funcionalidad y apariencia de un sitio web.

Puedes inyectar código CSS, JS, PHP y HTML en: páginas, entradas, publicaciones personalizadas, categorías, etiquetas y más. El editor fue desarrollado para escribir código y no eliminar etiquetas.

Características:

• Crea y prueba fácilmente todos tus scripts en un panel de control
• Añade todas las modificaciones del front-end sin tocar los archivos principales del tema
• Agrega funcionalidad en el back-end sin tocar los archivos principales de WordPress
• No hay necesidad de subir por FTP. Agrega el código, haz clic en Guardar, y mira el cambio.
• Añade tus códigos sociales, como por ejemplo de YouTube, Google Analytics o publicidad.
• Optimiza el desarrollo de tu sitio web, ya sea solo o en equipo.
• Enséñate a codificar o enseña a otros a codificar en el aula
• Probablemente un millón de otros usos.

Terminando

Aquí terminamos con esta lista de plugins para inyectar código Javascript sin romper tu tema, plugins o el núcleo de WordPress, y no perder los cambios cuando se realicen actualizaciones.

También algunos de estos complementos sirven para incluir CSS, HTML y PHP con las ventajas descritas anteriormente. ¿Conoces algún plugin que no esta en esta lista? Pues hazme el favor e incluye tu comentario a continuación…