Cómo agregar la característica de menús personalizada a un tema de wordpress
La característica de WordPress menús personalizados ya está integrado en la Vigésima Trece tema por defecto, por lo que no tiene que preocuparse por la preparación de su tema para él. Sin embargo, si usted está utilizando un tema diferente, o la creación de su cuenta, siga estos pasos para agregar esta funcionalidad:
En el panel, seleccione Apariencia → Editor.
Video: Crear menu y submenu con paginas en Wordpress
Aparecerá la página de edición de temas.
Haga clic en las funciones de temas (functions.php) modelo.
La plantilla Funciones del tema se abre en el editor de texto en el centro de la página de edición de temas.
Escriba la siguiente función en una nueva línea en cualquier lugar por encima del cierre ?gt; en la plantilla Funciones temáticas:
// Añadir menú SUPPORTadd_theme_support ( `nav-menús`) -
Esta etiqueta de plantilla WordPress dice que su tema puede utilizar la función de menús personalizados.
Haga clic en el botón de actualización de archivos para guardar los cambios en la plantilla.
Video: Curso Wordpress: 7 - crear y configurar menús
Un enlace de menús aparece en el menú Apariencia.
Luego, si desea añadir la etiqueta de plantilla menús a la plantilla de cabecera (header.php).
En la página de edición de temas, abra la plantilla de cabecera (header.php).
Video: Agregar iconos a los menús en WordPress
La plantilla de cabecera se abre en el editor de texto en el medio de la página de edición de temas.
Agregue el siguiente código de plantilla escribiéndolo en una nueva línea en cualquier parte de la plantilla de cabecera (header.php):
? Lt; php wp_nav_menu () - gt?;
Se necesita esta etiqueta de plantilla para que el menú usted construye usando la función de menús personalizados aparece en la parte superior de su página web. Tabla 12-6 da los detalles de los distintos parámetros que puede utilizar con el wp_nav_menu () - etiqueta de plantilla para personalizar la pantalla para que se adapte a sus necesidades.
Haga clic en el botón de actualización de archivos para guardar los cambios que ha realizado en la plantilla de cabecera.
El menú de navegación que se genera en la página de menús en el salpicadero (elija Apariencia → Menús) aparece ahora en el área de encabezado de su página web.
Este es el vigésimo Trece tema por defecto con un menú de navegación que aparece debajo de la cabecera gráfica (se ve el hogar enlaces, blog, y Acerca de).
Puede crear un menú principal en el panel de WordPress. La etiqueta de plantilla utilizado en el tema para mostrar que el menú es el siguiente:
? Lt; php wp_nav_menu ( ‘principal’) - gt?;
El formato HTML del menú se genera como una lista desordenada, por defecto, y se ve así:
Aviso en el formato HTML que la primera línea define el ID de CSS y clase:
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 permite el uso de CSS para crear diferentes estilos y formatos para sus menús.
Al desarrollar temas para sí mismo oa otros, asegúrese de que el CSS que defina para los menús representa mediante la creación de páginas secundarias desplegable efectos lista, o enlaces que caen en el menú cuando se pasa el puntero del ratón sobre el enlace principal de los padres. Esto se puede hacer de varias maneras. Aquí es un bloque de CSS que se puede utilizar para crear un estilo agradable para su menú.
# 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: # FFF-display: block-font-size: 16px; margin: 0-padding: 12px 15px; text-decoration: none; position: relative -} # menú principal li a: hover, # menú principal li a: activo, # menú principal .current_page_item un menú principal # .Current-gato un, # menú principal .Current-elemento de menú {color: #CCC -} # menú principal li li a, #menu -main li li a: link, # menú principal li li a: visited {background: # 555-color: # FFF-width: 138px; font-size: 12px; margin: 0-padding: 5px 10px; border-left : 1px solid # FFF-border-right: 1px solid # FFF-border-bottom: 1px solid # FFF-position: relative -} menú principal # li li a: hover, menú principal # li li a: active {background : # 333-color: #FFF -} # menú principal li ul {z-index: 9999-position: absolute-left: -999em-height: auto-width: 160px;} # Menú principal li ul un {width: 140px;} # menú principal li ul ul {margin: -31px 0 0 159px;} li # menú principal: hover ul ul, # menú principal li: hover ul ul ul {left: -999em -} # li-menú principal: hover ul, # menú principal li li: hover ul, # menú principal li li li: hover ul {left: auto -} # li-menú principal: hover { posición: static-}