Como poner Iconos en el Menú de WordPress

Hay varias maneras de agregar iconos a un menú en WordPress, tanto con plugins como sin ellos. A continuación, te presento las opciones más comunes:

1. Usando un plugin:

Esta es la opción más sencilla, especialmente para usuarios que no se sienten cómodos editando código. Existen varios plugins gratuitos que facilitan la tarea:

  • Menu Icons by ThemeIsle: Es uno de los plugins más populares y fáciles de usar. Permite agregar iconos de diferentes fuentes (como Font Awesome) a los elementos del menú desde el editor de menús de WordPress.
  • Otros plugins: También existen otras alternativas como «WP Menu Icons» o «Menu Image». La mayoría funcionan de manera similar, permitiendo seleccionar un icono de una biblioteca o subir una imagen personalizada.

Pasos generales para usar un plugin:

  1. Instalar y activar el plugin: Ve a «Plugins» > «Añadir nuevo» en el panel de administración de WordPress, busca el plugin deseado, instálalo y actívalo.
  2. Ir al editor de menús: Ve a «Apariencia» > «Menús».
  3. Seleccionar un elemento del menú: Haz clic en el elemento al que deseas agregar un icono.
  4. Seleccionar el icono: Dependiendo del plugin, verás opciones como «Icono del menú», «Imagen del menú» o similares. Haz clic en él y elige el icono que prefieras de la biblioteca disponible o sube una imagen desde tu ordenador.
  5. Guardar los cambios: Guarda los cambios en el menú.

2. Sin usar plugins (con código CSS):

Este método requiere conocimientos básicos de CSS y es más adecuado para usuarios con más experiencia.

a) Usando una fuente de iconos (como Font Awesome):

  1. Incluir la fuente de iconos: Debes incluir la fuente de iconos en tu tema. La forma más común es añadir un enlace a la CDN de Font Awesome en la cabecera de tu tema (archivo header.php). Puedes encontrar el código necesario en la página de Font Awesome.
  2. Añadir clases CSS a los elementos del menú: En el editor de menús de WordPress, activa la opción «Opciones de pantalla» en la parte superior derecha y marca la casilla «Clases CSS». Luego, en cada elemento del menú, puedes añadir la clase CSS correspondiente al icono que deseas mostrar (ej. fa fa-home para el icono de una casa).
  3. Añadir CSS personalizado (opcional): Puedes añadir CSS personalizado en el archivo style.css de tu tema o usando un plugin como «Simple Custom CSS» para ajustar el tamaño, color y posición de los iconos.

b) Usando imágenes:

  1. Subir las imágenes: Sube las imágenes de los iconos a la biblioteca de medios de WordPress.
  2. Añadir CSS personalizado: Necesitarás añadir CSS personalizado para mostrar las imágenes como iconos en el menú. Deberás usar la propiedad background-image y especificar la URL de la imagen.

Ejemplo de CSS para imágenes:

CSS

.menu-item-home a {
  background-image: url("URL_DE_LA_IMAGEN");
  background-repeat: no-repeat;
  padding-left: 25px; /* Ajustar el espacio para que se vea el icono */
}

Consideraciones importantes:

  • Rendimiento: Usar demasiados iconos o imágenes grandes puede afectar el rendimiento de tu sitio web. Optimiza las imágenes y elige fuentes de iconos ligeras.
  • Mantenimiento: Usar un plugin generalmente facilita el mantenimiento, ya que no tienes que editar código directamente.
  • Compatibilidad: Asegúrate de que el método que elijas sea compatible con tu tema de WordPress.

Recuerda que la mejor opción dependerá de tus habilidades técnicas y tus necesidades específicas. Si no te sientes cómodo editando código, te recomiendo usar un plugin. Si tienes experiencia con CSS y prefieres tener más control, puedes optar por la opción sin plugin.