WordPress is ooit begonnen als blog-tool en uitgegroeid tot een prima middel om volwaardige websites mee te maken. Toch is de blog-structuur nog duidelijk herkenbaar: Het plaatsen van content gaat in principe door het aanmaken van verschillende posts op een pagina.
Voor een wordpress-site zijn minstens 2 bestanden nodig met een verplichte naam: style.css (Hierin staat de opmaak van de website beschreven) en index.php(Hierin staat de opbouw van de website beschreven). Die bestanden kun je met bijvoorbeeld Dreamweaver maken en op de server uploaden met bijvoorbeeld Filezilla. Het is belangrijk dat de bestanden in een map op de goede plaats ge-upload worden. Binnen de WordPress installatie is dat: htdocs/ wp-content/ themes/ map eigen theme.
In een html-pagina staat alle content vast. Het voordeel van het gebruiken van een cms (conten management system) is dat content opgeslagen wordt in een database. Een cms als WordPress kan met gebruik van php-functies data ophalen en bijschrijven in het html-document. Voor het maken van een originele WordPress website kun je goed beginnen met een html versie van de site. Zo kun je met css het ontwerp goed neerzetten. Vervolgens vervang je de html teksten voor WordPress functies die in de database op zoek gaan naar de juiste informatie.
Als de bestanden ‘index.php’ en ‘style.css’ geupload zijn in de themes-map van WordPress zijn ze via de editor in het dashboard te veranderen. Om te beginnen moet de link naar het ‘style.css’ door WordPress zelf gemaakt worden. WordPress krijgt de opdracht om alle algemene informatie over de website/blog op te halen, en daarvan de ‘stylesheet_url’ te gebruiken.
<head>
<link type=”tekst/css” rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>“/>
</head>
Van de lijst met bloginfo kunnen veel meer gegevens gebruikt worden, bijvoorbeeld de titel van de website/blog. Met onderstaand voorbeeld zoekt WordPress de titel die de gebruiker heeft opgegeven in het dashboard bij de instellingen .
<head>
<link type=”tekst/css” rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>”/>
<title><?php bloginfo(‘name’); ?></title>
</head>
Met de verschillende WordPress functies is zo een hele website op te bouwen. Hier volgt een voorbeeld van een basis pagina met een header, een menu en ruimte om berichten te plaatsen. Deze elementen zijn met css makkelijk vorm te geven. De content die Wordpress hier aan toe voegt zal zich automatisch aan je css aanpassen.
<body>
<div id=”wrapper”>
<header></header>
<nav></nav>
<div class=”berichten”></div>
</div>
</body>
Aan deze eenvoudige html-structuur kunnen we door WordPress content laten toevoegen. Bijvoorbeeld de titel van onze website in een h1-tag in de header plaatsen:
<body>
<div id=”wrapper”>
<header><h1><?php bloginfo(‘name’); ?></h1></header>
<nav></nav>
<div class=”berichten”></div>
</div>
</body>
WordPress heeft twee manieren om via het dashboard content te plaatsen: Als pagina, of als bericht/post. Om een menu te maken die weergeeft welke pagina’s er zijn wordt de opdracht ‘wp_list_pages()’ gebruikt:
<body>
<div id=”wrapper”>
<header><h1><?php bloginfo(‘name’); ?></h1></header>
<nav><?php wp_list_pages(); ?></nav>
<div class=”berichten”></div>
</div>
</body>
Als een website/blog is opgebouwd uit posts/berichten, kan er een menu lijst gemaakt worden waarin bijvoorbeeld de bericht-categories komen te staan. In plaats van ‘wp_list_pages()’ wordt dan gebruik gemaakt van ‘wp_list_categories()’.
<body>
<div id=”wrapper”>
<header><h1><?php bloginfo(‘name’); ?></h1></header>
<nav><?php wp_list_categories(); ?></nav>
<div class=”berichten”></div>
</div>
</body>
Met de WordPress opdracht ‘wp_list_categories()’ maakt WordPress een menu dat bestaat uit een li met de titel ‘categories’, daarin zit een ul, en daarin zitten li elementen met elk een eigen a-tag. Zo’n ingewikkeld menu is lastig te stylen met css. Daarom geven we WordPress de opdracht om een menu te maken zonder titel (dan blijft er alleen een serie li-elementen over):
<body>
<div id=”wrapper”>
<header><h1><?php bloginfo(‘name’); ?></h1></header>
<nav><?php wp_list_categories(‘title_li=’); ?></nav>
<div class=”berichten”></div>
</div>
</body>
Om de content toe te voegen is een wat ingewikkelder code nodig. WordPress kijkt in de database of er posts/berichten zijn. Ieder bericht dat gevonden wordt, wordt in de div ‘berichten’ geplaatst.
<body>
<div id=”wrapper”>
<header><h1><?php bloginfo(‘name’); ?></h1></header>
<nav><?php wp_list_categories(‘title_li=’); ?></nav>
<div class=”berichten”>
<?php while ( have_posts() ): the_post();
the_content();
endwhile; ?>
</div>
</div>
</body>
Als WordPress een post/bericht gevonden heeft kan er eenvoudig een titel toegevoegd worden. In onderstaand voorbeeld wordt de titel van het bericht in een h2-tag geplaatst en de content van het bericht vervolgens in een p-tag. Let op, de wordpress/php opdracht wordt onderbroken door de 2 html-tags. De php-tag moet dan ook afgesloten worden voordat de html-tag geplaatst wordt. Na de html-tags wordt er een nieuwe php-tag geopend.
<body>
<div class=”wrapper”>
<header><h1><?php bloginfo(‘name’); ?></h1></header>
<nav><?php wp_list_categories(‘title_li=’); ?></nav>
<div class=”berichten”>
<?php while ( have_posts() ): the_post(); ?>
<h2> <?php the_title(); ?> </h2>
<p> <?php the_content(); ?> </p>
<?php endwhile; ?>
</div>
</div>
</body>
Op dezelfde manier is het mogelijk om elk bericht in een eigen div te plaatsen, zodat de berichten gestyled kunnen worden met css. Let op, je kunt geen html en php door elkaar gebruiken. Voordat een html-tag geplaatst wordt moet eerst de php-tag afgesloten worden (en na de html-tag weer geopend):
<body>
<div class=”wrapper”>
<header><h1><?php bloginfo(‘name’); ?></h1></header>
<nav><?php wp_list_categories(‘title_li=’); ?></nav>
<div class=”berichten”>
<?php while ( have_posts() ):<?php the_post();?>
<div class=”bericht”>
<h2> <?php the_title(); ?> </h2>
<p> <?php the_content(); ?> </p>
</div>
<?php endwhile;?>
</div>
</div>
</body>
Het WordPress thema dat we gemaakt hebben bestaat nu uit 2 bestanden: ‘index.php’ en ‘style.css’. De opmaak van ons WordPress thema kunnen we verder uitwerken in het bestand ‘style.css’.