Cómo agregar código personalizado a WordPress de forma fácil (& segura)

¿Te preguntas cómo agregar código personalizado en WordPress?

Si buscas personalizar tu blog de WordPress, probablemente te hayas encontrado con muchos tutoriales de WordPress que te indican agregar fragmentos de código personalizados en el archivo functions.php de tu tema.

Sin embargo, esto es bastante complicado para los principiantes, y cometer incluso el error más pequeño puede dañar tu sitio web.

¡Afortunadamente, hay una forma más fácil de agregar fragmentos de código personalizado!

En este artículo, te mostraré cómo agregar código personalizado en WordPress usando el mejor plugin de fragmentos de código para principiantes: WPCode.

Puntos clave sobre cómo agregar código personalizado a WordPress

• Instala y activa el plugin gratuito WPCode para agregar fácilmente fragmentos de código personalizados a tu sitio de WordPress.
• Agrega un nuevo fragmento de código proporcionando un título, pegando el código y seleccionando el tipo de código.
• Elige insertar automáticamente el fragmento de código o usar un shortcode para colocarlo en cualquier lugar.
• Usa la Lógica Condicional Inteligente para mostrar/ocultar fragmentos de código basándote en reglas específicas como URLs o roles de usuario.
• Agrega etiquetas y notas a los fragmentos de código para una mejor organización.
• Establece niveles de prioridad para controlar el orden en que se ejecutan múltiples fragmentos.
• Agrega fácilmente código a las áreas de encabezado, cuerpo o pie de página de WordPress.
• La validación inteligente de WPCode previene errores de código que podrían dañar tu sitio.
• Administra todos los fragmentos desde una pantalla central: actívalos, desactívalos, filtra y exporta/importa.

Por qué necesitas un plugin de código personalizado para WordPress

Como mencioné en la introducción, muchos tutoriales de WordPress te indicarán que agregues fragmentos de código personalizados al archivo functions.php de tu tema.

Pero, editar el archivo functions.php de tu tema puede ser arriesgado porque el más mínimo error puede hacer que tu sitio web sea inaccesible.

También existen otros problemas al agregar código al archivo functions.php.

Por ejemplo, si agregas código a tu archivo functions.php pero cambias tu tema de WordPress, todas tus personalizaciones se perderán.

Y después de agregar varios fragmentos de código, también puede ser difícil administrar el archivo.

Por lo tanto, a menos que seas un desarrollador experimentado, es posible que desees evitar manipular el código PHP de tu sitio.

Ahí es donde entra WPCode.

WPCode, con más de 2 millones de instalaciones activas, es el mejor plugin para agregar código personalizado a sitios de WordPress.

Esto se debe a que te ayuda a hacerlo sin necesidad de editar el archivo functions.php de tu tema.

Y WPCode ofrece soporte completo para PHP, HTML, JS, CSS personalizados y más.

Incluso viene con una biblioteca de fragmentos de código listos para usar con más de 1100 fragmentos aprobados por expertos para ayudarte a agregar rápidamente funcionalidades personalizadas a tu sitio de WordPress. Esto elimina la necesidad de instalar plugins individuales para cada solicitud de función.

Elige entre fragmentos de código populares de WordPress como deshabilitar comentarios, deshabilitar Gutenberg, permitir cargas de archivos SVG, deshabilitar REST API y más.

WPCode también facilita la adición de códigos de seguimiento para Google Analytics, Facebook Pixel, Google AdSense y más a las áreas de encabezado y pie de página de tu sitio web.

Con WPCode, nunca tendrás que preocuparte por romper tu sitio al manipular el backend de un plugin o archivo de tema.

La función inteligente de validación de fragmentos de código te ayuda a prevenir errores comunes de código.

Además, puedes administrar visualmente todos tus fragmentos de código personalizados desde una pantalla central.

Aquí hay algunas características importantes del plugin WPCode:

• Fácil de configurar y usar
• Inserta cualquier código o script, incluyendo PHP, HTML, CSS, JavaScript y más
• Biblioteca de fragmentos de código integrados
• Validación inteligente de código para prevenir errores
• Importar y exportar fragmentos de código

Obtén WPCode hoy mismo »

Con eso, comencemos el tutorial sobre cómo agregar código personalizado en WordPress…

Cómo agregar código personalizado a tu sitio de WordPress con WPCode

Para comenzar, primero debes instalar y activar el plugin gratuito WPCode para agregarlo a tu sitio de WordPress.

Si necesitas ayuda, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez que el archivo del plugin esté activado, verás que se ha agregado un nuevo elemento de menú llamado Fragmentos de Código a tu barra de administración de WordPress. Al hacer clic en él, serás llevado a una página donde podrás ver todos los fragmentos de código personalizados que has agregado a tu sitio.

Dado que acabas de instalar el plugin, no verás ningún fragmento de código guardado aquí.

Para agregar tu primer fragmento de código personalizado en WordPress, haz clic en el botón Agregar Nuevo.

En la siguiente página, tienes la opción de elegir un fragmento de código de la Biblioteca de Fragmentos integrada o puedes agregar tu propio código personalizado.

Para agregar fragmentos de código fácilmente, haz clic en el botón Usar Fragmento debajo de la opción Agregar Tu Código Personalizado (Nuevo Fragmento).

Esto te llevará a una nueva página donde puedes ingresar un título para tu fragmento de código personalizado. Puedes ingresar cualquier tipo de título que te ayude a reconocer el código más tarde.

A continuación, copia y pega tu fragmento de código en el cuadro Vista previa del código. No olvides seleccionar el tipo de código correcto en el menú desplegable del lado derecho de la pantalla.

Después de eso, desplázate hacia abajo en la página hasta la sección Inserción.

Aquí, puedes elegir entre dos formas de insertar tu código en WordPress: Inserción automática y Shortcode.

Con la opción 'Inserción automática', tu fragmento de código personalizado se insertará y ejecutará automáticamente en tu sitio en la ubicación elegida (función de WordPress).

Puedes ejecutar automáticamente el fragmento solo en el área de administración de WordPress, solo en el frontend, antes o después de una publicación, y más. Si no estás seguro, puedes seleccionar la opción predeterminada 'Ejecutar en todas partes'.

Alternativamente, puedes elegir la opción 'Shortcode' para copiar y pegar manualmente el fragmento de código en cualquier lugar de tu sitio.

A continuación, cuando te desplaces más abajo en la página, verás una sección Lógica condicional inteligente.

Si eliges la opción de Inserción automática, puedes usar esta potente función para mostrar u ocultar fragmentos basándote en un conjunto particular de reglas.

Por ejemplo, puedes cargar fragmentos de código solo en URLs de páginas específicas, para usuarios registrados, para usuarios con el rol de 'Colaborador', y más.

En la parte inferior de la página, hay una sección Información básica. Aquí, puedes asignar etiquetas a tu fragmento de código y notas para mantenerte organizado.

• Las notas pueden ayudarte a recordar qué hace el fragmento de código y dónde lo encontraste,
• Y las etiquetas te ayudarán a clasificar tus fragmentos por tema y funcionalidad.

También hay un campo de prioridad que te permite controlar el orden en que se ejecutan los fragmentos cuando quieres ejecutar varios fragmentos en la misma ubicación.

Por defecto, todos los fragmentos obtienen una prioridad de 10. Si quieres que un fragmento en particular se ejecute antes que los demás, simplemente asígnale un número de prioridad más bajo, como 7.

Una vez que hayas terminado de configurar las opciones, regresa a la parte superior de la página y cambia el interruptor de 'Inactivo' a 'Activo'.

Luego, haz clic en el botón Guardar fragmento.

Si deseas guardar el fragmento de código pero no activarlo, haz clic solo en el botón Guardar fragmento.

Una vez que el fragmento esté activo, se ejecutará automáticamente o se mostrará como un código corto, dependiendo del método de inserción que hayas elegido.

¡Eso es todo! Has agregado con éxito código personalizado en WordPress con WPCode.

Agregar código al encabezado y pie de página de WordPress

Algunos tutoriales de WordPress solo te indicarán que agregues código a los archivos header.php o footer.php de tu tema.

Típicamente, esto es para scripts de seguimiento, código JavaScript y CSS personalizado.

¡WPCode también facilita esto!

Simplemente ve a Fragmentos de código » Encabezado y pie de página desde tu panel de administración de WordPress.

A continuación, copia y pega tu fragmento de código en el área del encabezado, cuerpo o pie de página.

Luego, puedes presionar el botón Guardar cambios, y tus fragmentos de código estarán activos en tu sitio web de WordPress.

Prevención de errores de código personalizado en WordPress

Con WPCode, nunca tendrás que preocuparte por cometer errores de código que rompan tu sitio y lo hagan inaccesible.

WPCode detectará automáticamente si hay un error de sintaxis en tu código personalizado, mostrará un mensaje de error y desactivará el fragmento inmediatamente.

Mientras agregas código en WordPress, la validación inteligente de fragmentos de código de WPCode también detectará cualquier error.

Puedes pasar el cursor sobre el mensaje de error para ver cuál es el problema y cómo solucionarlo.

Incluso si tu sintaxis es correcta pero el fragmento genera un error cuando se ejecuta más tarde, el sistema de protección de errores de WPCode desactivará el fragmento inmediatamente para que no te quedes bloqueado fuera de tu sitio.

Administración de tus fragmentos de código personalizado

Una de las mejores partes de WPCode es que te proporciona una interfaz fácil de usar que facilita la administración de todos tus fragmentos de código personalizados en WordPress.

En la página Todos los fragmentos, puedes ver una lista de todos los fragmentos de código personalizados que has guardado en tu sitio.

Desde esta página, puedes activar o desactivar fragmentos en cualquier momento con 1 clic, filtrar los fragmentos por tipo y ubicación, y usar etiquetas para organizar los fragmentos fácilmente.

Si estás migrando tu sitio web a un nuevo host o servidor, también puedes exportar fácilmente tus fragmentos, ya sea en bloque o fragmentos específicos solamente.

Para hacer esto, ve a Fragmentos de código » Herramientas y haz clic en la pestaña Exportar. Luego, simplemente elige los fragmentos que deseas exportar y haz clic en el botón Exportar fragmentos.

Para importar los snippets en tu nuevo sitio, simplemente ve a Snippets de Código » Herramientas » Importar y sube el archivo de exportación.

Luego, haz clic en el botón Importar.

¿Aún necesitas ayuda? ¡Aquí tienes un excelente video tutorial de WPBeginner!

Agregar fragmentos de código personalizado a WordPress para concluir

¡Eso es todo! Espero que este artículo te haya ayudado a aprender cómo agregar código personalizado en WordPress de la manera más segura posible.

Realmente hay una gran cantidad de formas diferentes de usar WPCode y es uno de los mejores plugins de gestión de publicidad de WordPress.

Si disfrutaste este artículo, quizás quieras consultar nuestra publicación sobre cómo crear un tema personalizado de WordPress para tu blog, sin necesidad de codificación.

Mientras estás aquí, ¡asegúrate también de suscribirte a nuestro boletín para recibir consejos de blogging directamente en tu bandeja de entrada!