Cómo crear su propio plugin para personalizar y hacer todos los ajustes de WordPress, WooCommerce y Storefront

Hasta el usuario (o cliente) más sobrio y desentendido tiene alguna exigencia de personalización o ajuste de su sitio web. Seguramente la respuesta inmediata será abrir WordPress e instalar otros 27 plugins que seguramente ralentizarán su sitio, que en algunos casos abrirán brechas de seguridad y que muchas veces implican el pago de licencias o subscripciones.

WordPress y WooCommerce ofrecen potentes alternativas que permiten implementar personalizaciones y cambios con unas pocas líneas de código, sin tener que instalar múltiples plugins y sobretodo, sin tener que pagar un centavo. Pero la dicha de lo que es Gratis se desdibuja cuando aparece una cosa como esta:

add_action( 'get_header', 'win_remove_storefront_sidebar' );
 
function win_remove_storefront_sidebar() {
   if ( is_product() ) {
      remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
   }
}

Las preguntas inmediatas son ¿Dónde pongo eso? ¿Eso sí es seguro? ¿Y si me daña el sitio web?. A continuación trataremos de explicar una forma simple y amigable cómo poner todos los ajustes y personalizaciones en un plugin, de manera que no se pierdan y puedan actualizarse cada vez que sea necesario.

¿Por qué utilizar un plugin para personalizar mi sitio?

Lo primero que debe decirse es que no es recomendable modificar directamente los archivos de WordPress ni de ningún plugin o theme. Aunque hay muchas razones para esto, creo que bastará con decir que dichos cambios se esfumarán con la siguiente actualización, lo que hará que tenga que repetirse el proceso.

Una alternativa muy difundida es crear un Tema Hijo, sobre el que se pueda modificar y sobreescribir estilos, archivos y funcionalidades, lo cual es absolutamente válido.

Sin embargo, esta vez nos concentraremos en cómo hacerlo desde un plugin, contando que esto va a permitirle reunir un montón de ajustes y personalizaciones en un solo lugar, pudiendo aprovechar la robustez y estructura que puede ofrecer un plugin.

Descargar el plugin vacío

Para esto hemos construido un pequeño proyecto en GitHub con todos los archivos básicos necesarios para un plugin, el cuál pueden encontrar en el siguiente link:

• https://github.com/webIntegral/wi_ajustes

Por favor siéntanse libres de husmear entre los archivos con confianza y leer los comentarios en español, que explican qué hace cada archivo y cada parte del código. Pueden estar tranquilos de que no se trata de software malicioso. Para descargar el plugin, pueden ingresar en la barra derecha en la parte que dice Releases. Si no lo encuentran, aquí está el vínculo directo

• https://github.com/webIntegral/wi_ajustes/releases

Aquí podrán descargar las diferentes versiones del plugin (ahorita solo hay una), haciendo clic en donde indica la imagen.

Cómo abrir los archivos del plugin para hacer cambios

Antes que nada, deberían poner el archivo .zip que descargaron en una carpeta donde puedan descomprimirlo y trabajar con el. En mi caso lo pondré en la carpeta D:/sitio-web/. Dependiendo del programa que usen, al descomprimirlo quedará una carpeta dentro de la otra. Deberán sacarla para que quede de la siguiente manera. No olviden renombrar la carpeta del plugin para que se llame wi-ajustes, sin números de versiones ni nada:

Si no tienen con que descomprimir, les recomiendo utilizar 7-Zip, que es un pequeño programa que pueden descargar de su página oficial https://www.7-zip.org/ . Si no saben cómo instalarlo o cómo descomprimir con 7-Zip, deberían de comenzar a cuestionarse si esta sí es su carrera (Más luego haré un tutorial para esos).

Ya que tienen los archivos en su lugar, necesitarán un editor de texto plano para poder editar los diferentes archivos del plugin. Si bien todo se puede hacer en el blog de notas (notepad), no creo que esto sea una herramienta suficientemente poderosa para mis bien capacitados discipulos. Mi recomendación es instalar un editor más apropiado:

Notepad++, que es similar al blog de notas, pero con funcionalidades más avanzadas. Pueden descargarlo en https://notepad-plus-plus.org/downloads/ (hacer clic en la última versión y en el botón download).

Visual Studio Code, que hace exactamente lo mismo, solo que ya es un editor de código completo, con navegador de archivos y algunas funcionalidades más avanzadas. Pueden descargarlo aquí https://code.visualstudio.com/download.

Voy a asumir que eligieron Visual Studio Code y que ahora van a abrir su proyecto, así que les pondré un video que los guiará por el asunto y que además tiene un acento españelete que me flipa, Tío.

La carpeta del plugin ya abierta en visual studio sería una cosa como esto:

Entonces ya tienen en su poder un plugin con todo lo que necesitan para hacer cambios en el sitio:

Qué hay dentro del plugin y cómo se hacen los cambios

Lo primero que hay que ver es el archivo wi-ajustes.php. Este archivo es el encargado de inicializar el plugin y todos sus componentes. Si lo miran por dentro se encontrarán que está todo documentado y que trata de ser muy explicativo. Sin embargo aquí no haremos ninguno de los cambios. Para eso utilizaremos otros archivos:

functions.php es un archivo que nos permite poner fragmentos de código que modifiquen el comportamiento de WordPress o de WooCommerce. Para explicarlo de una manera muy simple, estas plataformas cuentan con «Ganchos» (en realidad se llaman hooks) de los que uno puede pegarse para agregar nuevas funcionalidades y para modificar o incluso eliminar funcionalidades existentes. Y aunque hay algunas modificaciones que pueden llegar a ser bastante complejas, hay muchas para las que bastan unas cuantas líneas de código.

El ejemplo a continuación muestra cómo se pueden agregar dos fragmentos de código a el archivo functions.php para que se elimine el título «Inicio» de la página principal de un sitio web construido con WordPress + WooCommerce + Storefront. (Ver el ejemplo completo en https://webintegral.com.co/blog/como-quitar-el-titulo-de-la-pagina-de-inicio-homepage-de-storefront-woocommerce/)

<?php
/**
 * Poner aquí los snippets de código php
 */

/**
 * Quitar el título de la plantilla de la página de inicio de Storefront
 */
add_action( 'wp', 'quitar_titulo_plantilla_inicio_storefront' );
function quitar_titulo_plantilla_inicio_storefront() {
  remove_action( 'storefront_homepage', 'storefront_homepage_header', 10 );
}

/**
 * Quitar el título de la plantilla default de la página de inicio de Storefront
 */
add_action( 'wp', 'quitar_titulo_plantilla_inicio_default_storefront' );
function quitar_titulo_plantilla_inicio_default_storefront() {
   if ( is_front_page() ) remove_action( 'storefront_page', 'storefront_page_header', 10 );
}

Puede notarse que cada fragmento (está en PHP y) tiene una parte que comienza por un add_action, que es la encargada de definir de qué gancho se va a pegar para ejecutar cierta funcionalidad, y otra que comienza por function, que es donde se define la funcionalidad. Existen muchos fragmentos de código como este para hacer modificaciones como mover de posición un menú o una columna, quitar el buscador, etc. Muchos de ellos están disponibles en blogs cómo este en la internet.

Antes de continuar, por favor guardar los cambios con el comando Ctrl + s.

De manera similar, el plugin también cuenta con un archivo style.css, donde podrán hacer cambios en los estilos del sitio. El css es un lenguaje que permite declarar los estilos que van a tener nuestros elementos. Por ejemplo, a continuación agregaremos unos estilos que cambiarán el color del fondo del sitio y de los títulos:

/** Agregar aquí los ajustes de estilo css */

/** Cambia el color de los titulos y de los párrafos */
h1, h2, h3, h4, p {
  color: #ff0000;
}

/** Cambia el color del fondo del sitio */
body {
  background-color: blueviolet;
}

El internet está lleno de fragmentos de código como este que podrán ayudarles bastante. Bastará con buscar «Como cambiar el tamaño de los títulos de WordPress» o «Como cambiar el tamaño del menú de WooCommerce».

¿Y cómo subo los cambios al sitio web?

Una vez hayan hecho estos cambios, es cuestión de que vayan de regreso a la carpeta y la compriman nuevamente:

Ya en este punto, podrán entrar al administrador de su sitio web y entrar en el menú Plugins y seleccionar la opción añadir nuevo:

Luego click en instalar y activar plugin y listo. Tendrán un adefesio sin título y con los más lindos colores, más o menos como este:

Cada vez que agreguen nuevos cambios pueden eliminar la versión anterior y reinstalar la nueva. De esta manera tendrán un plugin donde podrán ir agregando para su sitio las diferentes personalizaciones que necesiten. Y en caso de que administre varios sitios web, puede crear subcarpetas para cada sitio y agregar personalizaciones diferentes.

Creo que esto es todo por ahora. Si esto les ayudó en algo o si les ahorro algunos pesos, entonces compartanlo con sus amigos y colegas. Y si tienen preguntas o comentarios, no duden en ponerlos al final.

Adieu!