Pagina 1 van 1

WordPress – Hoe maak ik een eenvoudige sitemap pagina?

WordPress – Hoe maak ik een eenvoudige sitemap pagina?
   0

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:

  1. Haal de categorieën op de actieve categorie ($startnode).
  2. Geef voor iedere categorie titel en link weer, en ga door sub-categorieën (regel 17) op dezelfde manier als 1, 2, en 3.
  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 … 

Donatie Opties


Donaties worden zeer gewaardeerd, maar zijn zeker niet vereist. Donaties worden gebruikt voor het dekken van kosten voor web-hosting en project materialen, en eventueel voor een drankje of een snack. Voor wie al gedoneerd heeft: Hartelijk dank! Het is werkelijk geweldig om te zien dat men onze artikelen en applicaties waardeert.

Reacties


Er zijn nog geen reacties geplaatst.
Je kunt jouw eigen opmerkingen plaatsen m.b.v. dit formulier, of een reactie op een opmerking plaatsen door op de "Reageer" knop te klikken.



Jouw Reactie ...

Vriendelijk verzoek om hier geen lange teksten te plaatsen (zoals source codes, log files of config files). Gebruik daarvoor het Forum.

Deel met anderen:
*
*
Houd me op de hoogte van nieuwe reacties (email).
       Gebruik jouw RSS reader om reacties te volgen.


Tweaking4All uses the free Gravatar service for Avatar display.
Tweaking4All zal nooit jouw email adres met anderen delen.