Fragmentos de código: plugin php WordPress

Todos en algún momento buscamos agregar mejoras a nuestro sitio por medio de código y el mejor plugin para hacerlo es fragmentos de código. Este plugin cuenta con diferentes características muy poderosas, desde el cuidado el sitio web como tal, hasta la interfaz sencilla y fácil de utilizar.

En el mercado, existen cientos de plugins tanto gratuitos como de pago que permiten añadir fragmentos de código html, css o javascript. Sin contar con los mismos temas que permiten hacerlo en la sección «personalizar». Pero puede que esto no sea lo mejor, ya que la prueba y error del código que queremos agregar necesita un poco mas de seguridad y facilidad al momento de interactuar con nuestro sitio.

Para conocer un poco más a fondo sobre este plugin, vamos a dividirlo en 3 partes: qué es, por qué usarlo y características especiales. Sin más preámbulo, lee el post y no olvides dejar tu opinión!

¿Qué es?

Por definición del autor: Code Snippets es una forma fácil, limpia y sencilla de ejecutar fragmentos de código PHP en su sitio. Elimina la necesidad de agregar fragmentos personalizados al archivo functions.php de su tema.

¿Por qué usarlo?

Para saber por qué usarlo frente a los demás debemos conocer algunas características que son muy importantes para nuestro sitio.

Seguridad

Uno de los puntos principales para escoger este plugin como preferencia es la seguridad. Al momento en que ingresas un fragmento de código en el plugin y hacer click en guardar o activar, en dado caso que el código esté mal o sea malicioso para la estructura del sitio, no permite activarlo.

Antes de conocer esta función, tenía que testear mis códigos en el archivo functions.php y aunque nunca llegue a dañar el sitio, si supe de varios que por este mismo procedimiento, era un verdadero problema recuperar el orden.

Con esta función, existe una capa de seguridad para nuestro sitio frente a cualquier modificación que vamos a agregar.

Interfaz

La interfaz es algo genial de este plugin, por que nos permite ver el listado de todos los fragmentos de código que tenemos en nuestro sitio y si queremos o no activarlos, solo tenemos que deslizar o hacer click en el botón principal del fragmento.

Entiendo que para muchos esto no tenga sentido, pero en lo personal, me gusta el orden y es necesario tanto para la vida como para el desarrollo web, y aunque no sea programación de alto nivel, el orden de los complementos debe mantenerse fuera del tema principal.

Veo constantemente a muchos desarrolladores agregar los complementos CSS o HTML directamente en la pestaña de edición del tema, pero esto es un problema importante a futuro: si cambiamos el tema, si el tema se actualiza y causa errores de compatibilidad. En lo personal, es mejor mantener los fragmentos de código HTML, CSS, Javascript y más, fuera del tema principal, por medio de este plugin.

Características especiales

Título y descripción

Volviendo un poco al tema del orden en el desarrollo web, al agregar un fragmento de código php, puedes indicarle un nombre y una descripción. Para quienes nos gusta la modificación a gran escala, estas características adicionales son muy importantes, no solamente escribir el código uno bajo el otro.

Ubicación de acción

La ubicación del fragmento de código es demasiado importante ya que puede acelerar o ralentizar la carga de un sitio. Para esto, podemos seleccionar el lugar donde queremos que el fragmento se active, sin necesidad de afectar las demás páginas.

Por ejemplo, si quiero agregar el código de seguimiento de Google analytics (que debe estar en la cabecera de todo el sitio) puedo indicarle al sitio donde quiero que esté. Para hacerlo, solo sigue estos pasos:

• Ingresa al plugin
• Crea o edita un fragmento existente.
• Dentro, bajo el cuadro de código podrás ver las posibles ubicaciones de acción para el fragmento.
• Selecciona la ubicación y listo.

Etiquetas

Por último el plugin añade una categorización de los fragmentos que creamos, por medio de las etiquetas. Abajo de la selección de ubicación, puedes ver la barra de etiquetas, donde puedes seleccionar o crear una para el fragmento en edición.

Estructuras de código

Para poder utilizar fragmentos de código HTML o CSS ya sea en «head», «body» o «footer», aquí te comparto unas líneas que solo debes copiar y pegar en el plugin, junto con el código que desees agregar.

HTML

A continuación puedes ver el fragmento de código HTML para el plugin. Copia y pega tu código justo debajo de la línea indicada y para terminar, selecciona la ubicación donde quieres que esté el código: cabecera, cuerpo o pie de página, y listo!

Cabecera

add_action( 'wp_head', function () { ?>

	<!-- Ingresa aquí el código HTML de la cabecera -->

<?php } );

Pie de página

add_action( 'wp_footer', function () { ?>

	<!-- Ingresa aquí el código HTML del pie de página -->

<?php } );

Cuerpo

add_action( 'wp_body_open', function () { ?>

	<!-- Ingresa aquí el código HTML del cuerpo -->

<?php } );

CSS

Con el código CSS funciona igual, en cuanto a la ubicación, solo debes cambiar la la palabra donde quieres que este: head, footer, body, al igual que en HTML.

add_action( 'wp_head', function () { ?>
<style>

	/*Ingresa aquí el código CSS */
	
</style>
<?php } );

Contenido de ayuda

Comparto contigo este video para que puedas ver un poco más a fondo el plugin en funcionamiento. No olvides dar like y suscribirte!

Producto sugerido

Si al igual que yo, pasas bastante tiempo en tu pc, es importante tener excelentes herramientas para que, tanto tu trabajo como juego o streaming sea de la mejor calidad.

Para esto, quiero compartirte uno de los mejores routers gaming, el cual definitivamente mejorará tu conexión y como lo sabemos, como desarrolladores, es esencial.

Conclusión

Sin duda nuestro sitio web va a necesitar modificaciones de todo tipo ya que el mundo digital avanza rápidamente y para dar cada paso de forma segura es importante tener este plugin, para ayudarnos a hacerlo de forma segura.