La función de menú personalizado de WordPress 3.0+ «ya no es tan nueva» no solo es extremadamente útil, sino que también es muy poderosa. Ya he escrito algunas publicaciones sobre la edición y personalización del menú (por ejemplo, cómo resaltar los enlaces de la página actual) y hoy le mostraré cómo puede agregar clases especiales a sus temas para que pueda mostrar fácilmente iconos personalizados junto a sus enlaces de navegación. .
Agregar un ícono de inicio al lado del 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 junto al enlace de su página de inicio.
Paso 1: descargue un ícono de inicio genial
Por el bien de esta vista previa, simplemente revisé y descargué un ícono de inicio simple de Finicons.com: Enlace
Paso 2: habilite 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 presione las «opciones de pantalla» y asegúrese de que esté marcado.
Paso 3: Agregar estilo al enlace de la página de inicio
Ahora puede buscar o crear un enlace a la página de inicio y agregarle una nueva clase. Agregué una clase llamada «icono de enlace de inicio».
Paso 4: agregue CSS para el ícono del menú de inicio
Ahora lo único que queda 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 en la carpeta de imágenes de su tema.
CSS de muestra
.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 lanzarlo de forma gratuita en mi sección Temas gratuitos de WordPress. Realmente no está posicionado perfectamente y el ícono no coincide, pero por el bien de este tutorial, puede ver cómo se supone que funciona.