Cuando comencé a personalizar mi propio sitio de WordPress, me aterrorizaba agregar código personalizado. Un punto y coma mal colocado en el archivo functions.php podía colapsar todo mi sitio web. La sola idea me causaba pánico.
Así que cuando me encontré con tutoriales de WordPress, como muchos de los nuestros aquí en WPBeginner, que me decían que pegara fragmentos en mi tema o en un plugin específico del sitio, la idea me pareció aún más intimidante.
Aquí están las buenas noticias, sin embargo. Hay un plugin gratuito que te permite agregar código personalizado de forma segura sin ningún riesgo de arruinar tu sitio.
En este artículo, te mostraré este método fácil para agregar código personalizado en WordPress de forma segura. Este enfoque funciona perfectamente tanto para principiantes como para usuarios experimentados que desean personalizar sus sitios sin estrés.
El problema con los fragmentos de código personalizado (y cómo solucionarlo)
Como mencioné anteriormente, a menudo encontrarás fragmentos de código en tutoriales de WordPress con instrucciones para agregarlos al archivo functions.php de tu tema o a un plugin específico del sitio.
El mayor problema es que incluso un pequeño error en el fragmento de código personalizado puede arruinar tu sitio de WordPress y hacerlo inaccesible.
Sin mencionar que, si actualizas o cambias tu tema de WordPress, todas tus personalizaciones se eliminarán.
El otro problema es que si agregas varios fragmentos de código en un plugin específico del sitio, puede ser difícil administrar el archivo.
Afortunadamente, existe una forma más fácil para que los usuarios agreguen y administren fragmentos de código personalizados en WordPress.
WPCode es el plugin de fragmentos de código más popular utilizado por más de 2 millones de sitios web de WordPress. Facilita la adición de fragmentos de código en WordPress sin tener que editar el archivo functions.php de tu tema.
WPCode también facilita la adición de códigos de seguimiento para Google Analytics, Píxel de Facebook, Google AdSense y más a las áreas de encabezado y pie de página de tu sitio.
Nunca tendrás que preocuparte por romper tu sitio porque la validación inteligente de fragmentos de código te ayuda a prevenir errores comunes de código.
Además, WPCode viene con una biblioteca de fragmentos integrada donde puedes encontrar todos los fragmentos de código de WordPress más populares como permitir la carga de archivos SVG, deshabilitar la API REST, deshabilitar comentarios, deshabilitar Gutenberg, eliminar y mucho más.
Esto elimina la necesidad de instalar complementos separados para cada solicitud de función.
La mejor parte es que puedes administrar todos tus fragmentos de código desde una pantalla central y agregar etiquetas para organizarlos.
También hay una versión gratuita de WPCode que tiene todas las funciones básicas que necesitas para agregar código personalizado en WordPress, incluido el soporte para 6 tipos de código, lógica condicional inteligente y más.
Dicho esto, veamos cómo agregar fácilmente fragmentos de código personalizados en WordPress con WPCode.
- Agregar fragmentos de código personalizados en WordPress
- Manejo de errores en código personalizado
- Administración de tus fragmentos de código personalizados
- Bonus: Generate Custom Code Snippets with AI
Agregar fragmentos de código personalizados en WordPress
Lo primero que necesitas hacer es instalar y activar el plugin gratuito WPCode en tu sitio web. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: El plugin gratuito WPCode tiene todo lo que necesitas para agregar código personalizado en WordPress. Si deseas funciones avanzadas como fragmentos programados, revisiones de código, seguimiento de conversiones de comercio electrónico y más, puedes actualizar a WPCode Pro.
Al activarse, el plugin agregará un nuevo elemento de menú llamado ‘Fragmentos de código’ a la barra de administración de tu WordPress. Al hacer clic en él, se te mostrará una lista de todos los fragmentos de código personalizados que has guardado en tu sitio.
Dado que acabas de instalar el plugin, tu lista estará vacía.
Haz clic en el botón ‘Agregar nuevo’ para añadir tu primer fragmento de código personalizado en WordPress.
Esto te llevará a la página ‘Agregar fragmento’. Aquí puedes elegir un fragmento de código de la biblioteca predeterminada o agregar tu código personalizado.
Para agregar código personalizado, haz clic en el botón ‘+Agregar fragmento personalizado’ debajo de la opción ‘Agregar tu código personalizado (Nuevo fragmento)’.
Luego, elige el tipo de código de la lista de opciones que aparecen en la pantalla.
Para este tutorial, haremos clic en la opción ‘Fragmento de PHP’.
Ahora serás llevado a la página Crear fragmento personalizado.
Puedes comenzar ingresando un título para tu fragmento de código personalizado. Podría ser cualquier cosa que te ayude a identificar el código.
Después de eso, puedes copiar y pegar tu fragmento de código en el cuadro ‘Vista previa del código’.
En la captura de pantalla anterior, he agregado un fragmento de código personalizado para eliminar el número de versión de WordPress de mi 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 Shortcode.
Si eligió el método de '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 todas partes. Incluso puede elegir insertar su fragmento en ubicaciones específicas de la página, como antes o después de las publicaciones o dentro del contenido de las publicaciones.
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 shortcode específico para el fragmento que puede usar en cualquier lugar de su sitio.
Cuando se desplaza más hacia abajo, puede limitar dónde desea que se cargue el fragmento según el tipo de dispositivo. De forma predeterminada, los fragmentos se cargan en todos los tipos de dispositivos, pero también puede configurarlos para que se carguen solo en escritorio o solo en dispositivos móviles.
A continuación, puede usar la potente sección 'Lógica condicional inteligente' para mostrar u ocultar fragmentos insertados automáticamente según un conjunto de reglas.
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.
Por último, verá un área de ‘Información básica’. Puede agregar aquí cualquier cosa que le ayude a entender qué hace este código, dónde lo encontró y por qué lo está agregando a su sitio web.
También puede asignar etiquetas a su fragmento de código. Esto le 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. Por defecto, todos los fragmentos tienen una prioridad de 10. Si desea que un fragmento se muestre antes que otros, simplemente establezca la prioridad del fragmento en un número más bajo, como 5.
Cuando termine de elegir las opciones, cambie el interruptor de ‘Inactivo’ a ‘Activo’ en la esquina superior derecha, y luego haga clic en el botón ‘Guardar fragmento’.
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 corto.
Manejo de errores en código personalizado
A menudo, si cometes un error al agregar código personalizado en el archivo de tu plugin o tema específico del sitio, esto inmediatamente hará que tu sitio sea inaccesible.
Empezarás a ver un error de sintaxis o un error interno del servidor 500 en tu sitio. Para solucionar esto, necesitarás deshacer manualmente tu código usando un cliente FTP.
La parte genial del plugin WPCode es que detectará automáticamente un error de sintaxis en el código y lo desactivará de inmediato.
También te mostrará un mensaje de error útil, para que puedas depurar el error.
La validación inteligente de fragmentos de código de WPCode también detectará cualquier error mientras agregas tu código personalizado.
Al pasar el cursor sobre el error, aparecerán instrucciones para ayudarte a solucionarlo.
Administración de tus fragmentos de código personalizados
El plugin WPCode proporciona una interfaz de usuario sencilla para administrar tus fragmentos de código personalizados en WordPress.
Puedes guardar fragmentos de código sin activarlos en tu sitio, y luego activar o desactivar el fragmento en cualquier momento que desees. También es posible filtrar fragmentos de código por tipo y ubicación, y usar etiquetas para organizar tus fragmentos de código fácilmente.
También puedes exportar fragmentos de código específicos o exportar todos en bloque.
Simplemente ve a Fragmentos de código » Herramientas y haz clic en la pestaña 'Exportar'.
Si estás moviendo sitios web a un servidor diferente, puedes importar fácilmente tus fragmentos de código al nuevo sitio.
Simplemente visita la página Code Snippets » Tools » Import y sube el archivo de exportación.
Bono: Genera fragmentos de código personalizados con IA
Incluso si no sabes programar, puedes crear fácilmente fragmentos personalizados para tu sitio web de WordPress usando el Generador de Fragmentos de IA de WPCode. Así, en lugar de luchar con PHP, HTML o CSS, puedes describir lo que quieres para tu sitio web en inglés sencillo.
Desde la página ‘Add Snippet’, pasa el cursor sobre la opción ‘Generate snippet using AI’. Luego, haz clic en el botón ‘+ Generate Snippet’.
A continuación, aparecerá un cuadro de texto donde puedes describir lo que quieres que haga tu fragmento. Intenta ser específico sobre lo que quieres, pero no lo hagas demasiado largo, siempre puedes usar la función AI Improve para hacer cambios adicionales más tarde.
Después de escribir tu solicitud, haz clic en el botón ‘Generate’.
La IA ahora escribirá tu nuevo fragmento de código, así como seleccionará la ubicación de inserción automática y establecerá la lógica condicional, si es necesario.
Si quieres ajustar tu nuevo fragmento, puedes hacer clic en el botón ‘AI Improve’, que te permitirá describir los cambios que quieres hacer.
También puedes usar la función AI Improve para mejorar cualquiera de tus fragmentos de código existentes.
Tutorial en video
Si no te gustan las instrucciones escritas, puedes seguir nuestro tutorial en video sobre cómo agregar fácilmente código personalizado en WordPress:
Espero que este artículo te haya ayudado a aprender cómo agregar fácilmente código personalizado en WordPress. ¿Quieres experimentar con algunos fragmentos de código en tu sitio web? Consulta nuestra lista de trucos extremadamente útiles para el archivo de funciones de WordPress, y no olvides ver nuestra guía definitiva para acelerar tu sitio de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
¡Me encanta esta guía! El plugin WPCode es exactamente lo que necesitaba para agregar código personalizado de forma segura a WordPress. Es súper útil que detecte errores antes de que puedan romper algo.
Aquí tienes un consejo profesional que he aprendido: No modifiques directamente el functions.php de tu tema padre. En su lugar, crea un tema hijo y agrega tu código personalizado allí. De esta manera, no perderás tus cambios cuando el tema se actualice.
La función de validación de código me ha salvado de errores tantas veces. ¡Realmente me alegra que esta guía cubra todos estos puntos importantes!
Olaf
WP Code es un plugin absolutamente perfecto que puede reemplazar a varios otros por sí solo. Como desarrollador, disfruto de los fragmentos. Me gusta crearlos y agregarlos a sitios web. Este enfoque me permite adaptar WordPress a una solución hecha a medida, agregando funcionalidades que de otro modo requerirían un plugin. El modo de prueba y la protección incorporada son fantásticos, ya que el propio plugin verifica el código agregado en busca de errores de sintaxis. Y la extensa biblioteca de fragmentos, podría seguir hablando de cuántas veces me ha ayudado. Si hay un ranking de los diez mejores plugins, este definitivamente está en él.
Moinuddin Waheed
Siempre he tenido reservas para instalar plugins para cada funcionalidad, incluso para funcionalidades muy pequeñas.
Insertar fragmentos de código a través de wpcode lo ha revolucionado, ya que no necesitamos tener plugins separados para cada pequeña funcionalidad que necesitemos.
Lo mejor es que wpcode viene con los fragmentos de código generales más utilizados que solo tenemos que usar y activar.
Jiří Vaněk
Y la versión de pago es aún mejor. La tengo desde hace unos dos meses y la biblioteca de fragmentos de la versión de pago incluye cientos de fragmentos para prácticamente todo. Si a alguien le encanta WP Code en la versión lite, la versión de pago es un plugin absolutamente perfecto, incluida la capacidad de probar el código de antemano. Es simplemente fantástico.
Moinuddin Waheed
Gracias por compartir tu valiosa experiencia sobre wpcode.
He usado la versión lite hasta ahora y no puedo apreciar lo suficiente su usabilidad.
Definitivamente consideraré actualizar a la versión pro en el futuro para tener una experiencia fluida de su base de código prefabricada.
Jiří Vaněk
También uso WP code para insertar fragmentos en el sitio web, y estoy de acuerdo en que es una de las herramientas indispensables en la creación de sitios web si alguien quiere ahorrar al instalar numerosos plugins, tareas que los fragmentos a menudo pueden manejar bien. Lo que también es bueno es que la inteligencia artificial ahora puede sugerir fragmentos personalizados para muchos propósitos.
Soporte de WPBeginner
Glad to hear you found the plugin helpful
Administrador
C
Gran tutorial. ¿Cómo se asignan clases a los elementos de Wordpress?
Gracias.
Soporte de WPBeginner
Te recomendamos que consultes nuestra guía a continuación sobre cómo agregar tus propias clases al contenido de tu sitio:
https://www.wpbeginner.com/wp-themes/wordpress-body-class-101-tips-and-tricks-for-theme-designers/
Administrador
DAMIEN GALVEZ
¡¡Gracias!! ¡Fue muy útil!
Soporte de WPBeginner
¡Me alegra que haya sido útil!
Administrador
ebere akadonye
He intentado usar el plugin, pero cada vez que intento activar mi código, me devuelve un error en la Línea 0, no sé qué hacer a continuación, porque no encuentro ninguna línea 0. excepto que es la línea con el <?php
Elena Ocone
Hola y muchas gracias por todo su trabajo y apoyo a la comunidad de Wordpress.
Usé el plugin Code Snippets y fue perfecto hasta después de la última actualización, cuando todo el código desapareció y se volvió imposible guardar ningún cambio: el resultado es una página de error 404.
Soporte de WPBeginner
Podrías intentar los pasos de solución de problemas en nuestro artículo aquí: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
para ver si podría ser un conflicto con otro plugin o tema
Administrador
Romadhon Hapsa
Gracias por publicar esto. Funciona
Soporte de WPBeginner
Glad our article could help
Administrador
Carol
Tengo una página de autores larga con enlaces de afiliados y quiero que los usuarios puedan buscar esos libros por temas específicos.
Por ejemplo, digamos que son libros que cubren Jardinería, Cocina y Costura. Quiero que el usuario pueda buscar todos los libros sobre Costura sin tener que ver todos los demás títulos. Además, algunos títulos no indican inmediatamente los temas, por lo que navegar por toda la lista podría no capturarlos a todos.
Quiero poder codificar los títulos individuales para que aparezcan en una o más de las listas de temas predeterminadas y luego proporcionar un enlace para que el usuario haga clic y obtenga una lista dinámica de solo los títulos sobre ese tema en particular. Dinámica tal que cualquier título nuevo que agregue y codifique aparecerá para ellos.
NO soy programador, ni quiero serlo, necesito un plugin que haga eso. Parece que probablemente no soy la primera persona que quiere hacer esto. ¿Hay algún plugin que haga esto?
ton
Hola
Estoy intentando que se agregue un código de función solo a la página de pago, ¿cómo uso el fragmento para hacerlo?
Lauren
¿Puedo aplicar fragmentos de código a todas las páginas EXCEPTO a mi página de inicio?
THadryan
Intenté usar este plugin porque todos parecen amarlo, pero bloqueó todo mi sitio antes de que pudiera hacer algo con él.
Este artículo me convenció de intentarlo de nuevo, porque a todos parece gustarle, pero INCLUSO SOLO ACTIVARLO arruina todo mi sitio y obtengo el error 500 al que te refieres.
¿Tienes alguna idea de lo que podría estar pasando?
Asumiría que es mi error, pero todo lo que estoy haciendo es instalarlo y activarlo.
Soporte de WPBeginner
Hola,
Esto podría deberse a un conflicto con otro plugin, tema o código personalizado en tu sitio web. Consulta nuestra guía sobre cómo solucionar errores de WordPress para averiguar qué está causando este problema.
Administrador
PseudoGeek
¿El código ingresado en este plugin persistiría a través de las actualizaciones del tema? Esto es lo que me gustaría que hiciera el plugin: Para que el año se actualice automáticamente en los derechos de autor, muchos desarrolladores colocan un fragmento de código PHP en un tema hijo para lograr esto. Realmente no quiero crear un tema hijo para cada sitio web solo por ese pequeño cambio, pero la alternativa es que mis cambios desaparezcan con cada actualización del tema. Pero agregar un tema hijo para algo tan menor parece construir una valla completamente nueva cuando todo lo que quieres hacer es cambiar el color del pestillo de la puerta. ¿Quizás este plugin es la forma fácil de hacer esto?
Soporte de WPBeginner
Las actualizaciones del tema no afectarán tu código.
Administrador
Al Klein
Soy un viejo desarrollador de PHP, pero esto hace que la gestión de fragmentos sea mucho más fácil. (Y, como soy humano, cometí un error al agregar un fragmento, y simplemente se desactivó. Hacerlo manualmente habría significado asegurarme de que el editor todavía estuviera abierto cuando probara el sitio, para poder regresar e intentar encontrar lo que habría sido un error 500).
Gracias por esta publicación.
Victorvijay
¿Cuál es el alcance de este fragmento?
¿Puede el código de este fragmento anular alguna función del tema principal?
Amrita
Gracias por compartir esto. Yo también tengo miedo de agregar código personalizado. Pero esto parece fácil. Si entendí correctamente, si el fragmento de código tiene un error, el plugin lo desactiva automáticamente. ¿Correcto?
Soporte de WPBeginner
Hola Amrita,
Intenta y puede detectar la mayoría de los errores de sintaxis comunes, pero a veces puede fallar en la verificación. Todo depende del código que intentes agregar.
Administrador
Abdal Muntaqeem
Gracias por este gran plugin. Ahora puedo administrar fragmentos personalizados más fácilmente.