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!
Contenido
¿Qué es?
Cómo crear modal react: paso a paso
Crear modales en React es fundamental para mantener a los usuarios en el sitio web y facilitar conve…
Inspeccionar desde móvil IOS o Android: chrome y safari
Hacer pruebas en nuestro proyecto o desarrollo web es clave para llevarlo acabo correctamente y para…
Cómo implementar Sepolia: Red de prueba de Ethereum
Antes de implementar un contrato en una red de mainnet como Ethereum debemos primero saber cómo impl…
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.
ASUS ROG Rapture GT-AC5300 – Router Gaming Tri-Banda con 8 puertos Gigabit (2 puertos gaming, Radar Wifi, Gaming APP, Link aggregation, adaptive QoS, compatible con AiMesh wifi)
- Redes bajo control: ROG Gaming Center incluye controles de gaming como el retardo, las estadísticas de tráfico y las conexiones del dispositivo
- 3 formas de acelerar los juegos: disfruta de una conexión más rápida y conéctate a servidores de gaming
- Primera línea de seguridad: neutraliza los ataques de Internet antes de que alcancen tu red
- CPU de ordenador: cuatro núcleos con una mayor capacidad de respuesta
- Equipado para competir: Wifi 802.11ac Tri-Band, 8 puertos Gigabit LAN para conexiones por cable y 2 USB 3.0 de alta velocidad
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.
