Creación de Encabezado y Menú de Navegación en WordPress
Cada sitio de WordPress es diferente. Esto se debe a que todos eligen un tema diferente o» apariencia » para su sitio. Crear un encabezado y un menú de navegación superior en WordPress será un proceso ligeramente diferente para cada sitio.
Aquí estoy usando el framework de temas Genesis para WordPress porque me encanta. Sin embargo, habrá puntos importantes en este artículo que ayudarán a cualquier persona con un sitio web de WordPress.
Esto es parte de una serie de artículos y videos donde creo un sitio web desde cero. Primero expliqué cómo hacer un tema hijo para el marco de trabajo de Génesis y luego escribí sobre cómo comenzar a diseñar el tema agregando el fondo y el logotipo.
Agregar un enlace de Facebook, un enlace de Twitter y otra información al encabezado
Después de haber agregado el logotipo en la parte superior izquierda del encabezado de nuestro sitio, ahora agregaremos información adicional al lado derecho de nuestro encabezado. En este caso, agregaremos enlaces de Twitter y Facebook, etc. a modo de widget.
Tengo que admitir que me he vuelto un poco loco últimamente, habiendo sido un poco desdeñoso con ellos en el pasado. ¿Qué es un widget? Bueno, son partes independientes de un sitio web que puedes arrastrar y controlar a través de un área de widgets fácil de usar.
Una de las muchas bellezas de Genesis es su capacidad de ampliar cualquier área del sitio web sin esfuerzo. Así que:
- Si desea un orden diferente de cajas en la barra lateral, puede hacerlo en segundos.
- Si quieres una publicación destacada aquí, 5 encabezados de categoría más recientes con miniaturas en la página de inicio, puedes hacerlo en segundos.
- Si quieres una barra de búsqueda, compartir en redes sociales, feed de Twitter, calendario, nube de etiquetas, etc., aquí, allí o en cualquier lugar, puedes hacerlo en segundos.
Esta funcionalidad de back-end intuitiva y fácil de usar es particularmente útil cuando se crean sitios web para clientes que desean la capacidad de controlar todas las áreas de un sitio web pero carecen de las habilidades para hacerlo.
De todos modos, en este caso necesitamos crear nuestro propio widget personalizado y lo hacemos arrastrando un Widget de texto al área Derecha del encabezado en la interfaz de Widgets de Apariencia > en WordPress.
Y en este Widget de texto puedes poner HTML. Aquí está el HTML que puse para este sitio en particular. Solo tengo un enlace a una página de Facebook, un enlace de Twitter y un número de teléfono.
<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>
Y aquí está el CSS para darle estilo a lo anterior:
#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}
Esto es lo que aparece en el lado derecho de la cabeza como resultado:
Video de agregar información de encabezado y menú de navegación
En este video muestro cómo agregar el widget al encabezado y cómo darle estilo al menú en Génesis.
Crear el menú de navegación superior
Los menús de navegación superiores (o «barras de navegación») solían ser la pesadilla de mi existencia, pero ahora, con los menús de Génesis y WordPress, he desarrollado un sistema realmente fácil de crearlos que toma segundos en lugar de horas.
Genesis ya tiene la capacidad de tener un Menú de Navegación Primario y Secundario. Para este ejemplo en particular, me deshice del Menú de Navegación Secundario utilizando la Configuración del tema Genesis, ya que el cliente solo quería uno.
En el video de arriba, muestro cómo modifico el CSS para que el menú se vea como el de la imagen PSD que hice.
Al usar las Herramientas de desarrollo de Chrome o el complemento Firebug para Firefox, puede saber qué selectores del HTML se están utilizando en el CSS para dar estilo al menú.
#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }
Como se puede ver en el video anterior, aumenté el radio de las esquinas redondeadas, agregué un fondo degradado y cambié el color del borde del menú. Así que ahora el menú no se parece al aburrido gris que se obtiene con una instalación de vanilla Genesis.
También agregué el siguiente CSS para cambiar el color del texto en el menú a blanco.
#nav li a {color: #fff; }
También existe la posibilidad de cambiar el estilo de los enlaces de la página actual, los enlaces flotantes, los enlaces de subpágina y los enlaces de subpágina.
Con Genesis, puede tener fácilmente menús desplegables para subpáginas (o páginas secundarias) y luego enlaces desplegables para subpáginas (o páginas de nietos). Puede tenerlos en los menús de navegación Principal y Secundario.
Crear páginas, páginas secundarias y páginas para nietos
Aquí está mi video donde agrego nuevas páginas al menú de WordPress para que aparezcan en el menú de navegación como páginas, páginas secundarias (como desplegables) y páginas para nietos (como desplegables).
Puede elegir una página para ser una página de hijo o nieto en Padre en el editor de páginas. Y cuando mira las páginas (debajo de Páginas > Todas las páginas), las páginas de niño y nieto están sangradas debajo de sus padres. Hacer esto también les dará una URL lógica (por ejemplo, www.site.com/music/jazz/charlie-parker donde la página «Charlie Parker «es un hijo de» Jazz», que es un hijo de»Música»).
Crear un menú de navegación con desplegables y desplegables
Para que estas páginas aparezcan correctamente en el menú de navegación, solo tiene que arrastrarlas y soltarlas en sus respectivas posiciones en los Menús de Apariencia >. Una vez más, las páginas secundarias están sangradas bajo su padre. No olvides darle un nombre al menú (como «barra de navegación», por ejemplo) y configurarlo para que sea el menú de navegación principal.
Por lo tanto, organizar las páginas en el área de menús de Apariencia de WordPress > de esta manera…
… creará un menú desplegable con desplegables como este:
Por favor, vea el video de arriba para una demostración de esto.
¿Qué opinas?
¿Qué opinas de este método de editar el encabezado y el menú de navegación de un sitio web? Hacerlo de una manera diferente?