Het tonen van een Google spreadsheet (Google sheets) op WordPress
Er zijn bepaalde situaties denkbaar, waarin het ideaal zou zijn als je informatie die regelmatig verandert, automatisch zou kunnen weergeven op een WordPress pagina. Daarbij kun je denken aan een prijslijst, menu, wijnlijst, e.d.
Hoe toon je de gegevens op je website
Daar zijn meerdere manieren voor van heel geavanceerd tot supereenvoudig. Dit artikel gaat over 2 supereenvoudige manieren.
Voorbereiding voor het tonen van een Google sheet
Welke van de 2 manieren om je Google spreadsheet op je site te tonen je ook kiest, de voorbereiding is hetzelfde.
- Maak een Google sheet met de gewenste informatie
- Hou rekening met de breedte (een spreadsheet met 80 kolommen wordt lastig vertonen op een beeldscherm)
- Kies bij voorkeur geen achtergrond (gewoon wit) zodat je geen problemen met te veel of te weinig kleur in de achtergrond.
- Kies of je juist wel of liever geen lijnen hebt tussen de kolommen of rijen; een restaurant menu is een stuk mooier zonder lijnen.
- Hou rekening met het feit dat het straks op een website komt qua korps: 15 px of 16 px is een mooie letterhoogte.
- Het is verstandig om geheel links en rechts een smalle blanco kolom te creëren (anders komt de tekst tegen de rand straks).
- Als je tevreden bent, ga je in Google sheets naar Bestand / Delen / Publiceren op internet.
- Daar kies je voor ‘heel document’ en ‘Webpagina’.
- Google sheets toont je een URL. Bewaar deze!
- Zorg dat ‘automatisch opnieuw publiceren na wijzigingen’ aangevinkt is.
- Test de URL in een ander browserscherm en kijk of de lay-out naar wens is.
- Hier zie je een voorbeeld van de Google spreadsheet.
Vertonen Google sheet via de EmbedPress plug-in
- Installeer de EmbedPress plug-in (gratis versie is voldoende).
- Ga naar de juiste pagina of maak een nieuwe pagina.
- Plaats het EmbedPress Gutenberg block.
- Plak de URL in het veld dat verschijnt, en kies een breedte en hoogte (900px voor beide is vaak goed) en save de pagina.
- Bekijk de pagina; de spreadsheet verschijnt.
- Vergeet niet te controleren of het op mobiel ook naar wens is, soms moet je de spreadsheet, of de maten in het EmbedPress block wat aanpassen.
- Als je nog niets ziet; soms duurt het maximaal 5 minuten.
Hieronder staan 2 eenvoudige voorbeelden van een Google spreadsheet op een WordPress pagina met EmbedPress; één in een accordeon en één direct zichtbaar.
Vertonen Google sheet via het HTML block
- Ga naar de juiste pagina of maak een nieuwe pagina.
- Plaats een HTML block.
- Op dezelfde pagina in Google sheets waar je de URL ophaalde, kun je ook kiezen voor ‘Invoegen’.
- Dan krijg je een iframe code te zien. Kopieer deze code.
- Deze code plak je in het HTML-veld op je WordPress pagina.
- Nu moet de HTML code een beetje worden aangepast: Na <iframe en voor: src=”https://docs.google.com/…. plaats je deze code: width=”800″ height=”600″.
- Dan ziet het er zo uit: <iframe width=”800″ height=”600″ src=”https://docs.google.com/…etc
- Deze maten in pixels kun je uiteraard aanpassen.
- Bewaar de pagina.
- Bekijk de pagina; de spreadsheet verschijnt.
- Vergeet niet te controleren of het op mobiel ook naar wens is, soms moet je de spreadsheet, of de maten in het HTML block wat aanpassen.
- Als je nog niets ziet; soms duurt het maximaal 5 minuten.
Noot: Als het qua lay-out niet klopt (bijvoorbeeld teveel naar links op de pagina) plaats het HTML blok dan in een container of een kolom, die je op centreren zet.
Hieronder staat een eenvoudig voorbeeld van een Google spreadsheet op een WordPress pagina middels HTML.
Conclusie
Natuurlijk zijn er qua lay-out en design andere (meer galante) oplossingen om wisselende informatie te publiceren. Deze oplossing is echter kosteloos, en stelt een klant in staat content aan te passen zonder toegang te hebben tot de website. Het enige wat de klant nodig heeft, is een Google account.
Noot:
Natuurlijk kun je elke menu onderdeel (vlees, vis, wij, etc.) een eigen publicatie geven en een eigen accordeon.
Andere oplossingen
Ninja tables (premium versie), Tableberg tables en Flextable kunnen allemaal ook Google sheets inlezen. Ook de plug-in Great Restaurant Menu WP is ideaal; maar die werkt zonder Google sheets, en de editor heeft toegang nodig tot de website.