Yoors-tegels in Wordpress


 Als je een eigen website hebt wil je ongetwijfeld ook graag links kunnen plaatsen naar blogs die je op Yoors hebt gepubliceerd – of naar blogs van anderen, dat kan natuurlijk ook.

Een link plaatsen is binnen Wordpress geen probleem, maar het blijft dan meestal wel een gewone tekst-link. Zou het niet leuk zijn als je daar automatisch de afbeelding bij ziet die je ook bij de blog hebt gezet?

De Yoors-omgeving biedt tegenwoordig een handige tool. Hiermee gebruik je 'tegels': Kant-en-klare blokjes met zowel titel als kopafbeelding. En uiteraard aanklikbaar, je komt dan meteen op de betreffende Yoors-blog uit.

Over #Yoors -tegels heeft Ingrid al een uitgebreide uitleg geschreven:

Tegels, wat zijn dat?

Ingrid Tips en meer

 Onder elkaar?

Er is echter een klein nadeeltje: al deze tegels komen automatisch onder elkaar op je Wordpress-site te staan. Op het computerscherm is echter ruimte voor twee van dit soort tegels. Hoe krijg je dan twee tegels naast elkaar? Door gebruik te maken van tabellen.

 

Tabellen in Wordpress

De werkomgeving van Wordpress voorziet in allerlei elementen, maar helaas zit een tabel daar niet standaard bij. Gelukkig zijn er mogelijkheden, als je er tenminste niet voor terugschrikt om even naar de HTML--codes te kijken en zelf wat code toe te voegen. Wat HTML-codes zijn? Dat is in feite de 'taal' waarin webpagina's worden opgemaakt. (HTML = Hyper Text Markup Language)

Stap 1

Ga in de Wordpress-omgeving naar de 'tekstmodus'. Je ziet in de rechterbovenhoek twee tabbladen: 'visueel' en 'tekst'.  Standaard zit je op het tabblad 'visueel'. Door op 'tekst' te klikken kom je in de code-omgeving. Hier kun je allerlei dingen aanpassen die niet standaard zijn, en je kunt dus ook html-elementen toevoegen, zoals een tabel.

Stap 2

Zet de cursor op de plaats waar je de tegels wilt gaan invoegen. Hier maken we een begin met het aanmaken van een tabel. In HTML maak je eerst duidelijk wat het begin van de tabel is door in te typen

. Je maakt ook duidelijk wat het einde is met

Stap 3

Met table en /table heb je wel de buitengrenzen van de tabel aangegeven, maar nog niet hoe de binnenkant eruit ziet. We gaan allereerst een rij aanmaken – een horizontaal element. Hiervoor gebruiken we om de rij te starten, en uiteraard om te sluiten.

Stap 4

Met en heb je wel de buitengrenzen aangegeven van de rij, maar nog niet hoe de binnenkant eruit ziet. Een rij van een tabel bestaat uit cellen. Die moeten we dus eerst aanmaken. Laten we uitgaan van twee cellen in de rij. Elke cel open je met en sluit je met

Dan ziet je hele tabel er inmiddels zo uit als op dit plaatje:

Stap 5.

Het is nu tijd om de cellen te vullen.

Ga naar de Yoors-omgeving, naar de blog waar je een tegel van wil.

Onder de blog klik je op het deelknopje. In het venster dat zich nu opent zie je bij de knopjes rechts het <>symbool staan. Klik hierop. Je krijgt een popup te zien met code én een knop met 'Kopieer'. Klik hier op.

Stap 6.

Ga terug naar je Wordpress-omgeving. Zet de cursor in de cel (dus tussen en ) waar je de tegel wil hebben. Klik op 'plakken' (of gebruik de toetscombinatie CTRL-V). Vul de tweede cel op dezelfde manier met de tegel van een andere blog.

Stap 7.

Als je in de Wordpress-omgeving naar 'visueel' overschakelt dan zie je al hoe je tegels eruit komen te zien. Als het naar je wens is, dan sla je de pagina op door op 'bijwerken' te klikken.

Stap 8 (voor gevorderden)

Met dank aan Ingrid:

De standaardtegel is in veel gevallen net niet hoog genoeg. Dat kun je oplossen door de gekopieerde code aan te passen. Achter de regel met src=".." voeg je in: height="200".  De tegel wordt nu iets hoger. Dat getal kun je uiteraard naar wens aanpassen.


Meer over tabellen

Er is over tabellen in HTML nog heel wat meer te vertellen. Zo kun je bijvoorbeeld afmetingen beïnvloeden, dikte van de kaders, kleuren. Ook op je Wordpress-site kun je daar allemaal gebruik van maken. Voor het onderwerp van deze blog, het gebruik van Yoors-tegels, voert dat echter allemaal te ver.

 (c) 2018 Hans van Gemert
Afbeeldingen: eigen schermkopietjes