Documentation · Guide d'intégration

Intégration du thème

Ce document explique comment l'extension ADP Car Market Hub s'intègre au thème WordPress actif, ce qu'il convient de valider après l'installation ou un changement de thème, et comment résoudre les conflits de mise en page les plus courants.

Quand utiliser ce document

Utilisez ce document si vous êtes en train de :

Installer l'extension sur un site et valider que les pages de véhicules s'affichent correctement avec le thème actif.
Changer de thème sur un site existant et vérifier que l'affichage de l'extension n'est pas affecté.
Diagnostiquer des problèmes de mise en page sur l'archive des véhicules, la page d'un véhicule unique ou les pages de comparaison.
Un développeur intégrant un thème personnalisé avec l'extension.

Le public cible est un administrateur, développeur ou intégrateur de thèmes WordPress. Une familiarité avec les fichiers de thèmes WordPress et les outils de développement des navigateurs est utile pour les sections de dépannage.

Aperçu

L'extension enregistre le type de publication personnalisé (CPT) as24ci_car avec has_archive = true et un slug d'URL cars. Elle fournit ses propres modèles PHP pour l'archive des véhicules, la page de détail d'un véhicule unique et les pages de comparaison. Ces modèles appellent les fonctions standard WordPress get_header() et get_footer(), de sorte que la navigation, l'en-tête et le pied de page du thème actif sont toujours utilisés. L'extension contrôle uniquement la zone de contenu située entre l'en-tête et le pied de page.

Tout le contenu généré par l'extension est enveloppé dans un élément <div class="as24ci-page">. Sur les pages d'archive, l'élément porte également la classe as24ci-archive-page. Sur les pages de véhicule unique, il porte la classe as24ci-page-classic. Les deux portent la classe alignfull, qui signale aux thèmes basés sur des blocs et d'édition complète du site (FSE) que l'élément doit occuper toute la largeur de la fenêtre d'affichage.

L'extension met en file d'attente ses propres fichiers CSS (limités aux sélecteurs as24ci-page) et génère un bloc <style id="as24ci-dynamic-styles"> via wp_head avec une priorité de 99 contenant les valeurs de design définies dans Car Market Hub → Design. Les règles de typographie à l'intérieur de ce bloc sont toujours limitées à .as24ci-page-classic afin de ne jamais affecter les éléments du thème en dehors de l'enveloppe de l'extension.

Prérequis

Avant de valider l'intégration du thème :

L'extension est installée et activée, et au moins un véhicule a été importé. Voir le Guide d'installation.
Les permaliens personnalisés sont activés (Réglages → Permaliens → Titre de la publication ou toute option autre que "Simple"). Les permaliens simples (chaîne de requête) nécessitent une configuration supplémentaire pour que l'URL de l'archive des véhicules fonctionne correctement.
Vous avez accès au front-end WordPress dans un navigateur.

Liste de contrôle de validation étape par étape

Effectuez ces vérifications après l'installation initiale ou après avoir changé de thème actif.

Page d'archive des véhicules. Visitez l'URL de l'archive des véhicules (généralement /cars/). Confirmez que : - L'en-tête et le pied de page du thème sont visibles. - Les fiches de véhicules s'affichent dans la zone de contenu du thème. - Les filtres de recherche au-dessus de la liste sont visibles. - Aucun message d'erreur PHP ou code HTML non stylisé n'est visible.
Page de véhicule unique. Cliquez sur n'importe quelle page de détail de véhicule. Confirmez que : - L'en-tête et le pied de page du thème sont présents. - La galerie d'images du véhicule, le titre, le prix et le tableau des spécifications s'affichent correctement. - Le formulaire de contact est visible et fonctionnel.
Mise en page pleine largeur. L'enveloppe de l'extension porte la classe alignfull. Sur les thèmes basés sur des blocs et d'édition complète du site, cette classe permet généralement à l'élément de s'étendre jusqu'au bord de la fenêtre d'affichage. Vérifiez que le contenu de l'extension ne déborde pas et ne génère pas de barre de défilement horizontale.
Héritage de la typographie. Le CSS de l'extension utilise font-family: inherit et font-size: inherit par défaut pour le corps de texte à l'intérieur de .as24ci-page. Si le thème définit une police personnalisée sur body ou sur un élément parent, l'extension en héritera. Vérifiez que la police héritée est esthétique sur les pages de véhicules.
Vérification du responsive. Redimensionnez la fenêtre du navigateur aux points de rupture pour téléphones et tablettes. Confirmez que la barre latérale de filtrage, la grille de véhicules et la mise en page du véhicule unique sont lisibles sur les petits écrans.
Page de comparaison. Si la fonctionnalité de comparaison est activée (Car Market Hub → Réglages, ou dans l'assistant de configuration), vérifiez que la page de comparaison s'affiche correctement.

Référence de configuration

Les réglages qui affectent l'apparence du rendu de l'extension aux côtés du thème actif se trouvent dans Car Market Hub → Design.

Réglage	Effet
Disposition de l'archive	Détermine si les fiches de véhicules sont affichées sous forme de liste ou de grille sur l'archive et sur les pages utilisant le code court `[as24ci_archive]`.
Disposition du véhicule unique	Permet de basculer entre les modes de mise en page pour la page de détail d'un véhicule unique. Actuellement, les deux modes disponibles utilisent le modèle classique.
Couleurs Principale / Accentuation / Boutons	Remplace la palette de bleu par défaut de l'extension. Utilisez ici les couleurs de la marque du concessionnaire pour réduire les conflits avec la palette propre au thème.
Typographie (H1 / H2 / H3 / Corps)	Remplace la taille de police, la graisse, la hauteur de ligne et la transformation de texte pour les titres et le corps de texte à l'intérieur de `.as24ci-page-classic`. Ces remplacements n'affectent aucun élément en dehors de l'enveloppe de l'extension.
CSS personnalisé	CSS libre ajouté après toutes les autres règles dynamiques. Limité aux sélecteurs de l'extension. Voir le Guide du CSS personnalisé.

Notes opérationnelles

Les modèles du thème sont prioritaires. Si le thème actif (ou le thème enfant) contient un fichier nommé single-as24ci_car.php ou archive-as24ci_car.php dans son répertoire racine, WordPress charge ce fichier au lieu du modèle fourni avec l'extension. Ce comportement est prévu par conception et permet une personnalisation complète au niveau du thème. Voir le Guide de surcharge des modèles.
alignfull sur les thèmes basés sur des blocs. Les thèmes basés sur des blocs (Twenty Twenty-Three, Twenty Twenty-Four, etc.) affichent généralement les éléments alignés en pleine largeur d'un bord à l'autre de l'écran. Comme l'enveloppe de l'extension porte la classe alignfull, elle suit ce comportement. Si votre thème basé sur des blocs n'utilise pas la classe standard alignfull pour le contenu en pleine largeur, la mise en page peut sembler plus étroite que prévu.
Thèmes classiques avec des largeurs de contenu fixes. Certains thèmes classiques enveloppent tout le contenu dans un élément <div class="container"> ou similaire qui limite la largeur. L'enveloppe interne de l'extension a une largeur de 1440px par défaut, centrée avec margin: 0 auto. Sur les thèmes ayant un conteneur fixe plus étroit, le contenu de l'extension sera limité à la largeur du conteneur du thème. C'est généralement acceptable, mais cela peut donner un rendu différent de l'aperçu dans Car Market Hub → Design.
Conflits de styles de titres. Les thèmes qui ciblent globalement h1, h2 ou h3 peuvent affecter les titres à l'intérieur de l'enveloppe de l'extension. Si la taille ou la couleur des titres semble incorrecte sur les pages de véhicules, utilisez les commandes de remplacement par titre dans Car Market Hub → Design ou ajoutez une règle ciblée dans le champ CSS personnalisé. Voir le Guide du CSS personnalisé.
Conflits JavaScript. Les thèmes ou autres extensions qui chargent jQuery avec une priorité non standard, ou qui remplacent ou désactivent jQuery, peuvent affecter la dépendance du filtre marque-modèle de l'extension sur la page d'archive. Testez le filtrage dynamique (sélectionner une marque et observer la mise à jour de la liste déroulante des modèles) après avoir changé de thème.
Mise en cache. Après avoir changé de thème ou ajusté les réglages de Design, videz tout cache de page actif et cache d'objet afin que le CSS mis à jour soit correctement distribué.

Dépannage

Symptôme	Cause probable	Ce qu'il faut vérifier
Les pages de véhicules n'affichent ni en-tête ni pied de page du thème.	Une surcharge de modèle au niveau du thème (`single-as24ci_car.php` ou `archive-as24ci_car.php`) existe dans le thème mais n'appelle pas `get_header()` / `get_footer()`.	Examinez le fichier de surcharge du thème. Si vous ne l'avez pas créé, vérifiez si le thème est fourni avec un modèle conflictuel portant ce nom.
La page d'archive renvoie une erreur 404.	Les permaliens personnalisés ne sont pas activés, ou les règles de réécriture n'ont pas été régénérées après l'activation de l'extension.	Allez dans Réglages → Permaliens et cliquez sur Enregistrer les modifications pour régénérer les règles de réécriture.
Une barre de défilement horizontale apparaît sur les pages de véhicules.	L'enveloppe `alignfull` dépasse la largeur de la fenêtre d'affichage en raison d'un problème de `overflow-x` par défaut du thème ou du navigateur.	Ajoutez `overflow-x: hidden` à l'élément `body` dans le thème ou dans le champ CSS personnalisé, ou réduisez la largeur maximale de `.as24ci-page`.
Les titres de l'extension utilisent une police ou une taille incorrecte.	Les règles globales de titres du thème écrasent les valeurs par défaut de l'extension.	Utilisez les commandes de typographie des titres dans Car Market Hub → Design ou ajoutez des règles CSS ciblées. Voir le Guide du CSS personnalisé.
Les filtres ou le JavaScript de la galerie ne fonctionnent pas.	Un conflit jQuery avec le thème ou une autre extension.	Désactivez les autres extensions une par une pour isoler le conflit. Vérifiez la console du navigateur pour détecter d'éventuelles erreurs JavaScript.
Le rendu de l'extension apparaît non stylisé sur un nouveau thème.	Les fichiers CSS de l'extension ont été retirés de la file d'attente par le thème.	Vérifiez si le thème appelle `wp_dequeue_style()` pour des identifiants `as24ci-*`. Si c'est le cas, supprimez ces appels ou utilisez un thème enfant pour les rétablir.