Personalizar el menú de WordPress usando Extra de ejemplo

15 de noviembre - 2018

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.

Suscríbete:

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.

Pestaña CSS adicional de WordPress
Pestaña CSS adicional de WordPress

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.

Identificación de la etiqueta HTML del menú
Identificación de la etiqueta HTML del menú

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.

Modificar el menú con CSS
Modificar el menú con CSS

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar 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.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento