SÄ hÀr lÀgger du till anpassade objekt till specifika WordPress-menyer

Hur man visar olika menyer för inloggade anvÀndare pÄ WordPress

WordPress-menyer Àr otroliga. Drag-drop-grÀnssnittet gör det vÀldigt enkelt för WordPress-temautvecklare och anvÀndarna. Tidigare har vi visat dig hur du lÀgger till anpassad meny i WordPress tillsammans med hur du utformar en anpassad meny. En sak som Àr begrÀnsad i det visuella grÀnssnittet i menyer Àr att du bara kan lÀgga till lÀnkar (sidor, kategori eller anpassade lÀnkar). Vad hÀnder om du vill lÀgga till ett anpassat objekt i dina WordPress-menyer? Du kanske vill lÀgga till en sökfÀlt eller logga in / ut lÀnk, dagens datum eller nÄgot annat i en WordPress-meny. Bara för att det inte finns nÄgot visuellt grÀnssnitt betyder det inte att det inte Àr möjligt. I den hÀr artikeln visar vi dig hur du kan anvÀnda kroken för att lÀgga till anpassade objekt till alla eller specifika WordPress-menyer.

Obs: den hÀr guiden Àr avsedd för WordPress-temautvecklare, sÄ det förvÀntas att du kÀnner till grundlÀggande html / css och en rÀttvis förstÄelse för hur WordPress-teman fungerar.

Uppenbarligen mÄste du ha anpassad meny aktiverad i dina teman innan du kan gÄ vidare.

LÄt oss börja med grunderna. Vi mÄste lÀgga till vÄrt eget filter i kroken. Ett exempel skulle se ut sÄ hÀr:


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;
}

Nu som du kan se kan du anvÀnda villkorliga uttalanden tillsammans med argumentet theme_location. Detta gör att du kan rikta in dig pÄ en viss menyplats med önskat villkor. Om du inte vill ha det villkorliga uttalandet behöver du inte anvÀnda det. LÀgg bara till den pÄ en viss menyposition eller vice versa.

Nu nÀr du har sett ett grundlÀggande exempel, lÄt oss visa nÄgra specifika exempel pÄ hur detta skulle fungera.

LÀgga till in / ut-lÀnkar till en specifik WordPress-meny

Om du vill ge dina anvÀndare möjlighet att logga in / ut, finns det en plats dÀr du kan lÀgga till lÀnkarna i din anpassade meny. Utdraget nedan visar inloggnings- / utlÀnkar till dina anvÀndare pÄ lÀmpligt sÀtt pÄ menyplatsen: primÀr. Du kan Àndra menyens plats om du vill.


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;
}

LÀgga till ett sökfÀlt i en specifik meny

Vill du lÀgga till ett sökfÀlt i en viss meny? Titta inte lÀngre. Du kan göra det genom att klistra in följande kodavsnitt:


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 class="menu-header-search"><form action='http://example.com/' id='searchform' method='get'><input type="text" name="s" id='s' placeholder="Search"></form></li>";

    return $items;
}

LĂ€gga till dagens datum till en specifik WordPress-meny

Utdraget nedan lÀgger till dagens datum i din WordPress-meny. Du kan anvÀnda vÄr handbok för dagens datum för att justera koden om du vill.


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;
}

Vi hoppas att den hÀr artikeln gör det möjligt för utvecklare att utöka funktionaliteten i sina teman.