Het _s thema

WordPress kent frameworks of starter templates. Een framework / starter template is de kale structuur van een WordPress website maar zonder opmaak. Er is geen sprake van vormgeving en het is niet bedoeld om zo te gebruiken. Het is overigens wel handig om te weten dat het bestaat want het kan je helpen om sneller te werken.

Op de site van WordPress zeggen ze zelf het volgende:

  1. A “drop-in” code library that is used to facilitate development of a Theme
  2. A stand-alone base/starter Theme that is intended either to be forked into another Theme
  3. A Parent Theme template

Bij 1 gaat het echt om een set scripts. Dit draait niet standalone en moet via je functions.php file ingeladen worden.

Een base/starter Thema (nummer 2) is een thema wat je zo zou kunnen gebruiken maar wat over het algemeen goed gebruikt kan worden om een child thema van te maken. Qua opmaak zijn deze thema’s onvoldoende ontwikkeld om zo te gebruiken voor klanten. Een voorbeeld hiervan  is Genesis; http://my.studiopress.com/themes/genesis/ (EUR 59).

Genesis is een WordPress framework

Genesis is een WordPress framework

wat een ontwerp heeft maar waar je zeer waarschijnlijk zelf het een en ander aan wilt stijlen voordat je het een klant aanbiedt.

Een ander voorbeeld is  _s (Underscores); http://underscores.me/ wat compleet geen opmaak heeft.

underscores

Underscores website

Nummer 3 (een parent theme template) is een thema zoals de meesten het kennen: kant-en-klaar met een ontwerp. Je kunt er een child thema van maken maar dit hoeft niet aangezien het al een ontwerp heeft.

Underscores

Ik wil in deze post met Underscores aan de slag gaan. Overigens: Underscores is geen parent thema! Je hoeft hier geen child van te maken. Het is gewoon je bouwwerk waarop je verder gaat. Het ideale aan zo’n framework is dat alle linkjes en de basis widgets werken.

De basis “vormgeving” van _s ziet er als volgt uit:

Het Underscores thema

De basis vormgeving van het Underscores thema is… nada.

Na enig stijlwerk is het thema echter helemaal naar je eigen hand te zetten:

 

Anatomie van een wordpress website

Yoast.com heeft een duidelijke afbeelding waarop aangegeven staat welke elementen op een WordPress pagina staan en hoe the_loop() is opgebouwd. the_loop() is het gedeelte waar het om draait: je content, je posts. Inzicht in de structuur van WordPress zal je beter inzicht geven in welke onderdelen je precies moet stylen.

Anatomie van een WordPress site

Dit is niet de hele afbeelding van de anatomie van een WordPress site. Ga naar Yoast.com om alles te zien.

Met het startertheme _s (Underscores) hoef je je niet meer (heel) erg druk te maken over de losse bestanden. Links naar pages en posts etc werken allemaal en dat is een enorm voordeel vergeleken met alles helemaal opnieuw zelf bouwen. Je download de bestanden en je site werkt en is responsive! Dat wil zeggen… het responsive stuk bestaat uit het feit dat je menu verandert in een toggle menu en dat je afbeeldingen meeschalen.

Wat moet je dan wel doen? CSS, CSS en nog eens CSS. Underscores wordt wel bijgehouden maar zal niet automatisch updaten. Een child thema maken heeft weinig nut en zal tot een foutmelding leiden in WordPress. Kortom: je kunt meteen gaan werken in de aangeleverde bestanden.

 

Let’s get started

Wanneer je het Underscores thema download en installeert dan zal je website werken. Alle posts en pages worden netjes getoond. Afbeeldingen zitten er wel bij maar niet de featured images. Maar dat is dan ook alles. Er is nul komma nul opmaak en je tekst staat gewoon onder elkaar (in Times) en de linkjes zijn blauw.

Ik wil het ontwerp maken van deze website. Dit is een horizontale lay-out waarbij de linkerkolom en de navigatie fixed zijn. De rechterkolom met the_loop() mag wel scrollen.

Het beoogde ontwerp

Het beoogde ontwerp

Wanneer het scherm smaller wordt is het de bedoeling dat de linkerkolom verdwijnt en dat bij een smal scherm het menu verandert in een hamburger menu.

Dan zal ik eerst aan de slag moeten met de structuur van de pagina. Ondanks dat index.php pas als laatste wordt aangeroepen in de theme structure ga ik deze wel als eerste maken. Het is immers de fail-safe van het thema en WordPress zal mijn thema niet willen laden zonder index.php bestand.

Wanneer ik index.php open dan zie ik dat er op regel 15 header.php wordt aangeroepen en onderaan op regels 54 en 55 worden sidebar.php en footer.php aangeroepen.

Header.php wordt aangeroepen.

Header.php wordt aangeroepen in index.php

 

Aanroep van de footer en sidebar.

Sidebar.php en footer.php worden aangeroepen in index.php

Voor de volledigheid open ik dan ook header.php.

In header.php wordt wp_head geopend.

In header.php wordt wp_head geopend.

Dan blijkt dat in header.php zeer veel bepaald wordt. Sowieso de aanroep naar stylesheet maar tevens:

  • opent de body (deze sluit niet in header.php)
  • opent div#page, wat zoiets is als de container die je tot nu toe steeds maakte.body-en-page
  • wordt er een header aangemaakt met daarin
  • je logo / sitenaam
  • je navigatiesite-header
  • opent het contentvlak (deze sluit niet in header.php)nav

 
 
 
 

De functies get_header() en wp_head,  het bestand header.php en de tags <head> en <header> zijn alle vijf iets anders maar dragen allen iets van head of header in de naam. Dit kan verwarrend zijn.

  • get_header(); = het bestand “header.php” aan. Meestal vind je deze functie in “index.php”.
  • header.php = een deelbestand. Hierin staat de opening van je PHP pagina. Meestal is dit sowieso tot en met de openingstag van de <body>. In _s wordt ook de <header> en de <nav> hierin meteen geplaatst.
  • wp_head(); = creëert de title tag en laadt een aantal zaken zoals stylesheets en javascripts. Deze aanroep vindt plaats in header.php.
  • <head> = De head tag.
  • <header> = Een stuk van je site waarin je site-branding plaats vindt. Dit zijn je logo, je naam en de omschrijving van je blog.

Omdat ik meer een horizontale lay-out wil maken wil ik de navigatie en de <header> niet bovenin de pagina hebben. Ik zal het een en ander moeten verplaatsen van header.php naar index.php.

Ik wil links de sidebar, in het midden het menu en rechts index met daarin <header> en the_loop en <footer>.

Ik verhuis sidebar.php naar header.php. Het menu haal ik uit header.php en plaats . En de header plaats ik in content. In mijn stylesheet ga ik de sidebar en het menu alvast een kleur geven zodat ik ze makkelijker kan herkennen.De volgorde van mijn elementen ziet er dan al anders uit:

  1. body
  2. div#page
  3. sidebar (vanuit footer.php verhuisd naar header.php)
  4. <nav> (uit de header tag gehaald)
  5. div#content met daarin
  6. <header>

Ik geef in mijn Dashboard aan dat ik mijn eigen menu als Primary Menu wil gebruiken:

In het dashboard geef ik aan welk menu mijn primary menu moet zijn.

In het dashboard geef ik aan welk menu mijn primary menu moet zijn.

Nu ga ik mijn elementen naast elkaar zetten. Ik wil dat aside en menu 20% breed zijn zodat de resterende 60% automatisch voor content is.
 

De pagina is beeldvullend

De pagina is beeldvullend


 

Detective spelen

De sidebar wil niet breed genoeg worden. Wanneer ik aside aanpas in mijn stylesheet gebeurt er niets. Door in de HTML code van de browser te kijken (hetzij via de rechter muisknop of via Inspect Element kom ik erachter dat om <aside> een div#secondary staat. Wanneer ik deze 20% breed maakt wordt mijn sidebar inderdaad pas breed genoeg.

secondaryLet op: ik heb een secondary sidebar. Het kan zijn dat je een andere class of id moet aanspreken. Dit is weer het spelletje “Detective spelen”.

 

Het menu

Nu ik mijn elementen goed heb staan kan ik mijn menu stylen. Dit is best even wat werk want in mijn bestand heb ik het volgende staan voor de navigatie:

 

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<button class=”menu-toggle” aria-controls=”primary-menu” aria-expanded=”false”><?php esc_html_e( ‘Primary Menu’, ‘_misspeacock’ ); ?></button>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
</nav>

Maar de output is vele malen meer. Dat kan even schrikken zijn maar kijk er even nuchter naar en je zult de patronen wel herkennen.

De volledige HTML van de navigatie.

De volledige HTML van de navigatie is veel.

Pak het dan weer als volgt aan:

  1. Vergeet de classes en id’s met de nummers.
  2. Stijl de eerste class zonder nummer die je tegen komt.
  3. Stijl eerst de classes en wanneer dat niets uit haalt dan de id’s.
  4. Wanneer dat niet werkt stijl dan een element erboven of probeer een andere class.

Ik heb zelf via @font-face een font geladen en ik heb de boel verticaal gecentreerd (lang leve flexbox CSS!).

Het menu na styling

Het menu na styling

Het submenu

Het submenu

Het menu heeft ook een submenu. Ik wil graag dat het als een fly-out naast het reguliere menu-item komt te staan. Je moet voor een submenu wel het een en ander stijlen want anders plaatst WordPress de submenu items direct onder je menu items. Dit wil ik niet.

Ik heb middels een absolute positionering aangegeven dat het submenu naast het main menu moet komen te staan. De witruimte tussen het menu en het submenu is gewoon een border-left.

De sidebar (links)

Ik heb voor mijn sidebar links een plugin gebruikt om de meest populaire posts weer te geven; WordPress Popular Posts. Op het moment dat ik deze reader schrijf ben ik nog niet klaar met het stijlen van deze plugin, er zijn namelijk veel settings mogelijk.

De widget Popular Posts kan een overzicht geven van de meest populaire berichten op je blog. Voor een tutorialsite zeer handig!

De widget Popular Posts kan een overzicht geven van de meest populaire berichten op je blog. Voor een tutorialsite zeer handig!

sidebar-right.php maken

Ik had de header en een sidebar in de main content area geplaatst met daaronder the_loop. Echter, het logo en een stukje tekst wat ik daar nog onder wil gaan zetten staan in header.php.

Ik heb zelf binnen de class site-branding mijn logo geplaatst en heb geen gebruik gemaakt van de optie van WordPress om dit voor mij te doen. Ik vind dat wanneer ik dit zelf doe, ik meer controle heb over de afbeelding. Tevens heb ik een extra sidebar toegevoegd. Op regel 40 zie je staan: <?php get_sidebar( ‘right’); ?> Deze code verwijst naar een php bestand genaamd sidebar-right.php.

Het stukje code wat bij site branding hoort

Het stukje code wat bij site branding hoort

In sidebar-right.php staat alleen een section met een aanroep naar een dynamic_sidebar(‘right-sidebar’).

De code van sidebar-right.

De code van sidebar-right.

Echter, wanneer ik in mijn dashboard naar de widgets ga dan zie ik dat ik slechts 1 sidebar tot mijn beschikking heb. Niet twee!

Ik heb slechts 1 sidebar standaard tot mijn beschikking.

Ik heb slechts 1 sidebar standaard tot mijn beschikking.

Om dit op te lossen moet ik het bestand functions.php openen. Hierin kan ik zelf een sidebar bijmaken. In dit bestand moet ik de volgende code opnemen:

register_sidebar (array(
‘name’ => ‘Right Sidebar’,
‘id’ => ‘right-sidebar’,
‘description’ => ‘Right Sidebar.’,
‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
));

Ik heb dit helemaal onderaan de pagina geplaatst. Je kunt zoveel sidebars opnemen als je wilt. Verander dan wel even de naam. In dit voorbeeld heet de sidebar Right Sidebar (en right-sidebar).

Wanneer ik nu in mijn dashboard bij de widgets kijk dan zie ik dat ik inderdaad twee sidebars heb.

Ik heb nu twee sidebars tot mijn beschikking.

Ik heb nu twee sidebars tot mijn beschikking.

Een tekst widget waarmee ik kan aangeven op welke pagina ik welke tekst wil plaatsen.Nu kan ik in Sidebar Right een widget opnemen. Ik zal een text widget gebruiken. Ik geef hierin aan dat de tekst die ik intyp alleen zichtbaar mag zijn op de home page. Zo kan ik per pagina (indien ik wil) een andere tekst laten zien.

De homepage met de tweede sidebar toegevoegd.

De homepage met de tweede sidebar toegevoegd.

Het stijlen van the_loop()

Dit komt in een andere tutorial aan de orde.

Zie https://css-tricks.com/video-screencasts/91-the-wordpress-loop/ voor een zeer duidelijke video tutorial over werken met the_loop().

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.