Integrazione con il tema

Questo documento spiega come il plugin ADP Car Market Hub si integra con il tema WordPress attivo, cosa verificare dopo l'installazione o il cambio di tema e come risolvere i conflitti di layout più comuni.

Quando utilizzare questo documento

Utilizza questo documento se stai:

• Installando il plugin su un sito e verificando che le pagine dei veicoli vengano visualizzate correttamente con il tema attivo.
• Cambiando tema su un sito esistente e controllando che l'output del plugin non subisca variazioni.
• Diagnosticando problemi di layout sull'archivio veicoli, sulla pagina del singolo veicolo o sulle pagine di confronto.
• Sviluppando o integrando un tema personalizzato con il plugin.

Il pubblico di riferimento è un amministratore, sviluppatore o integratore di temi WordPress. La familiarità con i file dei temi WordPress e con gli strumenti di sviluppo del browser è utile per le sezioni di risoluzione dei problemi.

Panoramica

Il plugin registra il custom post type as24ci_car con has_archive = true e uno slug URL di cars. Fornisce i propri template PHP per l'archivio veicoli, il dettaglio del singolo veicolo e le pagine di confronto. Tali template richiamano le funzioni standard di WordPress get_header() e get_footer(), in modo che la navigazione, l'header e il footer del tema attivo vengano sempre utilizzati. Il plugin controlla solo l'area del contenuto compresa tra l'header e il footer.

Tutto il contenuto generato dal plugin è racchiuso in un elemento <div class="as24ci-page">. Nelle pagine di archivio l'elemento presenta anche la classe as24ci-archive-page. Nelle pagine del singolo veicolo presenta as24ci-page-classic. Entrambi presentano la classe alignfull, che segnala ai temi basati su blocchi e con modifica completa del sito (FSE) che l'elemento deve estendersi per l'intera larghezza della viewport.

Il plugin accoda i propri file CSS (limitati ai selettori as24ci-page) ed emette un blocco <style id="as24ci-dynamic-styles"> tramite wp_head con priorità 99 con i valori di design provenienti da Car Market Hub → Design. Le regole tipografiche all'interno di quel blocco sono sempre limitate a .as24ci-page-classic in modo da non influire mai sugli elementi del tema esterni al wrapper del plugin.

Requisiti preliminari

Prima di verificare l'integrazione con il tema:

• Il plugin deve essere installato e attivato e deve essere stato importato almeno un veicolo. Vedi la Guida all'installazione.
• I permalink personalizzati devono essere abilitati (Impostazioni → Permalink → Nome articolo o qualsiasi opzione diversa da "Semplice"). I permalink semplici (con query string) richiedono una configurazione aggiuntiva per far funzionare correttamente l'URL dell'archivio veicoli.
• Devi avere accesso al front-end di WordPress in un browser.

Lista di controllo per la verifica passo dopo passo

Esegui questi controlli dopo l'installazione iniziale o dopo aver modificato il tema attivo.

1. Pagina archivio veicoli. Visita l'URL dell'archivio veicoli (in genere /cars/). Conferma che: - L'header e il footer del tema siano visibili. - Le schede degli annunci dei veicoli siano visualizzate all'interno dell'area dei contenuti del tema. - I filtri di ricerca sopra l'elenco siano visibili. - Non siano visibili errori PHP o HTML privo di stile.
2. Pagina del singolo veicolo. Fai clic su una pagina di dettaglio di qualsiasi veicolo. Conferma che: - L'header e il footer del tema siano presenti. - La galleria di immagini del veicolo, il titolo, il prezzo e la tabella delle specifiche vengano visualizzati correttamente. - Il modulo di contatto sia visibile e funzionante.
3. Layout a larghezza intera. Il wrapper del plugin presenta la classe alignfull. Nei temi a blocchi e nei temi con modifica completa del sito, questa classe in genere fa sì che l'elemento si estenda fino al bordo della viewport. Verifica che il contenuto del plugin non trabocchi o non introduca una barra di scorrimento orizzontale.
4. Ereditarietà della tipografia. Il CSS del plugin utilizza font-family: inherit e font-size: inherit come valori predefiniti per il testo del corpo all'interno di .as24ci-page. Se il tema imposta un carattere personalizzato su body o su un elemento genitore, il plugin lo erediterà. Verifica che il carattere ereditato abbia un aspetto accettabile sulle pagine dei veicoli.
5. Verifica responsive. Ridimensiona la finestra del browser alle dimensioni di smartphone e tablet. Conferma che la barra laterale dei filtri, la griglia dei veicoli e il layout del singolo veicolo siano leggibili su schermi di larghezza ridotta.
6. Pagina di confronto. Se la funzionalità di confronto è abilitata (Car Market Hub → Impostazioni, o nella Configurazione guidata), verifica che la pagina di confronto venga visualizzata correttamente.

Riferimento di configurazione

Le impostazioni che influiscono sull'aspetto dell'output del plugin insieme al tema attivo si trovano in Car Market Hub → Design.

Note operative

• I template del tema hanno la priorità. Se il tema attivo (o il tema child) contiene un file denominato single-as24ci_car.php o archive-as24ci_car.php nella sua directory principale, WordPress carica quel file invece del template incluso nel plugin. Questo comportamento è intenzionale e consente una personalizzazione completa a livello di tema. Vedi la Guida alla sovrascrittura dei template.
• alignfull sui temi a blocchi. I temi a blocchi (Twenty Twenty-Three, Twenty Twenty-Four e simili) in genere visualizzano gli elementi allineati a larghezza intera da bordo a bordo. Poiché il wrapper del plugin presenta alignfull, segue questo comportamento. Se il tuo tema a blocchi non utilizza la classe standard alignfull per i contenuti a larghezza intera, il layout potrebbe apparire più stretto del previsto.
• Temi classici con larghezze di contenuto fisse. Alcuni temi classici racchiudono tutto il contenuto in un elemento <div class="container"> o simile che ne limita la larghezza. Il wrapper interno del plugin è largo 1440px per impostazione predefinita, centrato con margin: 0 auto. Nei temi con un contenitore fisso più stretto, il contenuto del plugin sarà limitato alla larghezza del contenitore del tema. Questo è generalmente accettabile, ma potrebbe far sì che il design appaia diverso dall'anteprima in Car Market Hub → Design.
• Stili di intestazione in conflitto. I temi che prendono come target h1, h2 o h3 a livello globale possono influire sulle intestazioni all'interno del wrapper del plugin. Se le dimensioni o i colori delle intestazioni appaiono errati nelle pagine dei veicoli, utilizza i controlli di sovrascrittura per singola intestazione in Car Market Hub → Design o aggiungi una regola limitata nel campo CSS personalizzato. Vedi la Guida al CSS personalizzato.
• Conflitti JavaScript. I temi o altri plugin che caricano jQuery con una priorità non standard, o che sostituiscono o disabilitano jQuery, possono influire sulla dipendenza del filtro marca-modello del plugin nella pagina di archivio. Verifica il filtraggio dinamico (selezionando una marca e osservando l'aggiornamento del menu a discesa del modello) dopo aver cambiato tema.
• Caching. Dopo aver modificato i temi o regolato le impostazioni di Design, svuota la cache della pagina attiva e la cache degli oggetti in modo che venga distribuito il CSS aggiornato.

Risoluzione dei problemi

Documenti correlati

• Guida alla sovrascrittura dei template
• Guida al CSS personalizzato
• Integrazione con i Page Builder
• Riferimento a design e stili
• Requisiti di PHP e database
• Requisiti di hosting