FacetWP filters met custom post-type loop in Breakdance
Inhoudsopgave
- Post types / nieuwsberichten
- Media
- Pagina aanmaken en vullen (flex content)
- Ninjaforms formulier inzendingen bekijken
- Plugins
- Nieuwe gebruiker toevoegen
- Menu
- Sections
Post types / nieuwsberichten (projecten/portfolio/vacatures)
Post types zijn berichten die je in de achterkant aanmaakt, en daarna kunt oproepen met een flex rij. Het meest gebruikte voorbeeld hiervan zijn nieuwsberichten. Je wilt natuurlijk overal op je website een verwijzing kunnen geven naar de nieuwsberichten, zonder elke keer de velden opnieuw te hoeven vullen. Enkele veelgebruikte voorbeelden van Post types zijn:
- Nieuwsberichten
- Vacatures
- Projecten
- Teamleden
- Diensten
In dit voorbeeld zijn het projecten. De post types staan altijd links bovenaan in het menu van WordPress aan de achterkant van je website:
Post types bestaan uit de overzichtspagina, en een single pagina. De single pagina is een eigen pagina waarop informatie te zien is. Deze pagina is niet te zien in het overzicht van alle pagina’s van de website, maar wordt automatisch aangemaakt en kun je beheren bij de post type zelf, in dit geval bij het kopje ‘projecten’. Deze single pagina is ook opgebouwd met flex content, en zal het vullen dus precies hetzelfde gaan zoals een normale pagina.
Het grootste verschil is dat je bij een post type velden hebt voor de uitgelichte weergave. Dit is de informatie die je zult zien bij een overzichtspagina. Deze velden staan vaak boven of onder de flex content in WordPress. De titel en datum van het bericht zullen automatisch opgehaald worden en daar zijn dus geen losse velden voor. Voorbeeld:
Op de overzichtspagina ziet het er zo uit, en je ziet dat in dit geval de titel automatisch wordt opgehaald, en er geen losstaand veld voor is.
De rij op de afbeelding hierboven is ook een flex rij die heet “vacatures overzicht”. Door deze rij te gebruiken haal ik automatisch de vacatures op.
Daarna kunnen we de single pagina van deze post gaan opbouwen door flex content rijen toe te voegen.
Media
Afbeelding toevoegen
In de mediabibliotheek kun je afbeeldingen en bestanden uploaden die je kunt tonen op de website. De afbeeldingen die je hier upload worden niet direct op de website getoond. Je zult deze daarna zelf nog moeten toevoegen aan de betreffende pagina waar je de afbeelding wilt gebruiken.
Een afbeelding uploaden doe je door te klikken op [Nieuw mediabestand toevoegen].
Belangrijk: Verwijder nooit zomaar een afbeelding. Doe dit pas wanneer je zeker weet dat de afbeelding nergens op de website gebruikt wordt.
Deze kun je nu gebruiken in de website bij elk afbeelding veld. Zie hier als voorbeeld:
Zodra je klikt op [Afbeelding toevoegen] zal de mediabibliotheek openen en kun je een afbeelding kiezen om toe te voegen aan de pagina.
PDF bestanden
Ook kun je hier PDF’s uploaden die je kunt tonen op de website door middel van een link. Die link vind je hier:
Als je nu een link veld / button ergens aanmaakt op de website kun je dit linkje invullen in het URL veld. Vergeet niet bij een PDF altijd het vinkje “Link openen in nieuwe tab” aan te zetten.
Pagina aanmaken en vullen (flex content)
De website is gebouwd met flex-content. Dit staat voor flexibele content. Dit wil zeggen dat je elke pagina precies kan indelen op de manier hoe jij het wilt. Wij hebben een aantal rijen gebouwd waarvan je gebruik kunt maken om informatie op de website te tonen.
Pagina aanmaken
Om een nieuwe pagina aan te maken kun je klikken op “Nieuwe pagina toevoegen”. Vul hier de naam van de pagina in. Deze naam is bedoeld voor de achterkant van de website zodat je zelf kunt zien welke pagina het is. Deze naam is niet automatisch zichtbaar aan de voorkant. Zodra je de naam hebt ingevuld zal ook de url van de pagina zichtbaar worden. Deze is automatisch gegenereerd dus wij raden aan om deze niet aan te passen als het niet nodig is. Houd hier rekening mee wanneer je de pagina een naam geeft. Aan de rechterkant kun je ook de pagina op privé zetten. Op die manier is de pagina alleen zichtbaar voor gebruikers die aan de achterkant ingelogd zijn. Overige bezoekers krijgen gewoon een 404 pagina te zien.
Hoe voeg je een flex rij toe?
Vaak is er een algemene eerste rij die op elke pagina wordt gebruikt als bannerfoto of slideshow. Zie voorbeeld:
Deze gaan we nu maken. Klik bij het kopje flex content op “nieuwe regel” — dit is een nieuwe rij die je toevoegt aan de pagina. Alle rijen bestaan uit een aantal velden, en een aantal instellingen.
Pagina’s vullen met flex content
Er zijn talloze verschillende soorten flex rijen, elk met zijn eigen velden en instellingen. Hieronder is een lijstje met de velden die wij het vaakst gebruiken, en per veld een kleine uitleg.
- Wysiwyg editor / Tekstveld
- Afbeelding
- Link
- Font Awesome icoon
- Contactformulier
Wysiwyg editor / Tekstveld
Voor tekstvelden gebruiken wij bijna altijd het wysiwyg (what you see is what you get) veld. Dit ziet er als volgt uit en zou je een beetje kunnen vergelijken met een simpele versie van Office Word:
In dit veld is het mogelijk om dingen toe te voegen zoals een titel, tekst, tekstkleur aanpassen, dikgedrukt maken, linkje invoegen etc. Al deze dingen zullen we in dit artikel behandelen. De meest gebruikte functies zijn direct zichtbaar, maar er zijn nog wat extra functies die je kunt tonen door te klikken op “toolbar toggle”:
Belangrijk: In de wysiwyg editor kun je ook afbeeldingen toevoegen. Dit raden wij ten zeerste af omdat dit de verhoudingen en tussenruimtes van de rij door elkaar haalt en in de war brengt. Gebruik voor afbeeldingen altijd het afbeelding veld.
Afbeelding
Zodra je klikt op [Afbeelding toevoegen] zal de mediabibliotheek openen en kun je een afbeelding kiezen om toe te voegen aan de pagina.
Link
Klik op [Selecteer link]. Nu zie je het URL en de linktekst. De URL is de link waar de button heen gaat, en de linktekst is de tekst in de button. Je kunt deze velden zelf invullen, of automatisch laten invullen door op één van de pagina’s te klikken in de lijst. Wanneer je hier op klikt vult hij het automatisch in (en hierna kun je het uiteraard nog wel aanpassen).
Je kunt ook een link toevoegen waarmee je op een telefoon automatisch belt en met een e-mail link automatisch je e-mailprovider opent om direct een e-mail te verzenden.
Dit kun je doen op onderstaande manier:
Telefoon: tel:0182342808
E-mail: mailto:info@buro210.nl
Font Awesome Icon / Social media
Op onze websites gebruiken we voor icoontjes de plugin Font Awesome Pro. Je kunt in de lijst de naam van een icoon opzoeken om deze toe te voegen in het Font Awesome Icon veld. Op de website van Font Awesome kun je alle icons vinden die er zijn: https://fontawesome.com/search
Omdat er verschillende versies zijn van Font Awesome kan het zijn dat sommige niet in de website beschikbaar zijn die wel op de website staan.
Dit veld wordt gebruikt om bijvoorbeeld social media linkjes toe te voegen in de footer, en deze te tonen met een icoontje van die betreffende website.
Contactformulier
Een formulier weergeven op de website hebben wij op verschillende manieren gedaan, maar de 2 meest gebruikte zijn shortcode toevoegen & formulier selecteren.
Shortcode toevoegen
Zet de shortcode (voorbeeld: [ninja_form id=1]) in het tekstveld neer.
Weet je niet wat de shortcode is? Kijk dan als voorbeeld op een pagina met het formulier, of kijk in het inzendingen tabje onder ‘Ninja Forms’ achter de naam van het formulier.
Formulier selecteren
Bij een “formulier selecteren” veld kun je simpelweg het menu openklappen en het gewenste formulier kiezen.
Ninjaforms formulier inzendingen bekijken
Normaal gesproken krijg je altijd een e-mail wanneer het contactformulier is ingevuld met daarin de informatie. Recentelijk is er ook de functie toegevoegd bij nieuwe websites om alle inzendingen in een overzicht te zien aan de achterkant van WordPress. Is dit niet het geval en mocht je dit wel graag willen, kunnen wij dit er in de meeste gevallen nog wel in bouwen op basis van een strippenkaart. Neem hiervoor contact met ons op via support@buro210.nl. Wanneer de functie ingebouwd is kun je op de volgende wijze de inzendingen bekijken:
Klik in het menu op “Ninja Forms” en kies hierna een formulier uit waarvan je de inzendingen wilt bekijken.
Nu krijg je een lijst te zien met alle inzendingen die gedaan zijn. Bij formulieren met veel/lange velden kun je ook op de inzendingen zelf klikken om alle informatie te lezen.
Plugins
Wij raden het af voor klanten om zelf dingen aan te passen of iets te doen bij het plug-ins tabje. Hiermee loop je het risico dingen op de website kapot te maken.
Nieuwe gebruiker toevoegen
Klik in het menu op het kopje “Gebruikers”. Hier zie je een lijst met de huidige gebruikers.
Klik nu op [Nieuwe gebruiker toevoegen]. Vul hier alle informatie in.
Bij de rol kun je website beheerder kiezen. Dit is dezelfde rol die het klantenaccount heeft. Jij hebt normaal gesproken ook deze zelfde rol. De nieuwe gebruiker kan dan dus precies dezelfde dingen zien en aanpassen als jij.
Met het vinkje “Nieuwe gebruiker een e-mail over hun account sturen” krijgt de gebruiker een e-mail over hun nieuwe account, en kunnen ze vanuit die e-mail ook hun eigen wachtwoord instellen.
Dit is hoe die e-mail er uit ziet.
Menu
Het menu aanpassen doen we bij het kopje “menu”.
Hier kun je zelf menu items toevoegen, verwijderen en ordenen. Ook kun je submenu-items (uitklapmenu) aanmaken.
Pagina’s toevoegen
Aan de linkerkant zie je een lijstje met bestaande pagina’s op de website. Hier kun je er een of meerdere aanvinken, en toevoegen aan het menu door te klikken op “Aan menu toevoegen”. Je kunt de menu items ordenen door deze te verslepen. Om er een submenu van te maken kun je hem iets naar rechts slepen zodat hij onder een ander menu kopje valt. Klik na de aanpassingen altijd op “Menu opslaan”.
Custom link toevoegen
Naast pagina’s kun je ook een custom link toevoegen aan het menu. Dit wordt over het algemeen niet veel gebruikt, maar de mogelijkheid is er wel. Dit kun je doen bij het tabje “aangepaste links”. Vul hier de URL in en de tekst van de link.
Sections
Elke website heeft een aantal sections die op elke pagina terugkomen. Dit zijn de header, footer en in sommige gevallen een sidebar. Om te voorkomen dat je een aanpassing in deze onderdelen op elke pagina los moet doorvoeren, bestaan er sections. Hiermee pas je bijvoorbeeld de tekst in de footer 1 keer aan, en zal dit over de hele website zichtbaar zijn.
Header
De header bestaat uit het logo, het menu en soms een zoekfunctie. Soms staan er ook nog aparte linkjes in de header. Het aanpassen van deze onderdelen doen we vanzelfsprekend bij Sections > Header.
De velden die je hier voornamelijk tegen zult komen zijn het link en afbeelding veld.
Footer
Voor de footer geldt hetzelfde. In dit onderdeel vind je meestal tekstvelden en font awesome icons.
Sidebar
De sidebar is een herhaler met icons en linkjes. Dit kun je gebruiken voor bijv. social media of een redirect naar Google Maps met de locatie van je bedrijf.
Het toevoegen vereist een font awesome icoon en een link. Zie hier hoe deze onderdelen werken.
