11. WordPress: Sub-template bestanden: single, archieven en veel meer.
In het vorige hoofdstuk hebben we index.php bestanden opgesplitst in verschillende bestanden. We gaan nu iets verder en nog meer pagina’s aanmaken. Index.php zal dienen als onze basis en van daaruit kunnen we allerlei aanpassingen doorvoeren als dat nodig zou zijn.
Archive.php
Ga nu eens naar je site en klik op 1 van de maanden onder het kopje Archieven die je hebt staan in de sidebar. Dat verschilt eigenlijk weinig of niets van je indexpagina nietwaar? Zou het niet leuk zijn om dat een beetje aan te passen? Laten we dat doen!
- Maak een nieuw bestand aan in kladblok en noem het archive.php
- Kopieer alles van index.php in archive.php
- Verander the_content naar the_excerpt – we hebben in het 4e hoofdstuk (Inhoud toevoegen aan de index-template) reeds geleerd wat het verschil is.
- Sla het bestand op
Waarom doen we dit nu? Dit is om te voorkomen dat zoekmachines denken dat er ‘duplicate content’ op een website voorkomt. Duplicate content is dezelfde inhoud meerdere keren op een website te tonen.
Category.php
Deze stap is simpel. Als dezelfde reden als hierboven maken we een nieuw bestand: category.php.
Kopieer vervolgens alles uit archive.php in category.php en we zijn al klaar.
Search.php
We houden het alweer simpel: maak een nieuw bestand: search.php
Kopieer vervolgens alles uit archive.php in search.php;
Search.php is de pagina waarop we terechtkomen als we de zoekfunctie gaan gebruiken.
Page.php en single.php
Maak twee nieuwe bestanden aan: page.php en single.php
Kopieer alles van index.php naar deze twee nieuwe bestanden
Sla alle bestanden op.
We moeten een onderscheid maken tussen enerzijds de vaste pagina’s en anderzijds de pagina’s van onze artikels (de posts).
Eerst de page.php
Zoek in page.php volgende code: <?php the_content(); ?>
Daaronder plaats je dan het volgende:
<?php wp_link_pages('before=<p class="nextpagenav">&after=</p>&next_or_number=number&pagelink=Pagina %'); ?><?php edit_post_link('Edit', '<p>', '</p>'); ?>
Pagina’s kunnen we voorzien van verschillende stukken. Elk verschillend stuk zal een nieuw pagina vormen. Probeer het zelf maar eens uit door een pagina aan te passen via het adminpaneel. Na elke paragraaf typ je nextpage (zoals in de afbeelding):
Als je dan naar de pagina in kwestie gaat zal je zien dat er een paginanummering werd aan toegevoegd. Elke nextpage code deelt de pagina dus in verschillende stukken:
Hé, dat ziet er anders uit dan op de afbeelding? Klopt, ik had er alvast een stijl aan gegeven. Daarom gaan we nu in style.css volgende code toevoegen:
.nextpagenav a{padding: 1px 5px 1px 5px; background-color: #eee; margin: 0; border: 1px solid #c0c0c0}
Vervolgens gaan we alle postmetadata wissen uit page.php; Dit is hier niet echt nodig aangezien het om vaste pagina’s gaan (bijvoorbeeld een contactformulier of een ‘over mij’ pagina).
Ter verduidelijking: in page.php moet je volgende code wissen:
<p class="postmetadata"> <?php _e('Geplaatst onder:'); ?> <?php the_category(', ') ?> <?php _e('door'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('Geen Reacties »', '1 Reactie »', '% Reacties »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p>
Verwijder tegelijkertijd volgende code (van de navigatie):
<div class="navigation">
<div class="alignleft"><?php next_posts_link('<span class=\'older\'>← Oudere Berichten</span>') ?></div> <div class="alignright"><?php previous_posts_link('<span class=\'newer\'>Nieuwere Berichten →</span>') ?></div> </div>Aangezien het hier om 1 vaste pagina gaat (en geen samenvatting van onze berichten) is er geen navigatie van doen. Alle overtollige codes mogen dus gerust weg.
En dan nu single.php
Als je op de titel van een van je artikels klikt, dan kom je terecht op een pagina met het artikel. Het gaat hier opnieuw over 1 pagina zoals bij page.php maar ditmaal met het artikel. Ook hier zal er enkele codes moeten gewijzigd worden. Een artikel gebruikt single.php om de opmaak te bepalen. Pas je dus iets aan in single.php dan veranderd dat mee op elk artikel dat je gepubliceerd hebt.
We zoeken naar volgende code: <?php the_content() ?>
Daaronder voegen we volgende code toe:
<?php wp_link_pages('<p><strong>Pages:</strong>', '</p>', 'number'); ?>
Dat is inderdaad dezelfde code als die dat we hebben gebruikt bij page.php; Een artikel kan je ook in meerdere pagina’s verdelen!
In de postmetadata gaan we ook iets verwijderen:
<?php comments_popup_link('Geen Reacties »', '1 Reactie »', '% Reacties »'); ?>
Dit zal niet werken in single.php want onderaan het bericht gaan we later nog de ruimte voor reacties voorzien.
Verwijder ook de <br /> tag dat ervoor staat.
Volgende wijziging: Alles dat in de DIV navigation staat gaan we ook aanpassen; we gaan het iets simpeler maken. De DIV navigation moet er nu als volgt uitzien:
<div class="navigation"> <div class="alignleft"><?php previous_post_link('« %link') ?></div> <div class="alignright"><?php next_post_link(' %link »') ?></div> </div>
Als je de code vergelijkt zal je zien dat er nu een ‘s’ gewist is van posts. Dat is omdat we nu een verwijzing willen naar een vorig en volgend artikel. Laten we de code zoals deze er stond, dan zou dat ook niet gewerkt hebben.
Navigatie stylen
Wacht eens even, zijn we niets vergeten? We hebben de navigation class nog geen opmaak gegeven in style.css!
Goed opgemerkt, laat ons dat nu doen:
Open style.css en ga naar de onderkant van het bestand.
Daar gaan we de volgende code bijvoegen:
.navigation{width: 100%;}
.alignleft{width: 49%; float: left; text-align: right;}
.alignright{width: 49%; float: right;}We geven de navigatie DIV een breedte van 100% (even breed als het gebied waarin het zich bevindt).
Vervolgens gaan we de ene DIV links floaten (alignleft)
En de andere DIV gaat rechts floaten (alignright)
Aan beiden geven we een width mee van 49%: zo komen ze naast elkaar te staan en blijft er wat ruimte over als marge.
Tot slot gaan we aan de linkerkant de tekst rechts uitlijnen. Zo komt alles mooi in het midden te staan.
Je kan dit uiteraard een stijl geven zoals je zelf wilt!
En zo komen we tot het einde van dit hoofdstuk. In het volgende deel gaan we de mogelijkheden maken om reacties te plaatsen.
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.
Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!
