Cómo agregar fragmentos de código personalizados en WordPress (método más fácil)

¿Está buscando una manera fácil y directa de agregar fragmentos de código de WordPress a su sitio web?

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

¿Esa personalización perfecta que estás buscando? Se puede lograr con el código correcto, pero el problema es que incluso el error más pequeño puede dañar tu sitio web.

En este artículo, le mostraremos cómo agregar fácilmente fragmentos de código personalizados en WordPress sin dañar su 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 poderosas 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 sus necesidades exactas.

Considérelos el equivalente de WordPress a los hechizos, que, cuando se lanzan correctamente, pueden generar excelentes resultados en la interfaz.

Cómo agregar fragmentos de código personalizados en WordPress

Para agregar fragmentos de código personalizados en WordPress, puede confiar en la simplicidad y funcionalidad de WPCode. Siga los pasos a continuación para comenzar.

1. Instale y active el complemento WPCode

WPCode es la mejor manera para que los usuarios de WordPress agreguen fragmentos de código personalizados a sus sitios sin tener que alterar el archivo functions.php o preocuparse por dañar el sitio por el más mínimo error.

El complemento de fragmentos de código facilita la adición de fragmentos a cualquier parte de su sitio de WordPress, incluidos el pie de página y el encabezado. Puede insertar cualquier código personalizado que desee directamente desde su panel de control en lugar de editar directamente el archivo functions.php .

Para comenzar, deberá instalar y activar el complemento de WordPress en su sitio web. Esto agregará el complemento al panel de menú izquierdo de su panel de WordPress, desde donde podrá comenzar a agregar códigos personalizados rápidamente.

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

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

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

.wpforms-container input[type=radio] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	appearance: radio !important;
}

.wpforms-container input[type=checkbox] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: checkbox !important;
}

.wpforms-container input[type=radio]:checked:before,
.wpforms-container input[type=radio]:before,
.wpforms-container input[type=checkbox]:checked:before,
.wpforms-container input[type=checkbox]:before,
.wpforms-container input[type=radio]:checked:after,
.wpforms-container input[type=radio]:after,
.wpforms-container input[type=checkbox]:checked:after,
.wpforms-container input[type=checkbox]:after {
	display: none !important;
}

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

3. Agregue su código personalizado (nuevo fragmento)

Desde la barra de menú de administración de WordPress, haga clic en la opción Fragmentos de código y luego en el botón Agregar nuevo . Como acaba de instalar el complemento, su lista estará vacía.

Luego serás enviado a la página Agregar fragmento . Aquí, puede agregar su propio código único o seleccionar un fragmento de código de la biblioteca prefabricada.

Haga clic en el botón Usar fragmento junto a la opción Agregar su código personalizado (nuevo fragmento) para insertar su nuevo código.

Ahora, todo lo que necesita hacer es darle un nombre al fragmento y simplemente copiar y pegar el código personalizado que creó en el espacio de Vista previa del código en el complemento WPCode.

Como creamos el código en CSS, en el menú desplegable Tipo de código , seleccionamos Fragmento de CSS . Puedes cambiarlo según el código que hayas creado.

A continuación, desplácese hacia abajo hasta la pestaña Inserción . Ahora, seleccione Insertar automáticamente y, en el menú desplegable Ubicación , elija la opción Encabezado para todo el sitio .

Dependiendo del tipo de código que esté creando, incluso puede optar por agregarlo como [/] Shortcode a sus páginas/publicaciones.

Si desea asignar etiquetas a su fragmento de código, desplácese hacia abajo hasta la sección Información básica . Esto le ayudará a categorizar sus ejemplos de código por tema y función.

Cuando desee mostrar numerosos fragmentos en el mismo lugar, el parámetro Prioridad le permite elegir el orden en el que se procesan.

A continuación, la sofisticada función Lógica condicional inteligente le permite revelar u ocultar fragmentos insertados automáticamente según un conjunto de criterios.

Finalmente, todo lo que necesita hacer es marcar la opción Activo y presionar el botón Guardar fragmento antes de salir del complemento.

4. Manejo de errores en el código personalizado

Un error tipográfico en el complemento específico del sitio o en el archivo de tema podría hacer que su sitio no esté disponible instantáneamente para los visitantes cuando utilice fragmentos de código.

Aparecería un error de sintaxis o un error de servidor interno 500 en su sitio. Necesitará utilizar un cliente FTP para revertir los cambios manualmente.

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

Se mostrará un mensaje de error útil para que lo utilice en la depuración de errores. A medida que agrega su código personalizado, la inteligente validación de fragmentos de código de WPCode encontrará cualquier error.

Cuando pasa el mouse sobre el problema, aparecerá una ventana emergente con instrucciones sobre cómo resolverlo.

5. Administrar tus fragmentos de código personalizados

Si tiene varios fragmentos de código, WPCode hace que sea increíblemente fácil administrarlos con una interfaz fácil de usar y la biblioteca de fragmentos.

Los fragmentos de código se pueden guardar sin activarlos en su sitio web y luego puede activar o desactivar el fragmento cuando lo desee.

Además, puede utilizar etiquetas para categorizar sus fragmentos de código y filtrarlos según el tipo y la ubicación.

También tiene la opción de exportar fragmentos de código concretos o exportarlos todos de forma masiva. Simplemente navegue hasta Fragmentos de código »Herramientas y seleccione la opción Exportar .

El complemento también le permite importar fragmentos si está trasladando su sitio web a un nuevo servidor. Vaya a Fragmentos de código »Herramientas» Importar y cargar el archivo de exportación.

Preguntas frecuentes sobre fragmentos de código personalizados

Agregar fragmentos de código personalizados es un tema popular de usabilidad entre nuestros lectores. A continuación se ofrecen algunas respuestas rápidas a algunas de las preguntas más frecuentes:

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

WPCode es la mejor opción para administrar y ejecutar fragmentos de código en WordPress, ya que ofrece una organización optimizada y capacidades de integración perfecta.

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

Dentro de WPCode, simplemente navegue hasta la sección + Agregar nuevo , ingrese el CSS que desee y asegúrese de seleccionar el tipo de CSS antes de guardar y activar.

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

Puede introducir código personalizado directamente en el archivo functions.php de su 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 + Agregar nuevo , pega tu código PHP y luego guarda. Asegúrese siempre de que se pruebe primero en un sitio de preparación de temas secundarios.

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

¿No sería fantástico si los usuarios de WordPress tuvieran que darte sus direcciones de correo electrónico antes de poder descargar un archivo? Descubra cómo conseguir que los visitantes de su sitio de WordPress compartan sus direcciones de correo electrónico para que puedan descargar un archivo.

Crea tu formulario de WordPress ahora

¿Listo para construir tu formulario? Comience hoy con el complemento de creación de formularios de WordPress más sencillo. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo le ayudó, síganos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.