Cómo crear un menú dinámico en WordPress

Publicado: 2022-10-23

WordPress es un sistema de administración de contenido (CMS) que le permite crear un sitio web o blog desde cero, o mejorar un sitio web existente. En este artículo, le mostraremos cómo crear un menú dinámico en WordPress. Un menú dinámico es un menú que cambia según la página que esté viendo. Por ejemplo, si está viendo una página sobre "Temas de WordPress", el menú mostrará enlaces a otras páginas sobre Temas de WordPress. Si está viendo una página sobre "Complementos de WordPress", el menú mostrará enlaces a otras páginas sobre Complementos de WordPress. Crear un menú dinámico en WordPress es fácil. Primero, necesitas crear un menú. En segundo lugar, debe agregar elementos al menú. En tercer lugar, debe asignar el menú a una ubicación. En cuarto lugar, debe agregar el código a su tema de WordPress. Comencemos con el primer paso: crear un menú.

En la Parte 2 de esta serie, vamos un paso más allá al crear menús de navegación dinámicos. Aprenderá a crear menús condicionales en función de su ubicación en Block Visibility mediante el uso del complemento Pro. Un tema de bloque se utiliza para crear partes de plantilla que se basan en principios de bloque. Este tutorial lo guiará a través de los pasos necesarios para crear un menú de navegación secundario en la página "Excursiones de senderismo". Es tan simple como hacer clic en el Editor del sitio para editar el encabezado del sitio web. Usando el control de Ubicación en el complemento Visibilidad de bloque, también podemos restringir la ubicación del menú secundario. En la base de conocimientos, seleccione la opción Ubicación y luego haga clic en el icono de puntos suspensivos para habilitarla.

Ahora podemos restringir la visibilidad del bloque a la página Excursiones de senderismo mediante el control de ubicación, que permite un mayor control sobre la visibilidad. La regla Publicar nos indica que seleccionemos un tipo de publicación de página, así como un tipo de página de "senderismo". En la configuración de la regla resultante, se debe seguir lo siguiente. En la página de inicio de nuestro sitio de demostración, podremos acceder a un nuevo menú condicional. El resto de este artículo está por completarse. Puede lograr esto usando una variedad de reglas y conjuntos de reglas. Para esta demostración, elegimos un ejemplo sencillo.

Para crear un nuevo menú, vaya a Apariencia. Haga clic en "Crear menú" si desea crear un menú secundario, "Mi menú personalizado" si desea crear un menú personalizado para una ubicación específica y "Menú secundario" si desea crear un menú secundario para otra ubicación. Después de agregar algunos elementos al menú, guárdelo (por ejemplo, Elemento de menú 1, Elemento de menú 2 y Elemento de menú 3).

¿Cómo creo un menú dinámico en el tema personalizado de WordPress?

Crédito: wisdmlabs.com

Una forma de crear un menú dinámico en WordPress es usar la función wp_nav_menu. Esta función le permitirá crear un menú que se genera automáticamente en función de la estructura de su sitio web. También puede usar esta función para crear un menú personalizado que sea específico para su tema.

Siguiendo estos pasos, puede crear un menú de navegación simple y dinámico en WordPress. El paso principal es registrar el menú de navegación usando la función register_nav_menus(). Para ejecutar esto, primero debe registrarlo en el archivo functions.php en su tema secundario y luego usar el gancho 'init'. En este ejemplo, aprovecharemos el menú del encabezado principal. El complemento Menú de navegación está disponible en WordPress.org y le permite asignar diferentes menús a diferentes usuarios según su función. También podemos usar este complemento para registrar varios menús al mismo tiempo. En el paso anterior, podemos diseñar el menú de navegación según el diseño del sitio haciendo referencia a las clases de CSS personalizadas en la llamada a la función WP_nav_menu.


Cómo crear un menú de encabezado dinámico en WordPress

Para crear un menú de encabezado dinámico en WordPress, primero deberá crear un menú personalizado. Para hacer esto, vaya a la sección Menús en el panel de administración de WordPress y haga clic en el enlace Crear nuevo menú. Ingrese un nombre para su menú y haga clic en el botón Crear menú. A continuación, deberá agregar elementos a su menú. Para hacer esto, haga clic en el enlace Agregar elementos y seleccione las páginas o publicaciones que desea agregar a su menú. Una vez que haya agregado todos los elementos que desea, haga clic en el botón de menú Guardar. Su menú de encabezado dinámico ahora está listo para usar.

Si creamos una página de menú dinámica con el método de página de menú dinámica de WordPress, que se describe más adelante en este tutorial, podremos cambiarla. En la navegación principal, se utiliza una imagen de fondo para cambiar la posición del elemento del menú en función de su ID. El uso de la etiqueta “span” nos permitirá ocultar el texto para poder ver la imagen de fondo tal y como la vemos nosotros. El código que usaremos es generado dinámicamente por WordPress, usando una clase especial llamada current_page_ancestor, por lo que debería verse así: No se dijo nada más. Si queremos aumentar el número de subpáginas, simplemente aumente o disminuya la configuración de profundidad = 2 para que muestre un número ilimitado de páginas. Usando CSS, el enlace de la página actual, como se muestra en la imagen a continuación, ahora es muy fácil de mostrar en negrita. Navegue a la página principal con una sección resaltada. Resalte la página secundaria del padre.

WordPress agrega dinámicamente elementos de menú

Puede agregar elementos de menú a los menús de WordPress a través del panel de administración de WordPress o agregando código a su tema. Si desea agregar un elemento de menú a un menú existente, simplemente inicie sesión en su sitio de WordPress y navegue a la página "Apariencia> Menús". Desde allí, puede agregar nuevos elementos de menú seleccionándolos desde el lado izquierdo y haciendo clic en el botón "Agregar al menú". Si desea agregar elementos de menú a través de código, deberá agregar algunas líneas de código al archivo functions.php de su tema. Lo primero que deberá hacer es crear una nueva función que agregará los elementos del menú. Esta función puede tener el nombre que desee, pero la llamaremos "my_ custom_menu_items()". Dentro de esta función, deberá usar el gancho de filtro "wp_nav_menu_items" de WordPress. Este enlace le permite agregar nuevos elementos a un menú existente. El código dentro de su función se verá así: function my_custom_menu_items( $items, $args ) { // Hacer algo con $items return $items; } add_filter('wp_nav_menu_items', 'my_custom_menu_items', 10, 2); El código anterior agregará una nueva función que se puede usar para agregar elementos a un menú existente. La función en sí aún no hace nada, pero proporciona un marco que puede usar para agregar sus propios elementos de menú personalizados. Para agregar elementos de menú, deberá modificar el código dentro de la función para satisfacer sus necesidades. Por ejemplo, si desea agregar un enlace a su página "Acerca de", usaría el siguiente código: function my_custom_menu_items ($items, $args) { $items .= 'About'; devolver $ artículos; } add_filter('wp_nav_menu_items', 'my_custom_menu_items', 10, 2); El código anterior agregará un nuevo enlace a su menú con el texto "Acerca de". Puede agregar tantos elementos de menú como desee agregando líneas de código adicionales dentro de la función.

Complemento de menú dinámico de WordPress

Un complemento de menú dinámico de WordPress es una excelente manera de agregar un poco de sabor a la navegación de su sitio web. Al permitirle crear menús que cambian según lo que miran sus visitantes, puede mantenerlos comprometidos y regresar por más.

Cómo crear un menú personalizado en WordPress

Para crear un menú personalizado en WordPress, deberá navegar a la sección "Apariencia" en el tablero y seleccionar la opción "Menús". Desde allí, puede crear un nuevo menú y agregar las páginas, categorías o enlaces personalizados que desee. Una vez que haya guardado sus cambios, puede asignar su menú recién creado a una ubicación en su sitio web a través de la pestaña "Administrar ubicaciones".

Vegibit le brinda una comprensión de cómo crear un tema de WordPress. El menú estará debajo del nombre del sitio y el área del eslogan, pero estará más arriba en el contenido del sitio. Para que aparezca el menú, primero debemos registrar la ubicación en el archivo functions.php del tema. Crea nuestro menú personalizado en el Panel de WordPress. Ahora es necesario registrar nuestro nuevo menú con el núcleo de WordPress. Con esta característica, ahora podemos administrar la ubicación del tablero. Queremos que se vea como si viniera directamente de la función WordPress_nav_menu().

En el siguiente paso, vincularemos a toda la lista de categorías. Es posible que pueda lograr un efecto de desplazamiento si mueve el mouse sobre cada enlace. Para tener una idea de cómo funcionará esto, hemos creado un archivo style.css. Queremos eliminar el subrayado de los enlaces y las viñetas de cada elemento de nuestra lista, así como eliminar el relleno y el margen de cada elemento. En el Resumen de WordPress, encontrará un procedimiento paso a paso para crear un menú personalizado. Esta es una excelente explicación de cómo usar un menú personalizado en un tema de WordPress. Nuestra tarea se hizo más fácil gracias a algunas funciones de WordPress. Una vez que el nuevo menú se vinculó a WordPress, fue sencillo agregar o eliminar cualquier tipo de contenido que deseáramos de ese menú.

Crear un menú personalizado en WordPress

Después de crear su menú, vaya a Apariencia. Podrá ver el nuevo menú en la página del menú. Tan pronto como lo seleccione, puede personalizarlo como mejor le parezca.