Stan Melching

WordPress Beginner Tips & Tricks Tutorial

21 mei, 2014
en geplaatst in CMS , Websites , WordPress

WordPress is een enorm krachtig CMS platform met veel functionaliteiten. Het is makkelijk om even in te stappen met de standaard themes als Twentyten en Twentyeleven. Maar als je wat verder wilt gaan en je themes wat meer uniek wilt maken, dan is er toch enige kennis van PHP nodig. Het helpt natuurlijk ook als je de structuur van WordPress onder de knie hebt. Om jullie wat wegwijs te helpen in het hele WordPress verhaal posten we hier enkele tips. Deze tips komen vooral uit persoonlijke ervaringen! Het leven was zo veel makkelijker geweest als wij dit ook wisten toen wij begonnen! Laten wij jullie die ergernissen besparen.

Themes versus Templates

Deze twee begrippen zijn niet hetzelfde. Themes zijn de mappen die alle bestanden van een thema bevatten. Dus alle CSS, Javascript en PHP bestanden. Hierin wordt de layout en de vormgeving van uw website bepaalt. Twentyten is bijvoorbeeld een theme. Een theme slaat u op in de map: root/wp-content/themes/uw-thema. In de stylesheet.css van uw theme kunt u een eigen naam, versie, auteur en datum geven.

In de adminpanel – bij Weergave -> Thema’s – kunt u alle beschikbare themes zien. U ziet hier dan ook de naam staan die u heeft opgegeven in de stylesheet.css. Ons theme heet bijvoorbeeld Monsu Theme, en boven de stylesheet.css ziet dat er zo uit:

/*
Theme Name: Monsu Theme
Theme URI: https://www.monsu.nl
Description: Een blank en clean template voor WordPress, gemaakt door Monsu
Author: Don Munter
Author URI: https://www.monsu.nl
Version: 1.3
*/

Templates zijn apparte gedeeltes van een WordPress theme. Zo kunt u in de theme map de volgende bestanden zien: page.php, single.php, search.php etc.

Deze bestanden laten zien hoe een aparte pagina, een apart blogbericht of de zoekpagina eruit ziet. Zo kunt u aparte templates aanmaken voor uw pagina’s, als u niet wilt dat alle pagina’s er hetzelfde uitzien. Wilt u de contactpagina bijvoorbeeld anders? Dan maakt u een nieuw bestand aan, genaamd page-contact.php. Bovenaan het bestand staat dan:

>/*
Template Name: Contact Pagina
*/

In dit bestand kunt u de layout aanpassen. WordPress neemt de tekst over na de woorden “Template Name: “, dus zorg ervoor dat dit er altijd zo uit ziet. Als je nu een pagina bewerkt, kan je bij Sjabloon de template “Contact Pagina” kiezen.

(Interne) Links

Vraag Hoe link ik naar pagina’s of afbeeldingen binnen mijn website, vanuit PHP bestanden in mijn theme?

Antwoord Ik zie nog steeds veel WordPress developers gebruik maken van harde links. Dit is natuurlijk bad practice. Als de website ooit eens verhuisd, moeten alle links aangepast worden. Makkelijker zou zijn dat het domeinnaam of template directory al standaard wordt uitgelezen.

Dit kan door middel van de get_bloginfo() functie. Tussen de haakjes komen de zogenoemde parameters te staan. Degene die wij het meest gebruiken zijn uiteraard de template url’s. Onze afbeeldingen staan bijvoorbeeld altijd in de map “Afbeeldingen” van onze thema. Een afbeelding wordt aangeroepen met de parameter template_url:

/images/afbeelding.png" /> 

Met bloginfo() kunt u ook uw website naam en link uitlezen. Wilt u uw website naam in een link hebben, dan kunt u het volgende doen:

Voor meer informatie kijkt u op de WordPress Bloginfo referentie.

Conditional Statements

Vraag Hoe zorg ik ervoor dat sommige pagina’s andere content laat zien?

Antwoord Je kunt natuurlijk verschillende templates gebruiken, maar conditional statements worden toch eigenlijk wel het meest gebruikt. Je kent het wel: “Als ik op de contactpagina ben, dan wil ik ___, anders wil ik ___”. Of: “Als ik op de hoofdpagina ben, dan wil ik geen sidebar laten zien. En als ik op andere pagina’s ben, wil ik wel een sidebar laten zien”. Dit zijn de if-else statements.

Als voorbeeld nemen we de sidebar. Ik wil wel een sidebar op de hoofdpagina, maar niet op de andere pagina’s:

if(is_home()){
    get_sidebar();
} else {
 
}

Dit kan natuurlijk ook voor andere pagina’s. De hoofdpagina kan je aanroepen met is_home(). Andere pagina’s worden aangeroepen met de pagina titel of de pagina id:

if(is_page("contact")){
    // contact specifieke dingen
} else {
    // dingen voor andere pagina's
}

Of u wilt dat uw site niet wordt geïndexeerd pagina’s die zoekresultaten bevatten, dan doet u:


    

Meer informatie vindt u op de WordPress Conditional Tags pagina.

Featured / Uitgelichte Afbeeldingen voor pagina’s

Vraag Standaard heeft WordPress geen featured afbeeldingen – of thumbnails, deze moet je eerst aanzetten in de functions.php d.m.v:

add_theme_support('post-thumbnails');

Als u eenmaal de thumbnails heeft aangezet, zijn deze alleen beschikbaar bij berichten (posts), maar niet bij pagina’s. Hoe krijg ik thumbnails bij pagina’s?

Antwoord Dit kan door middel van de voorgaande code in uw functions.php aan te passen / toe te voegen:

add_theme_support('post-thumbnails', array('post','page'));

Featured / Uitgelichte Afbeelding weergeven

Vraag Hoe laat ik mijn uitgelichte afbeelding zien bij een post of pagina.

Antwoord Om de gehele afbeeldingen te laten zien, met img tags en al, gebruikt u:

the_post_thumbnail('medium');
// thumbnail, medium, large, full

Wilt u alleen de URL van de afbeelding weten?

if (has_post_thumbnail($post->ID )){
 
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
 
    echo $image[0];
 
}

A Final Word

Tot zover enige tips en tricks voor de beginnende WordPress Goeroe! Natuurlijk gaan we hier de komende tijd dieper op in. Maar voor nu is het belangrijk dat jullie reacties achter laten zodat wij u beter van dienst kunnen zijn. Heeft u nog vragen over WordPress? Of onderwerpen die wij in een volgend bericht aan moeten snijden?

Wilt u een professionele WordPress website, maar heeft u zelf geen tijd of niet voldoende expertise om het zelf te doen? Vraag dan een offerte aan bij Monsu.

Deel je opmerking