WordPress opdrachten

Zet drie vensters open:

  1. ROCweb.nl/jenaam
  2. ROCweb.nl/jenaam/admin
    (dus NIET WORDPRESS.COM)
  3. En deze opdrachten.

Check of je alle opdrachten hieronder gedaan hebt. Lees ook de info op rocweb.nl een paar keer door. Kom je ergens niet uit? Google dan, of vraag elkaar om hulp!


Les 1

  • Verander je wachtwoord, via de mail die je hebt ontvangen, of via Dashboard > Gebruikers.
  • Verander Titel en Ondertitel bij Instellingen.
  • Maak Pagina’s zoals Over mij, Contact en Portfolio.
  • Maak ook een lege pagina “Blog” of iets dergelijks, waar later je Berichten in komen.
  • Voeg een Bericht toe, en meteen ook Categorieën. Dat zijn de onderwerpen waar je Berichten over zou willen schrijven.
  • Plak video’s en/of muziek in, bijvoorbeeld van Youtube of Soundcloud, door de url in te plakken. Je kan zelfs een url van een WordPress-artikel inplakken.
  • Stel Instellingen > Lezen in, kies daar welke pagina je homepage is, en welke pagina je Berichten toont (meestal de pagina “Blog”).
  • Maak een menu, zie deze info, met al je pagina’s waaronder de Blog.

Les 2: Gallery en plaatjes

  • Lees de info op rocweb.nl/gallery.
  • Maak op de pagina “Portfolio” een gallery met jouw beeld, via de knop “Media toevoegen” bovenaan, en dan “Galerij aanmaken“. Met minstens 9 eigen plaatjes.
  • Kies bij de galerij Link naar mediabestand. Dit moet je bij alle plaatjes en galeries altijd doen, want dit staat standaard niet zo!
  • Probeer alle opties uit, zoals bijschriften, alt-tags etc (de Alt-tekst is de tekst bij de popup, dus kopieer het bijschrift ook naar de Alt)
  • Kies ook een foto bij Uitgelichte Afbeelding (featured image). In de meeste thema’s komt dit plaatje dan groot bovenaan te staan.
  • Activeer de plugin Easy Fancybox en stel die af naar wens via de opties.
  • Maak Custom CSS voor gallery-plaatjes, via de plugin Simple Custom CSS. Zie rocweb.nl/gallery.
  • Kijk ook wat er gebeurt als je tekst en plaatjes van een andere website inplakt. Is erg handig!

Les 3: Formulieren, menu, favicon

  • Plaats in je Contact-pagina een Contactformulier via Plugin > Contact Form 7. Bewerk je formulier en plaats de shortcode in de pagina.
  • Zet Reacties op je pagina’s en blogs UIT of juist AAN (Scherminstellingen  > Reacties aanvinken. Onderaan zie je extra velden over Reacties. Hier kan je per pagina dan Reacties toestaan UIT- of AANvinken).
  • Stel bij Instellingen > Reacties alles in zoals jij wil
  • Maak in Photoshop een favicon.png van 250 x 250 pixels (Save fo web met ⌘-Alt-Shift-S, kies preset PNG 24). Sleep die in de Media Library. Zet je favicon aan via de Thema-opties (Weergave > Customizer > Site identiteit), of activeer de plugin Real Favicon. Check ook je touch icon op je mobiel (via Voeg toe aan startscherm).
  • Bewerk je menu en voeg items toe, zie deze info. Maak ook een submenu, noem die “Links” en voeg daar links naar al je andere websites toe. Hier meer info. Zet er ook een link bij naar je CV (dat is bijvoorbeeld een pdf in de Media, of een pagina).
  • Maak van je Categoriën een menu-item of een Widget.

 Les 4: Social media, widgets, Maps

  • Pas het ontwerp van je site aan, bijvoorbeeld het header-plaatje via Weergave > Customizer
  • Probeer een plugin voor Social Media Buttons zoals Sassy Social Sharing. Doorloop alle opties. Er is een verschil tussen Sharing- en Follow-buttons.
  • Bekijk Widgets, wijzig naar wens. Voeg bijvoorbeeld een Zoek-veld toe, of sleep juist dingen weg die je niet hoeft.
  • Maak ook een HTML-widget, plaats die ergens in je site, en vul die met eigen code. Bijvoorbeeld zo, en pas het aan:
    <h3>Dit ben ik:</h3>
    <a href="http://gameschool.nl/jenaam/code">
    <img src="url-van-je-plaatje-staat-bij-Media" width=100%>
    </a>
  • Zet Google Maps in een pagina, door een plugin te gebruiken. In de meeste plugins voor Google Maps moet je de kaart opslaan met daarbij ook nog een lokatie. Een eenvoudige plugin is Google Maps Easy. Je kan soms ook voor een thema kiezen, dus voor een andere visuele stijl. Je hebt bij andere plugins soms ook een API nodig, die je kan verkrijgen met je gmail-account.

Les 5: SEO

  • Lees dit stukje over Search Engine Optimization.
  • Plaats minstens 3 Berichten. Met eigen teksten. Je mag teksten gebruiken die je geschreven hebt bij andere lessen, bijvoorbeeld Nederlands.
  • Maak ook Categorieën en vul per bericht één of meerdere Categorieën in.
  • Activeer de plugin WordPress SEO by Yoast.
  • Onderaan, bij SEO, geef je een Focustrefwoord op, waarop je gevonden wil worden.
  • Bewerk de 3 berichten totdat ALLE punten op groen staan, zie de SEO- info. De “leesbaarheid” hoef je allemaal niet te doen.
  • Plaats ergens de screenshots van je onderzoek naar varianten van je trefwoorden (trends.google.com)
  • Gebruik in elk Bericht ook de Lees Meer tag (1-na-laatste knop in je knoppenbalk)

Les 6: CSS

  • Lees het stukje over Custom CSS
  • Kijk of er in jouw thema Extra CSS staat, bij Weergave > Customizer > Extra CSS.  Of anders bij Weergave > Custom CSS. Zo niet, activeer de plugin Simple Custom CSS.
  • Maak ergens in een pagina 2 kolommen, met Column Shortcode (de knop naast Add Media). Via deze knop kies je een kolom, en dan krijg je twee tags (start-kolom en eind-kolom). Zet de inhoud van de kolom tussen deze twee tags.Het kan ook zonder plugin, gewoon met HTML/CSS:
    Klik bij Visueel / Tekst op Tekst (dat betekent Code) en tik:
  • <div class="kolom"> Inhoud van Kolom 1 of 2 </div>
    
  • En in de Custom CSS plak je dit:
  • .kolom {float:left; width:45%; margin-right:5%;}

    Na de kolommen tik je in de tekst/code dit om de float weer op te heffen:

    <br style="clear:both">
  • Verander je design met Custom CSS. In Chrome of Safari: Rechtsklik > Inspecteer element. In dit Webinfovenster kun je de HTML en de CSS wijzigen. Is de wijziging goed, dan plak je dat in je eigen Custom CSS. (webinfovenster in Safari: Voorkeuren > Geavanceerd > Toon Ontwikkel-menu)

    Het Webinfovenster, met de CSS.
    Het Webinfovenster, met de CSS (Elementen > Stijlen) waarin je jouw CSS kan uitproberen. Werkt het, dan kun je het plakken in je Custom CSS.

Les 7 en 8

  • Vul de website verder aan en check of je alle opdrachten gedaan hebt.
  • Maak een Backup van je inhoud, via Hulpmiddelen > Export. Sla het ergens op (OneDrive of iets anders). Met dit bestand kun je jouw site importeren in elke nieuwe lege Wordpress site, via Hulpmiddelen > Import.
  • Maak ook een backup van je Custom CSS (gewoon met Knip-en-Plak in een tekst-document) want dat zit niet bij die Backup. Noteer in een tekstdocument of bericht welke plugins je hebt gebruikt, en welk thema.

Backups zijn ook mogelijk met behulp van plugins.

12 gedachten over “WordPress opdrachten

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *