Jak dodać opisy Menu w motywach WordPress

System menu WordPress ma wbudowaną funkcję, w której można dodawać opisy z elementami menu. Ta funkcja jest jednak domyślnie ukryta. Nawet jeśli jest włączona, wyświetlanie ich nie jest obsługiwane bez dodania kodu. Większość motywów nie jest zaprojektowana z myślą o opisach elementów menu. W tym artykule pokażemy, jak włączyć opisy menu w WordPress i jak dodać opisy menu w swoich motywach WordPress.

Uwaga: ten poradnik wymaga uczciwego zrozumienia HTML, CSS i tworzenia motywów WordPress.

Kiedy i dlaczego warto dodawać opisy Menu?

Niektórzy użytkownicy uważają, że dodanie opisu menu pomoże w SEO. Uważamy jednak, że głównym powodem, dla którego chcesz z nich korzystać, jest zaoferowanie lepszego doświadczenia użytkownika na swojej stronie.

Opisy mogą być używane, aby powiedzieć odwiedzającym, co znajdą, jeśli klikną na element menu. Intrygujący opis przyciągnie więcej użytkowników do klikania w menu.

Krok 1: Włącz opisy Menu

Przejdź do Wygląd ” Menu. Kliknij na Opcje Ekranu przycisk w prawym górnym rogu strony. Sprawdź Opisy pudełko.

Spowoduje to włączenie pola opisy w elementach menu. O tak.:

Teraz możesz dodać opisy menu do elementów w menu WordPress. Jednak te opisy nie będą jeszcze wyświetlane w Twoich motywach. Aby wyświetlić opisy menu będziemy musieli dodać trochę kodu.

Krok 2: Dodaj klasę Walkera:

Klasa Walker rozszerza istniejącą klasę w WordPress. Po prostu dodaje wiersz kodu, aby wyświetlić opisy elementów menu. Dodaj ten kod do motywu funkcje.php plik.

class Menu_With_Description extends Walker_Nav_Menu {
	function start_el (&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "t", $depth ) : ";
		
		$class_names = $value=";

		$classes = empty( $item->classes ) ? array (): (array) $item - >classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter ($classes), $item));
		$class_names = ' class="' . esc_attr ($class_names ) . '"';

		$ wyjście .= $ indent . '<li id = " menu-item -". $item->ID . '"' . $wartość . $class_names .'>';

		$atrybuty = ! empty( $item->attr_title ) ? "title="" esc_attr ($item->attr_title ) .'"' : '';
		$ atrybuty .= ! empty ($item->target ) ? / target="" esc_attr ($item->target ) .'"' : '';
		$ atrybuty .= ! empty( $item->xfn ) ? "rel="". esc_attr ($item->xfn ) .'"' : '';
		$ atrybuty .= ! empty ($item - > url)? 'href="'. esc_attr ($item->url ) .'"' : '';

		$item_output = $args - > before;
		$item_output .= "<a", $ atrybuty .'>';
		$item_output .= $args - >link_before . apply_filters ('the_title', $item - > title, $item - > ID). $args- > link_after;
		$item_output .= '<br / > <span class = "sub">'. $pozycja->opis . '</span>';
		$item_output .= "</a>",;
		$item_output .= $args - > after;

		$ wyjście .= apply_filters ('walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Punkt 3. Włącz Walker w wp_nav_menu

Motywy WordPress używają funkcji wp_nav_menu () do wyświetlania menu. Opublikowaliśmy również samouczek dla początkujących o tym, jak dodać niestandardowe menu nawigacji w motywach WordPress. Większość motywów WordPress dodaje menu w nagłówek.php szablon. Możliwe jednak, że Twój motyw mógł użyć innego pliku szablonu do wyświetlania menu.

Teraz musimy znaleźć wp_nav_menu() funkcja w Twoim temacie (najprawdopodobniej w nagłówku.php) i zmienić to w ten sposób.

<?php $walker = new Menu_With_Description;?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'NAV-menu', 'walker' = > $walker));?>

W pierwszej linii ustawiamy $ walker aby użyć klasy walker zdefiniowaliśmy wcześniej w funkcje.php. W drugiej linii kodu jedynym dodatkowym argumentem, który musimy dodać do naszych istniejących argumentów wp_nav_menu, jest 'walker' = > $walker.

Punkt 4. Stylizacja opisów

Klasa walker, którą dodaliśmy wcześniej, wyświetla opisy elementów w tej linii kodu:

$item_output .= '<br / > <span class = "sub">'. $pozycja->opis . '</span>';

Powyższy kod dodaje podział linii do pozycji menu poprzez dodanie
taguj, a następnie zawijaj swoje opisy w span z class sub. O tak.:

< li id = "menu-item-99" class = "menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about /">o<br / ><span class="sub" > kim jesteśmy?< / span> < /a>< / li>

Aby zmienić sposób wyświetlania opisów w witrynie, możesz dodać CSS do arkusza stylów szablonu. Testowaliśmy to na dwudziestu Dwunastu i użyliśmy tego css.

.menu-item {
border-left :1px solid # ccc;
}

span.sub { 
font-style: italic;
font-size: small;
}

Mamy nadzieję, że ten artykuł okaże się przydatny i pomoże Ci stworzyć fajne menu z opisami menu w Twoim motywie. Pytania? Zostaw je w komentarzach poniżej.

Dodatkowe Zasoby

Jak stylizować menu nawigacji WordPress

Jak dodać niestandardowe elementy do konkretnych menu WordPress

Menu Billa Ericksona z klasą opisu