2. WordPress: Starten met de theme en algemeen uitzicht.
Hoe ziet zo’n theme er nu eigenlijk uit?
Een visuele voorstelling zal hierbij helpen:
We splitsen de pagina dus op in verschillende bestanden:
- header.php
- footer.php
- sidebar.php (dit wordt de navigatie)
- index.php (kan ook single.php zijn of page.php)
Het leuke aan WordPress en php bestanden zijn dat je dit 1x goed zet en dat op alle pagina’s dan je footer of header automatisch laden.
Installatie van Xampp lite.
Tijd om van start te gaan. Download hiervoor Xampp. Installeer het programma in je root folder (rechtstreeks onder je locale map c:\ )
Ga nu naar C:\xampplite en dubbelklik op setup_xampp.bat
Nu kunnen we het programma openen. Klik op xampp-control.exe en er zal een nieuw venster verschijnen.
We gaan nu de Apache en Mysql services openen. Klik 2 maal op start.
De laatste stap bestaat er in om nu je internetbrowser te opnenen en volgende url in te typen: http://localhost/
Nu zijn we beland op de aankomstpagina op onze harde schijf. Als we een WordPress site beginnen te bouwen doen we dit onder volgende folder:
* op de harde schijf plaatsen we de bestanden onder:
C:\xampplite\htdocs\wordpress
* als we de website willen zien in onze browser:
http://localhost/wordpress
Voorbereiding WordPress op onze locale schijf
Download nog even WordPress vanop de site, decomprimeer de bestanden en plaats ze onder het mapje ‘wordpress’ dat we hebben aangemaakt in de map van XAMPP.
Maak onder het mapje ‘themes’ een nieuw map. Je kan dit eender welke naam geven (bijvoorbeeld: euro-bijverdienen-theme).
Als alles goed is gegaan heb je nu een lege map als je in Windows verkenner gaat naar: C:\xampplite\htdocs\wordpress\wp-content\themes\euro-bijverdienen-theme\
In deze map gaan we al onze bestanden opslaan.
Installatie van WordPress
Het voordeel van een WordPress site is dat de installatie enorm gemakkelijk is:
• Je plaatst de bestanden op de locatie (offline of online);
• Je past het config bestand aan;
• Je richt je browser naar de url en voegt er wp-admin/install.php aan toe (bijvoorbeeld: http://localhost/wordpress/wp-admin/install.php) en je volgt de stappen die op het scherm verschijnen.
Neem gewoon de readme door dat je bij de installatie van WordPress krijgt en je bent zo vertrokken!
Starten met index.php
Maak met kladblok (of notepad++) 2 bestanden aan in het mapje: index.php en style.css
Kopieer nu alles uit het DIT bestand in je lege index.php bestand.
Uiteraard geven we hier uitleg bij:
Doctype – aanduiden wat voor coderingen je zal gebruiken.
<html> – hier start onze pagina.
<head> en </head> – Dit is de hoofding van je pagina en dat zie je niet publiekelijk op een website surft.
<?php bloginfo(‘stylesheet_url’); ?> – Dit is een php functie. Het roept de locatie waar het bestand style.css (je theme mapje) staat. Php functies beginnen met: <?php en eindigen altijd met ?> .
<body> – Hier komt alle inhoud te staan die je wel zal zien als je op een website surft. We sluiten dit met volgende tag: </body>.
</html> – Hier eindigt de webpagina.
Starten met style.css
Open nu het lege bestandje style.css dat je zonet hebt aangemaakt en plak er de codes in van DIT BESTAND.
In style.css zullen we alles specificeren zoals de breedte van onze pagina, de kleuren die we gaan gebruiken, enz …
De theme activeren
Tijd om even in te loggen op WordPress. Typ het volgende in je browser: http://localhost/wordpress/wp-admin/
Je zal automatisch worden doorverwezen naar het loginscherm.
Log in en navigeer dan in het admingedeelte naar “Appearance >> Themes”. Daarin zul je de theme zien staan:
Activeer de theme.
Navigeer nu naar http://localhost/wordpress/ en je zal een blanco pagina zien. Als je geen blanco pagina ziet, dan is er iets fout gelopen. Er kan nog geen tekst instaan want tot nu toe hebben we nog niets ingegeven van code in de index.php pagina.
In de volgende hoofdstukken zullen we beginnen met het toevoegen van de noodzakelijke codes in deze volgorde:
- header.php (want deze heeft specifieke bepalingen);
- footer.php (dit is relatief gemakkelijk en zal snel gaan);
- index.php (dit is de moeilijkste brok: heel veel code en belangrijk: de wordpress loop);
- sidebar.php (hiermee sluiten we het designen van de indexpagina af).
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!