Como modificar un tema de bloques de WordPress – 1

En este artículo vamos a ver como modificar un tema de bloques de WordPress, y como guardar dichas modificaciones en los archivos del tema. En un artículo anterior vimos como crear un tema de bloques desde cero gracias al plugin Create Block Theme. Es importante que revises dicho artículo ya que para este artículo vamos a utilizar el mismo plugin y no vamos a explicar algunos aspectos ya explicados en dicho articulo.

Como añadir un teléfono a la cabecera

Por simplicidad, vamos a crear una modificación sencilla para ver como sería el proceso general para modificar un tema de bloques de WordPress. En este ejemplo, vamos a añadir un número de teléfono a la cabecera de nuestro WordPress, entre el logo y el menú. Para el ejemplo, utilizaremos el tema en blanco que hemos creado siguiendo los pasos del artículo anterior. Aunque el proceso seria similar para otro tema de bloques.

El primer paso es entrar en el editor de Temas, dentro del menú Apariencia > Editor.

Después, como queremos editar la cabecera (en el caso del pie de pagina sería lo mismo), vamos a la opción de Patrones.

Después, seleccionamos aquel «patrón» que queremos modificar. En nuestro caso, seleccionamos la cabecera.

Y después hacemos click sobre el cuadro que nos aparecerá a la derecha.

Cuando estemos en el editor, es muy importante hacer visible la «Vista de lista» pulsando el botón correspondiente. Esto nos facilitará mucho el trabajo ya que podremos ver claramente la estructura del patrón que estamos editando.

Entre el bloque de tipo Fila que contiene el logo del sitio Web, y el bloque Navegación, vamos a crear otro bloque de tipo Fila y dentro creamos un bloque de tipo Párrafo. Una alternativa, si queremos hacer un uso más «formal» del sistema de bloques, seria crear un bloque de tipo Botón. Otro alternativa pero en la dirección opuesta, seria crear un bloque de tipo HTML Personalizado. Pero bueno, por sencillez, y tal como hemos dicho, vamos a crear un Párrafo. Dentro del Párrafo, colocamos el número de teléfono y el enlace correspondiente.

Como seguramente no tendrá el aspecto deseado (a no ser que hayas usado un bloque de tipo Botón), es importante darle un atributo ID para poder modificar su aspecto con CSS. Para ello, en el panel derecho, en la pestaña de Bloque, en las opciones de Avanzado, debes de indicar «telefono» donde pone Anclaje HTML (si sabes HTML, debes saber que este es el valor del atributo ID de HTML y que lo puedes indicar para cualquier bloque que te interese, y si no sabes HTML deberías plantearte hacer uno de nuestros cursos Web).

En principio, la modificación ya estaría hecha y bastaría con guardar los cambios. ¡Pero estos cambios no se guardan en los archivos del tema! Si quieres realmente guardar la modificación en los archivos del tema, lo mejor es utilizar las opciones que nos ofrece el plugin Create Block Theme. Obviamente, antes de continuar, es muy recomendable que saques copia de seguridad de la carpeta con los archivos de tu tema.

Antes de guardar, nos preguntará que queremos guardar. En principio, como solo hemos modificado las plantillas, es lo único que tenemos que indicar. ¡El resto de opciones debes de desmarcarlas!

Y ya está. Si revisas la subcarpeta /parts de tu tema, verás que el archivo header.html ha sido modificado. Si lo abres con un editor de texto plano (como el bloc de notas de Windows) o un editor de código podrás ver los elementos HTML que han sido creados.

Modificar el aspecto del enlace

Ok, ya hemos creado el enlace, pero (a no ser que hayamos creado un bloque de tipo Botón), no tiene un aspecto bien definido. Es un enlace normal y corriente.

Así que necesitamos indicarle el aspecto de algún modo. En un tema clásico, simplemente modificaríamos el archivo style.css de la carpeta del tema. Pero, tal y como ya se explico en el anterior articulo, los temas de bloques, por lo general, ignoran el archivo style.css.

Así que, a no ser que tu tema de bloques ya se encuentre utilizando dicho archivo, deberemos de indicarle que lo haga. Para ello, en la carpeta de nuestro tema, tenemos que crear (si no existe ya) un archivo llamado functions.php, con el siguiente contenido:

<?php
add_action('init', 'my_custom_css_stylesheet');
function my_custom_css_stylesheet() {
  wp_register_style( 'custom-css', get_template_directory_uri() . '/style.css' );
}
wp_enqueue_style( 'custom-css' );

Si el archivo ya existe, busca dentro del archivo el texto «style.css» para ver si existe un código similar para cargar el archivo. Si no encuentras dicho código, puedes probar a añadir el código anterior al final de tu archivo functions.php, excluyendo la primera línea (es decir, excluyendo lo de <?php). Obviamente, antes de modificarlo, es importante que tengas una copia de seguridad por si rompes el tema poder restaurar el archivo.

Una vez nos hemos asegurado que nuestro tema carga el fichero style.css, podemos modificar dicho archivo aprovechando el atributo ID que hemos indicado. Por ejemplo, podemos añadir algo como esto al final de nuestro archivo style.css

#telefono a {
  text-decoration: none;
  color: white;
  background: red;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 30px;
  font-weight: bold;
  text-shadow: 1px 1px black;
}

Una vez modificado el archivo, si no puedes ver el cambio de aspecto del enlace, tal vez tengas que borrar la cache de tu navegador y recargar la página para ver los cambios.

Insisto en que esta sería la forma «clasica» de modificar el aspecto de un tema. La forma «correcta» para modificar el aspecto de un tema de bloques es un poco más complicada. Si quieres profundizar en ella, puedes consultar el siguiente artículo sobre como modificar el aspecto de un tema de bloques de WordPress.

¡Y ya está! Espero que este artículo te haya servido a modo de visión general sobre como modificar (de forma «fácil») un tema de bloques de WordPress.

En el siguiente artículo, continuaremos explorando como modificar un tema de bloques, concretamente, veremos como crear una nueva plantilla para un tema de bloques.