En las prácticas instalamos y personalizamos la plantilla Rise WP de Modern Themes para WordPress.

Aunque la plantilla permite un nivel de personalización bastante bueno a veces necesitamos cambios que necesitan que metamos mano al código html/css.

En este caso planteamos la necesidad y posibilidad de cambiar el botón de estilo del bloque «hero» de la portada. En la plantilla este botón es transparente y con texto y borde blanco. Dependiendo de la imagen o el estilo que queramos darle al sitio puede ser que queramos cambiarlo.

Pasos para agregar un nuevo estilo de botón en la plantilla

  1. Maquetar un botón en CSS o conseguir el código (en nuestro ejemplo en clase usamos un generador de botones CSS online)
  2. Editar el archivo style.css de la plantilla que queremos usar. Esto puede hacerse de varias formas:
    1. Lo añadimos como código en Apariencia>Personalizar>CSS adicional
    2. Lo añadimos como código a la plantilla vía Editor de Temas Apariencia>Editor de Temas>Style.css
    3. Editamos el archivo style.css descargándolo y guardando una versión del archivo sin modificar (esta es la mejor manera aunque es la más trabajosa y no lo trabajamos tanto en el curso por problemas de tiempo)
  3. Usamos este estilo asignando la clase del estilo que hemos importado a cualquier botón que queramos que tenga ese estilo. En nuestro ejemplo el código del generador asignaba el nombre myButton que podemos modificar a nuestro gusto.

Es recomendable que pongamos este estilo de botón en un lugar del archivo css donde podamos encontrarlo fácilmente. Podemos ponerlo al final y deberíamos poner un comentario para que sepamos que esos estilos los fuimos añadiendo nosotros. Algo del tipo:

/*Estilos Personalizados RISE WP 2020*/

Puede ser que empleemos varios estilos de botones a lo largo de nuestras personalizaciones. Recordad que al traer el botón del generador deberíamos cambiarle el nombre por algo que sea diferenciable de los otros y a poder ser indicativo del tipo de botón (algo como botonPortada o botonNewsletter).

Cómo usar un estilo de botón añadido en la portada de Rise

Una vez completados los pasos anteriores el botón de nuestra plantilla aun no cambió.

Necesitamos ahora editar el archivo de la plantilla que gobierna dicha portada.

Para hacerlo una vez más podemos emplear el editor de temas de WordPress o usar un cliente FTP para hacer los cambios en nuestro PC local y subirlos al completarlos.

El archivo que tendremos que modificar es template-page-home.php y el código podemos encontrarlo más fácilmente si buscamos precisamente el elemento «button» en el buscador del editor que estemos usando.

Al hacerlo encontramos dónde en esta portada está el botón y ahora solo debemos cambiarle la clase button por la clase myButton para que se apliquen los estilos del botón que importamos del generador CSS.

Debemos cambiar la línea:

<a href="<?php echo esc_url( get_page_link( get_theme_mod('risewp_home_button_url'))) ?>" class="button">

Alterando solamente el nombre de la clase:

<a href="<?php echo esc_url( get_page_link( get_theme_mod('risewp_home_button_url'))) ?>" class="myButton">

Si nos fijamos en el código fuente aparece la clase button dos veces. La pllantilla tiene un código condicional de forma que mostrará el texto del botón si solo introducimos ese dato y mostrará el texto con el enlace si introducimos también una url. Este código por tanto responde a esos dos escenarios. Podemos cambiar el nombre de la clase en ambos casos, aunque el primero es el que más nos importa.

Problemas posibles al personalizar botones

No me gusta como queda integrado

Esto es lo más normal. Los estilos CSS necesitan de muchos ajustes para que todos los elementos vayan cobrando armonía y la página resulte agradable.

La solución es seguir tocando los estilos, en nuestro caso podemos hacer gran parte en el generador de botones pero en la realidad se hace tocando parámetros y añadiendo propiedades y elementos hasta que conseguimos un botón que nos agrade.

Como veréis el hecho de que un botón parezca sencillo no necesariamente se ha generado con menos código CSS.

Hice todo y no me aparece el estilo cambiado

Comentamos en la clase que muchas veces al hacer este tipo de cambios nos chocamos con la frustración de haberlo revisado todo y seguir sin funcionar.

El cacheado de recursos del navegador nos suele jugar malas pasadas. Al cachear los recursos más empleados de una web, al cambiar nosotros alguna cosa, el navegador no refresca los cambios.

Una solución es abrir una nueva navegación de incógnito para que el navegador recargue forzosamente todos los archivos que cacheó en la sesión principal.

Otra posible solución es cargar en otra pestaña del navegador la propia hoja de estilos y recargarla un par de veces. Para encontrar la url exacta podemos usar el inspector de código del navegador o visualizando el código fuente y buscando los archivos css para clicar en style.css.

Hice los cambios y se ha estropeado el sitio

Al tocar el código fuente de la plantilla se puede estropear alguna funcionalidad o apariencia del sitio.

Esto sucede por que podamos haber por error eliminado un carácter importante para la programación. Por ejemplo eliminar un » o un > puede hacer que el código ya no sea correctamente interpretable por el servidor y arroje errores.

Por eso era importante mantener un archivo previo a la modificación por si tenemos que revertir los cambios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.