Inserción de imagen en menú de navegación

  • Autor Autor Kevin77
  • Fecha de inicio Fecha de inicio
Kevin77

Kevin77

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola amigos,

He estado buscando la manera de insertar imágenes en el menú de la navegación pero no encuentro demasiada información al respecto.
¿Sabéis si se necesita algún plugin? Os adjunto foto de lo que quiero.
Captura.webp
 
en principio la imagen que adjuntas parece más un icono que una imagen, pero para responder tu pregunta específicamente para subir una imagen al menú de navegación una vez hayas subido la imagen a tu wordpress solo debes ir a la opción de enlaces personalizados,


en el campo de url pones la dirección a donde quieres apuntar como normalmente lo harías

ahora, para subr la imagen al menú

si quieres la pura imagen: en el campo "texto del enlace" pones lo siguiente: <img src="url de la imagen">

si quieres la imagen con texto: <img src="url de la imagen"> texto visible
 
CMY Academy dijo:
en principio la imagen que adjuntas parece más un icono que una imagen, pero para responder tu pregunta específicamente para subir una imagen al menú de navegación una vez hayas subido la imagen a tu wordpress solo debes ir a la opción de enlaces personalizados,


en el campo de url pones la dirección a donde quieres apuntar como normalmente lo harías

ahora, para subr la imagen al menú

si quieres la pura imagen: en el campo "texto del enlace" pones lo siguiente: <img src="url de la imagen">

si quieres la imagen con texto: <img src="url de la imagen"> texto visible
Hacer clic para expandir...
Hola,

Sí, tienes razón, es un icono, perdón por el error, he seguido investigando y he encontrado un plugin "WP menu icons" que mete el icono en el menú.

Si quiero hacerlo sin plugin podría hacerlo como tu me dices? sería aquí en la foto que te remito? no he visto nada de texto del enlace
Captura2.webp

Por otro lado he estado pensando, ¿si lo retoco directamente en el header.php? me cargo la página o funcionaría hacer el cambio con html puro. Me da miedo probar no lo voy a negar.

Gracias
 
Si quieres hacerlo sin plugins tendrías que usar un set de webfont icons como Font Awesome y después en el menú personalizado insertar el icono de modo

HTML: 
<i class="fa fa-camera-retro"></i>

Y reemplazar fa-camera-retro por el nombre del icono que vas a usar.
 
Lo puedes hacer sin necesidad de librerias de iconos y sin neceisdad de plugins, con simple html y css.


CSS: 
.main-navigation li a {
    display:flex;
    align-items: center;
}
.main-navigation li .icono-1 {
    background-image: url(/svg/icono.svg);  // Aqui va el nombre de la carpeta y archivo que este dentro de la raiz de tu tema
    background-repeat: none;
    background-position: center;
    margin-right: 8px;

}

Luego vas enlace personalizado en el menú de wordpress y pones el código html antes de la palabra del menu;

HTML: 
<span class="icono-1"></span>HOME

Asi puedes poner cualquier icono que hagas en illustrator o cualquier otro icono sin depende de librerias


La clase del selector del menu puede variar de tema en tema pero la iea es la misma, solo tendrias que cambiar .main-navigation por la clase que tenga tu menu
 
Kevin77 dijo:
Hola,

Sí, tienes razón, es un icono, perdón por el error, he seguido investigando y he encontrado un plugin "WP menu icons" que mete el icono en el menú.

Si quiero hacerlo sin plugin podría hacerlo como tu me dices? sería aquí en la foto que te remito? no he visto nada de texto del enlace
Ver el archivo adjunto 586120

Por otro lado he estado pensando, ¿si lo retoco directamente en el header.php? me cargo la página o funcionaría hacer el cambio con html puro. Me da miedo probar no lo voy a negar.

Gracias
Hacer clic para expandir...
si lo puedes hacer con el texto que te di para no meter plugins ya que los que ponen directamente un icono (svg) suelen cargar mucho la página,

yo (loco obsesionado por la velocidad de carga) prefiero irme a un banco de iconos y descargarlo en png, le das 20x20px de tamaño y sigues las instrucciones que te di anteriormente

igualmente ya te dieron opciones con css

Nota: no vez lo de texto del enlace porque no estás en "enlaces personalizados"
 
CMY Academy dijo:
si lo puedes hacer con el texto que te di para no meter plugins ya que los que ponen directamente un icono (svg) suelen cargar mucho la página,

yo (loco obsesionado por la velocidad de carga) prefiero irme a un banco de iconos y descargarlo en png, le das 20x20px de tamaño y sigues las instrucciones que te di anteriormente

igualmente ya te dieron opciones con css

Nota: no vez lo de texto del enlace porque no estás en "enlaces personalizados"
Hacer clic para expandir...
Lo de la imagen es buena opcion hasta que hablamos de responsive, porque al ser un img es un bloque por eso prefiero usar span que son inline y mucho mas faciles de manejar a la hora de hacer diseños responsivos, anque el img ambien es una opcion
 
samuelsuteras dijo:
Lo de la imagen es buena opcion hasta que hablamos de responsive, porque al ser un img es un bloque por eso prefiero usar span que son inline y mucho mas faciles de manejar a la hora de hacer diseños responsivos, anque el img ambien es una opcion
Hacer clic para expandir...
buen punto, aunque podría solucionarse asignando un menú para escritorio y otro para móvil, dándole a cada uno los pixeles correctos a las imágenes en función del dispositivo en el que se mostrarán
 
CMY Academy dijo:
buen punto, aunque podría solucionarse asignando un menú para escritorio y otro para móvil, dándole a cada uno los pixeles correctos a las imágenes en función del dispositivo en el que se mostrarán
Hacer clic para expandir...
Yes, pero mientras menos codigo mejor. Pero ambas soluciones dan el mismo resultado ya queda de parte del usuario cual usar
 
Gracias por el intercambio de opiniones, la verdad ha estado interesante y me ha dado que pensar en lo referente a como hacerlo.

En lo referente a como me afecta a mí y a mi proyecto os comento, de primeras me equivoqué poniendo la palabra imagen cuando quería decir icono y aunque yo pensaba más en una imagen tenéis razón, lo que debo de insertar es un icono.

Insertaré font-awesome y le pondré un icono, aunque con el hilo que habéis comentado eso no quita que en alguna ocasión llegue alguien con una imagen en particular ya que no haya icono y no sepa utilizar illustrator(como es mi caso), por lo cual me decantaría en dos opciones:
- Hacerla responsive, creo que es lo más adecuado.
- Ponerle un tamaño a la imagen que se vea igual en pc y en móvil, de igual tamaño, para que se vea del mismo tamaño en ambos dispositivos (aunque en el modelo que tengo de página utiliza un icono diría que es del mismo tamaño en pc y móvil)

No es que sirva de mucho esto que digo pero ya que os habéis molestado en orientarme me parece de recibo comentar lo que haré, no se si os interesará pero es para agradeceros los comentarios.

Saludos y muchas gracias compañeros.
 
Kevin77 dijo:
Gracias por el intercambio de opiniones, la verdad ha estado interesante y me ha dado que pensar en lo referente a como hacerlo.

En lo referente a como me afecta a mí y a mi proyecto os comento, de primeras me equivoqué poniendo la palabra imagen cuando quería decir icono y aunque yo pensaba más en una imagen tenéis razón, lo que debo de insertar es un icono.

Insertaré font-awesome y le pondré un icono, aunque con el hilo que habéis comentado eso no quita que en alguna ocasión llegue alguien con una imagen en particular ya que no haya icono y no sepa utilizar illustrator(como es mi caso), por lo cual me decantaría en dos opciones:
- Hacerla responsive, creo que es lo más adecuado.
- Ponerle un tamaño a la imagen que se vea igual en pc y en móvil, de igual tamaño, para que se vea del mismo tamaño en ambos dispositivos (aunque en el modelo que tengo de página utiliza un icono diría que es del mismo tamaño en pc y móvil)

No es que sirva de mucho esto que digo pero ya que os habéis molestado en orientarme me parece de recibo comentar lo que haré, no se si os interesará pero es para agradeceros los comentarios.

Saludos y muchas gracias compañeros.
Hacer clic para expandir...


Flat icon es una buena alternativa para encontrar iconos variados en caso tal que no encuentres lo que necesitas en fontawesome, pero bueno el icono si deberia tener el mismo tamaño tanto en desk como en movil.

En caso tal de que necesites alguna ayuda hazlo saber y te podemos orientar
 
samuelsuteras dijo:
Flat icon es una buena alternativa para encontrar iconos variados en caso tal que no encuentres lo que necesitas en fontawesome, pero bueno el icono si deberia tener el mismo tamaño tanto en desk como en movil.

En caso tal de que necesites alguna ayuda hazlo saber y te podemos orientar
Hacer clic para expandir...

Comparto. En FlatIcon se puede descargar hasta los mismos iconos de FA y cualquier otro disponible en su plataforma en formato SVG, así no es necesario el uso de Illustrator.
 
samuelsuteras dijo:
Flat icon es una buena alternativa para encontrar iconos variados en caso tal que no encuentres lo que necesitas en fontawesome, pero bueno el icono si deberia tener el mismo tamaño tanto en desk como en movil.

En caso tal de que necesites alguna ayuda hazlo saber y te podemos orientar
Hacer clic para expandir...
menot dijo:
Comparto. En FlatIcon se puede descargar hasta los mismos iconos de FA y cualquier otro disponible en su plataforma en formato SVG, así no es necesario el uso de Illustrator.
Hacer clic para expandir...
Lo miraré, estoy mas acostumbrado a font awes.. por eso dije de utilizarlo, flaticon también parece buena opción,
 
Kevin77 dijo:
Lo miraré, estoy mas acostumbrado a font awes.. por eso dije de utilizarlo, flaticon también parece buena opción,
Hacer clic para expandir...
Ya queda de tu parte cual utilizar, la unica diferencia de flaticon es que tendrias que hacer el tema de css como te lo he comentado más arriba
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

B
Separar título del menú de navegación en la cabecera
Respuestas
1
Visitas
115
BotBeta
BotBeta
A
Cómo agregar líneas al menú de navegación en WordPress
Respuestas
2
Visitas
266
AdrianT95
A
D
Problema de inserción de imagen full-width en tema Salvation de Wordpress
Respuestas
1
Visitas
433
juansantiago
J
C
Plugin para Dropdown horizontal en menú de navegación
Respuestas
1
Visitas
276
ramonjosegn
R
M
Plugin gratuito para mejorar menú de navegación
Respuestas
1
Visitas
289
Carlos Arreola
C
Atrás
Arriba