Jak dodać niestandardowe menu nawigacyjne w motywach WordPressa
Objaśnienie
Dodanie niestandardowych menu nawigacyjnych do motywu WordPress to doskonały sposób na zorganizowanie linków na Twojej stronie. Oto prosty sposób, aby to zrobić:
Rejestrowanie menu:
Najpierw musisz poinformować WordPress o menu, które chcesz utworzyć. Robi się to poprzez ich rejestrowanie. W kodzie rejestrujemy trzy menu: menu nagłówka, menu stopki i menu boczne. Oznacza to, że możesz mieć różne zestawy linków w różnych częściach swojej strony.
Wyświetlanie menu:
Gdy Twoje menu są zarejestrowane, możesz je wyświetlić w plikach swojego motywu. Funkcja sprawdza, czy menu istnieje, a następnie je wyświetla. Możesz wybrać, gdzie umieścić te menu, wywołując funkcję wyświetlania z nazwą menu, taką jak 'header-menu', 'footer-menu' lub 'sidebar-menu'.
Custom Walker:
Jeśli używasz motywu, który wspiera Bootstrap, możesz chcieć użyć niestandardowej klasy walker dla lepszego stylizowania. To jest opcjonalne, ale jeśli zdecydujesz się z tego skorzystać, upewnij się, że klasa jest zdefiniowana lub dołączona w Twoim motywie.
Dzięki tym krokom możesz łatwo dodać i zarządzać niestandardowymi menu nawigacyjnymi w swoim motywie WordPress, co sprawi, że Twoja strona będzie bardziej przyjazna dla użytkownika i lepiej zorganizowana.
Kod
<?php
// Register Custom Navigation Menus
function wp_dudecom_register_custom_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu', 'textdomain' ),
'footer-menu' => __( 'Footer Menu', 'textdomain' ),
'sidebar-menu' => __( 'Sidebar Menu', 'textdomain' )
)
);
}
add_action( 'init', 'wp_dudecom_register_custom_menus' );
// Display Custom Navigation Menu
function wp_dudecom_display_custom_menu( $menu_name ) {
if ( has_nav_menu( $menu_name ) ) {
wp_nav_menu(
array(
'theme_location' => $menu_name,
'container' => 'nav',
'container_class'=> 'custom-menu-container',
'menu_class' => 'custom-menu',
'fallback_cb' => false,
'depth' => 2,
'walker' => new WP_Bootstrap_Navwalker() // Optional: Use a custom walker for Bootstrap compatibility
)
);
}
}
// Example usage in theme files
// wp_dudecom_display_custom_menu( 'header-menu' );
// wp_dudecom_display_custom_menu( 'footer-menu' );
// wp_dudecom_display_custom_menu( 'sidebar-menu' );
// Security: Ensure the custom walker class is defined if used
if ( ! class_exists( 'WP_Bootstrap_Navwalker' ) ) {
// Define the WP_Bootstrap_Navwalker class here or include it from an external file
}
?>Instrukcja
Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.
Wymagania wstępne:
- Upewnij się, że masz dostęp do plików motywu WordPress lub do pliku własnej wtyczki.
- Znajomość edytowania plików PHP jest pomocna.
- Jeśli używasz niestandardowego walker'a dla Bootstrap, upewnij się, że klasa
WP_Bootstrap_Navwalkerjest zdefiniowana lub załączona.
Kroki wdrożenia:
- Otwórz plik
functions.phpswojego motywu WordPress lub stwórz nowy plik własnej wtyczki. - Skopiuj i wklej podany kod do pliku.
- Zapisz zmiany w pliku.
- Zaloguj się do panelu administracyjnego WordPress.
- Przejdź do Wygląd > Menu.
- Utwórz nowe menu i przypisz je do zarejestrowanych lokalizacji: Menu nagłówka, Menu stopki i Menu bocznego.
- Aby wyświetlić menu w swoim motywie, otwórz odpowiednie pliki motywu (np.
header.php,footer.phplubsidebar.php). - Użyj funkcji
wp_dudecom_display_custom_menu( 'menu-name' );, aby wyświetlić żądane menu. Zastąp'menu-name'odpowiednio'header-menu','footer-menu'lub'sidebar-menu'. - Zapisz zmiany w plikach swojego motywu.
Dzięki tym krokom możesz pomyślnie dodać niestandardowe menu nawigacyjne do swojego motywu WordPress. Jeśli potrzebujesz dalszej pomocy lub chcesz zbadać bardziej zaawansowane funkcje, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.