Cómo crear un menú de navegación personalizada en wordpress veinte quince

Video: Tutorial de Wordpress desde cero -- Video 30: Menús personalizados

Después de agregar la función del menú, a su tema de WordPress (o si ya está utilizando un tema que tiene la función de menú), la construcción de menús es fácil - sólo tienes que seguir estos pasos:

  1. Haga clic en el enlace de menús en el menú Apariencia en su tablero de instrumentos.

    Video: Crear Menú y submenú en wordpress. Entradas, páginas, categorías y enlaces

    La página de menús se abre en el panel de WordPress.

  2. Escriba un nombre en el cuadro Nombre del menú y haga clic en el botón Crear menú.

    La página de menús se vuelve a cargar con un mensaje que le dice que su nuevo menú ha sido creado.

  3. Añadir enlaces a su menú de nueva creación.

    WordPress te da tres formas de añadir enlaces al nuevo menú que acaba de crear:

  4. páginas: Haga clic en el enlace Ver todos para mostrar una lista de todos los página (s) que ha publicado en su sitio. Seleccione la casilla junto a los nombres de las páginas que desee agregar a su menú. A continuación, haga clic en el botón Añadir al Menú.

  5. Enlaces personalizados: En el campo URL, escriba la dirección URL del sitio web que desea agregar (https://google.com). A continuación, escriba el nombre del enlace que desea que aparezca en el menú en el campo de texto Etiqueta (Google). A continuación, haga clic en el botón Añadir al Menú.

  6. Categorías: Haga clic en el enlace Ver todos para mostrar una lista de todas las categorías que ha creado en su sitio. Seleccione la casilla junto a los nombres de las categorías que desee agregar al menú. A continuación, haga clic en el botón Añadir al Menú.

  7. Revise las opciones de menú en la parte derecha de la página.

    Cuando agrega nuevos elementos de menú, la columna en la parte derecha de la página de menús puebla con sus opciones de menú.

  8. Editar las opciones de menú, si es necesario.

    Haga clic en el enlace Editar situado a la derecha del nombre del enlace del menú para editar la información de cada enlace individual en su nuevo menú.

  9. Guarde su menú antes de salir de la página de menús.

    Asegúrese de hacer clic en el botón Guardar del menú en Configuración del menú en el lado derecho en la parte superior de la página de menús. Aparece un mensaje que confirma que el nuevo menú se ha guardado.

    Las opciones de menús personalizados en la página de menús en el tablero de instrumentos.
    Las opciones de menús personalizados en la página de menús en el tablero de instrumentos.

Puede crear tantos menús como usted necesita para su sitio web. Sólo tiene que seguir los parámetros de la etiqueta de plantilla de menú para asegurarse de que está tirando en el menú correcto en el lugar correcto en el tema. Prestar atención a usar el identificador de menú o menú en el nombre de etiqueta de plantilla.

A encontrar más opciones para sus menús de navegación haciendo clic en la pestaña Opciones de la pantalla en la esquina superior derecha de su tablero de instrumentos. A partir de ahí, se puede añadir cosas como mensajes de correos y más tipos de opciones de menú, así como añadir descripciones de elementos de menú.

El formato HTML del menú se genera como una lista desordenada, por defecto, y es la siguiente con el código fuente de los sitios:

Aviso en el formato HTML que la primera línea define Identificación CSS y clase: menú principal class =menúgt;. El ID en esa línea refleja el nombre que le dio a su menú. Esta asignación de nombres de menú en el CSS y el formato HTML es la razón por WordPress permite el uso de CSS para crear diferentes estilos y formatos para sus diferentes menús.

Al desarrollar temas para sí mismo o a otros a utilizar, usted quiere asegurarse de que el CSS que defina para los menús se puede hacer cosas como la cuenta de subpáginas mediante la creación de efectos del menú desplegable. Esto se puede hacer de varias maneras diferentes. El ejemplo siguiente es un bloque de CSS que se puede utilizar para crear un estilo agradable para su menú (CSS este ejemplo se supone que tiene un menú llamado “principal” - por lo tanto, el código HTML y CSS marcado indican menú principal).

# Menú principal {width: 960; font-family: Georgia, Times New Roman, Trebuchet MS-font-size: 16px; color: # FFFFFF-margin: 0 auto 0-clear: both-overflow: hidden -} menú # -main ul {width: 100% -float: left; list-style: none; margin: 0-padding: 0 -} # menú principal li {float: left; list-style: none;} # menú principal li a {color: # FFFFFF-display: block-font-size: 16px; margin: 0-padding: 12px 15px 12px 15px; text-decoration: none; position: relative -} # menú principal li a: hover, # menú -main li a: activo, # menú principal .current_page_item un menú principal # .Current-gato un, # menú principal elemento de menú .Current {color: #CCCCCC -} # menú principal li li a, menú principal # li li a: link, menú principal # li li a: visited {background: # 555555 color: # FFFFFF-width: 138px; font-size: 12px; margin: 0-padding: 5px 10px 5px 10px ; border-left: 1px solid # FFFFFF-border-right: 1px solid # FFFFFF-border-bottom: # FFFFFF-sólida posición 1px: relative -} menú principal # li li a: hover, menú principal # li li a : activa {background: # 333333-color: #FFFFFF -} # menú principal li ul {z-index: 9999-position: absolute-l EFT: -999em-height: auto-width: 160px;} # li-menú principal Ul un {width: 140px;} # menú principal li ul ul {margin: 0 0 -31px 159px;} # li-menú principal: ul ul vuelo estacionario, # menú principal li: hover ul ul {left: -999em -} # menú principal li: hover ul, # menú principal li li: hover ul, # menú principal li li li: hover ul, {left: auto -} # menú principal li: hover {position: static-}

El CSS se utiliza para personalizar la visualización de los menús será diferente. Después de que la caída del uso de CSS, puede probar diferentes métodos, colores y estilo para crear un diseño personalizado de su propio.

Artículos Relacionados