Una guía pasito a pasito para hacer y ajustar menús de WordPress
Si no hay menús ni submenús, no hay bastantes sitios de WordPress. Estos menús de WordPress asimismo son simples de ajustar a su gusto. Por esa razón su menú de WordPress es una herramienta de "primera línea" que puede asistirlo a conseguir altos resultados de la búsqueda y sostener a los visitantes en su portal web.
Nuestra pantalla de WordPress esconde la dificultad de su menú. Asimismo puede enseñar menús en múltiples sitios de su lugar. Si tiene ciertas capacidades de programación, hay opciones prácticamente sin límites para ajustar su menú de WordPress.
En el presente artículo, le damos una guía descriptiva sobre de qué forma hacer un menú de WordPress. Asimismo le exponemos de qué forma emplear esta función y mejorarla de distintas formas.
Para comenzar, un menú de WordPress en general se compone de múltiples links (incluyendo los menús desplegables). Esta es una característica fácil, solo la "columna vertebral" de la columna vertebral de su cibersitio.
Ejemplo de un menú de WordPress.
En la próxima sección, observaremos mucho más de cerca dónde ve el menú en el sitio web. En este momento sabe que se tienen la posibilidad de poner donde quiera mostrarlos. Solo tiene la posibilidad de tener ciertas opciones preseleccionadas (según el área del widget). Técnicamente, no obstante, el menú se puede poner en cualquier sitio.
Naturalmente, el menú de WordPress es fundamental para andar por el ubicación. Un menú de navegación claro asiste para los individuos a andar por su portal web y disminuye las tasas de choque.
Tienen un propósito diferente: su menú asistencia con la optimización de buscadores (SEO). La optimización de los menús de WordPress para SEO se habla mucho más de lo que omite que de lo que redacta. Primero, puede remover elementos como nubes de etiquetas y sostener pequeñísima la proporción de links agregados.
Más allá de que Google plus le deja añadir hasta 250 vínculos a una página, es esencial sostener un prominente "valor de vínculo". En consecuencia, en un largo plazo, se favorecerá de una reducción en el número de links externos.
Como va a saber, puede seleccionar una composición de menú de WordPress diferente para amoldarse a las pretensiones de su app.
Por servirnos de un ejemplo, los menús de título se usan mucho más por el hecho de que navegan por la página primordial. De manera frecuente, asimismo va a ver menús mucho más pequeños sobre la navegación primordial, en tanto que este es un enorme sitio para localizar iconos de comunidades, barras de búsqueda, etcétera.
El sitio de Kinsta Partner SAU / CAL tiene un menú "fly-in" que incluye navegación y links sociales:
Display fly-in con 2 menús.
Este menú exhibe mucho más usos para los menús de WordPress que andar por websites. Con las funcionalidades incorporadas de WordPress (mucho más sobre esto mucho más adelante), puede hacer menús para prácticamente cualquier cosa que necesite.
El pie de página es tan habitual como la navegación del título. De manera frecuente emplea esta área para reiterar su navegación primordial a los individuos que se desplazan hacia abajo. Además de esto, es un enorme rincón para otorgar links contextuales a sus bienes y prestaciones:
Menú parado de página de Kinsta.
Si el lugar lo emplea, asimismo va a ver un menú en la barra del costado:
Ejemplo de navegación de la barra del costado.
Más allá de que habitualmente no ve la navegación primordial aquí, es un espacio clásico para links sociales, ficheros de publicaciones de weblogs, etcétera.
Con independencia de su nivel profesional, hacer un menú de WordPress es un desarrollo serio. Hay tres maneras de llevar a cabo el trabajo: usar las funcionalidades incorporadas de WordPress, disponer el complemento conveniente o mancharse las manos con el código.
Ahora, le exponemos de qué manera usar las tres maneras de hacer un menú de WordPress.
1. Utilice las funcionalidades incorporadas de WordPress para hacer un menú
WordPress tiene herramientas incorporadas para asistirlo a hacer menús. Nuestra pantalla del gestor de WordPress es familiar para todos, salvo para el usuario mucho más nuevo.
Cuadro de menú de WordPress.
Naturalmente, hay varios provecho al utilizar la ocupación nativa para hacer menús de WordPress. Primero, eres completamente coincidente con tu portal web. Además de esto, puede hacer menús usando el diseño familiar y las herramientas nativas.
Para llegar, ve a Fachada> Menú Páginas de WordPress:
Link al menú de WordPress.
Esta pantalla está dividida en múltiples partes distintas. Hay opciones arriba para escoger el menú de hoy o hacer un nuevo menú:
Selección de menú desplegable.
Si decides hacer un nuevo menú, dale un nombre y míralo Configuraciones de menú Parte:
Sección "Configuración del menú".
Existen muchas casillas de verificación, pero debe tomar 2 resoluciones primordiales:
- Añada de forma automática páginas de nivel superior al menú. Aquí, "nivel superior" tiene relación a las páginas que crea en WordPress que no son subpáginas de otras páginas. Por servirnos de un ejemplo, una publicación de blog no es una página de nivel superior, por el hecho de que habitualmente es una página del archivo de nivel superior (p. Ej. / Blog). Por otra parte, la página de Contacto tiende a estar en el nivel superior pues comunmente no posee un nivel superior.
- Localización del menú. Cada tema tiene su espacio de menú. Salvo que cambie los ficheros primordiales del tema, los programadores del tema han codificado estos elementos del menú. Para muchos temas, posiblemente logre personalizarlos mediante su configuración.
En el momento en que haya terminado, realice click en Crea un menú Solucionar. La pantalla se actualizará para enseñarle un nuevo menú. Ahora, mire el lado izquierdo de la pantalla:
Elemento de menú de acordeón.
Esta pantalla cuenta todas y cada una de las publicaciones, páginas, taxonomías y otros elementos de su ubicación a los que quiere vincular. Para hacer un menú, elija la casilla de verificación de la izquierda y realice click en Añadir al menú Solucionar.
Esto los desplaza menú Monitor:
Arrastre y suelte elementos en la sección Composición del menú.
Aquí puede añadir elementos de menú arrastrando y soltando. Si clickea en la flecha de extensión al lado de cada elemento, asimismo puede añadir o remover un título para el elemento del menú:
Expanda el elemento del menú.
Tan rápido como hagas click Almacenar menú, puedes irte en este momento. No obstante, si amplía el menú Configuración de pantalla en la parte de arriba de la pantalla, puede utilizar el menú de WordPress para efectuar mucho más funcionalidades:
Panel de configuración de pantalla.
Esta Elemento de visualización Utilice el conjunto para poder ver la celda clave en la barra del costado izquierda. En comparación con, Enseñar funcionalidades de menú destacadas el conjunto exhibe el destino, la descripción y la clase CSS del elemento del vínculo.
Hay otro lado menú La imagen es digna de mención. Link personalizado En el cuadro, puede poner el link de su decisión en vez de la página predefinida en su página web:
Cuadro de misión de link personalizado.
Esta alternativa se emplea para añadir links de comunidades a su menú de WordPress. La interfaz es correcta para usted Muestre el icono pertinente al ubicación que ha elegido a fin de que tenga la posibilidad de enseñar un óptimo logotipo para el ubicación que eligió.
2. Utilice los complementos para hacer un menú personalizado de WordPress.
La solución directa para añadir ocupación a WordPress son los complementos. La sección previo explicó por qué razón las opciones nativas en WordPress son prácticamente lo que precisa, pero los complementos tienen la posibilidad de agrandar esta ocupación.
Una pregunta es: ¿Precisa un complemento separado (y agregada) para hacer menús de WordPress? Si bien existen muchas buenas causas para esto. Primero, comunmente crea menús basados en estilos que no están libres en la configuración ya establecida. Las extensiones le dejan conseguir un diseño receptivo particular, "menús enormes", etcétera.
Además de esto, puede hacer menús con un editor particular y, habitualmente, seleccionar entre plantillas preestablecidas. Adjuntado con extensas opciones de personalización, no posee una solución sin código para eso da un menú de WordPress conveniente para su portal web.
Por poner un ejemplo, a la extensión Max Mega Menu no le llama la atención lo que puede conseguir:
Extensión máxima del mega menú.
Tras la instalación y activación, hallará uno nuevo. Enorme menu Cuadros de control en WordPress:
Link al elemento del menú de WordPress.
Si miras Localización del menú Va a ver un display con mucho más opciones de personalización:
Pantalla de elementos de menú de Max Mega.
Asimismo puede utilizar y ajustar temas de menú en exactamente la misma medida que varios de los mejores desarolladores de páginas:
Visualización del tema Max Mega Menu en el menú.
Tenemos la posibilidad de cavar mucho más aquí, aun si nos repetimos. Le aconsejamos que lea nuestra publicación previo sobre las extensiones de menú de WordPress. Hemos cubierto en aspecto de qué forma escoger y utilizar la extensión adecuada.
3. Cree código para hacer un menú personalizado de WordPress
Redactar su menú de WordPress es una manera fiable de conseguir sus propósitos valientes (o si es un creador que crea un nuevo tema de WordPress). Naturalmente, no abre el editor de código todos y cada uno de los días para añadir menús. Para llevar a cabo esto, utiliza las herramientas auténticos de WordPress (o probablemente complementos).
En otras expresiones, si quiere desarrollar un tema, estudiar a redactar un menú de WordPress es un requisito clave. Hay 4 partes para el éxito:
- Registre su menú.
- Exhibe el menú de WordPress en el diseño.
- Muestre otro contenido en su menú o sus elementos.
- Modificar devolución de llamada.
Suponemos que está habituado a utilizar un editor de código, que tiene un ambiente de avance servible y que sus capacidades son muy sólidas. Si no posee un tema que quiera emplear, puede utilizar las opciones estándar de WordPress o escoger uno de nuestros temas de WordPress mucho más veloces de nuestra lista.
En el momento en que haya terminado, debe abrir el tema. Función. Php archivo. Tenga presente que o sea diferente de un fichero habitual de WordPress con exactamente el mismo nombre. Aquí debe registrar su menú; en otras expresiones, debes mencionarle a WordPress que es Fachada> Menú Una página de un libro. Para realizar esto, use la función register_nav_menus ():
function register_my_menus()
add_action( 'init', 'register_my_menus' );
Este código afirma Regentar localización Pestañitas de WordPress para enseñar 2 menús: Menú de título con Menú diferente:
Registre el menú en WordPress.
Ahora, debe entrar al menú usando la función wp_nav_menu (). Lo añade al fichero de plantilla que se ajusta a enseñar el menú. En nuestro ejemplo, utilizamos un título, con lo que añadimos el próximo código al tema Fichero primordial archivo:
wp_nav_menu( array( 'theme_location' => 'header' ) );
Es posible que este código esté comprimido if Opinión y ciertos otros menús, conque asegúrese de continuar las políticas que halle.
En este punto, puede emplear los menús de WordPress como todos menú. No obstante, asimismo puede añadir otro contenido a los elementos del menú si lo quiere. Por servirnos de un ejemplo, puede expandir una tabla concreta para integrar una entrada HTML que hace aparición en el momento en que se imprime:
wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);
Su última labor es determinar una petición de llamada. Si no está el menú concretado, WordPress mostrará un menú terminado de manera ya establecida. De forma alternativa, si no se elige un menú personalizado, WordPress exhibe un menú de página; si no lo deseas puedes llevarlo a cabo theme-location Factores y mucho más a. Añadido fallback_cb Alegato:
wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);
Cuando sepa de qué manera hacer un menú de WordPress, puede empezar a progresar sus especificaciones. Observaremos esto en la última sección a fin de que tengamos la posibilidad hacer un caso de celda contenedor personalizado para WordPress.
Cuando esta sección haya progresado, se van a hacer ciertas suposiciones antes de seguir:
- Saben de qué forma hacer un menú de WordPress utilizando PHP.
- Su conocimiento de PHP basta para estudiar ciertos temas avanzados.
- Saben de qué manera registrar y formatear complementos de WordPress.
Esto está fuera del alcance de este producto, pero puede hacer novedosas plantillas de complementos estandarizados usando el generador de placas de calderas de complementos de WordPress.
Complemento de WordPress generador de placas de caldera.
En el momento en que haya terminado, cree el complemento y cárguelo en WordPress:
Nuevo complemento instalado para WordPress.
Ahora, vaya a la carpeta de extensión y abra el fichero primordial. Añade el próximo código:
/**
* Add menu misión box
*
* @param object $object The misión box object
* @backlink https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object )
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);
La función de WordPress add_meta_box () registra el metacampo con su gestor de WordPress. Va a deber proveer ciertos factores en la documentación oficial. Asimismo utilizamos el filtro nav_menu_meta_box_object () por el hecho de que Menú de Navegación. Php Fichero para vincular. Esta guía establece si la función añade un factor de menú al género de objeto metabox. En el momento en que el filtro está andando, add_meta_box Registre el metabox personalizado.
Detallar la función de devolución de llamada
Ahora, tenemos la posibilidad de modificar la función de devolución de llamada para hacer contenido HTML en el metacampo:
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box()
La variable general recuerda el ID de menú de hoy y $walker Guarde la novedosa instancia Walker_Nav_Menu_Checklist Propósito. Esto crea una lista HTML de elementos de menú.
Desde ahí, requerimos detallar la pestañita activa en el metacampo personalizado, para ello establecemos el valor en valor $current_tab, Trabaja en las elipses del bloque de código previo.
Empleamos 2 pestañitas aquí, pero puede añadir tantas pestañitas como quiera:
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] )
La próxima línea consigue a todos y cada uno de los individuos con ingreso de escritura y añade varios atributos $authors Propósito:
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* equipo values to required item properties */
foreach ( $authors as &$author )
$removed_args = array( 'action', 'customlink-tab', 'editar-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>
Aquí, get_users Volver a poner la mesa $usuario Objeto elegido con factores detallados who Este factor ordena a WordPress a preguntar la banco de información para los individuos con ingreso de escritura.
Además de esto $admins La tabla guarda el grupo de autores en el momento en que se $removed_args Se almacena la lista de cambiantes de solicitud que se suprimirán.
En este momento puede imprimir la etiqueta del misión campo. Para realizar esto, se crean títulos de pestañitas y links.
Asegúrese de ofrecerle al elemento Metabox el nombre de clase, ID y atributos de datos adecuados; en caso contrario, el menú no va a funcionar como se suponía.
Los dos add_query_arg con remove_query_arg Valor particular en la pestañita Configuración de funcionalidades authorarchive-tabs Cambiantes y suprima las cambiantes superfluas.
En este punto, poseemos un metabox con las pestañitas detalladas:
Pestañita en blanco en el metacampo del creador.
El próximo paso es hacer el contenido HTML de la pestañita.
Hacer contenido HTML para pestañitas de metacampo
Tienes que continuar el código de la sección previo. custom_menu_meta_box() Función. Para hacer contenido, vaya a
Etiquetas que escribiste en la sección previo:
Para resumir, cada pestañita tiene dentro una lista de casillas de verificación. La función Walk_nav_menu_tree () toma tres factores para imprimir la lista: $elementos, $depth, con $r - Todo el planeta lo precisa.
Esta $elementos La matriz guarda un conjunto de individuos gestores array_map() La función utiliza la función wp_setup_nav_menu_item () $admins Y añada el atributo de elemento de menú al elemento de tabla.
El metabox del creador está repleto de individuos.
Desde esto tenemos la posibilidad de añadir un acabado.
El botón Añadir manda
La mayor parte de los metaboxes customizados están preparados, si bien todavía no los hemos añadido mandar Botones y también icono giratorio.
Aquí hay un pequeño código que puedes pegar justo después del bloque previo:
Autores metacampo rellenado en WordPress.
Sabiendo esto, ¡puede añadir prácticamente cualquier función al menú! Tenga presente que GitHub asimismo tiene un comprendio público del complemento descargable gratis.
Generalizar
El menú de WordPress es una sección esencial de su cibersitio. Por consiguiente, la interfaz da un panel original y fuerte que deja ajustar cualquier menú de una web. No obstante, no posee todo cuanto precisa predeterminado.
Hay múltiples opciones de visualización para añadir etiquetas CSS y mucho más. Además de esto, al disponer complementos, puede cambiar menús enormes desde sus menús originarios y explotar las funcionalidades destacadas que hacen que los menús (entre otras muchas cosas) sean mucho más receptivos. La codificación asimismo es una alternativa y, más allá de que esta es una labor riguroso para un principiante, puede llevarlo a cabo por la tarde.
¿Deseas ajustar tu menú de WordPress? Si es de esta forma, ¿qué procedimiento vas a emplear? ¡Comparta sus pensamientos y críticas en los comentarios ahora!
Ahorre tiempo, dinero y maximice el desempeño del lugar:
- Asistencia instantánea de especialistas en hosting de WordPress, 24 horas cada día, 7 días por semana.
- Integración de Cloudflare.
- La audiencia global incluye 28 centros de datos en el mundo entero.
- Utilice la supervisión dentro del desempeño de las apps para mejorar.
Todo lo mencionado y mucho más en un solo plan sin contratos en un largo plazo, asistencia de inmigración y una garantía de devolución de dinero de 30 días. Consulte los proyectos o hable con su gerente de ventas para localizar un plan que ande para usted.
Deja una respuesta