Als u een site maakt met enkele pagina's op het hoogste niveau waarop u de aandacht van bezoekers wilt vestigen en hen wilt aanmoedigen deze te bezoeken, helpt het om ze prominent in de header van uw site te laten zien.
Natuurlijk kunt u pagina's op het hoogste niveau toevoegen aan uw navigatiemenu, maar in deze zelfstudie laat ik u zien hoe u extra links naar deze pagina's kunt toevoegen met behulp van de get_pages ()
functie.
Opmerking: u hoeft deze code niet in de koptekst van uw site te gebruiken. Als het beter voor u werkt, kunt u het altijd aan uw zijbalk of voettekst toevoegen door de sidebar.php
of footer.php
bestanden in plaats van header.php
.
In deze tutorial ga ik een kindthema maken van het thema van twintig zestien en vervolgens een duplicaat maken van twintig zestien header.php
bestand in mijn kindthema, dat ik zal bewerken. Bewerk nooit de bestanden van een thema dat u hebt gedownload, want als u het thema bijwerkt, raakt u uw werk kwijt. Als u met uw eigen thema werkt, kunt u deze code in plaats daarvan toevoegen.
Volg deze tutorial om het volgende te volgen:
Dus laten we beginnen.
Begin met het maken van een kind van twintig zestien (tenzij je met je eigen thema werkt).
Maak een nieuwe map in uw wp-content / themes /
map en geef het een logische naam: ik bel de mijne tutsplus-page-Link-knoppen
.
Maak binnen die map een nieuw bestand en geef het een naam style.css
. Open nu dat bestand en voeg dit toe:
/ * Theme Name: Tuts + Page Link Buttons Theme URI: http: //.tutsplus.com/tutorials/using-get_pages-to-create-link-buttons-to-your-sites-top-level-pages-creating-the -code - cms-24967 Beschrijving: Thema om tuts te ondersteunen + zelfstudie over het toevoegen van knoppen aan pagina's op het hoogste niveau in de koptekst van uw site (deel 1). Kindthema voor het Twenty Sixteen-thema. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Sjabloon: twentysixteen Versie: 1.0 * / @import url ("... /twentysixteen/style.css");
Bewerk de bovenstaande code om aan te geven dat dit uw thema is, niet de mijne.
Bewaar nu dat bestand en activeer uw nieuwe thema op uw site.
Omdat we de. Zullen bewerken header.php
bestand, moeten we een duplicaat van dat bestand maken van het thema van twintig zestien in het thema child. Vind de header.php
bestand in twintig zestien en kopieer (niet verplaatsen!) naar de map van uw nieuwe thema.
Nu heeft je thema twee bestanden: style.css
en header.php
. WordPress gebruikt automatisch de header.php
bestand van uw kindthema in plaats van dat van de twintigste, want zo werken kindthema's.
Open het nieuwe header.php
bestand, zodat u het kunt bewerken.
Ik ga mijn links toevoegen aan de pagina's van het hoogste niveau binnen de hoofd
element, onmiddellijk voor de sluiting label. Dus zoek die regel in je thema en begin met het toevoegen van nieuwe code boven de afsluiting
label.
Maak eerst de argumenten voor get_pages ()
door het volgende te typen:
$ args = array ('parent' => 0, 'sort_order' => ASC, 'sort_column' => 'menu_order');
Dit zorgt ervoor dat get_pages ()
haalt alleen die pagina's op zonder bovenliggend ('ouder' => 0
) en sorteert de pagina's met de volgorde die u opgeeft op de paginabewerkingsschermen. Als u de sorteervolgorde wilt wijzigen, gebruikt u een of meer van de argumenten die u op de codex-pagina kunt vinden get_pages ()
.
Voeg nu onder uw argumenten dit toe:
$ pages = get_pages ($ args);
Hiermee wordt het get_pages ()
functie met behulp van de argumenten die u hebt opgegeven.
Voordat u meer code uitvoert, wilt u controleren of er enkele pagina's op het hoogste niveau zijn, dus controleer dat get_pages ()
is teruggekeerd.
Onder de get_pages ()
functie, voeg dit toe:
if ($ pagina's)
U voegt vervolgens de code-uitvoer toe binnen de accolades.
Nu voor het leuke gedeelte. Typ het volgende in de accolades die u zojuist hebt toegevoegd:
Dit opent een ul
element, dan binnenin lus door elke pagina die wordt opgehaald door get_pages ()
en voert de titel uit binnen een link ernaar.
Bewaar nu uw bestand.
Ik heb enkele dummy pagina's toegevoegd aan mijn site. Zoals u kunt zien op de schermafbeelding, zijn er drie pagina's op het hoogste niveau en een pagina op het tweede niveau, die niet in mijn koptekst moeten worden weergegeven:
En hier is hoe de links op mijn site lijken:
Zoals u ziet, worden alleen de pagina's op het hoogste niveau weergegeven. Op dit moment zien ze er niet al te goed uit: ze verschijnen in een eenvoudige lijst met kogels. Dus in de volgende tutorial zal ik je laten zien hoe je ze kunt stylen om op knoppen te lijken.
Het toevoegen van links naar pagina's op het hoogste niveau in de kop van uw site kan een nuttige manier zijn om verkeer naar die pagina's te leiden. In plaats van deze links hard coderen, moet u de WordPress gebruiken get_pages ()
functie om het proces te automatiseren. Hier heb je geleerd hoe je dit moet doen, en in het volgende deel zal ik je laten zien hoe je wat styling kunt toevoegen.