Cómo agregar elementos personalizados a menús específicos de WordPress

Los menús de WordPress son asombrosos. La interfaz de arrastrar y soltar hace que sea realmente fácil para los desarrolladores de temas de WordPress y los usuarios por igual. En el pasado, le mostramos cómo agregar un menú personalizado en WordPress junto con cómo diseñar un menú personalizado. Una cosa que está limitada en la interfaz visual de los menús es que solo puede agregar enlaces (páginas, categorías o enlaces personalizados). ¿Qué sucede si desea agregar un elemento personalizado a sus menús de WordPress? Tal vez desee agregar una barra de búsqueda o un enlace para iniciar / cerrar sesión, la fecha de hoy o cualquier otra cosa en un menú de WordPress. El hecho de que no haya una interfaz visual no significa que no sea posible. En este artículo, le mostraremos cómo puede utilizar el wp_nav_menu_items enganche para agregar elementos personalizados a todos o menús específicos de WordPress.

Nota: este tutorial está destinado a los desarrolladores de temas de WordPress, por lo que se espera que conozca html / css básico y una comprensión justa de cómo funcionan los temas de WordPress.

Obviamente, debe tener un menú personalizado habilitado en sus temas antes de poder continuar.

Empecemos con lo básico. Necesitamos agregar nuestro propio filtro en wp_nav_menu_items gancho. Un ejemplo se vería así:

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 .= '
  • Show whatever
  • '; } return $items; }

    Ahora, como puede ver, puede usar las declaraciones condicionales junto con el argumento tema_ubicación. Esto le permite orientar una ubicación de menú específica con cualquier condición que desee. Si no desea la declaración condicional, no tiene que usarla. Simplemente agréguelo a una ubicación de menú específica o viceversa.

    Ahora que ha visto un ejemplo básico, permítanos mostrarle algunos ejemplos específicos de cómo funcionaría.

    Agregar enlaces de inicio / cierre de sesión a un menú específico de WordPress

    Si desea dar a sus usuarios la capacidad de iniciar / cerrar sesión, entonces un lugar donde puede agregar los enlaces es en su menú personalizado. El fragmento a continuación mostrará enlaces de inicio / cierre de sesión a sus usuarios adecuadamente en la ubicación del menú: principal. Puede cambiar la ubicación del menú si lo desea.

    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 .= '
  • Log Out
  • '; } elseif (!is_user_logged_in() && $args->theme_location == 'primary') { $items .= '
  • Log In
  • '; } return $items; }

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

    ¿Desea agregar una barra de búsqueda a un menú específico? Pues no busques más. Puede hacerlo pegando el siguiente fragmento:

    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."";
    
        return $items;
    }

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

    El fragmento a continuación agregará la fecha de hoy a su menú de WordPress. Puede utilizar nuestro manual de Fecha de hoy para modificar el código si lo desea.

    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 .=  '
  • ' . $todaysdate . '
  • '; } return $items; }

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