Dokumentation · Integrationshandbuch

Theme-Integration

Dieses Dokument erklärt, wie sich das ADP Car Market Hub-Plugin in das aktive WordPress-Theme integriert, was nach der Installation oder einem Theme-Wechsel zu überprüfen ist und wie die häufigsten Layout-Konflikte gelöst werden.

Wann Sie dieses Dokument verwenden sollten

Verwenden Sie dieses Dokument, wenn Sie:

Das Plugin auf einer Website installieren und überprüfen, ob die Fahrzeugseiten mit dem aktiven Theme korrekt gerendert werden.
Das Theme auf einer bestehenden Website wechseln und sicherstellen möchten, dass die Plugin-Ausgabe unbeeinträchtigt bleibt.
Layout-Probleme auf der Fahrzeug-Archivseite, der Fahrzeug-Detailseite oder den Vergleichsseiten diagnostizieren.
Als Entwickler ein benutzerdefiniertes Theme mit dem Plugin integrieren.

Die Zielgruppe ist ein WordPress-Administrator, Entwickler oder Theme-Integrator. Vertrautheit mit WordPress-Theme-Dateien und Browser-Entwicklertools ist für die Abschnitte zur Fehlerbehebung hilfreich.

Übersicht

Das Plugin registriert den Custom Post Type as24ci_car mit has_archive = true und dem URL-Slug cars. Es stellt eigene PHP-Templates für das Fahrzeug-Archiv, die Fahrzeug-Detailseite und die Vergleichsseiten bereit. Diese Templates rufen die Standard-Funktionen WordPress, get_header() und get_footer() auf, sodass die Navigation, der Header und der Footer des aktiven Themes immer verwendet werden. Das Plugin steuert nur den Inhaltsbereich zwischen Header und Footer.

Alle vom Plugin generierten Inhalte sind in ein <div class="as24ci-page">-Element eingepackt. Auf Archivseiten trägt das Element zusätzlich die Klasse as24ci-archive-page. Auf Fahrzeug-Detailseiten trägt es as24ci-page-classic. Beide tragen die Klasse alignfull, was blockbasierten und Full-Site-Editing-Themes signalisiert, dass sich das Element über die gesamte Breite des Viewports erstrecken soll.

Das Plugin reiht seine eigenen CSS-Dateien ein (beschränkt auf as24ci-page-Selektoren) und gibt einen <style id="as24ci-dynamic-styles">-Block über wp_head mit der Priorität 99 aus, der die Designwerte aus Car Market Hub → Design enthält. Typografie-Regeln innerhalb dieses Blocks sind immer auf .as24ci-page-classic beschränkt, sodass sie niemals Theme-Elemente ausserhalb des Plugin-Wrappers beeinflussen.

Voraussetzungen

Vor der Überprüfung der Theme-Integration:

Das Plugin ist installiert und aktiviert und mindestens ein Fahrzeug wurde importiert. Siehe Installationsanleitung.
Sprechende Permalinks sind aktiviert (Einstellungen → Permalinks → Beitragsname oder eine andere Option ausser "Einfach"). Einfache Permalinks (mit Query-String) erfordern zusätzliche Konfigurationen, damit die Fahrzeug-Archiv-URL korrekt funktioniert.
Sie haben in einem Browser Zugriff auf das WordPress-Frontend.

Schritt-für-Schritt-Checkliste zur Überprüfung

Führen Sie diese Prüfungen nach der Erstinstallation oder nach dem Wechsel des aktiven Themes durch.

Fahrzeug-Archivseite. Rufen Sie die Fahrzeug-Archiv-URL auf (normalerweise /cars/). Bestätigen Sie, dass: - Der Theme-Header und -Footer sichtbar sind. - Die Fahrzeug-Suchergebnisse (Karten) im Inhaltsbereich des Themes angezeigt werden. - Die Suchfilter über der Liste sichtbar sind. - Keine PHP-Fehler oder ungestyltes HTML sichtbar sind.
Fahrzeug-Detailseite. Klicken Sie sich zu einer beliebigen Fahrzeug-Detailseite durch. Bestätigen Sie, dass: - Der Theme-Header und -Footer vorhanden sind. - Die Fahrzeug-Bildergalerie, der Titel, der Preis und die Spezifikationstabelle korrekt gerendert werden. - Das Kontaktformular sichtbar und funktionsfähig ist.
Layout in voller Breite. Der Plugin-Wrapper trägt die Klasse alignfull. Bei Block-Themes und Full-Site-Editing-Themes führt diese Klasse normalerweise dazu, dass sich das Element bis zum Rand des Viewports erstreckt. Überprüfen Sie, dass der Plugin-Inhalt nicht überläuft oder eine horizontale Bildlaufleiste erzeugt.
Vererbung der Typografie. Das CSS des Plugins verwendet standardmässig font-family: inherit und font-size: inherit für den Fliesstext innerhalb von .as24ci-page. Wenn das Theme eine benutzerdefinierte Schriftart auf body oder auf einem übergeordneten Element festlegt, vererbt das Plugin diese. Überprüfen Sie, ob die vererbte Schriftart auf den Fahrzeugseiten ansprechend aussieht.
Responsive-Prüfung. Ändern Sie die Grösse des Browserfensters auf Smartphone- und Tablet-Breakpoints. Bestätigen Sie, dass die Filter-Sidebar, das Fahrzeug-Raster und das Layout der Fahrzeug-Detailseite bei geringen Bildschirmbreiten gut lesbar sind.
Vergleichsseite. Wenn die Vergleichsfunktion aktiviert ist (Car Market Hub → Einstellungen oder im Einrichtungsassistenten), überprüfen Sie, ob die Vergleichsseite korrekt gerendert wird.

Konfigurationsreferenz

Die Einstellungen, die beeinflussen, wie die Plugin-Ausgabe neben dem aktiven Theme aussieht, finden Sie unter Car Market Hub → Design.

Einstellung	Auswirkung
Archiv-Layout	Steuert, ob Fahrzeugkarten als Liste oder Raster auf dem Archiv und auf `[as24ci_archive]`-Shortcode-Seiten angezeigt werden.
Layout der Fahrzeug-Detailseite	Wechselt zwischen den Layout-Modi für die Fahrzeug-Detailseite. Derzeit verwenden beide verfügbaren Modi das klassische Template.
Primär- / Akzent- / Button-Farben	Überschreibt die standardmässige blaue Farbpalette des Plugins. Verwenden Sie hier die Markenfarben der Garage, um Konflikte mit der Theme-eigenen Farbpalette zu minimieren.
Typografie (H1 / H2 / H3 / Body)	Überschreibt Schriftgrösse, Schriftgewicht, Zeilenhöhe und Texttransformation für Überschriften und Fliesstext innerhalb von `.as24ci-page-classic`. Diese Überschreibungen betreffen keine Elemente ausserhalb des Plugin-Wrappers.
Benutzerdefiniertes CSS	Freiform-CSS, das nach allen anderen dynamischen Regeln angehängt wird. Beschränkt auf Plugin-Selektoren. Siehe Anleitung für benutzerdefiniertes CSS.

Betriebliche Hinweise

Theme-Templates haben Priorität. Wenn das aktive Theme (oder Child-Theme) eine Datei namens single-as24ci_car.php oder archive-as24ci_car.php in seinem Stammverzeichnis enthält, lädt WordPress diese Datei anstelle des im Plugin enthaltenen Templates. Dies ist so vorgesehen und ermöglicht eine vollständige Anpassung auf Theme-Ebene. Siehe Anleitung für Template-Overrides.
alignfull bei Block-Themes. Block-Themes (Twenty Twenty-Three, Twenty Twenty-Four und ähnliche) rendern Elemente mit voller Breite normalerweise von Rand zu Rand. Da der Plugin-Wrapper alignfull trägt, folgt er diesem Verhalten. Wenn Ihr Block-Theme nicht die Standardklasse alignfull für Inhalte in voller Breite verwendet, sieht das Layout möglicherweise schmaler aus als erwartet.
Klassische Themes mit festen Inhaltsbreiten. Einige klassische Themes packen alle Inhalte in ein <div class="container">- oder ähnliches Element, das die Breite einschränkt. Der innere Wrapper des Plugins ist standardmässig 1440px breit und mit margin: 0 auto zentriert. Bei Themes mit einem schmaleren festen Container wird der Plugin-Inhalt auf die Breite des Theme-Containers begrenzt. Dies ist im Allgemeinen akzeptabel, kann jedoch dazu führen, dass das Design anders aussieht als in der Vorschau unter Car Market Hub → Design.
Konflikte bei Überschriften-Styles. Themes, die h1, h2 oder h3 global ansprechen, können Überschriften innerhalb des Plugin-Wrappers beeinflussen. Wenn Überschriften-Grössen oder -Farben auf Fahrzeugseiten falsch aussehen, verwenden Sie die Steuerelemente zur Überschriften-Überschreibung in Car Market Hub → Design oder fügen Sie eine spezifische Regel im Feld für benutzerdefiniertes CSS hinzu. Siehe Anleitung für benutzerdefiniertes CSS.
JavaScript-Konflikte. Themes oder andere Plugins, die jQuery mit einer nicht standardmässigen Priorität laden oder jQuery ersetzen oder deaktivieren, können die Abhängigkeit des Marke-zu-Modell-Filters des Plugins auf der Archivseite beeinträchtigen. Testen Sie das dynamische Filtern (Auswahl einer Marke und Beobachten der Aktualisierung des Modell-Dropdowns) nach dem Wechsel des Themes.
Caching. Löschen Sie nach dem Wechsel des Themes oder dem Anpassen der Design-Einstellungen jeglichen aktiven Seitencache und Object-Cache, damit das aktualisierte CSS ausgeliefert wird.

Fehlerbehebung

Symptom	Wahrscheinliche Ursache	Was zu prüfen ist
Fahrzeugseiten zeigen keinen Theme-Header oder -Footer.	Ein Template-Override auf Theme-Ebene (`single-as24ci_car.php` oder `archive-as24ci_car.php`) existiert im Theme, ruft aber nicht `get_header()` / `get_footer()` auf.	Überprüfen Sie die Theme-Override-Datei. Wenn Sie diese nicht erstellt haben, prüfen Sie, ob das Theme mit einem kollidierenden Template dieses Namens ausgeliefert wird.
Archivseite gibt einen 404-Fehler zurück.	Sprechende Permalinks sind nicht aktiviert oder die Rewrite-Regeln wurden nach der Plugin-Aktivierung nicht neu generiert.	Gehen Sie zu Einstellungen → Permalinks und klicken Sie auf Änderungen speichern, um die Rewrite-Regeln neu zu generieren.
Horizontale Bildlaufleiste erscheint auf Fahrzeugseiten.	Der Wrapper `alignfull` überschreitet die Viewport-Breite aufgrund eines Theme- oder Browser-Standardproblems mit `overflow-x`.	Fügen Sie `overflow-x: hidden` zu `body` im Theme oder im Feld für benutzerdefiniertes CSS hinzu, oder reduzieren Sie die maximale Breite von `.as24ci-page`.
Plugin-Überschriften verwenden die falsche Schriftart oder -grösse.	Die globalen Überschriften-Regeln des Themes überschreiben die Plugin-Standardeinstellungen.	Verwenden Sie die Steuerelemente für Überschriften-Typografie in Car Market Hub → Design oder fügen Sie spezifische CSS-Regeln hinzu. Siehe Anleitung für benutzerdefiniertes CSS.
Filter- oder Galerie-JavaScript funktioniert nicht.	Ein jQuery-Konflikt mit dem Theme oder einem anderen Plugin.	Deaktivieren Sie andere Plugins nacheinander, um den Konflikt einzugrenzen. Überprüfen Sie die Browser-Konsole auf JavaScript-Fehler.
Plugin-Ausgabe sieht bei einem neuen Theme ungestylt aus.	Plugin-CSS-Dateien wurden vom Theme aus der Warteschlange entfernt (dequeued).	Prüfen Sie, ob das Theme `wp_dequeue_style()` für irgendwelche `as24ci-*`-Handles aufruft. Wenn ja, entfernen Sie diese Aufrufe oder verwenden Sie ein Child-Theme, um sie wiederherzustellen.