WordPress basis
In deze training leer je WordPress installeren op jouw eigen ma-cloud server, je leert pagina’s en berichten maken en je leert te werken met categorieën. Ook leer je hoe je projecten in je WordPress portfolio plaatst.
Wat nog niet aan bod komt is ontwerp. Dat komt later dit jaar.
WordPress installeren
- WordPress downloaden van wordpress.org (01:33 min.)
- WordPress uploaden op ma-cloud met FileZilla (01:43 min.)
- Database en database user aanmaken op ma-cloud (02:55 min.)
- WordPress installeren (05:56 min.)
WordPress werkt als een programma dat je installeert op een web-server, een computer die websites kan hosten. De webserver van het Mediacollege Amsterdam heet ma-cloud.nl. Elke student heeft daar een account met 2GB aan ruimte om je websites op te zetten.
Je kan je account van jouw stukje web-server beheren in het controlpanel: panel.ma-cloud.nl. In jouw controlpanel maak je een database aan.
ALS WordPress is ge-upload op jouw ma-cloud.nl en je een database hebt aangemaakt kun je WordPress installeren.
Hoe dat werkt leer je in de instructievideo’s hiernaast.
WordPress inrichten
- WordPress CMS knoppenbalk links (03:10 min.)
- Instellingen in WordPress (04:42 min.)
- Thema kiezen – we starten met Twenty TwentyOne (01:03 min.)
- Pagina’s maken (02:32 min.)
- Menu toevoegen en pagina’s in het menu plaatsen (01:34 min.)
- Berichten maken voor de projecten. (01:49 min.)
Met posts/berichten kun je meer dan met pagina’s - Categorieën maken en deze gebruiken voor het categoriseren van je projecten en de categorieën toevoegen aan je menu (08:24 min.)
Let op: je hoeft niet al je projecten en/of categorieën aan je menu toe te voegen. Kijk filmpje 13 voor een mooi project overzicht op je homepage.
Stop in je menu alleen de home en about-me knop, en eventueel een projectoverzicht knop. Klein menu is beter. - Widgets aan / uit zetten (02:22 min.)
- Projecten overzicht maken in een pagina met een posts-block (04:08 min.)
Waar is mijn portfolio?
Als WordPress is geïnstalleerd kan je je website zien door in de browser (Safari, Edge, Google Chrome, Brave, etc…) te gaan naar
https://studentnummer.hosts1.ma-cloud.nl of
https://studentnummer.hosts2.ma-cloud.nl
Of jij hosts1 of hosts2 hebt kun je zien het het controlpanel.
Beeldmateriaal en content toevoegen
- WebP maken met Photoshop (03:34 min.)
- Afbeeldingen geschikt maken voor web met Photoshop (02:55 min.)
- Gewone en uitgelichte afbeelding en Galerij toevoegen (04:47 min.)
- Afbeeldingen in een Galerij linken naar pagina’s (02:19 min.)
- Youtube video insluiten (01:26 min.)
- Afbeeldingen. toevoegen aan de galerij en screenshot maken (mac only) (04:04 min.)
- Afbeeldingen aanpassen qua kleur en vorm in WordPress (04:38 min.)
Website tonen in jouw portfolio (iframe)
Je kan in jouw portfolio een andere website tonen. Bijvoorbeeld jouw website duurzaam bedrijf (module 3).
Voeg onderstaande code toe in een HTML block in WordPress. Pas vervolgens het volgende aan:
src=""vul bij src de link naar de website in. Denk erom dat je ook https:// voor je link zet.width: 414px; height: 896px;dit is de breedte en hoogte van de site. De breedte is nu ingesteld op die van een mobieltje. Wil je een andere breedte, pas de waardes aan.border: none;hier staat dat het iframe geen rand heeft. Wil je juist wel een rand? Zet er dan bijvoorbeeld neer:border:2px solid black;
<iframe src="" frameborder="0" style="width: 414px; height: 896px; border: none;"></iframe>In de instructievideo’s hiernaast leer je op 3 verschillende manieren beeldmateriaal toe te voegen aan je site:
- Gewone afbeeldingen
- Uitgelichte afbeelding (of featured image)
- Galerij met afbeeldingen
Ook leer je hoe je afbeeldingen kan linken naar een vergroting van die afbeelding of een pagina.
Afbeeldingen kunnen zijn: .jpg, .png, .gif maar beter .webp.
- Check hier hoe je een afbeelding opslaat als WEBP in Photohoshop (19 sec.)
- Heel veel bestanden tegelijk kun je online converteren met bijvoorbeeld: pixelied.com/convert/jpg-converter/jpg-to-webp
Thema aanpassen en wijzigen
- De Thema Customizer gebruiken (02:32 min.)
- Andere thema’s proberen (04:11 min.)
In deze basiscursus gaan we nog niet het design van jouw WordPress portfolio aanpassen. Maar je kiest wel een thema en je kan ook experimenteren met andere thema’s.
Stylesheet code schrijven in de Custom CSS van de customizer
CSS is de programmeertaal waarmee websites worden opgemaakt. Met CSS bepaal je kleuren, lettertypes, het formaat van alle elementen, wat waar staat, etc… In WordPress kun je ook CSS schrijven. Ga naar de customizer, klik op Custom CSS en zet daar de CSS code neer die je hieronder kunt kopiëren.
Extra styling toepassen in de Custom CSS van de Customizer
In veel thema’s kun je niet zoveel aanpassen. Dan biedt de Custom CSS van de Customizer uitkomst. Hier kun je stylesheet codes schrijven (Copy en paste).
Powered by weghalen uit de footer
Haal de powered by weg in je footer. Voeg onderstaande code toe aan je Extra CSS / Custom CSS om de uitgelichte afbeelding op de posts-pagina te verbergen.
Dit werkt bij het thema Twenty Twenty-one
/* wordpress powered by verbergen in de footer*/
footer .powered-by {
display: none!important;
}Featured image / uitgelichte afbeelding onzichtbaar maken in post
Een uitgelichte afbeelding of featured image is de manier om je bericht / post een plaatje te geven in het berichten-overzicht. Maar die uitgelichte afbeelding is in het bericht zelf vaak lelijk. Voeg onderstaande code toe aan je Extra CSS / Custom CSS om de uitgelichte afbeelding op de posts-pagina te verbergen.
Dit werkt bij het thema Twenty Twenty-one
/* uitgelichte afbeelding verbergen in een bericht/post */
h1.entry-title ~ figure.post-thumbnail {
display: none;
}Adobe font gebruiken in jouw portfolio
Je kunt Adobe Fonts (of Google Fonts, maar is iets complexer) gebruiken in jouw WordPress site.
- Zoek op fonts.adobe.com een of meer lettertypes die je wil gebruiken. Klik bij elk lettertype op de knop “</> Toevoegen aan webproject“
- Maak een nieuw webproject aan. Geef je project bijvoorbeeld de naam “portfolio”
- Kopieer daarna 2 stukjes code:
- @import
Klik eerst op het linkje @import. Je ziet een stukje code dat begint met <style>.
Kopieer alleen de @import regel. Die ziet er ongeveer zo uit: @import url(“https://use.typekit.net/jouw-unieke-style-link.css”);
Plak deze @import link in jouw Custom CSS in de Customizer. Doe dit helemaal bovenaan. - Toegevoegde lettertypen:
Zoek daarna in jouw site het HTML element dat je wil aanpassen. Bij voorbeeld je H1 site-title. Zoek je HTML element met de element inspector in jouw browser.
Kopieer en plak in de Custom CSS in de customizer het tweede code-blok uit Adobe fonts waar boven staat Toegevoegde lettertypen:
Dit ziet er als volgt uit als je een H1 met de class .site-title hebt
- @import
/* het lettertype H1 site title aanpassen. */
h1.site-title {
font-family: "violeta", sans-serif;
font-weight: 400;
font-style: normal;
}Alle plaatjes passend maken in je beeldscherm
Sommige plaatjes zijn zo groot dat ze niet in je beeldscherm passen. In de video-instructie (rechts) leer je hoe je je plaatjes met 4 regels CSS-code altijd passend maakt in de hoogte van je browserscherm.
Je kunt de code ook kopiëren en plakken in de Custom CSS van de Customizer
img {
max-height: 90vh; /*vh = viewport height. 90vh = 90% van de hoogte van je beeldscherm*/
object-fit: contain; /*deze code zorgt ervoor dat je plaatje niet disproportioneel wordt geschaald*/
}