Tip: doorzoek de pagina met Control-F (Command-F op de Mac)
Wordpress is het grootste en bekendste gratis CMS (Content Management Systeem). Je kunt met een CMS een site maken en onderhouden zonder enige kennis van HTML/CSS. Het is overigens wel een voordeel als je die kennis wél hebt, omdat je dan makkelijker kan customizen, sneller kan invoeren en meer kan doen. Andere bekende gratis CMS'en zijn Drupal, Joomla, Magento en Typo3.
Van oorsprong is Wordpress bedoeld voor weblogs (blogs) maar het is inmiddels ook ideaal voor allerlei andere websites, tot en met winkels aan toe. Heel veel grote bekende websites zijn gemaakt een CMS-gedeelte in Wordpress, onder andere omdat de klant dan de site makkelijk zelf kan onderhouden.
Dankzij ontelbare plugins kun je veel functies toevoegen zoals sliders, galleries, formulieren, polls, winkelmodules, social sharing en SEO. Voor de vormgeving zijn er ontelbare thema's verkrijgbaar, waardoor je makkelijk van design kan wisselen en een geschikt thema kan vinden. De thema's kun je zelf aanpassen, zelfs zó dat je met hetzelfde thema totaal verschillende websites kan maken. Maar niet alle thema's en plugins zijn van superhoge kwaliteit.
Er zit een zoek-functie in elke Wordpress-site. Dat is in een gewone HTML-site lastig om te maken. Je kan users aanmaken en die specifieke rollen geven, zoals author (alleen artikelen invoeren) editor (artikelen wijzigen/publiceren) en admin (vormgeving veranderen, users aanmaken etc) zodat het veilig en foolproof blijft.
Er is een WYSIWYG-editor, zodat je – net als in Word – tekst kan opmaken. Je kan daarbij naar keus ook direct in HTML-code werken. Er zit versiebeheer op, dus je kan terug naar vorige versies. Je kan plaatjes (en video en geluid) uploaden en inplakken. Bij plaatjes genereert Wordpress automatisch de juiste resoluties voor thumbnail / medium / groot, en ook het origineel wordt bewaard (tenzij er een plugin aanstaat die de originelen verwijdert om ruimte te besparen, zoals bij de ROCweb-multisite).
Bij elk bericht kunnen bezoekers een reactie plaatsen, daar heb je niet eens een plugin voor nodig. In de Instellingen kun je dit afstellen naar wens. Als je een forum wil maken kan dat ook, met plugins.
Tenslotte kun je op veel webservers Wordpress met een simpele druk-op-de-knop installeren.
Je kan inloggen via de link in je mail, of tik /wp-admin achter de url van je site. Dan kom je in de backend waar je de site kan vullen of wijzigen. Bekijk het Dashboard. Vul bij Weergave > Aanpassen > Website titel en ondertitel in. Loop door de Instellingen, en vul daar later ook Lezen > Startpagina in: dat is bijvoorbeeld je laatste blog, of juist je Home of Over mij-pagina.
Bericht gebruik je voor blogposts (artikelen of berichten), en Pagina gebruik je voor statische pagina's zoals Home (of Over mij), Contact, Portfolio. Je kan bestaande blogs (uit platforms zoals Blogger) importeren via Extra > import. Als je al een website had kun je de inhoud daarvan per pagina handmatig inplakken, vooral als die pagina's al in HTML gestructureerd zijn.
Sample content kun je hier downloaden en via het menu Extra importeren.
In Berichten kun je ook direct HTML-code en inline CSS gebruiken. In dit artikel: 10-html-tags-you-must-know-to-blog meer uitleg daarover. Alhoewel er in sommige Wordpress-sites ook HTML en CSS wordt weggefilterd.
In het hoofdmenu zie je bij Berichten ook Categorie en Tag. Je kunt die daar aanmaken en beheren, en per Bericht kun je ze toevoegen. Je kunt er ook menu-items van maken, via Weergave > Menu's. Tip: ga meteen vanaf het begin categorieën en/of tags gebruiken. Tags kun je later eventueel converteren naar een categorie.
Hier kun je menu-items aanmaken en ordenen door ze te verslepen. Submenu's kun je maken door ze OP een ander item te slepen. Het gehele menu kun je bewaren. Je kan meerdere menu's maken en tegelijk op je site gebruiken.
Via de tab Locaties beheren kun je nu de menu's plaatsen op specifieke pagina's, of op delen van pagina's, zoals in de sidebar of de footer.
Hier kun je thema's kiezen en aanpassen. Wat je hier allemaal kunt doen is afhankelijk van het gekozen thema. Je kan eindeloos shoppen naar thema's en ze uitproberen op je site. Veel thema's maken gebruik van specifieke plugins. Die moet je dan ook installeren, maar dat wijst zich dan vanzelf. Templates kun je gratis of betaald vinden, bijvoorbeeld op themeforest. Twee tips daar: Avada en X, beide betaald maar uiterst krachtig en aanpasbaar.
Leerlingen in de Wordpress-Multisite (www.rocweb.nl of www.ajsite.nl) kunnen kiezen uit een aantal thema's. Via Weergave > Aanpassen kun je het ontwerp op veel manieren makkelijk aanpassen.
Oefening: pas de header aan, zet er een mooie foto in, en/of je logo.
Verder kun je ook nog bij Weergave > Aanpassen > Custom CSS nog veel meer aan het design veranderen, met wat kennis van CSS.
Tip 1: bekijk de site in Chrome (of Safari met Voorkeuren > Geavanceerd > Toon Ontwikkel-menu aan). Rechstklik op een element > Inspecteer element. Klik daar op de tab Stijlen en je kunt de css van dat element direct zien, én editen. Dat is dan nog offline, maar als het goed werkt, kun je diezelfde css toevoegen aan de Custom css in Wordpress.
CSS oefening: maak bij Custom CSS een stijl (class) voor Kleinkapitalen, sc:
.sc {font-size:85%; text-transform:uppercase;letter-spacing:2px}
En in de HTML van een bericht kun je dan een span class=sc gebruiken:
Hier komt <span class=sc> een tekst in kleinkapitaal! </span>
Zo kan je ook afbreken uitzetten (dat staat standaard aan) voor grote schermen. Voeg dan deze CSS toe:
@media only screen and (min-width:640px) {
p {
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}
}
Als je een eigen Wordpress-site hebt (niet de ROCweb-multisite of de gratis hosting bij Wordpress zelf) heb je nog meer mogelijkheden om het thema te bewerken. Ga naar Weergave > Bewerker. In de rechterbalk zie je dan alle template-files, in PHP en CSS. In de PHP-files staat alle HTML, dus met kennis van HTML en CSS kun je de hele site inclusief het design hier volledig naar wens aanpassen. In principe kan je elk ontwerp dan voor elkaar krijgen. Je kunt de code knippen en plakken in je favoriete editor, bewerken en weer terugplakken, of je kunt via FTP deze bestanden openen en bewerken.
Oefening bij een eigen Wordpress site: Favicon in Wordpress via Bewerker
<link rel="shortcut icon" href="favicon.png" type="image/png"> <link rel="apple-touch-icon" href="favicon.png">
Bij Widgets (Weergave > Widgets) zie je een handige editor om pagina-elementen (widgets) te plaatsen in verschillende delen van pagina's. Stel: je wil een Zoek-veld op de homepage en in alle sidebars. Sleep de Zoek-widget naar de Sidebar for Homepage en/of naar Common Sidebar, of naar welke pagina of sidebar je maar wil. Is het niet goed, dan sleep je het gewoon weer terug.
Video's van Youtube / Vimeo, of muziek van Soundcloud, kun je gewoon inplakken met de url, in de Tekst/HTML-modus.
Met plugins kun je oneindig veel functies toevoegen zoals sliders, galleries, formulieren, polls, winkelmodules, social sharing en SEO. Er wordt vaak gebruikt gemaakt van shortcodes: een korte code die je kan inplakken in je pagina of bericht om de plugin aan te roepen.
Oefening 1: Kies Plugin >Contact Form 7. Bekijk de opties, maak je eigen contactformulier en plaats de shortcode in een pagina. Normaliter heb je een statische Pagina gemaakt en die Contact of zoiets genoemd. Zo niet, maak die dan alsnog. Zet Reacties op deze pagina uit via Scherminstellingen (rechts bovenaan) > Reacties aanvinken > en dan op de pagina onderaan Reacties toestaan UITvinken.
Oefening 2: Activeer de Favicon-plugin en stel die in. Check ook je mobiele web app icon op je mobiel, die je ziet als je je website toevoegt aan het homescreen.
Plugin Oefening 3: Probeer OSD Social Media Sharing. Zet het aan en stel het in. Op je Contactpagina kan je die weer beter uitzetten.
Plugin Oefening 4: Probeer SEO Yoast, lees de informatie door. Deze plugin helpt je om je Berichten Google-vriendelijk te maken. SEO (Search Engine Optimization) is extreem belangrijk voor je website. Je wil namelijk gevonden worden, en hoog in de zoekresultaten komen. Bij het schrijven van elk bericht krijgt je nu gerichte tips.
Oefening 5: Galerie. Probeer eerst de standaard Wordpress galerie uit, zonder plugin dus. In een Bericht of Pagina klik je Media toevoegen > en dan galerie. Daarna kun je de Easy Fancybox plugin aanzetten en afstellen. Dat is een soort Lightbox.
Je kan ook uitgebreide plugins voor galeries gebruiken zoals de NextGEN gallery, die heeft enorm veel opties, o.a een ingebouwde Lightbox.
Oefening 6: Probeer een slider op de homepage van je website te zetten.
Op de sites van ROCweb.nl staan een aantal plugins aan die je niet kan uitzetten en die je ook niet tussen je plugins ziet staan: Delete Original Image, HTML Editor Syntax Highlighter, Simple Custom CSS, en WP Statistics (de naam zegt het al bij deze allemaal). Verder ook TinyMCE die meer knoppen in de WYSIWYG editor geeft. En Remove XMLRPC Pingback Ping voor verbeterde veiligheid.
www.wordpress.org
easywpguide.com – Introductie
simplybusiness.co.uk – Wordpress voor bedrijven
Udemy.com – complete cursus (supergoed en goedkoop, Engelstalig)
Wordpress Themes, gratis en betaald: