Cómo añadir fragmentos de código personalizados en WordPress (el método más fácil)

¿Estás buscando una forma fácil y directa de añadir fragmentos de código de WordPress a tu sitio web?

Aprender WordPress no es solo cuestión de temas y herramientas. A veces, es el sutil poder de los fragmentos de código lo que le da a un sitio su sabor único.

¿Esa personalización perfecta que buscas? Es posible con el código adecuado, pero el problema es que incluso el error más pequeño puede romper tu sitio web.

En este artículo, te mostraremos cómo añadir fácilmente fragmentos de código personalizados en WordPress sin romper tu sitio web.

¿Qué son los fragmentos de código en WordPress?

Debajo de la interfaz fácil de usar de WordPress, hay un mundo de código que impulsa cada uno de sus movimientos.

Estos pequeños fragmentos de código, llamados fragmentos de código, son herramientas compactas pero potentes que instruyen a WordPress sobre funcionalidades específicas.

Aprovechar el poder de estos fragmentos puede marcar la diferencia entre un sitio web genérico de WordPress y uno adaptado a tus requisitos exactos.

Considéralos el equivalente en WordPress de los hechizos, que, cuando se lanzan correctamente, pueden producir excelentes resultados en el frontend.

Cómo añadir fragmentos de código personalizados en WordPress

Para añadir fragmentos de código personalizados en WordPress, puedes confiar en la simplicidad y funcionalidad de WPCode. Sigue los pasos a continuación para empezar.

1. Instalar y activar el plugin WPCode

WPCode es la mejor manera para que los usuarios de WordPress añadan fragmentos de código personalizados a sus sitios sin tener que manipular el archivo functions.php ni preocuparse por romper el sitio con el más mínimo error.

El plugin de fragmentos de código facilita la adición de fragmentos a cualquier parte de tu sitio de WordPress, incluyendo el pie de página y la cabecera. Puedes insertar cualquier código personalizado que desees directamente desde tu panel de control en lugar de editar directamente el archivo functions.php.

Para empezar, necesitarás instalar y activar el plugin de WordPress en tu sitio web. Esto añadirá el plugin al panel del menú izquierdo de tu panel de WordPress, desde donde podrás empezar a añadir códigos personalizados rápidamente.

WPCode viene con una biblioteca de más de 1100 fragmentos de código que puedes usar en tu sitio con solo unos pocos clics, ¡sin necesidad de habilidades de desarrollo! O puedes seguir las instrucciones a continuación para añadir tu propio código personalizado.

El equipo de WPForms incluso ha añadido algunos fragmentos de código propios. Hemos añadido el código para realizar nuestras personalizaciones de formularios más solicitadas para que puedas ir más allá de la funcionalidad básica de WPForms y sus addons. Echa un vistazo a la sección de extras al final de esta publicación para un adelanto.

2. Crear el código personalizado (PHP, CSS, HTML)

Si ya tienes el código personalizado listo, salta este paso y pasa al siguiente. Para aquellos que crean el código personalizado desde cero, aquí tienes un ejemplo.

Para esta guía, crearemos un código personalizado que evita conflictos de temas que causan que los valores de Radio y Casilla de verificación no se muestren correctamente en WPForms.

El código anterior usa CSS para solucionar el problema del conflicto de temas, pero como se mencionó anteriormente, también puedes crear un código con PHP y HTML.

3. Añadir tu código personalizado (Nuevo fragmento)

Desde la barra de menús de administración de tu WordPress, haz clic en la opción Code Snippets y luego en el botón Add New. Dado que acabas de instalar el plugin, tu lista estará vacía.

A continuación, se te enviará a la página Add Snippet. Aquí, puedes añadir tu propio código único o seleccionar un fragmento de código de la biblioteca predefinida.

Haz clic en el botón Use Snippet junto a la opción Add Your Custom Code (New Snippet) para insertar tu nuevo código.

Ahora, todo lo que necesitas hacer es darle un nombre al fragmento y simplemente copiar y pegar el código personalizado que creaste en el espacio Code Preview del plugin WPCode.

Dado que creamos el código en CSS, en el menú desplegable Code Type, hemos seleccionado CSS Snippet. Puedes cambiarlo según el código que hayas creado.

A continuación, desplázate hacia abajo hasta la pestaña Insertion.  Ahora, selecciona Auto-Insert y, en el menú desplegable Location, elige la opción Site Wide Header.

Dependiendo del tipo de código que estés creando, incluso puedes optar por añadirlo como un [/] Shortcode a tus páginas/publicaciones.

Si deseas asignar etiquetas a tu fragmento de código, desplázate hacia abajo hasta la sección Basic Info. Esto te ayudará a categorizar tus muestras de código por tema y función.

Cuando desees mostrar varios fragmentos en el mismo lugar, el parámetro Priority te permite elegir el orden en que se procesan.

A continuación, la sofisticada función Smart Conditional Logic te permite mostrar u ocultar fragmentos autoinsertados basándose en un conjunto de criterios.

Finalmente, ¡todo lo que necesitas hacer es marcar la opción Active y pulsar el botón Save Snippet antes de navegar fuera del plugin!

4. Manejo de errores en código personalizado

Un error tipográfico en el plugin o archivo de tema específico del sitio puede hacer que tu sitio quede instantáneamente inaccesible para los visitantes cuando utilizas fragmentos de código.

Aparecería un error de sintaxis o un error interno del servidor 500 en tu sitio. Necesitarás usar un cliente FTP para revertir tus cambios manualmente.

La característica única del plugin WPCode es que identificará y deshabilitará automáticamente cualquier instancia de errores de sintaxis en el código.

Se mostrará un útil mensaje de error para que lo utilices en la depuración de errores. A medida que añades tu código personalizado, la inteligente validación de fragmentos de código de WPCode encontrará cualquier error.

Cuando pases el ratón sobre el problema, aparecerá una ventana emergente con instrucciones sobre cómo resolverlo.

5. Gestión de tus fragmentos de código personalizados

Si tienes varios fragmentos de código, WPCode facilita enormemente su gestión con una interfaz fácil de usar y la biblioteca de fragmentos.

Los fragmentos de código pueden guardarse sin ser activados en tu sitio web, y puedes activar o desactivar el fragmento más tarde cuando lo desees.

Además, puedes usar etiquetas para categorizar tus fragmentos de código y filtrarlos según el tipo y la ubicación.

También tienes la opción de exportar fragmentos de código particulares o exportarlos todos en bloque. Simplemente navega a Fragmentos de código » Herramientas y selecciona la opción Exportar.

El plugin también te permite importar fragmentos si estás trasladando tu sitio web a un nuevo servidor. Ve a Fragmentos de código » Herramientas » Importar y carga el archivo de exportación.

Extra: Añadir fragmentos de código personalizados a tus formularios

Si estás utilizando WPForms en tu sitio, puedes agregar fragmentos de código para personalizar tus formularios directamente desde el panel del plugin WPForms.

Cuando tengas instalados los plugins WPForms y WPCode, puedes acceder a una biblioteca de fragmentos de código WPForms predefinidos desde la sección Herramientas con la configuración del plugin WPForms.

Con solo hacer clic en un botón, puedes agregar funcionalidad avanzada o personalizar cómo se muestra tu formulario. ¡Es como tener tu propio desarrollador web para ayudarte a crear un sitio web a medida!

Algunos ejemplos de los fragmentos de código disponibles en WPForms incluyen:

• Seleccionar un rango de fechas en el campo selector de fechas
• Bloquear direcciones IP específicas para que no completen tu formulario
• Personalizar subetiquetas
• Mostrar el recuento de envíos de entradas

Estamos agregando constantemente nuevos fragmentos de código al directorio, ¡así que no dudes en ponerte en contacto con tu solicitud si necesitas ayuda con la personalización!

Preguntas frecuentes sobre fragmentos de código personalizados

Agregar fragmentos de código personalizados es un tema popular de usabilidad entre nuestros lectores. Aquí tienes algunas respuestas rápidas a algunas de las preguntas más frecuentes:

¿Cuál es el mejor gestor de fragmentos de código para WordPress?

WPCode es una opción principal para gestionar y ejecutar fragmentos de código en WordPress, ofreciendo una organización más sencilla y capacidades de integración sin problemas.

¿Cómo agrego CSS a un fragmento de código en WordPress?

Dentro de WPCode, simplemente navega a la sección + Añadir nuevo, introduce tu CSS deseado y asegúrate de seleccionar el tipo CSS antes de guardar y activar.

¿Cómo agrego código personalizado a WordPress sin plugins?

Puedes introducir código personalizado directamente en el archivo functions.php de tu tema. Sin embargo, una herramienta dedicada como WPCode garantiza una gestión de fragmentos más segura y organizada.

¿Cómo agrego código PHP personalizado a WordPress?

Para PHP, dirígete a la interfaz de WPCode, elige + Añadir nuevo, pega tu código PHP y luego guarda. Asegúrate siempre de probarlo primero en un sitio de tema hijo de staging.

A continuación, aprende cómo requerir una dirección de correo electrónico para descargar archivos

¿No sería genial si los usuarios de WordPress tuvieran que darte sus direcciones de correo electrónico antes de poder descargar un archivo? Descubre cómo hacer que los visitantes de tu sitio de WordPress compartan sus direcciones de correo electrónico para poder descargar un archivo.

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.