Zet drie vensters open:

1. Je website: voor de studenten is dat AMSnoord.nl/jenaam
2. Je website dashboard: tik /admin achter je website en log in
   
3. En deze opdrachten.

Doe alle opdrachten hieronder. Lees de info op rocweb.nl ook een paar keer door. Kom je er niet uit? Google dan, bekijk de filmpjes en vraag elkaar om hulp!

---

Les 1: Basics

• Zet drie vensters open (zie hierboven).
  Verander je wachtwoord, via de mail die je hebt ontvangen (in “Ongewenst”), of via Dashboard > Gebruikers.
• Verander Titel en Ondertitel bij Dashboard > Instellingen.
• Maak drie nieuwe Pagina’s zoals Over mij, Contact en Portfolio, met alleen een Titel, verder nog zonder inhoud. Klik Publiceer. Later ga je ze vullen, nu nog niet.
• Maak ook een lege pagina “Blog”. Deze blijft altijd leeg, en komt straks in het menu, zodat je naar je Blog kan (die automatisch wordt gevuld met al je Berichten).
• Voeg ook een Bericht toe, en een paar Categorieën. Dat zijn de onderwerpen waar je blog over gaat. Voeg voortaan altijd een categorie toe aan elk nieuw bericht. Het eerste bericht mag leeg zijn, voorlopig dan.
• Stel Instellingen > Lezen in, kies daar welke pagina je homepage is, en welke pagina je Berichten toont (in jouw geval dus de pagina “Blog“). Stel daar alles af naar wens.
• Kies Weergave > Thema > Kies Vantage. Daarmee kan je de opdrachten makkelijker volgen. In andere thema’s kan alles namelijk anders werken.
• Maak een menu bij Weergave > Menu , zie deze info, met al je pagina’s, waaronder de Blog. Klik Bewaar en dan “Primair menu” aan (dit kan in elk thema anders zijn). Kijk hoe je submenu’s maakt in jouw thema (meestal: sleep een item een stukje naar rechts). Verschuif de volgorde en maak ook Custom links in je menu, die dus naar iets anders gaan: naar een andere website of naar een document zoals een pdf.

---

Les 2: Plaatjes

• Importeer en plaats plaatjes. Onderzoek en test alle mogelijkheden zoals: alt, onderschrift, link to media, groot/klein, croppen / bijsnijden.
• Plak een video van YouTube of VImeo in, en/of muziek, bijvoorbeeld van Soundcloud, door de url in te plakken. Dit kan zowel in Visueel, in Tekst (HTML) als in de Page Builder (van SiteOrigin). Bekijk ook of je een url van een WordPress-artikel in kan plakken en hoe dat er uit ziet.
• Lees de info op rocweb.nl/gallery. In veel nieuwe thema’s kan juist weer helemaal anders zijn: Zie bijvoorbeeld deze nieuwe handleiding. Kijk ook het filmpje hieronder over hoe dit in veel thema’s anders gaat.
• Maak een gallery, via “Media toevoegen > “Galerij“. Met minstens 6 eigen plaatjes. Zet “Link naar media” AAN (klik de galerie en dan het eerste knopje linksboven).
• In veel thema’s kan je de gallery verrijken met pop ups, bijvoorbeeld via de Simple Lightbox plugin. In thema Vantage staat zoiets ook al aan, en in die popup komen er dan ook twee teksten onder:
  – “Bijschrift” komt groot en vetgedrukt: zet daar altijd een pakkende tekst neer
  – “Beschrijving” komt kleiner daaronder, bijvoorbeeld voor copyright.
  Dit kan via klik-het-plaatje of via de Media Bibliotheek:

  

• Kies bij plaatjes altijd Link naar mediabestand. Dan kun je er op klikken. Kies ook daar bij de dropdown voor “In nieuwe tab openen” als je een link plaatst die naar een ANDERE website gaat. Bij Galeries is dat rechts bij Blok > Instellingen > Link naar Mediabestand.
  
• Vul bij elk plaatje altijd de alternatieve omschrijving in, voor optimale SEO.
• Kies een Uitgelichte Afbeelding (featured image). In de meeste thema’s komt dit groot bovenaan (en klein op de homepage van Blog en in zoekresultaten en Google resultaten). In thema Vantage helaas niet. Gebruik dan ook de Verder lezen tag in de editor, zodat je zelf kiest waar de tekst precies afsnijdt.
• Probeer alles opties zoals de Zoom-knop (crop / uitsnijden):

  

Maximale bestandsgrootte is 2Mb, dus grote plaatjes moet je eerst zelf verkleinen:
– Google naar “online photo resize”
– of mail het naar jezelf (kies Normale kwaliteit)
– of via Photoshop: Cmd Alt i (Save for web)

Als je in je website plaatjes gebruikt waar copyright op zit, ben je strafbaar. Je kan dat simpel voorkomen met de plugin “Password protect” oftewel “Beveilig met wachtwoord” voor de toegang.

• Bewerk je pagina’s en berichten verder, en stel het design naar wens in bij Weergave > Customizer.

---

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. En test het, dus kijk in je schoolmail of de test is aangekomen.
• Zet Reacties op je pagina’s en blogs UIT of juist AAN (Schermopties > Reacties en Discussie aanvinken. Onderaan zie je extra velden over Reacties en Discussie. Hier kan je per pagina dan Reacties toestaan UIT- of AANvinken). En je kan ook reacties wijzigen, verwijderen, beantwoorden et cetera. Of reacties pas toestaan NA eenmalig toestaan.
• Stel bij Instellingen > Discussie alles in zoals jij wil
• Favicon = Site Pictogram. Maak in Photoshop een favicon.png van 512 x 512 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 Site pictogram of iets dergelijks). Check ook je touch icon op je mobiel (via Voeg toe aan startscherm). Of bij Instelling > Algemeen
  NB: In nieuwe thema’s gaat dit anders: Editor > Home > Header, linksboven je plaatje kiezen en bij de opties kiezen: Als site-pictogram gebruiken:
  
  https://www.youtube.com/watch?v=jrzJKGLErfY
  https://www.wpxpo.com/add-site-icon-in-twenty-twenty-two-wordpress-theme/
• Maak een hoofdmenu, en voeg knoppen toe, zie deze info. Maak ook submenu’s.
• Maak in het menu ook knoppen naar custom links, zoals naar je CV.pdf.
• Voeg een custom link toe als hoofdknop bij elk submenu. Zet “#” in de link als url, dat is dus een link naar niks. Hier meer info.
• Er zijn thema’s die dit totaal anders doen. Lees dan de manual van jouw thema.
  
• Maak van je Categoriën een menu-item EN een Widget.

Vanaf WordPress 6.2 is het in veel nieuwe thema’s weer helemaal anders:

1. FAVICON OPDRACHT: Maak 3 verschillende ontwerpen (500×500 pixels)
2. Feedback: Laat ze zien en kies de beste, bewaar die als PNG
3. Zet ‘m in je website (Customizer > Site-identiteit > Site pictogram)
4. Voeg je website toe aan je homescreen op je telefoon
5. Maak daar een screenshot van en zet die ergens op je website

---

Les 4: Social media, widgets (patronen), Maps, CV

Filmpje over PDF’s plaatsen:

• Probeer alles uit over de plugin Smash Balloon Instagram Feed. Oftewel: zet een live Instagram feed op een Pagina of Bericht. Maak daar desnoods een nieuw account voor.
• Pas het ontwerp van je site aan, bijvoorbeeld het header-plaatje via Weergave > Customizer. Bestudeer zelf alle opties: bij elk thema is dit anders.
  
• Upload je CV als PDF in de Media (of een andere pdf). Kopieer de URL, en zet een Custom Link (Aangepaste link) met deze URL in het menu. (Let bij een CV op de privé-informatie, en verwijder eventueel je tel nr, je adres en je BSN).
  Zie het filmpje
• Multi Page Inline PDF: plaats een pdf met meerdere pagina’s in je pagina, via Plusje > Bestand (dus niet als Afbeelding). Nu is het een bladerbare multipage, direct in de pagina. Dit is nieuw in WordPress 6. Voorheen kon dit alleen met plugins als “PDF Embedder”.
  Zie het filmpje
• Bekijk Widgets (patronen), en wijzig alles naar wens. Voeg bijvoorbeeld een Zoek-veld toe, of sleep juist dingen weg die je niet hoeft. In nieuwe thema’s gaat dit anders, zie https://www.wpxpo.com/wordpress-sidebar-in-twenty-twenty-two-theme/
  In de nieuwe WordPress: tik Enter > tik de Plus > Alles bekijken > Patronen > Alle patronen. En dan bijvoorbeeld een Zoekveld. Etcetera.
• Plugins > SiteOrigin Widgets > Blog aanzetten en 3 koloms nieuws op de homepage zetten. Bekijk ook “Image slider”, “Anything Caroussel”, en Hero etc etc.
• Er zijn WordPress Widgets voor de sidebar,
• Maak ook een HTML-widget, plaats die ergens in je site, en vul die met eigen code. Maak zo bijvoorbeeld een Instagram widget: plak onderstaande code in een HTML widget en pas de code aan (in de nieuwe WordPress via 3 puntjes > HTML):

  <h3>Mijn Insta:</h3>
  <a href="https://instagram.com/jenaam">
  <img src="plak-hier-de-url-van-je-plaatje" width=100%>
  </a>

• Probeer de Social Media van Jetpack of een andere plugin voor Social Media Buttons zoals AddToAny Social Sharing. Er staan ook andere plugins voor Social Media. Onderzoek zelf welke voor jou de beste is. Doorloop alle opties. Er is een groot verschil tussen Sharing– en Follow-buttons. Zoek uit wat de verschillen zijn, en kies voor jouw pagina’s de juiste.
• 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 en 6: SEO en Word import

• Lees dit stuk over Search Engine Optimization.
• Plaats minstens 3 Berichten met eigen teksten. Je mag teksten gebruiken die je geschreven hebt bij andere lessen.
• Maak ook Categorieën en vul per bericht één of meerdere Categorieën in.
• Activeer de plugin WordPress SEO by Yoast als die nog niet aan staat.
• Onderaan, bij SEO, geef je een Focustrefwoord op: het woord waarop je gevonden wil worden. Mag ook meedere woorden zijn, zoals “illegale kattenhandel”.
• Bewerk de 3 berichten totdat ALLE punten op groen staan, zie de SEO- info.
• De Leesbaarheidsanalyse moet je ook doen.
• Plaats in elk artikel ook het screenshot van je onderzoek naar varianten van je trefwoord (op trends.google.com)
• Gebruik in elk Bericht ook de Lees Meer tag (tik een enter, dan een slash “/” en tik daarachter “meer” – of klik de knop in je knoppenbalk)
• Gebruik ook de Uitgelichte afbeelding in elk Bericht, en kijk wat dat met je Blog-pagina doet.

Hier een video met uitleg:

Word import: docx met opmaak

Met de Hoo Doc importer kan je een Word doc importeren, inclusief alle stijlen en opmaak. Als je de plugin aanzet zie je de Word-knop in de editor staan  In de nieuwste WordPress als je de Plus klikt:

---

Les 7: CSS Custom stijlen

Deze tekst wordt nog aangepast aan WordPress 6. Het doel van deze les blijft dat je de vormgeving en de stijlen van je eigen site zelf kan aanpassen. In de nieuwe blockbuilders gaat dat makkelijker – maar anders – dan voorheen. Custom CSS blijft ook altijd mogelijk. Dus het kan nu zowel met de blockbuilders, als met de thema settings als met CSS.

Pas de stijl van 1 artikel aan: gebruik in een artikel andere lettertypes dan de standaard van je thema. Andere lettergroottes, andere kleuren. Dit kan meestal direct in de blockbuilder.

Doe dit ook voor je GEHELE website, dus bijvoorbeeld dat ALLE kopteksten een andere vormgeving krijgen dan de standaard in jouw thema. Dit kan meestal in de Thema-Customizer, of desnoods met CSS.

Als voorbeeld: maak een plaatje met een border eromheen. Zoek het uit hoe je dat nu kan doen (voorheen maakte je en CSS-stijl en paste die toe. Nu kan dat mogelijk ook anders).

• Lees het stukje over Custom CSS
• Bekijk Page Builders zoals Elementor (in WP 6 is dat de standaard blockbuilder geworden) en probeer die ook uit. Lees hier de nadelen van Page Builders
• 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 de blockbuilder, of met CSS.
  Met CSS ging dat zo: Zet de inhoud van de kolom tussen deze twee div-tags. 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 !important; 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. ⌘-Shift-C is hierbij handig. Is de wijziging goed, dan plak je dat in je eigen Custom CSS. (webinfovenster in Safari: Voorkeuren > Geavanceerd > Toon Ontwikkel-menu)

  

---

Les 8: Portfolio

Lees dit: https://nl.support.wordpress.com/portfolios/
en probeer het uit met je eigen portfolio.

Les 9: Back up

• 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. (Dit is zonder de plaatjes)
• 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, met welke instellingen. En welk thema, ook met de instellingen. Want dat zit ook allemaal niet in die backup (die is voor de inhoud).
• Backups zijn ook mogelijk met behulp van plugins. Dan kan het wel een complete backup zijn, inclusief alle instellingen, aanpassingen en content. Maar dan moet je betalen.