10. WordPress: Header, index, sidebar en footer opdelen

Tot nu toe hebben we alles in 1 bestand bewerkt: index.php want dat was makkelijker. Nu gaan we de bestanden opdelen in verschillende stukken.

Alvorens we dit doen gaan we twee dingen doen:
Een lege ruimte (padding) toevoegen aan de bovenkant van de footer;
En alle paragrafen binnen de footer een lijnhoogte van 18px meegeven.

Dit is de code (aan te vullen in style.css):

#footer{
padding-top: 10px;
}
#footer p{
line-height:18px;
}

Eindelijk alles opdelen.

Maak een nieuw bestand aan in kladblok (of je favoriete editor). Noem het bestand header.php ;

Open vervolgens index.php en kopieer alles vanaf de bovenkant tot het einde van de header DIV.
Plak alles in header.php en sla het op. De selectie mag je wissen in index.php en vervangen door:
<?php get_header(); ?>
Wat er nu gebeurd is simpel: de indexpagina zal de header telkens oproepen. Het is een php functie dat is ingebouwd in WordPress.

Doe hetzelfde met sidebar en footer

  • Maak een nieuw bestand aan in kladblok. Noem het bestand sidebar.php ;
  • Knip alles uit het index.php bestand dat betrekking heeft op de sidebar (de DIV met class sidebar).
  • Plak alles in sidebar.php
  • Op de locatie in index.php waar we net alles van sidebar hebben geknipt, plak daar: <?php get_sidebar(); ?>

Hier bij deze functie zal dit de sidebar oproepen.

Maak een nieuw bestand aan in kladblok. Noem het bestand footer.php ;

  • Knip alles uit het index.php bestand dat betrekking heeft op de footer (de DIV met ID footer): We starten dus vanaf de DIV met ID footer en eindigen met de tag.
  • Plak alles in footer.php
  • Op de locatie in index.php waar we net alles van de footer hebben geknipt, plak daar: <?php get_footer(); ?> Hier zal dit de footer oproepen.
  • Voeg volgende functie toe na de </body> tag: <?php wp_footer(); ?>

Dit is nodig om bepaalde plugins te doen werken en het duidt in feite aan dat het over de footer gaat.

We hebben in dit hoofdstuk drie nieuwe bestanden aangemaakt: header.php, sidebar.php en footer.php
We hebben ook drie functies aangeleerd: get_header(), get_sidebar(), en get_footer()

Illustraties:
* Index.php bovenaan:

wp-serie-28-bovenkant-index

* index.php onderaan:

wp-serie-29-onderkant-index

* Alle bestanden in ons mapje:

wp-serie-30-bestanden

Waarom opdelen?

Dit kan het makkelijker maken in de toekomst. We gaan nog meer pagina’s aanmaken en telkens zullen ze op dezelfde manier zoals index.php verwijzen naar de header, de sidebar en de footer. Op die manier hoeven we niet telkens alle pagina’s aanpassen als we bijvoorbeeld iets in header.php willen veranderen: één keer aanpassen en klaar is kees.

Tip bij meerdere sidebars

Wie meerdere sidebars gaat gebruiken in de toekomst kan eventueel structuur behouden door op volgende manier te werken:
In index.php en de andere pagina’s die we later nog aanmaken, verwijs je naar de sidebar zoals hierboven aangegeven: <?php get_sidebar(); ?>
We gaan dan twee bestanden aanmaken: sidebar-links.php en sidebar-rechts.php
In het bestand sidebar.php verwijzen we dan naar deze opsplitsing door volgende codes te gebruiken:

<?php include (TEMPLATEPATH . '/sidebar-links.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar-rechts.php'); ?>

Dit kan uiteraard ook alleen gebeuren als beide sidebars naast elkaar komen te staan.

Als de pagina (bijvoorbeeld sidebar-links.php) niet zou bestaan, dan zou dit een error geven op onze website. We kunnen het daarom ook anders oplossen:
In plaats van de php include te gebruiken kan je de sidebar ook laden met volgende functie:
<?php get_sidebar( 'links' ); ?>
Dit betekend dan wel dat de naam van het bestand sidebar-links.php moet zijn. Een ander voorbeeld:
<?php get_sidebar( 'special' ); ?>
In dit geval zou de naam van het bestand sidebar-special.php moeten zijn. MAAR als het bestand niet zou bestaan, dan wordt automatisch de gewone sidebar.php geladen.

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. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close