Een zoekpagina en widgets voor een WordPress Theme

Een zoekpagina en widgets voor een WordPress Theme

Geschreven door Jasper Denker van de Cursus Website Maken
In het laatste deel uit deze serie gaan we kijken naar het maken van een zoekpagina en het toevoegen van een functie voor widgets. Dat laatste zorgt ervoor dat er widgets kunnen worden toegevoegd in de sidebar van het thema.

We beginnen met de zoekpagina. Een zoekpagina lijkt voor een groot deel op index.php. In feite wordt er een ‘Loop’ uitgevoerd waarin alle posts die worden weergegeven de zoekresultaten zijn.

De veranderingen die ten opzichte van index.php gemaakt moeten worden zijn:

– het toevoegen van een titel waarin de huidige zoekopdracht wordt weergegeven;
– het toevoegen van een zoekveld, zodat na het bekijken van de zoekresultaten de gebruiker makkelijk een nieuwe zoekopdracht kan uitvoeren.

Je kunt gebruikmaken van een WordPress functie om de huidige zoekopdracht weer te geven: the_search_query(). Je zult begrijpen dat deze functie niks zal weergeven wanneer een geen zoekresultaten zijn. Bijvoorbeeld wanneer de zoekpagina normaal wordt geopend of wanneer er voor een bepaalde zoekopdracht niks wordt gevonden.

We kunnen controleren of er zoekresultaten zijn. Dit doen we door middel van de functie have_posts(). Je krijgt dan een opbouw zoals onderstaand:

if (have_posts()) {
	// zoekresultaten weergeven
}
else {
// melden dat er niks is gevonden en zoekveld weergeven zodat gebruikers opnieuw kunnen zoeken
}

Het weergeven van de zoekresulaten is simpel, dit gaat op dezelfde manier als in index.php. Het is nu logisch the_excerpt() te gebruiken zodat niet het volledige bericht wordt weergegeven. Je krijgt bijvoorbeeld het volgende:

		<h1>Zoekresultaten voor '<?php the_search_query(); ?>'</h1>
		<?php while ( have_posts() ) : the_post(); ?>
		<div class="zoekresultaat">
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<?php the_excerpt(); ?>
		</div>

Zoekformulier

In het tweede deel voegen we een zoekformulier toe. Deze kunnen we ook toevoegen in het eerste deel, zodat de gebruiker opnieuw kan zoeken. Zo’n formulier ziet er bijvoorbeeld als volgt uit:

		<form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
		    <label for="s">Zoeken naar:</label>
		    <input type="text" value="<?php the_search_query(); ?>" name="s" />
		    <input type="submit" value="Zoeken" />
		</form>

We plaatsen dit formulier in een nieuw bestand met de naam searchform.php. Het formulier voeg je vervolgens toe door middel van de functie get_search_form(). Search.php ziet er dan als volgt uit:

<?php get_header(); ?>

		<div id="entry">
		<?php if (have_posts()) : ?>
			<h1>Zoekresultaten voor '<?php the_search_query(); ?>'</h1>
			<?php get_search_form(); ?>
		<?php while (have_posts()) : the_post(); ?>
			<div class="post">
				<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
				<?php the_excerpt(); ?>
			</div>
		<?php endwhile; else : ?>
			<h1>Helaas, er is niks gevonden...</h1>
			<?php get_search_form(); ?>
		<?php endif; ?>
		</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Support voor widgets

We gaan nu kijken naar een functionaliteit zodat er widgets kunnen worden toegevoegd aan het thema. In het geval van het voorbeeldtemplate voegen we deze functionaliteit toe aan de sidebar. Een sidebar moeten we eerst registreren, dit doen we door de volgende code in functions.php toe te voegen:

function voorbeeldthema_widgets_init() {
    register_sidebar(array(
    	'name' => 'Sidebar rechts',
    	'id' => 'sidebar_right',
    	'before_widget' => '<div class="widget">',
    	'after_widget' => '</div>',
    	'before_title' => '<h3>',
    	'after_title' => '</h3>',
	));
}

add_action( 'init', 'voorbeeldthema_widgets_init' );

Er wordt gebruik gemaakt van de functie register_sidebar(). Deze accepteert een array met de volgende parameters:

name – De naam van de sidebar welke ook in WordPress verschijnt.
id – Het id waaraan je de sidebar later kunt herkennen.
before_widget/after_widget – De code welke voor en na elke widget moet worden weergegeven.
before_title/after_title – De code welke voor en na de titel van elk widget moet worden geplaatst.

Vervolgens voegen we de sidebar met de functie dynamic_sidebar('sidebar_right') in sidebar.php. Hierbij verwijst de parameter ‘sidebar_right’ naar de waarde van id bij het registreren van de sidebar. Dat resulteert dan tot de volgende code voor sidebar.php:

		<div id="sidebar">
			<?php dynamic_sidebar('sidebar_right'); ?>
		</div>

Op deze manier kan je meerdere ‘widget area’s’ toevoegen. In WordPress worden het sidebars genoemd, maar het hoeft niet percee in de vorm van een sidebar. Je kunt ook in een kolom onder je website widgets toevoegen.

Downloaden

Het volledige thema kun je hier downloaden: voorbeeldthema-6.zip. Je kunt deze zelf installeren, uitpakken om de bestanden te kunnen bekijken of live bekijken op de voorbeeldpagina: http://html-site-voorbeeld.developtheweb.nl/

Vragen?

Met dit laatste deel zijn we aangekomen aan het einde van deze serie waarin we een WordPress thema leerden maken. Deze minicursus heeft niet alle mogelijkheden van WordPress thema’s besproken. Er is ontzettend veel mogelijk, te veel om allemaal te bespreken. Bekijk ook eens de (Engelstalige) website van WordPress over het ontwikkelen van WordPress thema’s, http://codex.wordpress.org/Theme_Development.

Als je nog vragen hebt of je bent problemen tegengekomen tijdens het maken van je thema, laat dan gerust hieronder een bericht achter!

Les 1, Les 2, Les 3, Les 4, Les 5, Les 6

          Leuk als je dit artikel deelt:
Share

Eén gedachte over “Een zoekpagina en widgets voor een WordPress Theme

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *