Wilt u weten hoe u Google Agenda kunt integreren in uw WordPress-website? Laten we deze tutorial dus samen bekijken.
Sommige van uw websites zouden baat hebben bij het hebben van een kalender. Dit is vooral het geval als u de activiteit van een team of een gemeenschap coördineert of als u: een evenementwebsite beheren.
Zodat uw bezoekers of uw gebruikers kunnen zien wat er nieuw is of gedaan moet worden, misschien door wie maar vooral wanneer.
In dit artikel laat ik je zien hoe je een responsieve Google Agenda in je WordPress-website kunt integreren.
Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog
Ga dan terug naar waarom we hier zijn.
Ga naar een Google Agenda
Als u al Google-agenda's heeft, maakt u deze openbaar en slaat u deze stap over. Ga anders in uw browser naar Google-agenda en authenticeer indien nodig. Als alles goed gaat, zou je de Google-agenda-interface moeten hebben.
Om u een voorbeeld te geven, gebruiken we openbare agenda's die beschikbaar zijn in Google Agenda. Klik hiervoor op het handvat voor Andere agenda's die aan de linkerkant van uw scherm staat. Kies in het menu dat verschijnt Blader door interessante agenda's.
Kies in de lijst met agenda's een die u uitkomt door op de link te klikken registreren die is gelegen tegenover. Voor dit artikel heb ik gekozen Vakantie in Frankrijk. Je zou de onderstaande lijst moeten zien Andere agenda's.
Voeg uw Google-agenda in op een pagina of artikel
Klik op het handvat voor Vakantie in Frankrijk (Of uw publieke agenda) en kies Kalender instellingen. Kopieer in het gedeelte Deze kalender integreren de HTML-code in het tekstvak en plak deze in uw WYSIWYG-editor, die u vooraf in de tekstmodus hebt ingevoerd.
Ontdek trouwens onze selectie van 10 code editors voor ontwikkelaars WordPress
Sla uw artikel op en bekijk er een voorbeeld van. De weergave van de agenda op uw website is sterk afhankelijk van uw WordPress theme. Als het volledig responsief is, zou het geen weergaveproblemen moeten hebben.
Probeer de breedte van uw browservenster te verkleinen om te zien hoe de agenda eruitziet op kleinere schermen. Als de kalenderweergave op enig moment breekt, betekent dit dat u een kleine regel CSS aan uw . moet toevoegen WordPress theme.
Ga verder door te ontdekken Hoe kan ik een aangepaste CSS toe te voegen aan uw WordPress blog
Schrik niet, het is niets ingewikkelds.
Voeg CSS om de responsieve kalender maken
Om uw . te wijzigen WordPress theme, vooral als u niet de auteur bent, moet het bijwerken worden uitgevoerd in a kind thema of WordPress Plugin waarmee u aangepaste CSS kunt toevoegen.
Welke optie je ook hebt gekozen, voeg dit kleine stukje CSS toe aan je WordPress-thema:
iframe { max-width: 100%; }Sla uw wijzigingen op, laad de pagina van uw artikel opnieuw en controleer of de agenda deze keer normaal op de kleine schermen wordt weergegeven.
Insluiten meerdere agenda's in een bericht of pagina
Om aan de slag te gaan, abonneert u zich op andere openbare agenda's zoals hierboven (Andere agenda's> Blader door interessante agenda's), of maak uw eigen agenda's en maak ze openbaar.
Als je alle benodigde kalenders hebt, kies er dan een, een willekeurige, klik op het handvat en kies Kalender instellingen. Deze keer, in de sectie deze agenda integreren, klik op de link Pas kleur, maat en andere opties aan. U krijgt dan een aanpassingsvenster te zien.
Ga verder met de basisprincipes van het aanpassen van een WordPress-website
Hier kunt u enkele visuele aspecten van uw agenda aanpassen. Een belangrijk ding om te doen is om uw agendacollectie een titel te geven, anders krijgt deze de titel van de huidige agenda.
Bovenaan dit venster bevindt zich een tekstvak met een knop HTML-code bijwerken. Gebruik het om een voorbeeld van uw kalender te bekijken.
We raden u ook aan onze te controleren 10 WordPress plugins premium perfect voor het integreren van een kalender in uw website
Het gebruik van deze knop heeft ook het effect dat de HTML-code in het tekstvak wordt bijgewerkt. Als u tevreden bent met uw wijzigingen, kopieert u deze code naar uw artikel. Bewaar en herlaad de pagina.
Ontdek ook Hoe u uw WordPress-website in de onderhoudsmodus plaatst
Omdat je de CSS-code al eerder hebt ingevoegd, zal het dagboek zich perfect gedragen op alle schermen.
Zoals u kunt zien, is het niet erg ingewikkeld om een Google-agenda aan uw website toe te voegen. Het gaat meer over het kopiëren van code uit de Google Agenda-applicatie en deze in een pagina of een artikel natuurlijk met de editor in tekstmodus plakken.
Maar als u geen hele pagina met uw agenda's bezet, zou dat ook kunnen Voeg een Google Agenda toe in je widgets.
Ontdek ook enkele premium WordPress-plug-ins
U kunt andere gebruiken WordPress plugins om een moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.
We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.
1. Pagina's op gebruikersrol
Pagina's op gebruikersrol is a WordPress Plugin waarmee u toegangscontrole kunt toevoegen aan bepaalde elementen van uw website (berichten, pagina's, aangepaste berichttypen, enz.)
Met deze plug-in kunt u een pagina, een artikel, een aangepast type bericht en andere verwijderen. in zoekresultaten en blog-directory. Hiermee kunt u de pagina, categorieën en andere menu-items verbergen wanneer gebruikers niet zijn aangemeld.
U kunt ook een URL redirection specifiek voor gebruikers die niet de vereiste gebruikersrol hebben.
Downloaden | demonstratie | web hosting
2. Ultimate Affiliate Pro
Laten we beginnen met de WordPress Plugin Ultimate Affiliate Pro, gemakkelijk een van de WordPress plugins meest robuuste partnerprogramma omdat het integreert met WooCommerce, Easy Digital Downloads, PayPal en Stripe-plug-ins.
Daar vindt u allerlei handige functies zoals: prestatiebonus en bannermanagement, ondersteuning voor een onbeperkt aantal affiliates en speciale aanbiedingen, ranglijsten en commissieniveaus, verwijzingen en aandelen op sociale netwerken, ondersteuning voor meerdere betalingsgateways PayPal, Stripe en nog veel meer.
Als dat allemaal niet indrukwekkend genoeg was, moet u weten dat het ook een paar sjablonen heeft voor inlogpagina, registratie, gratis account en verbinding maakt met de beste e-mailmarketingproviders zoals MailChimp, Constant Contact en vele anderen.
Het is een van de beste aangesloten plug-ins WooCommerce die u op Envato Market vindt.
Downloaden | demonstratie | web hosting
3. Materiaal
Material Admin is een van de meest geavanceerde en stijlvolle WordPress-plug-ins op de markt voor het aanpassen van het WordPress-dashboard.
Deze WordPress-plug-in wordt geleverd met 100 stijlvolle thema's en geeft je de mogelijkheid om je eigen thema te maken. U kunt het volledige uiterlijk van het dashboardmenu, de bovenste balk, de knoppen, de typografie, de formulieren, de tekst- en achtergrondkleuren, het logo, etc. regelen.
Materiaalbeheer heeft ook meer dan 20 widgets de tableau de bord gepersonaliseerd voor uw website en geeft statistieken weer voor bezoekers.
Downloaden | demonstratie | web hosting
Aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
- Hoe WordPress-berichten opnieuw te ordenen
- Hoe kan ik de link naar de WordPress login pagina
- Bestanden zoeken om te bewerken vanuit een WordPress-thema
- Hoe PDF's presenteren en delen op WordPress?
- Hoe maak je een hiërarchie met WordPress pagina's en sjablonen
Conclusie
Hier! Dat is het voor deze tutorial gewijd aan het integreren van een Google-agenda in uw WordPress-website. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken.
U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.
Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.
...
