Cómo agregar íconos a su menú de WordPress

Cómo agregar íconos a su menú de WordPress

La no tan nueva función de menú personalizado de WordPress 3.0+ no solo es extremadamente útil, sino también muy poderosa. Ya escribí algunos artículos sobre la edición y personalización de menús (por ejemplo, cómo resaltar enlaces en la página actual) y hoy les mostraré cómo pueden agregar clases especiales a sus temas. Para que puedan mostrar fácilmente íconos personalizados. junto a los enlaces de navegación.

Agregar un icono de inicio junto al enlace de la página de inicio de WordPress

Para explicar mejor cómo agregar íconos, lo guiaré a través de los pasos para agregar un ícono de tipo de inicio al lado del enlace de su página de inicio.

Paso 1: Descarga un ícono de casa genial

Por el bien de esta vista previa, acabo de revisar y cargar un simple ícono de inicio en Finicons.com: Enlace

Paso 2: active las clases en su menú de WordPress

De forma predeterminada, el menú de WordPress no muestra los atributos de “clase” en el generador de menús, así que haga clic en “opciones de pantalla” y asegúrese de que esté marcado.

Clases de menú de WordPress

Paso 3: agregue un estilo al enlace de la página de inicio

Ahora puede navegar o enlazar a la página de inicio y agregarle una nueva clase. Agregué una clase llamada “icono de enlace de inicio”.

Clase de enlace de inicio de WordPress

Paso 4: agregue CSS para el ícono del menú de inicio

Todo lo que tiene que hacer es agregar el CSS a su hoja de estilo para mostrar el icono de la clase que acaba de crear. Nota: asegúrese de agregar el icono descargado en el paso 1 a la carpeta de imágenes de su tema.

Ejemplo de CSS

.home-link-icon a{
   padding-left: 30px !important;
   background-image: url(images/home.png);
   background-position: left;
   background-repeat: no-repeat;
}

Imagen de muestra

A continuación, puede ver mi css en acción en un tema en el que estoy trabajando actualmente para publicar gratis en mi sección Temas gratuitos de WordPress. En realidad, no está perfectamente posicionado y el ícono no coincide, pero para este tutorial puedes ver cómo se supone que funciona.

Demostración del enlace de inicio del tema de WordPress

Deja un comentario

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

Ir arriba