Documentatie · Integratiehandleiding

Theme-integratie

Dit document legt uit hoe de ADP Car Market Hub-plugin integreert met het actieve WordPress-theme, wat u moet controleren na installatie of een theme-wissel en hoe u de meest voorkomende lay-outconflicten oplost.

Wanneer u dit document moet gebruiken

Gebruik dit document als u:

De plugin installeert op een site en controleert of de voertuigpagina's correct worden weergegeven met het actieve theme.
Van theme wisselt op een bestaande site en controleert of de uitvoer van de plugin ongewijzigd blijft.
Lay-outproblemen diagnosticeert op het voertuigarchief, de detailpagina van een enkel voertuig of de vergelijkingspagina's.
Een ontwikkelaar bent die een aangepast theme integreert met de plugin.

De doelgroep is een WordPress-beheerder, ontwikkelaar of theme-integrator. Bekendheid met WordPress-themefiles en browser-ontwikkelaarstools is nuttig voor de probleemoplossingssecties.

Overzicht

De plugin registreert het custom post type as24ci_car met has_archive = true en een URL-slug van cars. Het biedt zijn eigen PHP-templates voor het voertuigarchief, de detailpagina van een enkel voertuig en de vergelijkingspagina's. Deze templates roepen de standaard WordPress-functies get_header() en get_footer() aan, zodat de navigatie, header en footer van het actieve theme altijd worden gebruikt. De plugin beheert alleen het inhoudsgebied tussen de header en footer.

Alle door de plugin gegenereerde inhoud is verpakt in een <div class="as24ci-page">-element. Op archiefpagina's heeft het element ook de class as24ci-archive-page. Op detailpagina's van een enkel voertuig heeft het de class as24ci-page-classic. Beide dragen de class alignfull, wat aan op blokken gebaseerde themes en themes voor volledige siteredactie (FSE) signaleert dat het element de volledige breedte van de viewport moet beslaan.

De plugin laadt zijn eigen CSS-bestanden in (beperkt tot as24ci-page-selectors) en voert een <style id="as24ci-dynamic-styles">-blok uit via wp_head met prioriteit 99 met designwaarden uit Car Market Hub → Design. Typografieregels binnen dat blok zijn altijd beperkt tot .as24ci-page-classic zodat ze nooit invloed hebben op theme-elementen buiten de plugin-wrapper.

Systeemvereisten

Voordat u de theme-integratie controleert:

De plugin is geïnstalleerd en geactiveerd en er is ten minste één voertuig geïmporteerd. Zie de Installatiehandleiding.
Mooie permalinks zijn ingeschakeld (Instellingen → Permalinks → Berichtnaam of een andere optie dan 'Eenvoudig'). Eenvoudige permalinks (met query-string) vereisen extra configuratie om de URL van het voertuigarchief correct te laten werken.
U hebt toegang tot de frontend van WordPress in een browser.

Stapsgewijze controlelijst voor validatie

Voer deze controles uit na de eerste installatie of na het wijzigen van het actieve theme.

Voertuigarchiefpagina. Bezoek de URL van het voertuigarchief (meestal /cars/). Controleer of: - De header en footer van het theme zichtbaar zijn. - Voertuigkaarten worden weergegeven binnen het inhoudsgebied van het theme. - De zoekfilters boven de lijst zichtbaar zijn. - Er geen PHP-fouten of ongestijlde HTML zichtbaar zijn.
Detailpagina van een enkel voertuig. Klik door naar een willekeurige detailpagina van een voertuig. Controleer of: - De header en footer van het theme aanwezig zijn. - De fotogalerij van het voertuig, de titel, de prijs en de specificatietabel correct worden weergegeven. - Het contactformulier zichtbaar is en functioneert.
Lay-out over de volledige breedte. De plugin-wrapper draagt de class alignfull. Bij blokthemes en themes voor volledige siteredactie zorgt deze class er meestal voor dat het element zich uitstrekt tot de rand van de viewport. Controleer of de inhoud van de plugin niet buiten de randen valt of een horizontale schuifbalk veroorzaakt.
Overerving van typografie. De CSS van de plugin gebruikt font-family: inherit en font-size: inherit als standaardwaarden voor de lopende tekst binnen .as24ci-page. Als het theme een aangepast lettertype instelt op body of op een bovenliggend element, zal de plugin dit overnemen. Controleer of het overgenomen lettertype er acceptabel uitziet op de voertuigpagina's.
Responsieve controle. Pas de grootte van het browservenster aan naar de breekpunten voor telefoons en tablets. Controleer of de filter-sidebar, het voertuigraster en de lay-out van het enkele voertuig leesbaar zijn op smalle schermbreedtes.
Vergelijkingspagina. Als de vergelijkingsfunctie is ingeschakeld (Car Market Hub → Instellingen, of in de installatiewizard), controleer dan of de vergelijkingspagina correct wordt weergegeven.

Configuratiereferentie

De instellingen die invloed hebben op hoe de plugin-uitvoer eruitziet naast het actieve theme, bevinden zich in Car Market Hub → Design.

Instelling	Effect
Archief lay-out	Bepaalt of voertuigkaarten als een lijst of raster worden weergegeven op het archief en op `[as24ci_archive]` shortcode-pagina's.
Lay-out enkel voertuig	Schakelt tussen lay-outmodi voor de detailpagina van een enkel voertuig. Momenteel gebruiken beide beschikbare modi de klassieke template.
Primaire / Accent / Knopkleuren	Overschrijft het standaard blauwe palet van de plugin. Gebruik hier de merkkleuren van de dealer om conflicten met het eigen palet van het theme te verminderen.
Typografie (H1 / H2 / H3 / Lopende tekst)	Overschrijft de lettergrootte, het gewicht, de regelhoogte en de teksttransformatie voor koppen en lopende tekst binnen `.as24ci-page-classic`. Deze overschrijvingen hebben geen invloed op elementen buiten de plugin-wrapper.
Aangepaste CSS	Vrije CSS die na alle andere dynamische regels wordt toegevoegd. Beperkt tot plugin-selectors. Zie de Custom CSS-handleiding.

Operationele opmerkingen

Theme-templates hebben prioriteit. Als het actieve theme (of child-theme) een bestand met de naam single-as24ci_car.php of archive-as24ci_car.php in de hoofdmap bevat, laadt WordPress dat bestand in plaats van de meegeleverde template van de plugin. Dit is zo ontworpen en maakt volledige aanpassing op theme-niveau mogelijk. Zie de Handleiding voor template-overschrijvingen.
alignfull op blokthemes. Blokthemes (Twenty Twenty-Three, Twenty Twenty-Four en vergelijkbare) geven elementen die zijn uitgelijnd op de volledige breedte meestal van rand tot rand weer. Omdat de plugin-wrapper alignfull draagt, volgt deze dit gedrag. Als uw bloktheme de standaard class alignfull niet gebruikt voor inhoud over de volledige breedte, kan de lay-out er smaller uitzien dan verwacht.
Klassieke themes met vaste inhoudsbreedtes. Sommige klassieke themes verpakken alle inhoud in een <div class="container"> of vergelijkbaar element dat de breedte beperkt. De binnenste wrapper van de plugin is standaard 1440px breed, gecentreerd met margin: 0 auto. Op themes met een smallere vaste container wordt de inhoud van de plugin beperkt tot de containerbreedte van het theme. Dit is over het algemeen acceptabel, maar kan ervoor zorgen dat het ontwerp er anders uitziet dan de weergave in Car Market Hub → Design.
Conflicterende kopstijlen. Themes die zich wereldwijd richten op h1, h2 of h3 kunnen invloed hebben op koppen binnen de plugin-wrapper. Als kopgroottes of -kleuren er verkeerd uitzien op voertuigpagina's, gebruik dan de overschrijvingsopties per kop in Car Market Hub → Design of voeg een specifieke regel toe in het veld Aangepaste CSS. Zie de Custom CSS-handleiding.
JavaScript-conflicten. Themes of andere plugins die jQuery laden met een niet-standaard prioriteit, of die jQuery vervangen of uitschakelen, kunnen invloed hebben op de werking van het merk-naar-model-filter van de plugin op de archiefpagina. Test het dynamische filteren (het selecteren van een merk en controleren of de model-dropdown wordt bijgewerkt) na het wijzigen van themes.
Caching. Wis na het wijzigen van themes of het aanpassen van de Design-instellingen de actieve paginacache en objectcache, zodat de bijgewerkte CSS wordt geleverd.

Problemen oplossen

Symptoom	Waarschijnlijke oorzaak	Wat te controleren
Voertuigpagina's tonen geen header of footer van het theme.	Er bestaat een template-overschrijving op theme-niveau (`single-as24ci_car.php` of `archive-as24ci_car.php`) in het theme, maar deze roept `get_header()` / `get_footer()` niet aan.	Controleer het bestand met de theme-overschrijving. Als u dit niet zelf hebt gemaakt, controleer dan of het theme wordt geleverd met een conflicterende template met die naam.
Archiefpagina geeft een 404-fout.	Mooie permalinks zijn niet ingeschakeld, of de rewrite-regels zijn niet geflusht na activatie van de plugin.	Ga naar Instellingen → Permalinks en klik op Wijzigingen opslaan om de rewrite-regels te flushen.
Er verschijnt een horizontale schuifbalk op voertuigpagina's.	De `alignfull`-wrapper overschrijdt de breedte van de viewport door een probleem met de standaard `overflow-x` van het theme of de browser.	Voeg `overflow-x: hidden` toe aan de `body` in het theme of in het veld Aangepaste CSS, of verklein de maximale breedte van `.as24ci-page`.
Koppen van de plugin gebruiken het verkeerde lettertype of de verkeerde grootte.	De wereldwijde kopregels van het theme overschrijven de standaardwaarden van de plugin.	Gebruik de typografie-instellingen voor koppen in Car Market Hub → Design of voeg specifieke CSS-regels toe. Zie de Custom CSS-handleiding.
Filters of JavaScript van de galerij werken niet.	Een jQuery-conflict met het theme of een andere plugin.	Deactiveer andere plugins één voor één om het conflict te isoleren. Controleer de browserconsole op JavaScript-fouten.
De uitvoer van de plugin ziet er ongestijld uit op een nieuw theme.	CSS-bestanden van de plugin zijn door het theme uit de wachtrij gehaald (dequeued).	Controleer of het theme `wp_dequeue_style()` aanroept voor `as24ci-*`-handles. Als dat zo is, verwijder dan die aanroepen of gebruik een child-theme om ze te herstellen.