6. WordPress: De sidebar.

Tijd om van start te gaan met de sidebar. We gaan opnieuw werken met index.php en daar alle codes aan toevoegen.

In het hoofdstuk behandelen we:
• De aanmaak van de sidebar met categorieën;
• Toevoegen van een pagina-overzicht;
• Toevoegen van archieven en links;
• Toevoegen van een zoekformulier;
• De sidebar voorzien van de mogelijkheid om widgets aan toe te voegen.

De sidebar definiëren in index.php

We gaan eerst de sidebar een plaatsje geven. Zoals eerder gaan we dit doen door daar een onzichtbare DIV rond te plaatsen. Deze code plaats je boven de <div id="footer"> tag:

<div class=”sidebar”>

</div>

In de sidebar gaan we met veel lijsten werken. Dit hebben we tot nu toe nog niet gehad, maar we gaan eerst een lijst openen:
<ul> – openen van een ongeordende lijst.

</ul> – sluiten van een ongeordende lijst.

Hiertussen gaan we vervolgens dit stukje code plaatsen:
<li><h2><?php _e('Rubrieken'); ?></h2></li>

Uitleg:
<li> – openen van een list item
<h2> – openen van de sub-heading
<?php _e('Rubrieken'); ?> – Het woord rubrieken op de site laten zien
</h2> – sluiten van de sub-heading
</li> – sluiten van het list item

Sla het bestand nu op en kijk in je internet browser naar het resultaat:
wp-serie-13-sidebar-categorie

Het bolletje dat je voor ‘rubrieken’ ziet komt van de lijst. Later kunnen we dit weghalen of vervangen door een ander tekentje of een leuke kleine afbeelding.

Binnenin de huidige lijst gaan we opnieuw een nieuwe lijst toevoegen en we gaan ook het overzicht van de rubrieken laten zien:

<ul>
<?php wp_list_categories('orderby=name&hierarchical=0&title_li='); ?>
</ul>

Onze code ziet er nu als volgt uit:
wp-serie-14-sidebar-categorie-code

<ul> – openen van een nieuwe ongeordende lijst
<?php wp_list_categories (); ?> – het oproepen van de lijst met rubrieken. WordPress zal automatisch een nieuwe lijst aanmaken dus <li> en </li> handmatig in de code zetten is niet nodig.
</ul> – sluiten van de ongeordende lijst

Binnenin de haakjes kunnen we nog meer allerhande zaken definiëren om de opmaak van onze lijst met rubrieken te veranderen.
orderby=name – het sorteren van de rubrieken
&hierarchical=0 – In WordPress kan je ook subrubrieken maken. Als we dit op 1 zetten dan zullen deze op de site terechtkomen in een nieuwe sublijst. Voorlopig willen we dit niet dus laten we dit op 0 staan.
&title_li= – het weergeven van de hoofding, aangezien we dit zelf al hebben gedaan laten we dit leeg.

Je kan nog veel meer zaken toevoegen, een overzicht:

'show_option_all'    => ,
    'orderby'            => 'name',
    'order'              => 'ASC',
    'show_last_update'   => 0,
    'style'              => 'list',
    'show_count'         => 0,
    'hide_empty'         => 1,
    'use_desc_for_title' => 1,
    'child_of'           => 0,
    'feed'               => ,
    'feed_type'          => ,
    'feed_image'         => ,
    'exclude'            => ,
    'exclude_tree'       => ,
    'include'            => ,
    'hierarchical'       => true,
    'title_li'           => __( 'Categories' ),
    'number'             => NULL,
    'echo'               => 1,
    'depth'              => 0,
    'current_category'   => 0,
    'pad_counts'         => 0,
    'taxonomy'           => 'category',
    'walker'             => 'Walker_Category'

We gaan er voorlopig niet dieper op in, want we hebben nog veel te doen om onze sidebar in orde te krijgen.

Toevoegen van pagina overzicht aan de sidebar

Behalve het aanmaken van een overzicht van de rubrieken, kunnen we ook weergeven welke pagina’s we allemaal op onze site hebben staan.

Onder de eerste <ul> tag gaan we nu volgende code toevoegen:
<?php wp_list_pages(); ?>

Sla de gegevens op en bekijk het resultaat maar eens in je webbrowser. Ook hier kunnen we weer bepaalde opties toevoegen om het een andere look te geven. Laten we dat maar eens doen:

Verander: <?php wp_list_pages(); ?>
In: <?php wp_list_pages('title_li=<h2>Pagina\'s</h2>&depth=1'); ?>

Title_li= – we gaan aan onze lijst met pagina’s een hoofding meegeven. Het schuine streepje \ is nodig omdat anders het quote teken onze code zal doen stoppen.
&depth=1 – geeft de diepte van de pagina’s weer die worden weergegeven, want net zoals rubrieken kan je pagina’s indelen en dus ook subpagina’s toevoegen.

Ook hier zijn er nog andere mogelijkheden die we kunnen toevoegen, we gaan ons hier opnieuw beperken tot het overzicht:

    'depth'        => 0,
    'show_date'    => ,
    'date_format'  => get_option('date_format'),
    'child_of'     => 0,
    'exclude'      => ,
    'include'      => ,
    'title_li'     => __('Pages'),
    'echo'         => 1,
    'authors'      => ,
    'sort_column'  => 'menu_order, post_title',
    'link_before'  => ,
    'link_after'   => ,
    'walker' =>  

Archieven en links toevoegen aan de sidebar

En we gaan onvermoeid door. Uit bovenstaande tekst weet je wellicht al dat we nu in de lijst werken, en dit veranderd nog niet. We voegen volgende code toe onder de rubrieken:

<li><h2><?php _e('Archieven'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

Sla het bestand op en vernieuw je browser.
wp-serie-15-sidebar-archieven

Uitleg:
wp_get_archives() – Dit is een php functie dat de archieven oproept.
<li> – openen van een list item
<h2> – openen van een sub-heading
<?php _e('Archieven'); ?> – weergave van de tekst van de heading
</h2> – sluiten van de sub-heading
<ul> – openen van een ongeordende lijst.
<?php wp_get_archives('type=monthly'); ?> – Dit is een php functie dat de archieven oproept en dan sorteert per maand. Als er geen bericht in een bepaalde maand wordt gepubliceerd, dan wordt de maand ook niet weergegeven.
</ul> – close the unordered list sitting under the sub-heading
</li> – sluiten van een list item

Toevoegen van blogroll links aan de sidebar

De ‘blogroll’ is een begrip dat in WordPress de links aanduidt. Je kan bepaalde links toevoegen via het adminpaneel en dan laten zien aan je bezoekers. Een heel eenvoudige manier om linkpartners toe te voegen.

Onder onze codes van het archief, plaatsen we dit:
<?php wp_list_bookmarks (); ?>

Wederom het bestand opslaan en in je browser bekijken. Als je telkens een toevoeging doet moet je dit ook altijd bekijken! Een foutje is snel gebeurd.
De links die je zal zien zijn standaard links die bij de WordPress installatie werden toegevoegd. Je kan deze aanpassen of verwijderen in je adminpaneel en er nieuwe links aan toevoegen.

We gaan nu de titel veranderen van ‘Blogroll’ naar ‘Linkpartners’. De volledige code zal er dan als volgt uitzien:
<?php wp_list_bookmarks('title_li=Linkpartners&categorize=0'); ?>

&categorize=0 – is een noodzakelijke toevoeging. Ook links kan je in categorieën onderverdelen. Als we dit op 1 zouden zeggen dan zouden deze categorieën getoond worden. Als we dit doen zal het nogal onoverzichtelijk worden dus laten we dit meestal weg.

Toevoegen van zoekformulier en kalender aan de sidebar

Plezant aan WordPress is dat je allerlei zaken kunt toevoegen en alles kunt aanpassen naar eigen believen. Er is maar heel weinig dat WordPress niet kan. Voorlopig beperken we ons nog tot het toevoegen van een zoekformulier en kalender.

Het zoekformulier:

Eerst zul je een nieuw bestandje aanmaken. Kopieer de tekst uit volgende tekstbestand: Searchform.txt en plaats ze in een nieuw bestand dat je dan opslaat als searchform.php.

Het bestand gaan we niet gebruiken. Open index.php opnieuw en in het sidebargedeelte voeg je volgende code toe onder de eerste <ul> :

<li id="search">
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
</li>

Ter illustratie:
wp-serie-16-sidebar-zoekformulier

En het resultaat:
wp-serie-17-sidebar-zoeken-resultaat

De uitleg:
<li id="search"> – openen van een nieuw lijst item. We doen dit om het zoekformulier op evenveel afstand van de rand te houden zoals de rest van de inhoud op onze sidebar.
<?php include(TEMPLATEPATH . '/searchform.php'); ?> – met deze php functie verwijzen we naar searchform.php. het makkelijke hieraan is dat je het nadien ook nog op andere locaties kunt gebruiken terwijl je telkens het searchform bestand kan oproepen. TEMPLATEPATH is de locatie waarin onze theme terug te vinden is (d.i. in /wp-content/themes/MIJN-THEME/).
</li> – sluiten van het lijst item.

De kalender:

Een optie dat minder vaak gebruikt wordt in WordPress is de kalender. Voeg onder het zoekformulier onderstaande code toe:

<li id="calendar"><h2><?php _e('Kalender'); ?></h2>
<?php get_calendar(); ?>
</li>

<li id="calendar"> – een nieuwe lijst openen met de ID “calendar”
<h2> – openen van een sub-hoofding
<?php _e('Kalendar'); ?> – De tekst kalendar laten weergeven.
</h2> – sluiten van de sub-hoofding
get_calendar() – een php functie om de kalender op te roepen
</li> – sluiten van het lijst item

Het resultaat op de site:
wp-serie-18-sidebar-kalender

Toevoegen van META aan de sidebar

Dit is optioneel, maar sommigen kunnen dit handig vinden.

We voegen onder onze blogroll links volgende code toe:

<li><h2><?php _e('Meta'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

Ik ga het kort houden: Deze opties voegen links toe zodat je bijvoorbeeld snel kan inloggen (zodat je niet telkens naar de inlogpagina moet surfen). Omdat ik liever niet links toon naar de inlogpagina laat ik dit altijd weg, want je WordPress site moet je hier en daar wel goed beveiligen, dit is een eerste stap in het beveiligingsproces. Over het beveiligen van een WordPress website gaan we het later nog hebben.

Toevoegen van widgets aan de sidebar

Widgets? Dat gaan we eerst eens uitleggen. Wat we hierboven hebben gedaan is het toevoegen van opties en features aan onze sidebar, maar dit kan ook in grotere mate geautomatiseerd worden. “Widgets maken het mogelijk om functionaliteit en actuele inhoud op uw website op te nemen door het kopiëren van slecht enkele regels HTML code. WordPress widgets zijn onderdelen voor het menu, zodat je ze makkelijk kun plaatsen, herschikken en codes kunt toevoegen.
WordPress widgets zijn gewoon plugins, maar dan zo geschreven dat ze makkelijk als module in je sidebar geplaatst kunnen worden.

Zo, dat moet al het één en ander verklaren. Wat wij nu gaan doen is ervoor zorgen dat de widgets werken in onze theme.

Het eerste wat we gaan doen is een nieuw bestand aanmaken in kladblok. We laten dit voorlopig leeg en slaan dit op als functions.php in het mapje van onze theme.

In principe zou je nu volgende bestanden moeten staan hebben in dit mapje:
wp-serie-19-theme-folder

Voeg nu volgende code toe na de eerste <ul> tag:
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

Voeg dan volgende code toe VOOR de laatste </ul> tag:
<?php endif; ?>

Nu gaan we naar het bestandje dat we net hebben aangemaakt: functions.php en daar gaan we volgende code invoegen:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

Sla index.php en functions.php op en bekijk je site in je browser. Geen verandering? Dat klopt! We zullen eerst widgets moeten gaan toevoegen. Dit kan in het adminpaneel.

Uitleg:
We hebben in index.php een nieuwe php regel geplaatst: Als (IF functie) er geregistreerde sidebars zijn, dan gebruiken we deze en tonen we deze. Als er geen widgets zijn (ELSE functie) en dus het geheel leeg is, dan gebruiken we de code die we zelf hebben gedefinieerd (zoekformulier, de kalender, …). De ELSE functie moet vervolgens worden gesloten en dat doen we op het uiterste.

De veranderingen in functions.php zijn noodzakelijk. Dit registreert de sidebar als de theme daarvoor geschikt is en zend dit door naar het adminpaneel. We gaan nu eens kijken hoe we dit kunnen aanpassen:
Log hiervoor in op het admingedeelte en navigeer naar het kopje ‘Appearance’. Volgende opties zou je moeten zien:
wp-serie-20-admin-widgets

Klik op widgets en je zal een lijst met beschikbare widgets te zien krijgen. Door ze van links naar de kolom rechts te slepen (zie afbeelding) zal je ze activeren en zullen ze zichtbaar zijn op je website.
wp-serie-21-widgets-toevoegen

En ja hoor, je kan ook verschillende sidebars registreren. Vaak zie je blogs met een dubbele sidebar (twee navigatieblokken rechts, of eentje link en de ander rechts). Om dit te doen moeten we kleine wijzigingen doorvoeren:

a. een tweede sidebar maken (beginnen vanaf bovenaan dit hoofdstuk)
b. een aanpassing in functions.php als volgt (de vorige code volledig vervangen):

<?php
if ( function_exists('register_sidebars') )register_sidebars(2);
?>

c. in de eerste sidebar moet je onder de <ul> tag het volgende plaatsen:
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
d. In de tweede sidebar moet je dan onder de <ul> tag het volgende plaatsen:
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>

Dit geef ik enkel mee voor de volledigheid. Wellicht heb je aan een tweede sidebar nu geen nood, maar later zal je dit misschien wel kunnen gebruiken… en dan weet je waar je moet zoeken!

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