Imagina que acabas de crear tu sitio web de WordPress. Está lleno de contenido y atractivo visual, pero falta algo. Desea agregar un cuadro de biografía de autor personalizado debajo de cada una de las publicaciones de su blog. Y sin saber codificar, la tarea parece imposible.
Pero con los fragmentos de código de WordPress, puedes aprovechar el código prediseñado para obtener los resultados que deseas. Los fragmentos de código simplifican la personalización.
No es de extrañar por qué el 29% del millón de sitios web más importantes del mundo están hechos con WordPress: es la forma más fácil de crear un sitio web que sea exclusivamente tuyo.
Y los fragmentos de código de WordPress son una gran parte de eso.
Sigue leyendo para obtener más información sobre los fragmentos de código personalizados y algunos de los mejores fragmentos para agregar a tu sitio web.
¿Qué son los fragmentos de código de WordPress?
Los fragmentos de código de WordPress son pequeños fragmentos de código que te permiten añadir funciones específicas o nuevas características a tu sitio web. Piensa en ellos como atajos. No es necesario ser un experto en codificación ni contratar a un desarrollador para realizar cambios menores o añadir características únicas a tu sitio web.
Por ejemplo, podrías agregar esa caja de biografía que mencionamos anteriormente. O puede cambiar el logotipo de la página de inicio de sesión para que coincida con su propia marca.
Los fragmentos de código ayudan a tu sitio web a reflejar tu visión sin enredarse en las complejidades del desarrollo web a gran escala. Ya sea que se trate de un pequeño ajuste o un cambio significativo, los fragmentos de código de WordPress te dan el poder de hacer lo que quieras.
¿Por qué usar fragmentos de código en WordPress?
Los fragmentos de código son esenciales para personalizar tu sitio web de WordPress, mejorar su rendimiento al reducir la sobrecarga de plugins y permitir una rápida experimentación para funciones como las ventas flash o los cambios de diseño. Además, ayudan a crear la personalidad única de su sitio web, lo que ayuda a que su negocio se destaque.
No quieres un sitio web básico de WordPress, quieres un sitio web único que esté personalizado para tu marca. Con los fragmentos de código, puede lograrlo fácilmente sin contratar a un desarrollador para crear un sitio web desde cero.
Por ejemplo, el cuadro de biografía de autor personalizado que agregó a su sitio web le ahorró el tiempo de contratar a un desarrollador mientras mantiene la velocidad de su sitio web, otra área donde brillan los fragmentos de código.
Si bien los complementos de WordPress son útiles, pueden generar muchas demandas adicionales del servidor en su sitio web, lo que hace que se cargue más lentamente.
Supongamos que desea agregar un botón para compartir en redes sociales. Un plugin diseñado para ese propósito puede venir con otras características que no necesitas, lo que ralentiza tu sitio web.
Pero con un fragmento, solo necesita agregar el código específico para el botón de compartir, minimizando el impacto del ruido de fondo innecesario.
Los fragmentos de código también te dan la flexibilidad para experimentar. Si bien los fragmentos usan código CSS, HTML, JavaScript y PHP, no necesita experiencia previa en codificación para usarlos, ya que son adecuados para principiantes.
Por último, los fragmentos mejoran la experiencia del usuario (UX). Tal vez el fragmento cambie el color del botón de llamada a la acción (CTA) para que «resalte» más u ofrezca una experiencia de desplazamiento única. Estos pequeños interruptores contribuyen a tu experiencia de usuario y hacen que tu sitio web sea memorable.
Sin mencionar que su experiencia de usuario afecta directamente su clasificación de optimización de motores de búsqueda (SEO), según Google.
Cómo usar y agregar fragmentos de código de WordPress
La mejor parte de los fragmentos de código de WordPress es que no necesitas ser un experto en codificación para que funcionen.
Veamos cómo agregar estos fragmentos a su sitio web, paso a paso:
1. Identifica lo que te gustaría lograr
Antes de empezar a añadir fragmentos, ten en cuenta el resultado final. ¿Quieres personalizar tu pie de página o añadir un nuevo widget de WordPress a la barra lateral? Cada uno requiere un código diferente, y conocer tu objetivo te ayudará a encontrar el fragmento adecuado.
Aunque no hay plataformas dedicadas para que los usuarios compartan fragmentos de código de WordPress, puedes optar por un plugin de biblioteca de fragmentos con una base de datos de fragmentos probados y listos para usar.
Estas son algunas opciones:
- WPCode (el más completo, pero caro)
- Códigos cortos de fragmentos (lo mejor para fragmentos repetitivos, como biografías de autores)
- Fragmentos de publicaciones (lo mejor para blogs; asequible)
Usar un complemento es la forma más fácil de agregar fragmentos: no tiene que preocuparse por problemas técnicos y puede solicitar soporte fácilmente si tiene problemas.
Y si no desea ningún complemento adicional, use la búsqueda especial de Google en el siguiente paso.
2. Obtén el fragmento de código y pégalo en tu sitio web
A continuación, obtendrá el fragmento de código que le gustaría usar a través de un complemento o la Búsqueda de Google.
Si usas Google, escribe esto en la barra de búsqueda:
[Type of customization on your website] «Fragmento de código» de WordPress
Por ejemplo, si estuvieras buscando un cuadro de biografía de autor, así es como se vería:
El código que encuentres debe tener un aspecto diferente al de las fuentes normales. Normalmente, el código lleva una fuente monoespaciada (ver más abajo), con una barra doble (//) que indica lo que hace cada línea de código.
Una vez que hayas copiado el código (el «//» no afectará el resultado), es hora de agregarlo a tu sitio web. Si utilizas un plugin de fragmentos de código como Code Snippets Pro, sigue las instrucciones del plugin.
Si lo añades manualmente, todo lo que tienes que hacer es pegar el fragmento en la parte inferior del archivo de functions.php .
Para acceder a este archivo, simplemente diríjase a su panel de control de alojamiento y haga clic en Avanzado.
Esto te llevará a tu cPanel, donde podrás acceder a todos tus archivos.
Desplázate hacia abajo hasta la sección Archivos y haz clic en Administrar archivos.
Una vez que se abra una nueva pestaña, simplemente haga clic en el botón Buscar en la esquina superior derecha y escriba «functions.php«.
A continuación, localice el archivo adecuado, haga doble clic para descargarlo y haga una copia. Dentro de la copia, puedes pegar tu fragmento de código.
Asegúrate de cambiar el nombre del archivo al nombre original exacto, y arrástralo y suéltalo de nuevo en tu administrador de archivos cPanel.
3. Prueba tu fragmento de código
Una vez que hayas añadido tu fragmento a tu sitio web, existe la posibilidad de que no funcione. Por eso te recomendamos que crees una copia de tu archivo de functions.php antes de realizar cambios, de esa manera, tu sitio web siempre podrá volver a su aspecto original.
Además, considere la posibilidad de utilizar un sitio web o entorno de ensayo para probar la función del fragmento y ver cómo se verá en el front-end. Tu sitio web no se actualizará en tiempo real. Y en caso de que el fragmento no funcione correctamente, su experiencia de usuario en tiempo real no se verá afectada.
Si estás editando tu tema, te recomendamos que utilices un tema hijo y que añadas fragmentos de código al archivo de functions.php de tu tema.
Por último, compruebe si hay funcionalidad, problemas de compatibilidad y otros errores o problemas. Es importante validar que el fragmento de código esté libre de errores y haga exactamente lo que pretendía.
4. Analice la velocidad y otras métricas y modifíquelas cuando sea necesario
Ahora que tienes tu fragmento funcionando, querrás asegurarte de que no afecte negativamente a otros aspectos de tu sitio web. Al evaluar los indicadores clave de rendimiento (KPI, por ejemplo, que se encuentran en Google Analytics), sabrás si vale la pena conservar tu fragmento.
Por ejemplo, supervisa estadísticas como la velocidad de carga de la página, la participación de los usuarios y las tasas de conversión: te darán información sobre si tu fragmento de código es una adición valiosa.
Digamos que implementó un fragmento para cambiar el color del botón «Agregar al carrito». Querrá realizar un seguimiento de cómo esto afecta sus conversiones de ventas.
El cambio de color podría hacer que el botón sea más atractivo visualmente y evidente, lo que podría aumentar las tasas de conversión. O podría convertirse en una distracción, bajando las tarifas.
Por último, es esencial realizar un seguimiento de su velocidad, ya que es un factor importante para obtener una clasificación alta en Google. Si observas caídas constantes en la velocidad de tu sitio web, es posible que desees eliminar el fragmento.
Los mejores fragmentos de código para WordPress
- Cuadro de biografía de autor personalizado
- Página de inicio de sesión personalizada
- Migas de pan SEO
- Desactivar comentarios en publicaciones específicas
- Personaliza el panel de control para los clientes
- Añade iconos de redes sociales
Ahora, profundicemos en algunos de los fragmentos de código de WordPress más útiles para agregar nuevas funcionalidades.
Cuadro de biografía de autor personalizado
Un cuadro de biografía de autor personalizado puede enriquecer el contenido de su publicación de blog al proporcionar contexto sobre el escritor. Si bien puede usar complementos como Simple Author Box, un fragmento de código liviano puede lograr el mismo resultado sin ninguna hinchazón adicional.
Este fragmento agrega una sección de biografía del autor debajo de cada tipo de publicación personalizada, que se puede personalizar para incluir enlaces a redes sociales, una breve biografía y una imagen del autor.
Obtén el fragmento (con tutorial).
Página de inicio de sesión personalizada
Su página de inicio de sesión es la puerta de entrada a su sitio web y, a menudo, es una de las primeras impresiones que los clientes y los miembros del equipo obtienen de su marca. Plugins como LoginPress modifican la pantalla de inicio de sesión, pero un fragmento de código puede rediseñar la página para que coincida con tu marca.
Cambia el logotipo, el fondo y los estilos de formulario para ofrecer una experiencia de marca cohesiva desde el principio.
Migas de pan SEO
La navegación de migas de pan no solo es útil para sus visitantes, sino que también mejora su SEO al ayudar a los motores de búsqueda a comprender la estructura de su sitio web. Si quieres que un plugin lo haga por ti, Yoast SEO puede mostrar migas de pan junto con otras funciones que mejoran el SEO.
Pero también puede agregar un fragmento para mostrar un rastro de migas de pan, eliminando la necesidad de otro complemento.
Obtén el código (con tutorial).
Desactivar comentarios en publicaciones específicas
Si bien los comentarios son excelentes para la participación, hay ocasiones en las que es posible que desee deshabilitarlos en publicaciones particulares. Sí, puede usar un complemento como Disable Comments, pero solo unas pocas líneas de código pueden manejar el trabajo.
Con un fragmento de código dirigido, puede especificar qué publicaciones o páginas no deben mostrar una sección de comentarios, lo que le brinda un control total sin la sobrecarga de un complemento.
Obtén el código (con tutorial).
Personaliza el panel de control para los clientes
El panel de control de WordPress sirve como centro de control para administrar contenido, temas, plantillas y complementos. Sin embargo, su configuración predeterminada puede resultar abrumadora para otros usuarios de su cuenta, como asistentes virtuales, atención al cliente o contabilidad.
Con un fragmento de código, puede eliminar o agregar widgets y personalizar el panel para que sea tan simple o complejo como sea necesario para su equipo.
Obtén el código (con tutorial).
Añade iconos de redes sociales
Un plugin como Social Media Share Buttons & Sharing Icons puede añadir iconos relevantes, pero puede venir con funciones que no necesitas. Y en ese caso, el uso de un fragmento de código puede agregar íconos sin campanas y silbatos adicionales. Además, puedes especificar si quieres que tus iconos estén en el encabezado, el pie de página o la barra lateral.
Obtén el código (con tutorial).
Posibles errores y cómo gestionarlos
Si bien los fragmentos de código de WordPress son excelentes herramientas, vienen con su propio conjunto de desafíos y riesgos. Los errores ocurren de varias formas, pero por lo general sabrá que algo está mal cuando una función no se materializa, su sitio web se vuelve inaccesible o encuentra un mensaje de error explícito.
A continuación, te explicamos cómo manejar seis de los errores más comunes:
Error de sintaxis
Un error de sintaxis suele surgir de un código incorrecto o incompleto. Puede ser un punto y coma faltante, un corchete adicional o incluso un nombre de función mal escrito. Cuando esto sucede, WordPress puede mostrar un mensaje de error directamente o su sitio web puede volverse inaccesible.
Solución:
Para resolver este problema, deberá acceder a su archivo functions.php a través de su cPanel o panel de control de alojamiento. A continuación, localiza el fragmento que está causando el problema, corrige el error y vuelve a cargar tu sitio web con un archivo actualizado.
Consejo profesional: Valida siempre la sintaxis de tu código antes de implementarlo para evitar este problema utilizando un validador de código como FreeFormatter.
Conflicto con los plugins
A veces, su nuevo fragmento de código puede chocar con los complementos de su sitio web, lo que hace que uno o ambos funcionen mal. A menudo, se debe a que el complemento y el fragmento intentan modificar o controlar la misma función.
Solución:
La forma más sencilla de identificar qué plugin está funcionando mal es desactivar todos los plugins, y luego reactivar cada uno, probando cada vez para ver cuándo vuelve a surgir el problema. Una vez identificado, puede buscar un complemento alternativo o modificar el fragmento para que ya no entre en conflicto con el complemento.
El tema se interrumpe después de agregar un fragmento
De vez en cuando, insertar un fragmento puede hacer que tu tema de WordPress se rompa o se comporte de forma impredecible. Esto sucede cuando el fragmento de código entra en conflicto con el código en el que se basa el tema.
Solución:
Desafortunadamente, debes eliminar inmediatamente el fragmento de código, ya que no quieres que esto afecte a tu UX. Para evitar este problema en el futuro, pruebe siempre los nuevos fragmentos en una versión de prueba de su sitio web antes de implementarlos en el sitio web activo.
Errores de permisos
Los errores de permisos se producen cuando el permiso de archivo o carpeta de tu sitio de WordPress está configurado incorrectamente. Agregar un fragmento de código en estas condiciones puede resultar en un error o incluso hacer que su sitio web sea más vulnerable a los riesgos de seguridad.
Solución:
Para resolver problemas de permisos, acceda al directorio raíz de su sitio web utilizando su administrador de archivos cPanel. Establezca los permisos de carpeta en 755 y los permisos de archivo en 644. Si no te sientes cómodo haciendo esto tú mismo, considera pedirle ayuda a tu proveedor de alojamiento.
El fragmento no se ejecuta
En algunos casos, es posible que un fragmento simplemente no se ejecute. Esto podría deberse a una ubicación incorrecta, conflictos con otro código o código defectuoso.
Solución:
Empieza por confirmar que has colocado el fragmento en la ubicación correcta dentro de tu archivo functions.php . Puede encontrar la ubicación correcta realizando una búsqueda rápida en Google o YouTube para ver si otras personas han utilizado el mismo fragmento.
Si la ubicación del archivo es correcta, soluciona el problema eliminando temporalmente otros fragmentos o complementos agregados recientemente para ver si hay un conflicto. Y si eso no funciona, intente pasar su fragmento a través de un validador de código para ver si hay errores.
Problemas de seguridad
Los problemas de seguridad son el resultado de fragmentos mal codificados, por lo que siempre es necesario obtenerlos de fuentes acreditadas. Cualquier código adicional que se agregue a un sitio web introduce más vulnerabilidades, pero si se hace de la manera correcta, no traerá problemas de seguridad.
Solución:
De nuevo, intenta obtener fragmentos de fuentes verificables. Además, es posible que desee ejecutar el código a través de una herramienta de análisis de seguridad para detectar posibles vulnerabilidades. Y para estar seguro, haga una copia de seguridad de su sitio web o archivo functions.php para asegurarse de que sus datos estén seguros.
Reflexiones finales: La guía definitiva de fragmentos de código de WordPress: 6 ejemplos
Los fragmentos de código ofrecen una forma poderosa de mejorar y personalizar su sitio web, al mismo tiempo que mejora la experiencia de usuario. Sin embargo, las dificultades de introducir código, especialmente sin un plugin, pueden parecer abrumadoras.
Afortunadamente, los proveedores de alojamiento de WordPress como Bluehost simplifican este proceso al ofrecer planes que vienen automáticamente con entornos de prueba, lo que le permite probar fragmentos antes de publicarlos.
Y si alguna vez te quedas atascado, el servicio ProDesign Live de Bluehost ofrece soporte en tiempo real para ayudarte a superar cualquier desafío.
Escriba un comentario