In dit korte artikeltje laat ik je zien hoe ik voor mijn website een sitemap of overzicht pagina heb gemaakt (niet te verwarren met een sitemap.xml).
Ik wilde voor Tweaking4All een overzichtspagina met een lijst van beschikbare pagina’s, categorieën en de berichten (posts) in deze categorieën. De reden waarom ik mijn eigen code schreef is simpel: alles wat ik aan voorbeelden kon vinden op het Internet was te beperkt. Beperkt in diepte (alleen het eerste niveau), platte lijsten, overslaan van berichten, etc. Geen van hen had een echte hiërarchie weergave.
Met een klein beetje code en jouw persoonlijke CSS is dat snel gedaan …
WordPress code voor een HTML sitemap
De lijst van alle Pagina’s
We beginnen met de lijst van pagina’s omdat dit het eenvoudigste is.
In de onderstaande code zie je dat ik de CSS klasse “jouw_pagina_lijst_css” heb geplaatst – je kunt het een andere naam geven als je wilt. Het doel daarvan is dat je nu de vrijheid hebt om de lijst (ul), de lijst items (li) en alles wat eronder hangt, kunt aanpassen naar eigen smaak.
Merk op dat je bepaalde pagina’s uit de lijst kunt laten – zie regel 6.
Deze lijst laat alleen maar top-level pagina’s zien (ik heb zelf nog nooit sub-pagina’s gebruikt). Je kunt sub-pagina’s weergeven door de correcte diepte aan te geven in regel 8.
Deze code gaat overigens in bijvoorbeeld “page.php” – of waar je de ijst ook wilt zien.
1
2
3
4
5
6
7
8
9
10
11
| <ul class="jouw_pagina_lijst_css">
<?php
// Voeg Pagina ID's toe in exclude, die je niet wilt zien
wp_list_pages(
array(
'exclude' => '',
'title_li' => '',
'depth' => 1
));
?>
</ul> |
Een lijst van Categorieën en Berichten
Voor het genereren van deze lijst gebruik ik recursie (hier: de functie roept zichzelf aan), dus ik moet een functie maken. Dit is niet alleen nodig voor recursie maar maakt het ook netter als je het gebruikt in een template bestand.
Deze functie genereerd een ongesorteerde lijst (ul) met de sub-items weer in een ongesorteerde lijst (ul). Een voorbeeld structuur:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <ul>
<li>Categorie 1
<ul>
<li>Sub Categorie 1.1
<ul>
<li>Bericht 1 in 1.1</li>
<li>Bericht 2 in 1.1</li>
<li>Bericht 3 in 1.1</li>
</ul>
</li>
<li>Bericht 1 in 1</li>
<li>Bericht 2 in 1</li>
</li>
</ul>
</li>
... etc ...
</ul> |
Hiervoor roepen we de functie als volgt aan in een template bestand (Ik gebruik het in page.php – maar je kunt het aanroepen waar het jou uitkomt);
t4a_sitemap_categories(0,$exclude);
De variabele “$exclude” kan leeg zijn (”) of een lijst van categorie ID’s bevatten van de categorieën die je niet in de lijst wilt zien.
De Functie voor de Categorieën en Berichten lijst
Hieronder vindt je de functie die de lijst genereert – plaats deze code in het “functions.php” bestand.
Ook hier heb ik weer een CSS klasse toegevoegd zodat je het e.e.a. naar wens kunt aanpassen:
“jouw_categorie_lijst_klasse” en “jouw_berichten_in_lijst_klasse“.
Zoals je ziet in regel 17 – Deze functie roept zichzelf aan om te zien of er sub-categorieën zijn.
Het proces is eenvoudig:
- Haal de categorieën op de actieve categorie ($startnode).
- Geef voor iedere categorie titel en link weer, en ga door sub-categorieën (regel 17) op dezelfde manier als 1, 2, en 3.
- Haal alle berichten voor een categorie op (regel 19) en geef titel en link weer.
De recursie vindt plaats in de 2de stap, waar het de stappen 1, 2, en 3 herhaald voor de sub-categorie. Als het daarmee klaar (stap 2) is gaat het verder met stap 3.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| function t4a_sitemap_categories($startnode=0,$exclude='')
{
$categories_in_this_category = get_categories('parent='.$startnode.'&hierachical=1&hide_empty=0&exclude='.$exclude);
$post_count=0;
$category_html='';
$category_base= get_option('category_base')!=''?get_option('category_base'):'category';
echo '<ul class="jouw_categorie_lijst_klasse">';
foreach ($categories_in_this_category as $this_category)
{
$link = esc_url( get_category_link($this_category->cat_ID) );
// Categorie link weergave
echo '<li><h4><a href="'.$link.'">'.$this_category->cat_name.'</a></h4>';
// Ophalen sub-categorieën
t4a_sitemap_categories($this_category->cat_ID,$exclude);
// Ophalen van de berichten in deze categorie
$post_in_this_category = get_posts('category='.$this_category->cat_ID.'&posts_per_page=-1&order=ASC');
// Weergave berichten lijst
echo '<ul class="jouw_berichten_in_lijst_klasse">';
foreach($post_in_this_category as $a_post)
{
if (in_category($this_category,$a_post->ID))
{
$post_title = $a_post->post_title;
echo '<li><a href="'.get_permalink($a_post->ID).'">'.$a_post->post_title.'</li>';
}
}
echo '</ul></li>';
}
echo '</ul>';
} |
Veel plezier … 
Reacties
Er zijn nog geen reacties geplaatst.
Je kunt jouw eigen opmerkingen plaatsen m.b.v. dit formulier, of een reactie op een bestaande opmerking plaatsen door op de "Beantwoorden" knop te klikken.