Hoy por hoy es casi imprescindible saber gestionar esos trocitos de código que a todos y todas nos gustan de una manera eficiente y limpia y para ello, entre otras formas, podemos utilizar el fantástico plugin Code Snippets.

Pero vamos por partes…

¿Qué son los Code Snippets?

Para entendernos bien, los Code Snippets no son más que trocitos de código que realizan una función específica y que podemos añadir al código de nuestro WordPress sin tener que recurrir o hacer un plugin para ello.

Personalmente prefiero hacer un plugin pero reconozco que no a todo el mundo le apetece hacer plugins de cada cosa e incluso personas que no tiene porqué saber cómo se hace run plugin.

Además, sobra decir que es más rápido que hacer un plugin.

A continuación comentaré varias opciones de que disponemos para integrar estos trocitos de código en nuestra instalación de WordPress:

Añadirlos en el fichero functions.php

Puedo equivocarme pero creo que este es el método más utilizado a día de hoy. Que no por eso es el mejor, ni mucho menos.

Este método consiste en añadir, generalmente al final del fichero «functions.php» de nuestro tema, el código en cuestión, es decir el snippet.

Supongamos que queremos añadir el siguiente snippet que lo que hace es cambiar el texto del botón «Añadir al carrito» en WooCommerce.

En las dos imágenes siguientes podéis ver a qué botón y a qué texto me refiero:

WC-Snippet-cambiar-texto-Añadir-al-carrito-01

WC-Snippet-cambiar-texto-Añadir-al-carrito-03

Ahora lo que haremos será añadir el siguiente código al final del fichero functions.php de nuestro tema.

add_filter( 'woocommerce_product_add_to_cart_text', 'oaf_wc_change_add_to_cart_text' );

add_filter( 'woocommerce_product_single_add_to_cart_text', 'oaf_wc_change_add_to_cart_text' );

function oaf_wc_change_add_to_cart_text() {`

return __('¡Comprar Ya!', 'woocommerce');
}

 

Para este tutorial no hace falta que entendamos el código, solo que cambia el texto del botón «Añadir al carrito» por «¡Comprar Ya!«.

Tras añadir el código anterior al fichero functions.php como comentábamos, observamos el botón en cuestión:

cambiar texto boton añadir al carrito

cambiar texto boton añadir al carrito

Aunque modificar el fichero functions.php de nuestro tema puede ser la manera más rápida de añadir código a nuestra web, no es lo más aconsejable. Entre otras cosas porque cuando cambiemos de tema, el fichero functions.php será otro y perderemos todo lo que hayamos añadido a este.

Crear un plugin

Personalmente es la opción que prefiero.

También entiendo que puede ser un poco pesado tener que crear un plugin por cada snippet que queremos añadir pero también es una forma de aprender sobre este asunto.

Ahora no voy a explicar el proceso de creación de un plugin porque ya lo haremos más adelante en otros tutoriales e incluso en un curso que tengo pensado realizar.

Solo hace falta que sepamos que cuando creamos un plugin, podemos activarlo y desactivarlo desde la pantalla de plugins de la administración de nuestro WordPress.

Utilizar el plugin Code Snippets

El plugin Code Snippets nos permite precisamente eso, añadir y gestionar nuestros trocitos de código para que los tengamos que añadir al functions.php.

Plugin code snippets wordpress - dinapyme

Una vez instalado en WordPress, podemos gestionar los snippets desde la sección «Snippets» de la administración:

Opciones plugin code snippets wordpress - dinapyme

Añadir un snippet

Para que veamos el funcionamiento básico de este plugin, vamos a añadir el snippet que hemos utilizado antes y para ello seleccionamos la opción «Add new«.

wordpress code snippets plugin 01 dinapyme

En la pantalla anterior rellenamos los campos, sobre todo el primero que es donde irá el código.

Posteriormente podemos añadirle una descripción y una etiqueta.

Y como última opción podemos indicar que se ejecute siempre o sólo en la administración en el frontend de la web.

Ya que es un código que sólo afecta al front de la web, he seleccionado esta última opción.

wordpress code snippets plugin 02 dinapyme

Ya está creado aunque todavía no lo hemos activado, lo haremos en breve.

Gestión de snippets

De la misma forma que gestionamos los plugins en su apartado correspondiente de la administración, también disponemos de un apartado para gestionar los snippets: manage.

wordpress code snippets plugin 03 dinapyme

Como podemos ver en la pantalla anterior, se parece bastante al apartado de gestión de plugins.

Por el momento sólo tenemos uno pero a medida que añadamos más, se agradece mucho este entorno tan amigable.

Para activarlo, lo haremos de manera similar a como lo hacemos con los plugins. Nos posicionamos sobre el texto del título del snippet y seleccionamos «Activate»

wordpress code snippets plugin 04 dinapyme

Una vez hecho esto, nuestro trocito de código ya está funcionando correctamente como podemos ver a continuación:

wordpress code snippets plugin 05 dinapyme

Perfecto!

Ya vemos lo fácil que es añadir y gestionar snippets con este fabuloso plugin.

El Video Tutorial

A continuación os dejo un video tutorial sobre esto.

Conclusión

Hemos visto las diferentes formas con las que podemos añadir trozos de código en nuestro WordPress.

También he comentado que la opción de modificar el fichero functions.php no es muy aconsejable.

Lo ideal es crear un plugin para ello pero en su defecto, el plugin code snippets es una herramienta ideal que nos permite añadir y gestionar nuestros códigos.

Hay algunas cosas más que podemos hacer con este plugin y que son interesantes como exportar e importar snippets.

Si os parece interesante que dedique una serie o un curso a este plugin, me lo podéis hacer saber y lo tendré en cuenta.

Espero que os sea de utilidad toda esta información y cualquier duda, ya sabéis dónde estoy.

Saludos

Autor: Oscar Abad Folgueira

Programador y desarrollador WordPress.