Soms vindt u een geweldig thema alleen te beseffen dat het zou geweldig zijn als het had een extra navigatie menu met belangrijke of veelgebruikte links naar de bruikbaarheid van uw WordPress site te verhogen.
Met slechts een klein beetje codering kunt u de basis van uw nieuwe menu snel opgezet, en voor u klaar om stijl te passen aan uw thema.
Als u liever niet knoeien met code, zijn er veel plugins die het zware werk voor u doen, en ook styling opties bieden.
Hoe u ook kiest, de gids hieronder zal u helpen om het te laten gebeuren.
Basic Housekeeping
Om een nieuw menu te maken, moet u uw thema bestanden te bewerken. Voordat u wijzigingen aanbrengt in de kernbestanden, kunt u het beste een backup maken van uw hele site voor het geval er iets mis gaat. U kunt uw site snel herstellen en het zal zijn alsof er nooit iets is gebeurd.
U kunt handmatig een back-up van uw site maken via FTP of met behulp van een plugin, zoals onze eigen Snapshot. Zorg ervoor dat u een kopie van zowel uw database en bestanden op te slaan op een locatie apart van uw site om het risico van verlies van uw back-up te minimaliseren.
Het bouwen van een Child Theme
Om nieuwe menu’s met code te maken, moet u wijzigingen aanbrengen die verloren zouden gaan wanneer u uw thema bijwerkt. Het maken van een kind thema zorgt voor dit probleem.
U vindt de details die u nodig hebt om een kind thema te maken door het controleren van een paar van onze andere berichten Hoe maak je een WordPress Child Theme en Hoe automatisch Child Themes in WordPress te maken.
U kunt er ook voor kiezen om een geheel nieuw thema van uw eigen te maken of probeer het uit op een lokale of test site.
U kunt deze berichten bekijken voor meer details over hoe u een lokale installatie van WordPress kunt maken:
- Hoe WordPress lokaal te ontwikkelen met MAMP
- Hoe XAMPP en WordPress lokaal te installeren op PC/Windows
- Hoe WordPress lokaal op te zetten in 5 minuten met DesktopServer
- De snelle en gemakkelijke gids voor het migreren van een lokale WordPress installatie naar een live site
- Hoe WordPress te verplaatsen voor lokale ontwikkeling met XAMPP
Als je eenmaal een van deze opties hebt ingesteld, bent u vrij om te beginnen met het maken van uw extra navigatiemenu’s. Hoewel, als u besluit om een plugin of thema framework te gebruiken, hoeft u geen kind thema te maken.
Nieuwe menu’s maken
Om een selecteerbare menu locatie optie toe te voegen in uw admin dashboard onder Appearance > Menu’s moet u doen wat wordt genoemd “een menu registreren.” Het enige dat nodig is, is het toevoegen van een stukje code aan uw functions.php bestand dat zich bevindt in wp-content > themes > your-theme.
In cPanel klikt u op het pictogram Bestandsbeheer in de sectie Bestanden op de startpagina. Als u nog niet eerder uw File Manager hebt ingesteld om te laden naar de document root van uw site, navigeer daar nu.
Er is een functions.php bestand in uw /wp-includes/ map, maar dat is niet degene die u hoeft te bewerken. Zorg ervoor dat u het functions.php bestand vindt dat in het thema staat dat u gebruikt. Anders krijgt u fouten wanneer u probeert de gevonden code later toe te voegen.
Localiseer uw functions.php-bestand en klik er eenmaal op, gevolgd door de knop Bewerken bovenaan de pagina.
Als er een pop-up wordt geopend, klikt u gewoon op de knop Bewerken onderaan, aan de rechterkant. Het is mogelijk dat u er geen ziet als u deze eerder hebt uitgeschakeld.
Schuif naar de onderkant van het bestand. Als u slechts één menu wilt toevoegen, voeg dan de volgende code toe op een nieuwe regel:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
In dit voorbeeld, New Menu is de naam die zal verschijnen op de menu pagina van uw admin dashboard om het begrijpelijk te maken voor menselijke ogen. De new-menu naam is wat WordPress zal begrijpen om uw code goed uit te voeren.
U kunt uw menu noemen wat u wilt, maar zorg ervoor dat alleen de menselijk leesbare naam spaties en hoofdletters bevat.
Als u meerdere menu’s aan uw site wilt toevoegen, voeg dan deze code op een nieuwe regel toe:
U kunt zo veel nieuwe menu’s toevoegen als u wilt met deze methode. Voor de naamgeving gelden dezelfde regels.
Bewaar de wijzigingen die je in het bestand hebt aangebracht. Nu hoeft u alleen nog maar het nieuwe menu aan uw site toe te voegen.
Menu-locaties aan uw thema toevoegen
Dit is het punt waar u moet beslissen waar u uw menu wilt plaatsen. Als u het menu boven aan de pagina wilt hebben, moet u het bestand header.php bewerken. U kunt het ook in de voettekst plaatsen door het bestand footer.php te bewerken.
U kunt zelfs een menu op een pagina weergeven door het template bestand te bewerken of in een zijbalk door het bestand sidebar.php te bewerken.
U kunt uw nieuwe menu plaatsen waar u maar wilt. Hier is de minimale hoeveelheid code die u aan een van deze locaties moet toevoegen:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Vervang new-menu gewoon door de door u gekozen, voor WordPress leesbare naam. Je wilt waarschijnlijk je menu stijlen met CSS zodat het verder gaat dan basis functionaliteit en er ook goed uitziet. Om dit te doen, moet je een klasse maken en deze aan je thema toevoegen met de volgende code.
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Vervang net als eerder new-menu door de naam die je hebt gekozen. In dit voorbeeld heb ik de klasse die ik gemaakt heb new_menu_class genoemd. U kunt dit wijzigen, maar zorg ervoor dat u de code aanpast aan de wijziging.
Klik op de knop Opslaan en ga naar Uiterlijk > Menu’s in uw dashboard. U zult zien dat uw nieuwe menu’s worden vermeld onder Thema-indelingen in de sectie Menu-instellingen.
U kunt nu uw nieuwe menulocaties in de lijst zien staan. Wanneer u een menu toevoegt, kunt u één of alle locaties selecteren.
Om links te laten weergeven in uw nieuw aangemaakte menulocaties, klikt u op een nieuw menu maken bovenaan de pagina.
Als u nog geen menu hebt, kunt u een naam voor uw menu invoeren in het veld op de pagina en vervolgens op Menu maken klikken. Als u al een menu hebt gemaakt, klikt u op de link Een nieuw menu maken boven aan de pagina.
Als u een nieuw menu hebt gemaakt, kunt u ook de locaties beheren waar ze worden weergegeven onder het tabblad “Locaties beheren”.
Styling, plug-ins en responsieve menu’s
Uw nieuwe menu is nu klaar om te worden gestyled met CSS. De benodigde codering is specifiek voor het thema dat u gebruikt, dus ik zal er in deze post niet op ingaan, maar we hebben wel een andere post die u daarvoor kunt bekijken, genaamd Hoe maak ik een geweldig Responsive Menu voor uw WordPress Thema. Het toont u ook hoe u responsieve menu’s kunt maken die mobiel-ready zijn.
Als u een gemakkelijkere optie wilt, zijn er veel plugins die responsieve menu’s maken op basis van de stijlen van uw thema. Een van de beste die ik heb gevonden is Responsive Menu.
Enkele noemenswaardige vermeldingen die u ook nuttig kunt vinden zijn ShiftNav, WP Responsive Menu en Max Mega Menu.
Bronnen om verder te gaan
U hebt nu de solide basis die u nodig hebt om extra menu’s voor uw thema te maken en bronnen om u te helpen verder te gaan. Of u het nu zelf codeert, een plugin of een thema framework gebruikt, u heeft nu een nieuw menu op uw WordPress site.
Als u tegen problemen aanloopt, ga uw gang en vraag het onze support helden. Zij kunnen u deskundig advies en ondersteuning geven om zo ongeveer elk probleem op te lossen. U kunt een ticket openen in ons ondersteuningsforum en wij zullen u direct helpen.
Voor meer informatie over hoe u uw nieuwe thema kunt stylen, zijn er veel bronnen die u kunt bekijken en u kunt ze allemaal vinden in onze post A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources.
U kunt ook enkele van onze andere berichten bekijken 10 Eenvoudige Tips voor het Leren van CSS voor WordPress, 25 Expert Tips voor Schonere CSS Codering voor WordPress, 25 Pro Tips voor het Verbeteren van Uw CSS Workflow en 5 Gratis CSS Plugins voor Live Bewerken van Uw WordPress Site voor meer details over het coderen van wat CSS voor uw thema.
Tags:
- menus
- navigatie