Maak je eigen wordpress theme.
In een serie van artikelen gaan we beschrijven hoe je je eigen theme voor WordPress kunt maken. WordPress is een van de meest populaire blogsystemen van het moment. Je kunt hiervoor heel veel templates vinden en downloaden of kopen, maar je kunt vrij eenvoudig ook zelf een template of theme maken. In het eerste van een serie artikelen gaan we kijken naar de basis van WordPress en de opbouw van een theme. Je moet in ieder geval kennis hebben van HTML, CSS. Een beetje kennis van PHP kan ook geen kwaad, al hoef je hier verder niet zoveel mee te kunnen.
Voorbereiding
Voordat je aan het stijlen en coden slaat zijn er een paar dingen die je moet doen. Ten eerste maak je een map aan die je een willekeurige naam geeft. Deze plaats je in de /wp-content/themes/ folder van wordpress. Je kunt nu alles op je localhost installeren en testen, maar je kunt het ook allemaal online toepassen. In de betreffende map ga je nu een aantal lege documenten aanmaken met de volgende namen:
- header.php
- sidebar.php
- footer.php
- index.php
- page.php
- single.php
- archive.php
- comments.php
- style.css
Deze bestanden zijn nu leeg, we zullen ze stap voor stap de juiste inhoud geven. Sla ze wel op met de juiste extentie, dus .php en .css
Stap 1 – De Stylesheet
Laten we starten met het stijlblad ‘style.css’. Kopieer en plak de volgende code in dit bestand:
/*
Theme Name: Naam van je wordpress theme
Theme URI: http://www.jesite.com
Description: Omschrijving van je wordpress theme.
Version: 1.0
Author: Je naam
Author URI: http://www.jesite.com/
*/Natuurlijk moet je hier je eigen naam, url en omschrijving invullen. Dit legt vast hoe het theme gaat heten in het admin gedeelte van wordpress bij design.
We zullen de rest van style.css ook meteen ingeven. We hebben een basis nodig voor de layout. We zullen even uitgaan van een gratis css template wat overal op internet te vinden is. De hele code kopieren en plakken we in de stylesheet. Het ziet er dan als volgt uit:
/*
Theme Name: Naam van je wordpress theme
Theme URI: http://www.jesite.com
Description: Omschrijving van je wordpress theme.
Version: 1.0
Author: Je naam
Author URI: http://www.jesite.com/
*/
* {
margin:0;
padding:0;
}
body {
background:#fff;
color:#000;
min-width:800px;
font-family:tahoma, arial, sans-serif;
font-size:10pt;
}
#wrapper {
width:800px;
height:auto;
margin:0 auto;
}
#header {
width:784px;
height:auto;
padding:8px;
text-align:center;
border-bottom:1px solid #000;
}
#nav {
width:784px;
height:auto;
padding:8px;
text-align:center;
border-bottom:1px solid #000;
}
#sidebar {
width:180px;
height:auto;
float:left;
padding:8px;
text-align: center;
}
#main {
width:587px;
height:auto;
float:right;
padding:8px;
border-left:1px solid #000;
}
#footer {
clear:both;
margin:0;
padding:8px;
text-align:center;
border-top:1px solid #000;
} Stap 2 – Header
Nu openen we het volgende document, header.php. Onderstaande code kopieren en plakken we daarin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11?>
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0? href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92? href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3? href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<!–
Vanaf hier kun je gaan aanpassen. Pas de verschillende divs naar wens aan.
Als je bovenstaande template gebruikt hoef je niets te doen.
–>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?><br /><br />
</div><!– close header –>
<div id="nav">
</div><!– close nav –>Dit is min of meer het begin van iedere html pagina. Eerst wordt het DOCTYPE geplaatst. Dan volgt de TITLE, de koppeling met het stylesheet en de meta tags.
Als je vervolgens wat beter kijkt zie je waarden die PHP bevatten, zoals:
<?php wp_title(); ?>
Hier hoef je niet bang voor te zijn, hiermee kunnen waarden dynamisch worden veranderd wanneer je dit aanpast in het admin gedeelte. Bovenstaande code bijvoorbeeld gaat na welke titel er voor het blog is ingegeven. Dat wordt uit de database gehaald.
Tot zover de eerste aflevering. Je bent nu op weg om je eigen wordpress theme te gaan maken. Volgende week zal het tweede deel worden geplaatst, waarin we aan de slag gaan met de andere bestanden.
Hallo,
Naar zo’n artikel ben ik al een tijdje op zoek, top! Ik wacht de volgende artikelen af!
M.v.g.
Waar blijft het volgende artikel?:)
ben er aan bezig, komt morgen of dinsdag online! Was een paar dagen erg druk.
Geweldig:) Bedankt
Ik kreeg het in eerste instantie niet helemaal voor elkaar, maar er lijken gewoon wat foutjes in de code te zitten.. er staan wat ?’s waar “s horen en vergeet bij t laatste stuk niet de wrapper div en de op het eind erbij te zetten..
opzich best logisch, maar hopenlijk scheelt het weer iemand wat zoekwerk!
Sander
sorry het zijn natuurlijk includes, was me niet helemaal duidelijk geworden..
Waarom geef je die code niet gewoon? dat scheelt werk voor ons.
De grote lijnen volg ik nog niet helemaal.
Bijvoorbeeld: ik heb een site gemaakt waar in de toekomst een pagina moet komen met nieuws, interessante zaken e.d. Moet de hele site dan in wordpress of kan ik alleen die ene pagina in wordpress maken en in de bestaande website integreren?
In principe maak je de hele site in wordpress, je kunt natuurlijk de bestaande layout en wordpress naast elkaar gebruiken, maar de meeste websites gebruiken alleen WordPress. Als je meer een nieuwssectie wil dan zou je eens moeten kijken naar Cutenews, dat kun je wel integreren op de manier zoals jij voorstelt. http://cutephp.com/
Komen er nog meer artikelen?
Je kunt het volledige artikel lezen op http://localhost:8888/wordpress-template-maken.php