Cómo agregar fácilmente código personalizado en WordPress (sin romper su sitio)

Publicado: 2022-08-14


A menudo, mientras lee los tutoriales de WordPress, se le puede pedir que agregue fragmentos de código personalizados en el archivo functions.php de su tema o en un complemento específico del sitio.

El problema es que incluso el más mínimo error puede romper tu sitio web.

En este artículo, le mostraremos una manera fácil de agregar código personalizado en WordPress sin romper su sitio.

How to easily add custom code in WordPress

El problema con los fragmentos de código personalizados (y cómo solucionarlo)

A menudo, encontrará fragmentos de código en los tutoriales de WordPress con instrucciones para agregarlos al archivo functions.php de su tema o a un complemento específico del sitio.

El mayor problema es que incluso un pequeño error en el fragmento de código personalizado puede romper su sitio de WordPress y hacerlo inaccesible.

Sin mencionar que si actualiza su tema de WordPress, todas sus personalizaciones se eliminarán.

El otro problema es que si agrega varios fragmentos de código en un complemento específico del sitio, puede resultar difícil administrar el archivo.

Afortunadamente, hay una manera más fácil para que los usuarios agreguen y administren fragmentos de código personalizados en WordPress.

WPCode es el complemento de fragmentos de código más popular utilizado por más de 1 millón de sitios web de WordPress. Facilita agregar fragmentos de código en WordPress sin tener que editar el archivo functions.php de su tema.

Complemento de fragmentos de código WPCode

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

Nunca tendrás que preocuparte por romper tu sitio porque la validación de fragmentos de código inteligente te ayuda a evitar errores de código comunes.

Además, WPCode viene con una biblioteca de fragmentos incorporada donde puede encontrar todos los fragmentos de código de WordPress más populares, como deshabilitar la API REST, deshabilitar los comentarios, deshabilitar Gutenberg, permitir la carga de archivos SVG y mucho más. Esto elimina la necesidad de instalar complementos separados para cada solicitud de función.

La mejor parte es que puede administrar todos sus fragmentos de código desde una pantalla central y agregar etiquetas para organizarlos.

Dicho esto, echemos un vistazo a cómo agregar fácilmente fragmentos de código personalizados en WordPress con WPCode.

Agregar fragmentos de código personalizados en WordPress

Lo primero que debe hacer es instalar y activar el complemento WPCode en su sitio web.

Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, el complemento agregará un nuevo elemento de menú con la etiqueta 'Fragmentos de código' a su barra de administración de WordPress. Al hacer clic en él, se le mostrará una lista de todos los fragmentos de código personalizados que ha guardado en su sitio.

Como acaba de instalar el complemento, su lista estará vacía.

Continúe y haga clic en el botón 'Agregar nuevo' para agregar su primer fragmento de código personalizado en WordPress.

Click 'Add New' in WPCode to create a new custom snippet

Esto lo llevará a la página 'Agregar fragmento'. Aquí puede elegir un fragmento de código de la biblioteca prefabricada o agregar su código personalizado.

Para agregar un código personalizado, haga clic en el botón 'Usar fragmento' debajo de la opción 'Agregar su código personalizado (nuevo fragmento)'.

Agregar código personalizado en WPCode

Debe comenzar ingresando un título para su fragmento de código personalizado. Esto podría ser cualquier cosa que te ayude a identificar el código.

Después de eso, puede copiar y pegar su fragmento de código en el cuadro de código. Asegúrese de seleccionar también el tipo de código correcto en el menú desplegable de la derecha.

Adding your first code snippet

En la captura de pantalla anterior, hemos agregado un fragmento de código personalizado para eliminar el número de versión de WordPress de nuestro sitio de prueba.

function wpb_remove_version() 
return '';

add_filter('the_generator', 'wpb_remove_version');

Debajo del cuadro de código, verá las opciones de inserción. Hay dos opciones principales de inserción: inserción automática y código abreviado (predeterminado).

Elija la opción de inserción para el fragmento de código

Si elige el método 'Inserción automática', el fragmento se insertará y ejecutará automáticamente en su sitio.

Puede ejecutar automáticamente el fragmento solo en el área de administración de WordPress, en el front-end de su sitio o en cualquier lugar. Si no está seguro, seleccione la opción predeterminada 'Ejecutar fragmento en todas partes'.

Con el método 'Shortcode', el fragmento no se inserta automáticamente. Una vez que guarde el fragmento, obtendrá un código abreviado específico para el fragmento que puede usar en cualquier parte de su sitio.

Cuando se desplace hacia abajo, verá un área de 'Información básica'. Puede agregar cualquier cosa aquí que lo ayude a comprender qué hace este código, dónde lo encontró y por qué lo está agregando a su sitio web.

Add code description and tags

También puede asignar etiquetas a su fragmento de código. Esto lo ayudará a clasificar sus fragmentos de código por tema y funcionalidad.

El campo de prioridad le permite controlar el orden en que se ejecutan los fragmentos cuando desea mostrar varios fragmentos en la misma ubicación. De forma predeterminada, todos los fragmentos tienen una prioridad de 10. Si desea que un fragmento se muestre antes que los demás, simplemente establezca la prioridad del fragmento en un número más bajo, como 5.

Por último, puede usar la poderosa sección 'Lógica condicional inteligente' para mostrar u ocultar fragmentos insertados automáticamente según un conjunto de reglas.

Use lógica condicional inteligente para mostrar u ocultar fragmentos

Por ejemplo, puede mostrar fragmentos de código solo a usuarios registrados, cargar fragmentos de código solo en URL de páginas específicas y más.

Cuando haya terminado de elegir las opciones, puede hacer clic en el botón 'Guardar fragmento' en la esquina superior derecha de la pantalla y cambiar el interruptor de 'Inactivo' a 'Activo'.

Guardar y activar fragmento de código

Si desea guardar el fragmento de código y no activarlo, simplemente haga clic en el botón 'Guardar fragmento'.

Una vez que haya guardado y activado el fragmento de código, se agregará a su sitio automáticamente, si ese es el método de inserción que eligió, o se mostrará como un código abreviado.

Manejo de errores en código personalizado

A menudo, si comete un error al agregar el código personalizado en el complemento o archivo de tema específico de su sitio, inmediatamente hará que su sitio sea inaccesible.

Comenzaría a ver un error de sintaxis o un error de servidor interno 500 en su sitio. Para solucionar esto, deberá deshacer manualmente su código utilizando un cliente FTP.

La parte interesante del complemento WPCode es que detectará automáticamente un error de sintaxis en el código y lo desactivará de inmediato.

Error handling in your custom code snippet

También le mostrará un mensaje de error útil, para que pueda depurar el error.

La validación de fragmentos de código inteligente de WPCode también detectará cualquier error a medida que agrega su código personalizado.

Validación de fragmentos de código inteligente para encontrar errores de código

Al pasar el cursor sobre el error, aparecerán instrucciones para ayudarlo a solucionarlo.

Administrar sus fragmentos de código personalizados

El complemento WPCode proporciona una interfaz de usuario sencilla para administrar sus fragmentos de código personalizados en WordPress.

Puede guardar fragmentos de código sin activarlos en su sitio y luego activar o desactivar el fragmento en cualquier momento que desee. También es posible filtrar fragmentos de código por tipo y ubicación, y usar etiquetas para organizar fácilmente los fragmentos de código.

WPCode - WordPress Snippets Organized by Tags

También puede exportar fragmentos de código específicos o exportarlos todos en masa.

Simplemente vaya a Fragmentos de código » Herramientas y haga clic en la pestaña 'Exportar'.

Exporte sus fragmentos de código personalizados

Si está moviendo sitios web a un servidor diferente, puede importar fácilmente sus fragmentos de código al nuevo sitio.

Simplemente visite la página Fragmentos de código » Herramientas » Importar y cargue el archivo de exportación.

Import code snippets with WPCode

Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente código personalizado en WordPress. ¿Quiere experimentar con algunos fragmentos de código en su sitio web? Consulte nuestra lista de trucos extremadamente útiles para el archivo de funciones de WordPress y no olvide consultar nuestra guía definitiva para acelerar su sitio de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress. También puede encontrarnos en Twitter y Facebook.

La publicación Cómo agregar fácilmente código personalizado en WordPress (sin romper su sitio) apareció por primera vez en AprenderWP.