decoratie

een WordPress thema maken

vanuit een html-bestand

Thema

Een WordPress-thema wordt vaak van een bestaand thema afgeleid. Hier werken we vanaf de bodem. We maken het thema helemaal zelf. Hierdoor maak je als developer zelf kennis met de materie en helpt het je WordPress te doorgronden.
Het thema wordt ontwikkeld vanuit een html-document met een extern stijlblad. het prototype wordt hier 'dummy.html' genoemd. Het document heeft een header, article, menu met dropdown, aside en footer. De header heeft een achtergrondafbeelding. De aside en de footer gaan enkele widgets huisvesten en de naviagtiebalk heeft en zoekvenster dat in WordPress gaat functioneren.

Leerdoelen

Bronnen

Voor het maken van deze reeks zijn een aantal bronnen geraadpleegd:

stap 1: het thema klaarmaken (00:07:45)

Een WordPress-thema bestaat altijd uit een map met tenminste de volgende bestanden: index.php en style.css.
De gemaakte map wordt in de thema-map van je site overgebracht. Daarin moet style.css worden aangevuld met een reeks commentaar-regels, die het thema een naam geven en gegevens meegeven voor de Thema-selectie in de back-end. (zie http://codex.wordpress.org/Theme_Development) over het thema. Het html-document moet worden hernoemd naar index.php. Het thema is dan te activeren, maar het stijlblad wordt eigenlijk nog niet door WP gevonden.
Het is ook fijn een screenshot.png toe te voegen, die een visuele impressie geeft van het thema.

stap 2: het stijlblad koppelen (00:03:15) ˆ

De link naar het stijlblad werkt niet meer. WP moet het pad naar het stijlblad vinden. (Er zijn immers ook meerdere thema’s met style.css aanwezig!). Het pad naar het thema moet dynamisch met php-code gelegd worden.
<?php bloginfo('template_directory') ?>.
Daarachter moet je wel het pad kloppend maken en de juiste naam van de afbeelding toevoegen. Dit bloginfo() zal nog wel wel vaker van stal gehaald worden. Zie hiervoor ook http://codex.wordpress.org/Function_Reference/bloginfo

stap 3: pagina opdelen (00:05:54) ˆ

Eerst halen we de toolbar van WP terug door <?php wp_head(); ?> na de opening van de haead-tag te plaatsen en <?php wp_footer(); ?> voor het sluiten van de body-tag.
Om het overzicht te behouden én later eenvoudig verschillende soorten pagina's in WP te beheren, maken we het thema modulair: we knippende pagina in stukken.
De header, sidebar en footer komen in losse php-bestanden, zodat alleen de kale inhoud overblijft. De header kan dan bijvoorbeeld via <?php get_header() ?> weer worden opgevraagd op de plek waar dat nodig is. Hetzelfde voor de sidebar met <?php get_sidebar() ?> en footer: <?php get_footer() ?>

stap 4: header en footer dynamisch vullen (00:07:04) ˆ

De header en footer bevatten inhoud die niet standaard in het thema moet staan, maar die gevuld wordt vanuit de database:

Het dynamisch gegenereerde menu levert een andere html-mark-up dan ons eigen html-document. Het stijlblad functioneert niet helemaal meer. Onderzoek met de inspector wat de nieuwe mark-up is, en pas je stijlblad-selectoren daarop aan.

stap 5: de loop (00:10:09) ˆ

De inhoud van de berichten en pagina's wordt uit de database gehaald. Dit bestaat uit meerdere berichten en pagina's. Voor elke post worden een aantal opdrachten uitgevoerd. Men noemt dit: de loop.
Er wordt eerst getest met een if(have_posts()) of er inhoud aanwezig is en vervolgens met een while(have_posts()) voor ieder bericht de pagina gevuld. Dit gaat met het commando the_post(). Zie ook http://codex.wordpress.org/The_Loop
Voordat je de while en if afsluit geeft je aan wat je van de inhoud wilt hebben, wat je er zelf aan toevoegd en hoe je dat hiërarchisch plaatst door het toevoegen van html-tags als <h3> </h3> en <p> </p>.
De link naar de betreffende post wordt met <?php the_permalink(); ?> dynamisch gelegd.

stap 6: koppelingen head, tagline en post dynamisch (00:06:42) ˆ

Eerst worden de linkjes in het document vormgegeven.
Als je op de koptekst van een pagina klikt, verwachten we dat je naar de homepagina zult gaan.
Op dit moment linkt die kop nog naar de pagina zelf. De link moet worden vervangen met een php-commando <?php get_option('home'); ?>
Om bij de posts ook een link te leggen naar de weergaven van de post zelf voeg je in de kop een link toe.

stap 7: varianten maken (00:07:15) ˆ

Je kunt een thema verrijken door verschillende varianten van de index.php te maken. Zo maak je voor de weergave van een enkel bericht single.php, voor een een pagina: page.php, voor het overzicht van de berichten home.php, voor een aparte openingspagina front-page.php. die kun je qua inhoud dus aanpassen en kiezen van welke modulaire blokken je gebruik maakt. Ter illustratie wordt hier een regeltje toegevoegd en uit single.php de sidebar verwijderd. Zie ook: http://codex.wordpress.org/images/1/18/Template_Hierarchy.png. Wordpress biedt ons de mogelijkheid om een aparte weergave te maken voor een 'statische pagina'.

stap 8: commentaar bij berichten (00:09:07) ˆ

In single.php gaan we toegevoegd commentaar weergeven en de mogelijkheid bieden om op het bericht te reageren met een commentaarformulier.
In single.php gaan we toegevoegd commentaar weergeven en de mogelijkheid bieden om op het bericht te reageren met een commentaarformulier.
Voeg na de loop <?php comment_template("",true); ?> toe. Hier is dat in een div met de id commentaar gedaan.
Deze roept comment.php aan. Die maken we dan ook. Deze heeft 2 delen: het opvragen van de geplaatste opmerking met: <?php wp_list_comments(); ?> en het weergeven van het commentaar formulier met <?php comment_form(); ?> .
Hier wordt het commentaar op de plaats van de aside geplaatst. Breid daarom de style.css uit met regels voor de nieuwe commentaar-id.

stap 9: widgets plaatsen (00:15:01) ˆ

Om op een plaats in de pagina widgets te kunnen plaatsen, wordt eerst functions.php aangemaakt. Daarbinnen in ieder geval een register-sidebar() opdracht meegeven. Als argument in deze functie een array() met daarin in ieder geval de naam van het widget-gebied:

'name' => 'een naam voor het widget',
      'id' => 'een identieficatienaam'

In het array mag ook nog worden aangevuld met 'before_widget', 'after_widget' (waarmee vaak het widget in een div wordt geplaatst wat handig is voor de opmaak), 'before_title', 'after_title' en 'description' . Zowel de hier vermelde code als de code in het filmpje behoeven aanvulling. Deze staat onderaan deze pagina in het code-overzicht. Daar worden in een php-functie 2 widgets geregistreerd. Vervolgens wordt deze met een add-action(); aangeroepen.
Pas na deze aanmaak van register_sidebar(); in functions.php, kun je in het Dashboard een knop voor Widgets vinden. Je ziet dan in dat paneel ook de namen van de gedeclareerde widget-plaatsen.
Je kunt daar dan ook de widgets op hun bestemming plaatsen en daarmee in jouw thema opnemen. Ze zijn dan nog niet zichtbaar op de pagina's. Daarvoor moet je naar het betreffende onderdeel van de pagina gaan. bijvoorbeeld in de sidebar. Daar geeft je dan met het php-commando <?php dynamic_sidebar('de_id_van_registersidebar'); ?> de opdracht het geregistreerde sidebar-element op te halen.

stap 10: een werkend zoekvenster (00:06:44)ˆ

Het is eenvoudig een zoekvenster te plaatsen met <?php get_search_form(); ?>. De pagina beschikt dan over een werkende zoek-functie!
Vervolgens is het vaak nodig dit naar jouw wensen aan te passen. We willen hier een type ‘text’ vervangen door het type ‘search’. We willen ook de inhoud wissen en vervangen door een placeholder. Dit gebeurt hier door jQuery. Nadat deze in de heer is aangeroepen, kunnen we in de footer het jQuery laten zoeken naar de id ’s’. Met .attr() kunnen we tot 3 keer toe onze attributen wijzigen of toevoegen.

afronden

Zoals in de tutorial in stap 10 hierboven kun je het thema verder opmaken.
Omdat deze tutorial de nadruk op thema's in WP legt, laat ik de verdere opmaak aan jou over.
In ELO zowel de link inleveren als de ge-zipte versie van jouw thema.

Een overzicht van de gebruikte WordPress-functies

functie toepassing
in de head van het document:
<?php bloginfo('stylesheet_url') ?> om (het pad naar) het stijlblad te vinden
<?php bloginfo('template_directory') ?> geeft je het pad naar de map van het thema
<?php bloginfo('title()') ?> levert de title van de gegenereerde pagina. Vaak is dit de titel van het blog.
<?php get_header() ?> koppelt het hele deel van header.php op de plaats van dit commando.
Vergelijkbaar:
<?php get_sidebar() ?> koppelt het hele deel van sidebar.php op de plaats van dit commando.
<?php get_footer() ?> koppelt het hele deel van footer.php op de plaats van dit commando.
Opmaak van de header
<?php bloginfo(’name') ?> geeft de naam van het artikel/pagina
<?php wp_nav_menu(); ?> geeft het menu weer
<?php get_search_form( ); ?> geeft een zoekvenster weer
<?php echo home_url(); ?> geeft de URL naar de home-pagina. echo is een php-opdracht.
<?php the_permalink(); ?> geeft de URL naar een specifiek bericht
De loop
 
<?php if(have_posts()) : while(have_posts()) : the_post() ?>
  <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
         <p><?php the_content(); ?></p>
    <?php endwhile; endif; ?>
De inhoud uit de database halen en weergeven.
the_permalink() is de link naar het bericht.
<?php comment_template("",true); ?> geeft de commentaren op het bericht weer.
Denk hier vooral aan single.php
comments.php
Dit gaat natuurlijk ook in een loop
<?php wp_list_comments(); ?> geeft de commentaren op het bericht weer
<?php comment_form(); ?> toont het formulier om commentaar toe te voegen
<?php the_author(); ?> de maker van het commentaar
Widgets
 
<?php
function themaTheo_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Eerste Sidebar', 'themaTheo' ),
        'id' => 'sidebar-1',
        'description' => __( 'Widgets in dit gebied komen op alle berichten en pagina's.', 'themaTheo' ),
        'before_title' => '<h1>',
        'after_title' => '</h1>',
    ) );
register_sidebar( array(
        'name' => __( ‘volgende sidebar', 'themaTheo' ),
        'id' => ‘sidebar-twee',
        'description' => __( 'Widgets in dit gebied klomen in een tweede widget-gebied.', 'themaTheo' ),
        'before_title' => '<h1>',
        'after_title' => '</h1>',
    ) );

}
add_action( 'widgets_init', 'themaTheo_widgets_init' );
?>
Hierboven worden 2 widget-gebieden gedefinieerd (geregistreerd).
Dit moet in functions.php.
<?php dynamic_sidebar( 'sidebar-1' ); ?> In het document zal deze declaratie de widgets van widgetgebied 'Eerste Sidebar' neerzetten.

ˆ