Cómo crear una imagen de encabezado de WordPress personalizada para los elementos del menú
Cuando está creando un nuevo sitio web de WordPress, hay ciertas cosas que desea hacer para diferenciarlo de otros sitios web. Una de estas cosas es tener la capacidad de agregar una imagen de encabezado de WordPress a páginas, publicaciones, categorías e incluso productos.
A menudo, las imágenes de encabezado deben codificarse de cierta manera para que aparezcan en los elementos del menú y en otras partes de un sitio web. Sin embargo, ahora hay un complemento de imagen de encabezado para WordPress que le permitirá agregar fácilmente una imagen de encabezado personalizada a los elementos del menú.
Por qué crear una imagen de encabezado de WordPress
Puede haber algunas razones por las que desea crear una imagen de encabezado de WordPress. Muchas plantillas le permiten alguna funcionalidad, pero la capacidad de colocar estas imágenes de encabezado de WordPress en los elementos del menú puede ser difícil.
Agregar imágenes de encabezado en los elementos del menú le dará a su sitio una apariencia que otros sitios no tendrán. Es un complemento de diseño único para un sitio web y algo que la gente recordará.
Además, puede utilizar imágenes relacionadas para cada elemento de la categoría del menú . Esto le dará un aspecto visual más impresionante a los elementos de su menú y hará que se destaquen más.
Quiere encontrar una solución que sea fácil de manejar. Es por eso que vamos a utilizar un complemento suave llamado WP Header Images. Echemos un vistazo al complemento, cómo funciona, para qué puede usarlo y cómo configurarlo y usarlo.
Imágenes de encabezado de WP
El complemento WP Header Images es un complemento liviano, suave y fácil de usar que viene lleno de funcionalidad. Este complemento de imagen de encabezado para WordPress le permitirá configurar imágenes de encabezado personalizadas para las páginas de su sitio web.
No solo podrá insertar imágenes personalizadas para diferentes tipos de contenido, sino que también podrá elegir imágenes de encabezado para páginas, publicaciones , categorías, productos e incluso enlaces.
El complemento funciona con casi todos los principales temas de WordPress que existen. Así que no tendrás que preocuparte por la compatibilidad. De hecho, su lista de compatibilidad incluye:
- Patrón de guayaba
- Génesis
- Tesis
- WooTemas
- Portal
- Núcleo de Carrington
- Núcleo híbrido
- Marco de opciones
- marco redux
- SMOF
- UPTemas
- vafpress
- Código estrella
Como puede ver, el complemento es compatible con casi todo, por lo que no debería tener problemas. Si lo hace, siempre puede ponerse en contacto con el desarrollador.
Como se indicó anteriormente, incluso puede usar el complemento WP Header Images para agregar imágenes a las páginas y categorías de productos si está ejecutando WooCommerce en su sitio web.
El complemento realmente permite mucha libertad para operar. También hay una alternativa profesional, pero para este tutorial, estamos cubriendo cómo usar las versiones gratuitas. La versión gratuita le dará todo lo que necesita para crear correctamente una imagen de encabezado de WordPress para los elementos del menú y más.
Echemos un vistazo a cómo instalar, activar y configurar el complemento para su uso.
Instalar y activar el complemento de imagen de encabezado de WP
Para crear imágenes de encabezado en WordPress, primero debe instalar y activar el complemento. Puede hacerlo desde la página de complementos en su panel de administración de WordPress. Simplemente busque el nombre del complemento.
Una vez que el complemento de imágenes de encabezado se haya instalado y activado, haga clic en Configuración> Imágenes de encabezado de WP para acceder a la configuración principal y la página de configuración del complemento.
Verá que esta es el área de menú de la izquierda de su panel de administración. Ahora que está en el área de configuración del complemento, podemos realizar la configuración juntos.
Configuración del complemento
Cuando llegue a la página de configuración del complemento, verá cuatro pestañas principales. Incluyen:
- Imágenes de encabezado
- Estilismo
- Plantillas
- Cómo funciona
Repasemos esto juntos y veamos qué significan todos. La configuración del complemento es realmente muy simple y estará en funcionamiento con la capacidad de agregar una imagen de encabezado de WordPress a las páginas y categorías en muy poco tiempo.
Imágenes de encabezado
La pestaña de imágenes de encabezado tendrá una lista de elementos según lo que esté instalado y configurado en su sitio web. Entonces, por ejemplo, si no tiene la configuración de WooCommerce , entonces no verá un área desplegable de productos o categorías de productos para agregar imágenes de encabezado.
En este ejemplo, WooCommerce está realmente instalado, por lo que verá esos elementos adicionales en la pestaña. También puede ver que tenemos varios elementos de menú ya configurados para acompañar el menú predeterminado y la categoría de WooCommerce y las páginas de productos.
Dentro de esta pestaña, puede hacer clic en cualquiera de los enlaces que se muestran y aparecerá un menú desplegable. Dentro de ese menú desplegable habrá un área de carga de imágenes según los elementos del menú.
Tiene dos opciones para cargar aquí. Puede arrastrar y soltar imágenes, o puede hacer clic en el enlace para cargar imágenes que ya se encuentran en su biblioteca de medios.
Simplemente cargue la imagen del encabezado de WordPress que desea usar para cada elemento de menú correspondiente y estará listo para comenzar. Por ejemplo, coloque la imagen de encabezado que desea mostrar en el elemento de menú "Acerca de nosotros" directamente en el área de imagen de nosotros.
Estilismo
La pestaña de estilo es para aquellos de ustedes que saben y entienden cómo agregar CSS personalizado a un sitio web de WordPress. Si sabes lo que estás haciendo, entonces hazlo. Si no lo hace, simplemente omita esta pestaña. Está ahí para su uso en cualquier momento.
Hay varias formas de agregar CSS personalizado, pero si no está familiarizado con él, esto podría ser complicado.
Plantillas
La pestaña de plantillas es en realidad una característica premium. La pestaña está ahí para los usuarios de la versión gratuita del complemento, pero si desea acceder a las plantillas y poder usarlas, deberá comprar la versión pro del complemento.
Nota: haga clic en el botón "Haga clic aquí para pasar a premium" ubicado en la parte superior derecha para obtener la versión pro del complemento si lo desea.
Cómo funciona
La pestaña Cómo funciona está ahí para que pueda consultarla y obtener ayuda cuando sea necesario. Puede ponerse en contacto con el soporte desde aquí o puede ver las guías de ayuda y los pasos de solución de problemas que ha agregado el desarrollador. Este es un recurso de referencia.
¡Eso es todo! En este punto, debería haber cargado imágenes relevantes para los elementos del menú en cuestión y haber agregado con éxito imágenes de encabezado de WordPress a los elementos del menú.
Configuración de una imagen de encabezado
Ahora que hemos revisado el complemento. configuremos rápidamente una imagen de encabezado de WordPress juntos. No es difícil en absoluto.
Primero, desde la pestaña "Cómo funciona", haga clic en el enlace "abrir tema header.php" y agregue el código que ve en la parte inferior de su archivo header.php. Puede hacer esto usando copiar y pegar para las líneas codificadas. Luego haga clic en "Guardar"
Ahora vuelve a la pestaña "Imágenes de encabezado". Al igual que arriba, puede ver que ya tenemos ciertos elementos en función de los elementos del menú que tenemos en su lugar.
Haga clic en cualquiera de los elementos del menú que ve en su lista específica. Para esto, voy a usar el menú principal que ya tiene 6 elementos.
Haga clic en él y aparecerá un cuadro desplegable para cada sección de elementos del menú. Desea seleccionar el enlace "Haga clic aquí para configurar la imagen de encabezado" en cualquiera de los cuadros desplegables en los que desea colocar una imagen de encabezado.
Esto abrirá su biblioteca de medios. Seleccione la imagen de su biblioteca que desea usar para la imagen de encabezado de WordPress en esa página. Haga clic en el botón "Insertar en la publicación".
Verá que el archivo se ha agregado a esa área y aparece una marca de verificación que le informa que se ha configurado la imagen del menú.
Continúe y vaya a su sitio en vivo para comprobarlo. Simplemente haga clic en el elemento del menú para el que configuró la imagen y verá que la imagen ahora se muestra en el encabezado.
Nota: la imagen del encabezado de WordPress se mostrará según el estilo personal que establezca. La plantilla y la ubicación que establezca también afectarán el aspecto.
Pensamientos finales
Cuando se trata de originalidad, agregar imágenes de encabezado únicas es una excelente manera de diferenciarse. Cuanto más original sea su sitio web, más memorable será para los usuarios de su sitio web.
Una de las mejores maneras de hacer esto es crear imágenes de encabezado de WordPress personalizadas para los elementos de su menú. Esta es una forma única de mostrar funcionalidad y originalidad en su sitio web.
Ahora que tiene una herramienta fácil de usar para hacer esto, no será difícil agregar una imagen de encabezado a los elementos de su menú.
¿Ha tenido problemas para encontrar una solución que le permitiera manejar fácilmente este proceso? ¿Sigue codificando manualmente las imágenes de encabezado cuando las necesita?