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 können.

Wann dieses Dokument zu verwenden ist

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 standardmäßigen WordPress-Funktionen 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 gehüllt. 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 Block-basierten 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 außerhalb 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 außer „Einfach“). Einfache Permalinks (mit Query-Strings) erfordern zusätzliche Konfigurationen, damit die Fahrzeug-Archiv-URL korrekt funktioniert.
Sie haben Zugriff auf das WordPress-Frontend in einem Browser.

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-Ergebniskarten im Inhaltsbereich des Themes angezeigt werden. - Die Suchfilter über der Ergebnisliste 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äßig font-family: inherit und font-size: inherit für Fließtext innerhalb von .as24ci-page. Wenn das Theme eine benutzerdefinierte Schriftart auf body oder auf einem übergeordneten Element festlegt, erbt das Plugin diese. Überprüfen Sie, ob die geerbte Schriftart auf den Fahrzeugseiten ansprechend aussieht.
Responsive-Prüfung. Ändern Sie die Größe des Browserfensters auf die Breakpoints für Smartphones und Tablets. 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 Ersteinrichtungs-Assistenten), überprüfen Sie, ob die Vergleichsseite korrekt gerendert wird.

Konfigurations-Referenz

Die Einstellungen, die beeinflussen, wie die Plugin-Ausgabe zusammen mit dem aktiven Theme aussieht, befinden sich unter Car Market Hub → Design.

Einstellung	Auswirkung
Archiv-Layout	Steuert, ob Fahrzeugkarten als Liste oder Raster im 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äßige blaue Farbpalette des Plugins. Verwenden Sie hier die Markenfarben des Autohauses, um Konflikte mit der Farbpalette des Themes zu minimieren.
Typografie (H1 / H2 / H3 / Fließtext)	Überschreibt Schriftgröße, Schriftgewicht, Zeilenhöhe und Texttransformation für Überschriften und Fließtext innerhalb von `.as24ci-page-classic`. Diese Überschreibungen betreffen keine Elemente außerhalb 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.

Betriebshinweise

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 in der Regel von Rand zu Rand. Da der Plugin-Wrapper alignfull trägt, folgt er diesem Verhalten. Wenn Ihr Block-Theme nicht die standardmäßige Klasse 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 hüllen alle Inhalte in ein <div class="container">- oder ähnliches Element ein, das die Breite einschränkt. Der innere Wrapper des Plugins ist standardmäßig 1440px breit und mit margin: 0 auto zentriert. Bei Themes mit einem schmaleren festen Container wird der Plugin-Inhalt auf die Containerbreite des Themes beschränkt. Dies ist im Allgemeinen akzeptabel, kann jedoch dazu führen, dass das Design von der Vorschau in Car Market Hub → Design abweicht.
Konflikte bei Überschriften-Styles. Themes, die global auf h1, h2 oder h3 abzielen, können Überschriften innerhalb des Plugin-Wrappers beeinflussen. Wenn Überschriften-Größen oder -Farben auf den 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äßigen 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 die dynamische Filterung (Auswahl einer Marke und Beobachten der Aktualisierung des Modell-Dropdowns) nach einem Theme-Wechsel.
Caching. Löschen Sie nach dem Wechseln von Themes oder dem Anpassen von Design-Einstellungen alle aktiven Page-Caches und Object-Caches, 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 selbst 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öße.	Die globalen Überschriften-Regeln des Themes überschreiben die Plugin-Standardwerte.	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 zu isolieren. Ü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.