Los menús de WordPress son increíbles. La interfaz de arrastrar y soltar lo hace muy fácil tanto para los desarrolladores como para los usuarios de temas de WordPress. En el pasado, le mostramos cómo agregar menús personalizados en WordPress y cómo diseñar menús personalizados. Una de las limitaciones de la interfaz visual del menú es que solo puede agregar enlaces (páginas, categorías o enlaces personalizados). ¿Qué sucede si desea agregar elementos personalizados a su menú de WordPress? Tal vez desee agregar una barra de búsqueda, enlaces de inicio/cierre de sesión, la fecha de hoy o cualquier otra cosa en su menú de WordPress. El hecho de que no haya una interfaz visual no significa que sea imposible. En este artículo, le mostraremos cómo utilizar el enlace wp_nav_menu_items para agregar elementos personalizados a todos los menús de WordPress o a menús específicos.

Nota: este tutorial es para desarrolladores de temas de WordPress, por lo que esperamos que sepas html/css básico y que entiendas cómo funcionan los temas de WordPress.

Obviamente, debe habilitar los menús personalizados en su tema antes de poder continuar.

Empecemos con lo básico. Necesitamos agregar nuestro propio filtro al gancho wp_nav_menu_items. A continuación se muestra un ejemplo:

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if (is_single() && $args->theme_location == 'primary') {
        $items .= '<li>Show whatever</li>';
    }
    return $items;
}

Ahora, como puede ver, puede usar declaraciones condicionales con el parámetro ubicación_tema. Esto le permite apuntar a ubicaciones de menú específicas utilizando cualquier criterio que desee. Si no desea una declaración condicional, no tiene que usarla. Simplemente agréguelo a una ubicación específica del menú y viceversa.

Ahora que ha visto un ejemplo básico, le mostraremos algunos ejemplos concretos de cómo funciona.

Agregue enlaces de inicio/cierre de sesión a menús específicos de WordPress

Si desea que sus usuarios puedan iniciar sesión/cerrar sesión, puede agregar enlaces en el menú personalizado. El fragmento de código a continuación mostrará el enlace de inicio/cierre de sesión del usuario de manera adecuada en la ubicación del menú: principal. Puede cambiar la posición del menú si es necesario.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Agregar barra de búsqueda a un menú específico

¿Quieres agregar una barra de búsqueda a un menú específico? Bueno, no busques más. Puede hacerlo pegando el siguiente fragmento de código:

add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' )
        return $items."<li ><form action='http://example.com/' id='searchform' method='get'><input type="text" name="s" id='s' placeholder="Search"></form></li>";

    return $items;
}

Agregue la fecha de hoy a un menú específico de WordPress

El fragmento de código a continuación agregará la fecha de hoy a su menú de WordPress. Si es necesario, puede usar nuestro folleto de fechas de hoy para ajustar el código.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
		
		$todaysdate = date('l jS F Y');
        $items .=  '<li>' . $todaysdate .  '</li>';

	}
    return $items;
}

Esperamos que este artículo permita a los desarrolladores ampliar la funcionalidad de sus temas.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.