Voor een ieder die graag een geheel eigen front-end wilt schrijven voor zijn of haar Wordpress website. Zelf heb ik een lange tijd Wordpress afgezworen maar ik begin steeds meer de voordelen te zien. Dit komt mede door het fijne ontwikkelen van Sage.
Sage
Sage is een Wordpress starter theme met een moderne ontwikkel gedachtegang. Op het moment van schrijven is de productie versie op 9.0.10.
Link naar Roots Sage: https://roots.io/sage/
Voordelen van Sage
Moderne ontwikkelgedachte
Template engine (Laravel Blade)
Uitleg wat wij gaan ontwikkelen
Wij gaan gezamenlijk een bedrijfs website maken in Wordpress. Deze website zal een thema bevatten die ontwikkeld is met Sage en wij gebruiken het front-end framework Bootstrap in dit voorbeeld.
Benodigdheden
Wordpress geïnstalleerd (Wanneer dit niet duidelijk is zal ik hier een tutorial over schrijven, graag even reageren in de reacties!)
Composer
Node.js
NPM
IDE of iets waarmee je code schrijft
Laten we beginnen
Als het goed is dan is er een Wordpress installatie. Wat er als eerste moet gebeuren om de basis van Sage te installeren is dat onze terminal in het juiste mapje staat. Dit doen wij door te CD'en (change directory) naar jouw Wordpress installatie. In mijn geval is dit dan:
cd Sites/mitchelsburgers
Hierna moeten wij ons navigeren naar wp-content/themes/
cd wp-content/themes
Nu dat wij in de juiste folder zitten met alle wordpress thema's (hier staan er voor mij al een drietal in) gaan wij Sage installeren. Dit doen wij door de volgende code uit te voeren in de terminal.
composer create-project roots/sage jouw-thema-naam
Wat ik dus heb getypt is dit:
composer create-project roots/sage mitchelsburgers
Hier worden een aantal vragen gesteld, wat ik heb aangeklikt of ingevuld staat hier beneden aangegeven.
> Theme Name [Sage Starter Theme]: Mitchel's Burgers
> Theme URI [https://roots.io/sage/]: https://devnl.nl
> Theme Description [Sage is a WordPress starter theme.]: Website thema voor Mitchel's Burgers
> Theme Version [9.0.10]: 1.0.0
> Theme Author [Roots]: Stanley
> Theme Author URI [https://roots.io/]: https://devnl.nl
> Local development URL of WP site [http://mitchelsburgers.test]: http:/mitchelsburgers.test
> Path to theme directory (e.g., /wp-content/themes/mitchelsburgers) [/app/themes/mitchelsburgers]: /wp-content/themes/mitchelsburgers
> Which framework would you like to load? [Bootstrap]: 1
> Are you sure you want to overwrite the following files? yes
> Send anonymous usage data? no
Het is hierbij belangrijk dat je de juiste local development url kiest. Dit is de link waarop je Wordpress installatie staat. Ook moet je de juiste naam kiezen bij "Path to theme directory" in mijn geval was dit wp-content/themes/mitchelsburgers.
Nu dat dit allemaal geinstalleerd is kunnen wij onszelf navigeren in de folder mitchelsburgers (of hoe het thema genoemd is).
cd mitchelsburgers
hierin gaan wij npm installeren dit doen wij doormiddel van het commando:
npm install
De installatie kan een moment innemen.
Op dit moment kun je mooi je thema activeren binnen je Wordpress installatie, dit kan bij je wp-admin -> weergave -> thema's
In je terminal kun je nu het commando npm run start uitvoeren dit laat je project "leven" het compileert alles wat Sage voor jou gemaakt heeft. Ook opent dit als het goed is http://localhost:3000/ en hier is de basis van je website te zien.
Voor de volgende stap openen wij het gehele thema in onze IDE, in mijn geval is dat IntelliJ. Dus wat er geopend moet worden is: wp-content/themes/mitchelsburgers
In de folder 'resources' zullen wij het meeste werk doen. Als eerste openen wij resources/style.css hier is alle informatie aan te passen voor je thema. Verder kunnen wij dit sluiten als dit naar wens is (dit was meer een good to know).
In de folder styles wordt alle JavaScript, CSS, afbeeldingen gecompileerd. Hier gaan wij niets mee doen maar kun je wel zelf mee bezig natuurlijk.
In de folder views staan een aantal .blade.php files. Ze hebben allemaal een eigen werking maar wij gaan op dit moment de basis aanpakken.
Als eerste gaan wij het bestand openen die in views/layouts staat genaamt app.blade.php
Dit vervang je door:
<!doctype html>
<html {!! get_language_attributes() !!}>
@include('partials.head')
<body @php body_class() @endphp>
@php do_action('get_header') @endphp
<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Mitchel's Burgers</p>
<nav class="my-2 my-md-0 me-md-3">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Voorbeeld pagina</a></li>
</ul>
</nav>
</header>
<main class="container">
@yield('content')
</main>
@php do_action('get_footer') @endphp
@php wp_footer() @endphp
</body>
</html>
Als het mee zit dan ziet je pagina er zo uit nu:
zoals te zien ga ik niet extreem in op de styling, dit is aan jullie zelf!
Dan gaan wij nu een menu aanmaken en dit in het Wordpress thema zetten. Dit kan Wordpress namelijk ook voor je regelen.
In je wp-admin ga je naar weergave -> menu's en geef je het huidige menu een naam. Zelf ga ik altijd voor "standaard" als naam.
Nadat je op aanmaken hebt geklikt rechts onderin krijg je een paar extra instellingen, het is belangrijk dat je dit menu een primary navigation maakt. (vergeet dit niet op te slaan).
@if (has_nav_menu('primary_navigation'))
{!!
wp_nav_menu([
'theme_location' => 'primary_navigation',
'menu_class' => 'uk-navbar-nav'
])
!!}
@endif
Dit is het menu dat gebruikt gaat worden. Dit moet geplakt worden tussen de <nav></nav> tag.
<nav class="my-2 my-md-0 me-md-3">
@if (has_nav_menu('primary_navigation'))
{!!
wp_nav_menu([
'theme_location' => 'primary_navigation',
'menu_class' => 'uk-navbar-nav'
])
!!}
@endif
</nav>
Nu gaan wij 2 pagina's aanmaken. Namelijk de home pagina en een over ons.
In de views folder maken wij 2 files aan:
template-home.blade.php & template-over-ons.blade.php
We beginnen bij de home pagina. Open template-home.blade.php en plak de volgende code er in.
{{--
Template Name: Home Template
--}}
@extends('layouts.app')
@section('content')
<h1>Mitchel de burger flipper</h1>
<img src="https://www.devnl.nl/assets/avatars/nc0EtLmO6BpGblTh.png" alt="Mitchel de burger flipper">
@endsection
wat vooral erg belangrijk is om in wordpress je pagina template te kunnen selecteren is dit stukje boven in je pagina:
{{--
Template Name: Home Template
--}}
Hiermee geef je een naam aan je template.
Nu voor de over ons hetzelfde alleen gebruiken we deze code:
{{--
Template Name: Over Ons Template
--}}
@extends('layouts.app')
@section('content')
<h1>Wat is er meer te vertellen? ik bak geweldige burgers</h1>
<h2>Mijn vaste klanten zijn Jasper, Pascal & Stanley</h2>
<h3>Door mij worden ze wel modder vet ;)</h3>
@endsection
De volgende stap gaat in wordpress zijn we openen pagina's in de wp-admin. Alle pagina's die onbelangrijk zijn kunnen verwijderd worden, bij een schone installatie zijn dat alle pagina's. Nu maken wij een nieuwe pagina aan genaamd Home en wij selecteren bij pagina-attributen een Template, dit template hebben wij net gemaakt (template-home.blade.php).
Boven in de pagina drukken we op publiceren en hiermee is de pagina aangemaakt. Dit doen we hetzelfde voor Over Ons maar dan door het andere template te selecteren voor Over Ons.
De homepagina die zonet gemaakt is moet nog een homepagina worden in Wordpress, dit kunnen we doen bij instellingen -> lezen en dan een statische pagina te selecteren.
Vergeet dit niet op te slaan en dan gaan wij snel verder om het menu compleet te maken voor onze nieuwe pagina's.
Bij weergave -> menu's gaan wij onze pagina's erin zetten maar eerst verwijderen wij alle pagina's die in het menu staan nog.
Aan de linker kant staan als het goed is je vers aangemaakte pagina's (wellicht onder het tabje Alles Tonen).
We selecteren alle opties (als het goed is 2 pagina's) en klikken op aan menu toevoegen.
Aan de rechterkant kun je jouw menu opslaan en hierbij zijn wij ook toegekomen aan het aller laatste moment van deze tutorial: het eindproduct.
In mijn geval gaan we naar mitchelsburgers.test:
Hopelijk komen er vanaf nu steeds wat meer kwaliteit Wordpress producten, dit aangezien ik de slecht of de drag-and-drop thema's zat begin te raken 🙂
Bij vragen of onduidelijkheden zie ik je reactie graag tegemoet.
