Personalizar el menú de WordPress usando Extra de ejemplo

Todos buscamos que nuestra página web o blog sea lo más personal posible, con WordPress podemos hacer auténticas maravillas con las opciones que trae por defecto, pero hay cosas, como personalizar el menú de WordPress destacando un enlace sin que los demás cambien, que tendremos que hacerlo añadiendo un poco de CSS a la pestaña preparada para ello.

Modificar el menú de WordPress destacando un elemento

Aunque a muchos les asusta cuando hay que cambiar, modificar o añadir algo de código, este proceso es de lo más sencillo, ya que no tocamos ningún archivo. WordPress dispone de una pestaña dentro del personalizador que nos permitirá hacer este cambio sin ningún peligro.

Si tras realizar la modificación no nos gusta o no queda como queríamos, con borrarlo volvemos al punto de partida. El cambio que hagamos no lo perderemos con las futuras actualizaciones, ya que queda guardado en la base de datos y no afecta a los archivos del tema.

Localizar el identificador o clase del elemento del menú de WordPress

El primer paso se realiza desde la parte frontal de nuestra web, o lo que es lo mismo, lo que ve el usuario cuando visita nuestro sitio.

Para personalizar el menú de WordPress necesitamos conocer el nombre que hace referencia al elemento que queremos modificar, y para eso tenemos que abrir el "inspector", "inspeccionar", herramientas de desarrollo" o "herramientas para desarrolladores" del navegador que utilicemos, todos los navegadores disponen de esta opción. Yo utilizaré el de Google Chrome.

Aplicar el nuevo estilo al elemento a personalizar del menú de WordPress

Con el nombre de la "clase" (class) o "identificador" (id), volvemos a nuestro WordPress y accedemos al personalizador, en la pestaña "CSS adicional" pegamos el nombre o nombres precedidos de una almohadilla (#) si es un identificador, o un punto (.) si es una clase.

Seguidamente colocamos las nuevas funciones CSS entre llaves ({ nuevas funciones}) y veremos cómo va cambiando el aspecto del botón del menú.

A continuación dejo el código utilizado en el vídeo para modificar uno de los items del menú del tema Extra, ha sido modificado para adaptarlo un poco mejor.