Come creare una pagina Sitemap HTML dinamica in Divi

Una pagina della mappa del sito HTML può essere utile per gli utenti che desiderano navigare nel tuo sito Divi da una vista panoramica. Fondamentalmente, una sitemap HTML (come suggerisce il nome) è una mappa del tuo sito in HTML. La pagina della mappa del sito di solito contiene un elenco organizzato di collegamenti a tutti i contenuti pertinenti in tutto il tuo sito. È possibile creare manualmente una pagina Sitemap HTML, ma è utile generare il contenuto della pagina Sitemap in modo dinamico in modo da non doversi preoccupare di aggiornamenti costanti.

In questo tutorial, ti mostreremo come creare un layout di pagina della mappa del sito HTML dinamico in Divi utilizzando una combinazione di Divi Design e il plug-in WP Sitemap Page. L'installazione è estremamente semplice e il risultato è sorprendentemente efficace.

Iniziamo.

Sbirciata

Scarica GRATUITAMENTE il layout di pagina della mappa del sito HTML

Per mettere le mani sul layout della pagina della mappa del sito da questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file JSON nel Divi Builder.

NOTA: questo layout si basa sugli shortcode utilizzati con il plug-in WP Sitemap Page. Se non hai il plugin attivo sul tuo sito, non vedrai il contenuto all'interno dei moduli.

Cosa ti serve per questo tutorial

Per questo tutorial, avrai bisogno di quanto segue:

1. Il tema Divi.
2. Contenuti WordPress. Per generare il contenuto della pagina della mappa del sito HTML, dovrai avere effettivamente pagine, post, categorie, prodotti, ecc. Sul tuo sito.
3. Il plugin WP Sitemap Page. È possibile accedervi dalla dashboard di WordPress che ti mostreremo come fare di seguito.

Passiamo al tutorial, vero?

Differenza tra sitemap XML e HTML

Se non conosci le mappe dei siti, ce ne sono fondamentalmente di due tipi: XML e HTML. Le sitemap XML sono generate specificamente per fornire ai motori di ricerca una mappa dettagliata del tuo sito. Per la maggior parte, le sitemap XML esistono esclusivamente per i motori di ricerca come Google per facilitare loro la scansione del tuo sito, il che ti aiuterà a migliorare il tuo posizionamento. Pertanto, i siti XML non sono per l'utente. È qui che entrano in gioco le mappe dei siti HTML. Le mappe dei siti HTML sono HTML effettivi incorporati (e PHP poiché utilizziamo Divi e WordPress) su una pagina della mappa del sito reale sul tuo sito web. L'idea è di generare un elenco organizzato di tutti i contenuti del sito web rilevanti (post, pagine, prodotti, categorie, ecc.) per l'utente in un unico posto conveniente. Fondamentalmente, una pagina della sitemap HTML è come un mega menu per l'intero sito.

Per maggiori informazioni sulle mappe del sito (come come creare una mappa del sito XML in WordPress), consulta il nostro post su come creare una mappa del sito per il tuo sito WordPress.

Configurazione del plugin

Per questo tutorial, utilizzeremo un plug-in WordPress GRATUITO ma efficace chiamato WP Sitemap Page che ci consentirà di visualizzare il contenuto della mappa del sito in modo dinamico all'interno di un modulo Divi tramite l'uso di shortcode.

Per scaricare il plug-in, vai alla dashboard di WordPress e vai a plug-in> Aggiungi nuovo. Quindi cerca il plug-in della pagina della mappa del sito wp utilizzando la barra di ricerca, quindi installa e attiva il plug-in.

Per aprire le impostazioni del plug-in della pagina Sitemap di WP, vai a Impostazioni > Pagina Sitemap di WP. Lì vedrai le impostazioni disponibili. Per questo tutorial, lasceremo le opzioni nella scheda delle impostazioni da sole, ma sentiti libero di visualizzarle in seguito.

Fare clic sulla scheda Come utilizzare per vedere tutti gli esempi di shortcode disponibili che possiamo utilizzare per visualizzare il contenuto della nostra pagina della mappa del sito. Quelli evidenziati sono quelli che utilizzeremo.

Creazione della pagina della Sitemap HTML in Divi

Una volta che i plugin sono stati impostati, siamo pronti per iniziare a progettare il layout della pagina Sitemap in Divi.

Creazione di una nuova pagina

Per iniziare, crea una nuova pagina, assegnale il titolo "Sitemap", quindi fai clic su "Usa Divi Builder".

Aggiunta del layout predefinito alla pagina

Sarai accolto con tre opzioni su come vuoi costruire la tua pagina. Seleziona "Scegli un layout predefinito".

Quindi cerca e trova il Pacchetto layout rivista e fai clic per utilizzare il layout di pagina delle categorie.

Eliminazione di elementi non necessari

Poiché utilizzeremo solo la sezione superiore di questo layout predefinito, una volta caricato il layout nella pagina, elimina tutte le sezioni sotto la prima sezione.

Quindi aggiungi una nuova sezione normale sotto la sezione superiore.

Aggiunta della riga n. 1 per la visualizzazione delle pagine

Per la nostra prima riga, aggiungeremo il contenuto della pagina della mappa del sito HTML che visualizzerà tutte le pagine del sito. Iniziamo aggiungendo una riga a una colonna.

Aggiunta di un modulo di testo per visualizzare le pagine

All'interno della riga, aggiungi un nuovo modulo di testo.

Quindi incolla quanto segue all'interno della casella del contenuto sotto la scheda di testo:

<h2>Pages</h2>

[wp_sitemap_page only="page" display_title="false"]

Impostazioni di progettazione del testo

Anche se la maggior parte del contenuto del testo è generata da uno shortcode, possiamo comunque progettare quegli elementi utilizzando le impostazioni di progettazione Divi integrate. Passa alla scheda Progettazione e aggiorna quanto segue:

• Carattere del testo: Montserrat
• Peso del carattere del testo: grassetto

Quindi seleziona la scheda delle impostazioni del collegamento e aggiorna quanto segue:

• Colore del testo del collegamento: #333333

Quindi, seleziona la scheda delle impostazioni dell'elenco non ordinato e aggiorna quanto segue:

• Colore testo elenco non ordinato: #c5e0dc
• Tipo di stile elenco non ordinato: quadrato
• Posizione stile elenco non ordinato: interno
• Rientro elemento elenco non ordinato: 5vw

NOTA: tutti gli stili di collegamento sovrascriveranno gli stili di elenco non ordinato. Ecco perché possiamo aggiungere questo colore del testo dell'elenco non ordinato e si applicherà solo ai piccoli puntini quadrati.

Aggiorna lo stile Titolo 2 come segue:

• Intestazione 2 Carattere: Montserrat
• Intestazione 2 Peso del carattere: grassetto
• Titolo 2: Dimensione testo: 3vw (desktop), 38px (tablet)

Quindi aggiorna la spaziatura con un margine negativo sinistro per tirare un po' il modulo a sinistra. Questo aggiungerà un bel design sovrapposto con la nostra intestazione e la nostra scatola-ombra.

Infine, aggiungi una classe CSS personalizzata al modulo in modo che possiamo indirizzarla in seguito con alcuni CSS personalizzati per suddividere il contenuto in colonne.

• Classe CSS: elenco-colonne

Impostazioni riga

Ora aggiorna le impostazioni della riga come segue:

• Margine: 5vw inferiore

• Box Shadow: vedi screenshot
• Posizione orizzontale dell'ombra della scatola: -5vw
• Posizione verticale dell'ombra del riquadro: 0px
• Colore ombra: #c5e0dc

Aggiunta della riga n. 2 per la visualizzazione di post e categorie

Duplica riga per crearne una nuova

Nella nostra seconda riga, visualizzeremo il contenuto della pagina della mappa del sito HTML per i nostri post sul blog. Per creare la seconda riga, duplica la riga appena creata contenente le nostre pagine.

Aggiorna il modulo di testo con shortcode per visualizzare le categorie

Quindi apri le impostazioni per il modulo di testo nella riga duplicata e sostituisci il contenuto con quanto segue:

<h2>Categories</h2>

[wp_sitemap_page only="category" display_title="false"]

Questo shortcode visualizzerà dinamicamente le categorie di post.

Modulo di testo duplicato per visualizzare un titolo separato per i post per categoria

Per visualizzare i post per categoria, duplica il modulo di testo contenente le categorie di post e aggiorna il contenuto con quanto segue:

<h2>Posts by Category</h2>

Duplica il modulo di testo e aggiorna il contenuto con lo shortcode per elencare i post per categoria

Metteremo il titolo in un modulo di testo separato rispetto allo shortcode per motivi di progettazione.

Duplica il modulo di testo che hai appena duplicato ancora una volta.

Quindi aggiorna il contenuto del nuovo modulo di testo duplicato con un nuovo shortcode come segue:

[wp_sitemap_page only="post" display_category_title_wording="false" display_title="false"]

Aggiorna il design del contenuto shortcode con Divi

Poiché questo shortcode ha un elenco nidificato, dovremo ottimizzarlo in modo leggermente diverso. Fare clic sulla scheda Progettazione e aggiornare quanto segue:

• Stile elenco non ordinato Posizione: esterno
• Rientro elemento elenco non ordinato: 0px

• Margine: 0px sinistro
• Imbottitura: 3.2vw sinistra

Quindi sostituire la classe CSS con la seguente:

• Classe CSS: colonne flessibili

Aggiunta della riga n. 3 per i prodotti

In questa terza e ultima riga, aggiungeremo il contenuto della pagina della mappa del sito HTML che mostra le categorie di prodotti e tutti i prodotti.

Duplica riga n. 1

Per iniziare, duplichiamo la riga superiore (quella che mostra le pagine).

Aggiorna le impostazioni del modulo di testo per visualizzare le categorie di prodotti

Quindi aggiorna le impostazioni del testo del duplicato con il seguente contenuto:

<h2>Product Categories</h2>

[wp_sitemap_page only="product_cat" display_title="false"]

Questo shortcode visualizzerà le categorie di prodotti.

Modulo di testo duplicato per visualizzare i prodotti

Quindi, duplica il modulo di testo appena creato.

Quindi aggiorna le impostazioni del testo duplicato con il seguente contenuto:

<h2>Products</h2>

[wp_sitemap_page only="product" display_title="false"]

Questo shortcode mostrerà tutti i prodotti in tutto il sito.

Aggiorna colore ombra casella riga

Per dare una piccola separazione tra le sezioni, possiamo modificare l'ombra della casella per la riga contenente le nostre categorie di prodotti e prodotti. Per fare ciò, aggiorna le impostazioni della riga come segue:

• Colore ombra: #ffc077

Aggiorna l'intestazione della pagina

Prima di dimenticare, salta alla sezione superiore e aggiorna i due moduli di testo con il testo "Sitemap". Questo darà un titolo accurato per la nostra pagina della mappa del sito.

Risultato finora

Ecco il risultato finora.

Questo design a una colonna sembra davvero fantastico così com'è, quindi sentiti libero di chiamarlo un giorno e rotolare con esso. Ma se vuoi potenziare il layout con più colonne, vedi sotto.

Aggiunta di più colonne al contenuto della pagina della mappa del sito con CSS personalizzato

In questo momento, il layout predefinito visualizzerà il contenuto della pagina della mappa del sito in una singola colonna. Se vuoi suddividerlo in più colonne su desktop e tablet, puoi aggiungere CSS personalizzati a un modulo di codice in Divi.

Innanzitutto, aggiungi il modulo di codice in fondo alla pagina (non importa dove).

Quindi incolla il seguente codice CSS nella casella del codice:

<style>
@media all and (min-width: 767px) {
  
  .flex-columns .wsp-posts-list {
    display:flex;
    flex-wrap: wrap;
  }
  .flex-columns .wsp-posts-list>li>ul {
    width: 300px;
    padding: 2% 10% 10% 5%;
  }
  .column-list .wsp-container {
    column-count: 3;
  }
  
}
</style>

Questo frammento CSS si applica solo a tablet di grandi dimensioni e superiori. Il codice ha come target i moduli di testo con le classi CSS che abbiamo aggiunto in precedenza. Per il modulo di testo con la classe “flex-columns”, lo shortcode che genera i post per categoria è diviso in colonne larghe 300px. I moduli di testo con la classe "colonna-elenco" divideranno il contenuto della pagina della mappa del sito shortcode in tre colonne.

Risultato finale

Guarda il risultato finale!

Altri modi per aggiungere contenuto alla mappa del sito

Possiamo anche aggiungere il contenuto della mappa del sito alla pagina della mappa del sito utilizzando i widget di WordPress, i moduli Divi e gli shortcode di WooCommerce.

Usa i widget di WordPress

WordPress ha alcuni widget standard che mostreranno cose come pagine, categorie e prodotti. Possono essere trovati nella dashboard di WordPress in Aspetto > Widget. Sentiti libero di sfruttare quelli che usano il modulo della barra laterale di Divi se hai bisogno di aggiungere qualcosa alla pagina della mappa del sito.

Usa il modulo Blog Divi

Il modulo blog di Divi è dotato di impostazioni integrate per la visualizzazione di post, pagine, progetti e prodotti. E se adotti un approccio minimalista al design, puoi ottenere un elenco personalizzabile piuttosto interessante per le pagine della mappa del sito.

Ad esempio, possiamo aggiungere un nuovo modulo blog e selezionare prodotti come tipo di post e assegnargli un numero di post abbastanza grande da visualizzare tutti i prodotti sul nostro sito.

Quindi possiamo nascondere tutti gli elementi tranne il collegamento/titolo del prodotto.

Possiamo fare lo stesso anche per le pagine. Basta selezionare le pagine per il tipo di post.

Shortcode del prodotto

Per i prodotti WooCommerce, possiamo utilizzare lo shortcode del prodotto WooCommerce per generare elenchi di prodotti o elenchi di categorie di prodotti. Lo shortcode del prodotto è molto robusto e versatile per visualizzare i prodotti come preferisci. Puoi persino utilizzare lo shortcode all'interno di un modulo Divi per sfruttare le impostazioni integrate.

Pensieri finali

L'utilizzo del plug-in WP Sitemap Page combinato con la potenza di Divi è una bella soluzione semplificata per generare una pagina Sitemap HTML dinamica per il tuo sito web. E puoi facilmente aggiungere contenuti più dinamici alla tua pagina della mappa del sito utilizzando qualsiasi combinazione di moduli Divi e shortcode WooCommerce. Sentiti libero di sperimentare e trovare il design giusto che si adatta alle tue esigenze.

Non vedo l'ora di sentirti nei commenti.

Saluti!