Muchos sitios web de WordPress usan código personalizado o funciones en algún lugar dentro de sus publicaciones y páginas. La plataforma facilita agregar este código, pero si va a reutilizar fragmentos en todo su sitio, puede ser una molestia agregar el código manualmente siempre que lo necesite.
En lugar de tener que insertar fragmentos de código a mano cada vez que se necesitan, tiene más sentido organizarlos y guardarlos mediante complementos. En este artículo, hablaremos sobre los beneficios de mantener sus fragmentos de código organizados y luego le mostraremos cómo hacerlo usando el complemento Code Snippets Extended en dos pasos. ¡Pongámonos a trabajar!
Incluso si no es un desarrollador, es probable que tenga que agregar algún código a su sitio web manualmente.
Muchos usuarios de WordPress agregan fragmentos de código personalizados a sus publicaciones y páginas. Independientemente de su nicho y tamaño, hay muchas situaciones en las que deberá agregar un pequeño código a su sitio. Tome Google Adsense o Facebook Pixel , por ejemplo, ambos requieren que agregue algunas líneas de JavaScript a su sitio web antes de que puedan funcionar. Muchos complementos de WordPress también requieren que use códigos cortos, por lo que las posibilidades de agregar un código personalizado a su sitio web son altas.
Dado esto, es una excelente idea encontrar una manera de guardar todos esos fragmentos de código que está utilizando en su sitio. Este es el por qué:
- Puede hacer referencia a su código siempre que sea necesario. A veces, puede olvidar qué líneas de código personalizado agregó a sus archivos, por lo que vale la pena organizar sus fragmentos usando una biblioteca.
- Podrá reutilizar sus fragmentos de código más fácilmente. Si necesita usar el mismo código varias veces, tiene sentido almacenarlo para su uso posterior.
Por supuesto, podría simplemente guardar esos fragmentos de código usando archivos de texto regulares en su computadora o dentro de la nube. Sin embargo, usar el complemento de WordPress correcto puede brindarle una forma más adecuada de almacenarlos dentro de su sitio. De esa manera, sabrá qué código ha agregado a cada sitio web específico con el que trabaja.
Presentamos el complemento extendido Code Snippets
El complemento Code Snippets Extended es una herramienta interesante que le permite configurar una biblioteca de código simple dentro de WordPress. Le permite guardar un código personalizado, identificarlo con el nombre que desee y luego agregarlo a cualquiera de sus publicaciones y páginas con unos pocos clics.
Además, el complemento también le permite obtener una vista previa de los efectos de sus fragmentos de código, siempre que sean JavaScript o CSS simples. También es compatible con PHP, pero esos fragmentos no suelen mostrarse tan bien con la funcionalidad de vista previa de la herramienta.
Si bien el complemento funciona bien con Divi Builder en general, hay un problema que requiere una solución. De forma predeterminada, la herramienta agrega un nuevo botón al editor, que le permite agregar cualquiera de los fragmentos de su biblioteca a su publicación o página. Sin embargo, el botón desaparece al cambiar a Divi Builder. Sin embargo, la solución es simple y la exploraremos más en un minuto.
Características clave:
- Guarde todos sus fragmentos de código personalizados en una biblioteca centralizada dentro de su tablero.
- Identifique cada fragmento con un nombre único.
- Asigne códigos abreviados fáciles de usar a cada elemento de su biblioteca.
- Agregue fragmentos a sus publicaciones y páginas usando una nueva opción en el editor de WordPress , sin tener que tocar el código.
Precio: GRATIS | Más información
Cómo crear una biblioteca de fragmentos de publicaciones para usar en sus publicaciones y páginas (en 2 pasos)
Antes de comenzar, deberá instalar y activar el complemento. Una vez que estés listo, ¡salta al paso número uno!
Paso #1: Agregue nuevos fragmentos a su biblioteca
Después de instalar el complemento, verá una nueva pestaña llamada Snippets en su panel de WordPress. Haga clic en él y busque la opción Agregar fragmentos . En la siguiente pantalla, podrá establecer un nombre para identificar su código dentro de la biblioteca, así como cargar cualquier archivo multimedia que sea necesario para que se ejecute el código:
Tenga en cuenta que el código seguirá funcionando incluso si no carga los medios necesarios desde esta página, siempre que esté en su biblioteca. Esta característica solo está allí para que pueda obtener una vista previa de los efectos de su código usando el botón Probar en la parte inferior de la página.
Continuando, también verá un editor en el que escribirá su código CSS, JavaScript, PHP y jQuery. Sin embargo, deberá estar envuelto en etiquetas específicas para cada idioma. Aquí hay algunos ejemplos rápidos para referencia:
|
01
|
<style>CSS goes between these tags.</style> |
|
01
02
03
04
05
06
07
08
|
<?php PHP tags, on the other hand, are different, so keep that in mind. ?><script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script><script type="text/javascript"> jQuery(function($) {$(document).ready(function(){// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.});});</script> |
Puede hacer referencia a todas estas etiquetas debajo del editor cada vez que agregue un nuevo fragmento, y siempre que recuerde que cada idioma requiere uno diferente, no necesita memorizarlos. Además, puede usar varios idiomas dentro del mismo fragmento; solo asegúrese de envolverlos con sus respectivas etiquetas.
Una vez que haya terminado de escribir o pegar su código, use el botón Guardar fragmento en la parte inferior de la página y aparecerá en la pestaña Fragmentos > Fragmentos en su panel de control de WordPress:
Ahora, todo lo que queda es probar su nuevo fragmento utilizando tanto el editor de WordPress como el Divi Builder.
Paso #2: inserte sus fragmentos en sus publicaciones y páginas de Divi
Si no está utilizando Divi Builder , puede abrir cualquiera de sus publicaciones o páginas utilizando el editor de WordPress normal. En la parte superior, verá un nuevo botón Insertar fragmento :
Al hacer clic en él, aparecerá una superposición que muestra todos los elementos de su biblioteca, y puede seleccionar el que desee:
Ahora el complemento agregará el código al editor, y listo, es así de simple. Sin embargo, si está utilizando Divi Builder, no podrá acceder a esta opción. La forma más sencilla de solucionar este problema es abrir la pestaña Fragmentos de código de su tablero en una nueva ventana y copiar el código abreviado correspondiente para el código que desea agregar. Una vez que lo tenga, regrese a Divi Builder y agregue un módulo de código a la página en la que está trabajando:
Una vez que esté dentro, pegue su código abreviado dentro del campo Contenido y guarde sus cambios:
Ahora, su fragmento funcionará como de costumbre. El uso de Divi Builder agrega un paso al proceso, pero aún puede almacenar todos sus fragmentos de código en una biblioteca interna a la que es fácil acceder.
Conclusión
Si eres como nosotros, valoras la eficiencia en todos tus proyectos. Es posible agregar el mismo código a varias páginas o publicaciones a mano, pero no es un buen uso de su tiempo. En cambio, es mucho mejor probar el código una vez, guardarlo en su biblioteca y luego guardarlo en su bolsillo trasero virtual para cuando lo necesite.
El complemento Code Snippets Extended le permite hacer precisamente eso. Simplemente instálalo y sigue estos dos pasos:
- Agregue nuevos fragmentos a su biblioteca.
- Inserta tus fragmentos en tus publicaciones y páginas de Divi.
¿Tiene alguna pregunta sobre cómo agregar fragmentos de código a su sitio web Divi? ¡Pregunte en la sección de comentarios a continuación!
Imagen en miniatura del artículo de Andrii Bezvershenko / shutterstock.com.