14. WordPress: archiefpagina als sitemap.

Vandaag gaan we nagaan hoe het mogelijk is om binnen WordPress een overzichtpagina te maken, dat ook dienst kan doen als sitemap. Een sitemap ken je misschien wel: Het is een webpagina (of xml-bestand) waarop de gehele structuur van een website in kaart wordt gebracht.
Er bestaat reeds plugins die een sitemap aanmaken. Deze sitemapfeed kan je dan ook indienen bij zoekmachines zoals BING webmasters, Google webmaster hulpprogramma’s, Yahoo site explorer, …

Voor de bezoekers is zo’n pagina meestal niet visueel aantrekkelijk, waardoor het soms een grote meerwaarde aan je site geeft door een aparte archiefpagina aan te maken waarin je alles netjes kan weergeven.
Ja, er zijn ook plugins die zoiets kunnen doen, maar waar is de fun dan? Het blijft sowieso mijn bedoeling om snelle websites te maken (dat is ook beter voor zoekmachines) en plugins vertragen nu eenmaal onze WordPress site …

Begin: Elke pagina kan je een andere stijl geven met een template

We gaan een template aanmaken dat op pagina’s kan gebruikt worden. Alles zal dus met andere woorden gecodeerd worden in onze vertrouwde kladblok, maar het blijft noodzakelijk de pagina aan te maken in het adminpaneel (dat is de laatste stap).

Kopieer alles uit page.php en maak een nieuw bestand aan onder de naam ‘template_archief.php’. Kopieer in dit nieuwe bestand alles uit page.php en sla het bestand op.
Je kan eender welke benaming gebruiken, maar persoonlijk hou ik er graag structuur in en als het een template is, dan plaats ik dat ook in de naam.

Helemaal bovenaan de pagina typ je volgende code bij:

<?php  
/* 
Template Name: Archief Page 
*/  
?>

Dit duidt aan dat het om een aangepaste pagina gaat (de template) en die noemt ‘Archief Page’.

We gaan nu stukjes code gaan wissen. Niet alles wat een gewone pagina heeft zullen we nodig hebben, en wat niet nodig is, dan mag weg:
Onder de DIV met class ‘entry’:

<?php the_content(); ?> <?php wp_link_pages('before=<p class="nextpagenav">&after=</p>&next_or_number=number&pagelink=Pagina %'); ?>
<?php edit_post_link('Edit', '<p>', '</p>'); ?>

Onder de DIV met class ‘container’:
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

Elders op de pagina:
<?php endwhile; ?> <?php else : ?> <div class="post"> <h2><?php _e('Not Found'); ?></h2> </div> <?php endif; ?>

Deze codes mogen allemaal weg, tenzij je nog een inleiding wilt schrijven op de pagina, dan zou je alles kunnen laten staan.

Nu we dit hebben gedaan, moeten we nadenken hoe we de archiefpagina er willen laten uitzien. Er zijn tal van mogelijkheden binnen WordPress, maar ik geef een voorbeeld waarbij we een overzicht gaan geven van de laatste 30 berichten, een overzicht van de categorieën en een maandelijks overzicht. Je kan dit nog verder uitbreiden met bijvoorbeeld een zoekformulier.

Ik geef het voorbeeld dat ik zelf op een site gebruik en vrij tevreden over ben. We gaan ook de opmaak verzorgen.

Onder volgende tag <div class="entry">, typ hetvolgende:

<h2>Laatste 30 berichten.</h2>
<ul>
<?php query_posts('showposts=30'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();  if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a> - <?php the_time('j F Y') ?> - <?php echo $post->comment_count ?> reacties</li>
<?php endwhile; endif; ?>
</ul>

Uitleg:

  • <H2> – voorzien van een subtitel
  • <UL> – openen van een nieuw lijst
  • query_posts('showposts=30'); – php-functie dat de laatste 30 berichten oproept. Je kan het getal ook vermeerderen of verminderen naar eigen voorkeur. Maak het niet te groot want we willen toch wel een overzicht bewaren.
  • If (have_posts() – dit en de code erna is om de LOOP te starten zodat we de inhoud van alle artikels kunnen ophalen.
  • <li> – openen van listitem
  • the_title(); – weergeven van de titels van de berichten.
  • the_time('j F Y') – weergeven van de datum waarop het artikel werd gepubliceerd
  • echo $post->comment_count – het aantal reacties weergeven
  • </li>– sluiten van het item
  • </UL> – sluiten van de lijst.

wp-serie-35-archiefpagina-code

Sla nu alles op en surf naar je adminpaneel ( http://localhost/wordpress/wp-admin/ )
Log in en maak een nieuwe pagina aan (Dashboard > Pages > Add New) op volgende wijze:
Titel: Archief
Inhoud: zet er een puntje in.
Rechts bij ‘attributes’ kan je templates kiezen. Kies nu onze vers aangemaakte template (zie afbeelding):

wp-serie-36-archiefpagina-pagina

Maak de pagina aan en bekijk het resultaat. Normaal zou je iets moeten krijgen dat er als volgt uitziet:

wp-serie-37-archiefpagina-resultaat

Categorieën en maandelijkse archieven toevoegen

We gaan het tempo wat verhogen; Ik geef je nu de code inclusief opmaak mee voor toe te voegen na de UL sluitingstag van de laatste 30 berichten; Nadien rijten we de code eens uit elkaar om te bekijken wat we hebben gedaan:

<div style="clear: both; padding-top: 10px;"></div>

<div style="float: left; width:48%;">
<h2 style="font-size:18px; background: #eee; width: 99%; padding-left: 5px; margin-bottom: 5px;">Categorie.</h2>
<ul>
<?php wp_list_categories('feed_image=http://www.myblog.com/image.gif&feed=XMLFeed&title_li=&hierarchical=0&show_count=1') ?>
</ul>
</div>

<div style="float: right; width: 48%;">
<h2 style="font-size:18px; background: #eee; width: 99%; padding-left: 5px; margin-bottom: 5px;">Maandelijkse archieven.</h2>
<ul>
<?php wp_get_archives('type=monthly&show_post_count=1') ?>
</ul>
</div>

Uitleg categorieën:

  • <div style="clear: both; padding-top: 10px;"></div> – Toevoegen van een witte ruimte na de 30 berichten. De clear: both; wil zeggen dat er zowel links als rechts niets meer kan komen te staan.
  • <div style="float: left; width:48%;"> – Dit hebben we eerder al gedaan, we gaan dit deel (de categorieën) aan de linkerkant van de pagina laten zweven.
  • <?php wp_list_categories() ?> – Weergeven van al onze categorieën. Het zijn natuurlijk de bepalingen die tussen haakjes staan die het belangrijkst zijn:
    feed_image= – Dit is de afbeelding die we gaan gebruiken voor onze feeds. Het is een rss feed per categorie, wat dus inhoud dat een bezoeker zich kan inschrijven op een bepaalde rubriek van je site. Gebruik hiervoor een kleine afbeelding.
    & feed=XMLFeed – Dit is het type feed dat we willen plaatsen. Hou dit maar zoals het er staat (dat doe ik ook)
    &title_li= – Door niets achter het ‘=’ teken te plaatsen zorgen we ervoor dat er geen extra titel tevoorschijn komt, we hebben er zelf een titel aan gegeven in onze H2 tag.
    &hierarchical=0 – we organiseren onze rubrieken op alfabetische volgorde.
    &show_count=1 – Door ‘1’ te plaatsen tonen we het aantal artikels binnen de categorie. Zet op ‘0’ als je dit niet wilt.

Tip: je kan ook 1 bepaalde categorie laten tonen in het overzicht. Je moet dan wel het ID-nummer weten van je categorie. Maar je kan volgende code bijvoorbeeld toevoegen: &include=3,5,9,16
Voorbeeld: <?php wp_list_categories('title_li=&hierarchical=0&show_count=1&include=3,5,9,16') ?>

Meer over wp_list_categories in de codex van WordPress: codex.wordpress.org/Template_Tags/wp_list_categories.

Uitleg maandelijkse archieven:

  • <div style="float: right; width: 48%;"> – Dit deel gaan we aan de rechterkant van de pagina laten zweven, zodat het netjes naast de categorieën komt te staan.
  • <?php wp_get_archives('type=monthly&show_post_count=1') ?> – Deze php-functie roept alle maandelijkse archieven (type= monthly) op en we tonen ook hoeveel artikels er in die periode werden gepubliceerd (&show_post_count=1).

Je kan ook jaarlijkse archieven weergeven, om de termijn te veranderen kan je in plaats van monthy nog volgende types gebruiken: daily/weekly/monthly/yearly.
Om het aantal links te beperken, kan je ook een opdracht geven dat er maar een x-aantal links worden getoond. Typ binnenin de php functie van archieven volgende code bij: &limit=14
Voorbeeld:
<?php wp_get_archives('type=monthly&limit=14&show_post_count=1') ?>
Deze code zal de archieven weergeven van de laatste 14 maanden.

Meer over wp_get_archives in de codex van WordPress: codex.wordpress.org/Function_Reference/wp_get_archives.

Nawoord:
Ik heb inderdaad een beetje styling meegegeven binnen de pagina zelf. Door een class toe te voegen aan de H2-tags kan je dit ook doen in het style.css bestandje, zoals we eerder in de handleiding hebben geleerd.
Hiermee wil ik je aantonen dat je ook een opmaak aan een object kunt meegeven zonder steeds style.css aan te passen. Voor sommige pagina’s kan dat niet zoveel kwaad (bijvoorbeeld deze pagina die we zelf een uitzonderlijke design meegeven).

Verdere opmaak laat ik aan jezelf over, veel uittesten en proberen is immers de beste manier om zoiets te leren. In tussentijd zou je ongeveer zulke pagina moeten hebben op je website:

wp-serie-38-archiefpagina-resultaat2

Wordpress theme maken of toch kopen?

Een Wordpress theme maken vergt veel werk, al is wat extra kennis altijd welkom. We maken zelf geen sites meer maar gebruiken nu de themes die terug te vinden zijn op: Theme Junkie. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close