Cómo crear una biblioteca de fragmentos de publicaciones para usar en sus publicaciones y páginas

Muchos sitios web de WordPress usan códigos o funciones personalizados en algún lugar dentro de sus publicaciones y páginas. La plataforma facilita la adición de este código, pero si va a reutilizar fragmentos en todo su sitio, puede ser complicado agregar código manualmente siempre que lo necesite.

En lugar de tener que insertar los 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 organizados sus fragmentos de código y luego le mostraremos cómo hacerlo utilizando el complemento Code Snippets Extended en dos pasos. ¡Pongámonos a trabajar!

Por qué debería organizar sus fragmentos de código

Incluso si no eres un desarrollador, es probable que tengas que agregar algún código a tu 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 necesitará agregar un pequeño código a su sitio. Tome Google Adsense o Facebook Pixel, por ejemplo, que 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 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 guardar esos fragmentos de código usando archivos de texto normales en su computadora o dentro de la nube. Sin embargo, usar el complemento de WordPress adecuado puede proporcionarle 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 de fragmentos de código

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 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 función 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 al Divi Builder. Sin embargo, la solución es simple y la exploraremos más en un minuto.

Características principales:

• Guarde todos sus fragmentos de código personalizados en una biblioteca centralizada dentro de su panel.
• Identifique cada fragmento con un nombre único.
• Asigne códigos cortos fáciles de usar a cada elemento de su biblioteca.
• Agregue fragmentos a sus publicaciones y páginas utilizando 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é listo, ¡salte al paso número uno!

Paso n. ° 1: agregue nuevos fragmentos a su biblioteca

Después de instalar el complemento, verá una nueva pestaña llamada Fragmentos 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 función solo está disponible para que pueda obtener una vista previa de los efectos de su código utilizando el botón Probar en la parte inferior de la página.

Continuando, también verá un editor en el que ingresará su código CSS, JavaScript, PHP y jQuery. Sin embargo, será necesario incluir etiquetas específicas para cada idioma. A continuación, se muestran algunos ejemplos rápidos de referencia:

<style>CSS goes between these tags.</style>

<?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 es necesario que los memorice. Además, puede usar varios idiomas dentro del mismo fragmento; solo asegúrese de ajustarlos con sus etiquetas respectivas.

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 WordPress:

Ahora, todo lo que queda es probar su nuevo fragmento usando el editor de WordPress y Divi Builder.

Paso # 2: Inserte sus fragmentos en sus publicaciones y páginas Divi

Si no está utilizando Divi Builder, puede abrir cualquiera de sus publicaciones o páginas con el editor normal de WordPress. 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 ya está listo, es así de simple. Sin embargo, si está utilizando Divi Builder, no podrá acceder a esta opción. La forma más fácil de solucionar este problema es abrir la pestaña Fragmentos de su panel en una nueva ventana y copiar el código abreviado correspondiente al 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 corto en el 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álelo y siga estos dos pasos:

1. Agrega nuevos fragmentos a tu biblioteca.
2. Inserte sus fragmentos en sus 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.