Tellme header image
Tellme random header image

Tutorial - Een eigen Wordpress Theme - Les 3

January 23rd, 2009 by Bart · 3 Comments

In deze les gaan we een begin maken met index.php
Het is nu dus noodzakelijk dat je wordpress geinstallleerd hebt op je server, verder raad ik je aan de eerdere delen te lezen, mocht je dit nog niet gedaan hebben.
http://tellme.jeropocs.com/2009/01/22/tutorial-een-eigen-wordpress-theme-les-1

Voor de duidelijkheid, zal ik in stappen gaan werken;

#stap 1
maak een nieuwe map aan in wordpress/wp-content/themes.
Noem deze map tutorial.

#stap 2
Maak een bestand index.php en een bestand style.css aan in de map tutorials, de bestanden mag je beide nog even leeg laten.

#stap 3
Zet de volgende code in index.php (ik zal hem zometeen uitleggen).
[code ]
<!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’); ?>” /> <!– leave this for stats please –>

 <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>
<body>

</body>
</html>
[/code]

sla index.php op en zet hem op je server.

#uitleg
Doctype: Doctype zegt welke taal je gebruikt om je theme te schrijven, dit is momenteel niet van belang, dus ik zal er niet op in gaan om verwarring te voorkomen.

<html>: Hier start de webpagina.

<head>: Hier start de head, iedere website heeft een head en een body.
</head>:Hier sluit ik de head weer.

<?php bloginfo(’stylesheet_url’); ?> : Een functie om de url van de style.css op te halen, zodat mijn theme hierna kan linken, en alles kan stylen op mijn pagina.

<?php      ?> : Zoals je hierboven kunt zien, staat hier code tussen. Alle code die hier tussen staat, is php. <?php is het begin, en ?> is het eind, dus;

- <?php : start php
- bloginfo(’stylesheet_url’) : haal de url op
- ; : stop met het ophalen van de url, de ; is in php een symbool waarmee je aangeeft dat een groep van codes gesloten wordt.
- ?> : sluit de php code af.

<body>: Hier start de body, deze wordt ook weer op dezelfde manier gesloten, dus met </body> Momenteel is de body nog leeg.

</html>: sluit de html af.

<!– tekst –>: In html is alles tussen de <!– en –> commentaar, hier kun je dus korte uitleg in zetten. (let op! in php is dit geen commentaar, wanneer je dit dus gebruikt tussen <?php en ?> dan krijg je fouten!)

#stap 4
kopieer de volgende code, en plaats hem in style.css.

/* 
Theme Name: Tutorial
Theme URI: http://www.wpdesigner.com
Description: dit is het theme voor deze tutorial.
Version: 1.0
Author: Small Potato in
Author URI: http://www.wpdesigner.com/
*/

Je bent natuurlijk vrij om dit aan te passen.

#stap 5
stel je theme in, dit doe je in het beheer gedeelte van wordpress.
log in in wordpress. klik op presentation en daarna op het thema genaamd tutorial om het te activeren.
je ziet dat er nog geen plaatje is aangemaakt voor de tutorial (je hebt nog geen thumbnail.)

#stap 6
Open je wordpress site. Als het goed is zie je nu een compleet lege pagina. Wanneer hij dus niet volledig wit is, heb je ergens een foutje gemaakt, en moet je alles nog even nakijken.

De volgende keer gaan we kijken naar de header template.
Wanneer je vragen hebt, kun je het commentaar gedeelte gebruiken om ze te stellen.

Tags: tutorials · webdesign

3 responses so far ↓

  • 1 bojon // Apr 2, 2009 at 8:38 pm

    Wordpress geeft een error op index.php
    op de volgende regel:

  • 2 bojon // Apr 2, 2009 at 8:40 pm

    De regel wordt niet weergegeven. Een nieuwe poging:

    &lt?php wp_get_archives(’type=monthly&format=link’); ?&lt

  • 3 Dirk // May 1, 2009 at 3:25 pm

    Die foutmelding krijg je wanneer je de tekst letterlijk van hier hebt gekopieert, de apostrof klopt dan niet helemaal precies.

    Dit is op te lossen door zelf even de zin:

    over te typen, en let dan vooral op ‘ ‘ tekens..

    Bedankt Dirk! Dit is inderdaad de oplossing op vele fouten die gemaakt worden, het is sowieso het beste om het zelf te typen. Dan leer je er het meest van! =)

Leave a Comment