Uno dei problemi di layout più comuni che vediamo è quando la barra laterale scende sotto il contenuto invece di apparire accanto ad esso. Fa immediatamente sembrare un sito rotto e può confondere i visitatori.
Questo di solito accade dopo una modifica del tema, l'installazione di un plugin o una piccola modifica al codice: anche un tag di chiusura mancante può alterare il layout. L'abbiamo visto molte volte mentre aiutavamo gli utenti a risolvere i problemi dei loro temi.
La buona notizia è che è facile da risolvere una volta che sai dove cercare. Non devi essere uno sviluppatore per rintracciare il problema.
In questa guida, ti mostreremo le cause più probabili e ti guideremo attraverso semplici passaggi per ripristinare la tua barra laterale al suo posto.
Cosa causa l'errore della barra laterale di WordPress sotto il contenuto?
La causa più comune della barra laterale che appare sotto il contenuto è un errore HTML o CSS che interrompe il layout.
Ogni <div> in HTML deve essere correttamente chiuso. Se il template responsabile della visualizzazione della pagina ha un tag <div> non chiuso, questo interromperà il layout.
Allo stesso modo, un tag </div> di chiusura indesiderato o extra può anche influire sul layout e far scendere la barra laterale.
Oltre all'HTML, il CSS influisce anche sul design generale di ogni elemento sul tuo sito web WordPress. Viene utilizzato per definire la larghezza, l'allineamento e il float degli elementi nel tuo layout.
In parole povere, se la larghezza della tua area di contenuto è maggiore dello spazio disponibile, ciò costringerà la barra laterale a scendere.
Innanzitutto, dovrai scoprire quale codice specifico sta causando questo errore della barra laterale di WordPress.
Detto questo, diamo un'occhiata a come risolvere e correggere facilmente l'errore della barra laterale sotto il contenuto in WordPress. Puoi usare questi collegamenti rapidi per saltare a una soluzione di risoluzione dei problemi specifica:
- Annulla le modifiche recenti al tuo tema WordPress
- Svuota la cache di WordPress
- Escludi i plugin di WordPress
- Correggi i tag interrotti che rompono il layout
- Trova il CSS che sposta la barra laterale sotto il contenuto
- Cosa fare se vedi ancora la barra laterale sotto il contenuto
- Scopri altri modi per risolvere errori comuni di WordPress
1. Annulla le modifiche recenti al tuo tema WordPress
Di solito, il problema della barra laterale è causato da modifiche ai file del tuo tema WordPress.
Se hai apportato di recente modifiche al tuo tema WordPress o al tema figlio, esaminare tali modifiche sarà un modo rapido per correggere questo errore.
Puoi anche contattare direttamente lo sviluppatore del tuo tema per ottenere supporto. Per ulteriori informazioni, consulta il nostro tutorial su come chiedere correttamente supporto per WordPress e ottenerlo.
Se non riesci a capire quali modifiche dovrai annullare, continua a leggere e ti mostreremo altri modi per risolvere i problemi.
2. Svuota la cache di WordPress
Quando apporti modifiche che non appaiono subito, questo è spesso dovuto a problemi di cache.
È comune che i plugin di caching ti mostrino una versione precedente della stessa pagina. Svuotare la cache di WordPress e la cache del browser ti aiuterà a vedere le modifiche applicate al tuo sito web.
3. Escludi i plugin di WordPress
L'aspetto e lo stile del tuo sito WordPress sono controllati dal tema che stai utilizzando. Tuttavia, a volte i plugin di WordPress possono anche aggiungere il proprio HTML e CSS al tuo sito web.
Ad esempio, l'aggiunta di un modulo di contatto su una pagina o un popup lightbox caricherà CSS e HTML aggiuntivi.
Per assicurarti che il problema non sia causato da un plugin di WordPress, puoi disattivare temporaneamente tutti i plugin di WordPress sul tuo sito web.
Per fare ciò, vai semplicemente su Plugin » Plugin installati nella tua bacheca di amministrazione di WordPress e seleziona la casella accanto a ‘Plugin’ in cima all’elenco. Quindi, apri il menu a discesa, seleziona ‘Disattiva’ e fai clic su ‘Applica’.
Se il problema scompare, significa che un plugin stava causando il problema. Attiva semplicemente tutti i tuoi plugin di WordPress uno per uno, controllando il tuo sito web dopo ogni plugin per scoprire quale sta causando il problema.
Dopodiché, puoi contattare il supporto del plugin per trovare una soluzione e segnalare il problema.
Per una guida dettagliata, puoi consultare i nostri tutorial su come disattivare facilmente i plugin di WordPress e come disattivare i plugin quando non è possibile accedere all’area di amministrazione di WordPress.
4. Correggere i tag <div> non validi che rompono il layout
Come abbiamo detto in precedenza, i tag <div> non validi sono una delle cause comuni dello spostamento della barra laterale sotto il contenuto.
Se il problema è causato in una specifica area del tuo sito web, puoi controllare il template responsabile della visualizzazione di quel codice.
Ad esempio, se questo problema si verifica solo su singoli post, potresti voler controllare il template single.php. Per scoprire quale template esaminare, consulta il nostro foglio informativo completo sulla gerarchia dei template di WordPress.
Il modo più semplice per trovare e correggere rapidamente un elemento div non chiuso è utilizzare lo strumento di validazione W3C.
Puoi anche utilizzare lo strumento di ispezione o le app di editor di codice che ti aiutano a eseguire il debug del codice evidenziando i tag di inizio e fine degli elementi.
Ecco un esempio di evidenziazione dei tag di inizio e fine di un elemento:
Guardando il codice, devi assicurarti che ogni tag <div> che viene aperto abbia anche un tag di chiusura </div>.
Allo stesso modo, dovresti anche cercare un tag di chiusura </div> orfano che non abbia un tag di apertura <div> corrispondente.
Se hai trovato i tag HTML non validi, correggerli risolverà il problema della barra laterale che appare sotto il contenuto.
5. Trova il CSS che sposta la barra laterale sotto il contenuto
Il CSS controlla gli aspetti più importanti del design del tuo sito web. Il tuo tema WordPress utilizza il CSS per definire la larghezza del contenuto e delle aree della barra laterale all'interno di un layout a griglia.
Questo valore è in percentuale dell'area di visualizzazione disponibile. Su dispositivi mobili, il tuo tema sposterà automaticamente la barra laterale sotto il contenuto.
Per scoprire quale CSS sta causando il problema, puoi utilizzare lo strumento Ispeziona. Semplicemente spostando il tuo contenuto nel campo wrapper, nella sezione contenuto e nelle aree della barra laterale ti mostrerà la loro larghezza e altezza.
Ad esempio, se la tua area di contenuto è larga il 70% e l'area della barra laterale è il 33%, questa verrà automaticamente spostata verso il basso. Quando calcoli questi valori, potresti anche voler considerare lo spazio utilizzato dai valori di padding e margine in ciascuna sezione.
Cosa fare se vedi ancora la barra laterale sotto il contenuto
Se nessuno dei passaggi precedenti ha funzionato, non preoccuparti: ci sono ancora alcune cose che puoi provare.
Innanzitutto, ti consigliamo di consultare la nostra guida completa alla risoluzione dei problemi di WordPress. È un ottimo modo per escludere altri problemi nascosti che potrebbero influire sul tuo layout.
Puoi anche abilitare la modalità di debug in WordPress. Questo non risolverà direttamente l'errore, ma potrebbe mostrarti un errore PHP o di plugin che sta compromettendo il tuo layout.
Se la modalità di debug punta a un plugin specifico, prova a disattivarlo temporaneamente o a sostituirlo con un'alternativa che non influenzi il layout del tuo tema.
Scopri altri modi per risolvere errori comuni di WordPress
Stai riscontrando altri problemi sul tuo sito WordPress? Dai un'occhiata ai tutorial qui sotto:
- Come correggere l'errore JSON non valido in WordPress (Guida per principianti)
- Problemi comuni dell'editor a blocchi di WordPress e come risolverli
- Come risolvere l'errore HTTP durante il caricamento di immagini in WordPress
- Come risolvere il problema del pulsante Aggiungi media non funzionante in WordPress
- Come risolvere l'errore 'Un altro aggiornamento è attualmente in corso' in WordPress
- Come risolvere il problema delle immagini in evidenza che appaiono due volte nei post di WordPress
- Come risolvere il problema dell'editor del sito vuoto in WordPress (passo dopo passo)
Speriamo che questo articolo ti abbia aiutato a imparare come risolvere il problema della barra laterale di WordPress sotto il contenuto. Potresti anche voler leggere il nostro manuale definitivo sugli errori comuni di WordPress e il nostro articolo su come visualizzare barre laterali diverse per ogni post e pagina di WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Alessio
Grazie per aver condiviso, ha risolto il mio problema. Sono felice di vedere che non ero l'unico ad averlo riscontrato.
Supporto WPBeginner
You’re welcome, glad our guide was helpful
Amministratore
Gina Detwiler
Non sono sicuro di come trovare quell'elemento div. Puoi elaborare un po'? Ho avuto questo problema fin dall'inizio con il mio sito e non so come risolverlo.
Supporto WPBeginner
Dovresti dare un'occhiata al codice del tuo tema personalizzato in un editor di codice e questo dovrebbe aiutarti a trovare il div errato, potresti anche dare un'occhiata al tuo sito usando l'ispezione dell'elemento: https://014.leahstevensyj.workers.dev/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Amministratore
Shai
Grazie mille!
Mi hai fatto risparmiare un sacco di tempo nel cercare di risolverlo.
Come hai detto, avevo un elemento div in più chiuso
Dale Jennings
Sto cercando di mettere i miei post attuali a sinistra e i post recenti in una barra laterale destra e la barra laterale si trova in fondo alla pagina, inoltre è troppo larga, e non capisco di cosa stessi parlando dato che sono nuovo in questo. qual è una soluzione facile? O ce n'è una?
Ayla
Ho il problema che la mia barra laterale appare in fondo a ogni pagina. Non sono molto esperta in questo, quindi non ho fatto nulla di speciale se non trasferire il mio dominio da Google di recente. Ho costruito il sito in WordPress e non ho avuto problemi finché non ho cambiato tema. Ho provato le istruzioni sopra ma non sono riuscita a trovare nessuna di quelle cose.
Supporto WPBeginner
Ciao Ayla,
Prova a passare temporaneamente al tuo tema precedente o a un tema predefinito. Se questo risolve il problema, allora il problema è con il tuo tema. Prova a contattare lo sviluppatore del tema per vedere se possono aiutarti a risolverlo.
Amministratore
Jared H
Ho risolto il mio problema, grazie per aver pubblicato!
Dene
grazie ragazzi – questo post ha appena risolto il mio problema. Molto apprezzato
Donald Efiom
Ho lo stesso problema in questo momento e non riesco a trovare dove modificare l'HTML della pagina del negozio in cui visualizzo i prodotti utilizzando il plugin wcommerce. Quando ispeziono l'elemento nel mio browser, posso eseguire il debug dell'errore e correggerlo, ma nella mia directory principale effettiva, non riesco a trovare la pagina che contiene l'HTML della pagina del negozio di woocommerce che posso modificare. Aiuto per favore!
Maria Appleby
Per quanto mi sforzi, non riesco a risolvere il problema della mia barra laterale. Ho cercato blocchi aperti. Ho rimosso un post che era strano con l'HTML a causa della copia di contenuti. Ho provato un tema diverso. Ho tolto i miei widget (e poi ho provato ad aggiungerne uno per vedere cosa succedeva – il pulsante “segui blog” – ancora in fondo). Ho provato il validatore ma non capisco bene cosa mi sta dicendo. Quando ho inserito diversi URL di post, ho ottenuto gli stessi messaggi di errore. Mi dispiace sembrare così stupida… ho il blog da molto tempo, ma solo di recente ho iniziato ad aggiungere molti contenuti e non so ancora bene cosa sto facendo. La barra laterale è finita dal lato destro, in fondo al blog, molto di recente (negli ultimi due giorni). Puoi aiutarmi?
Supporto WPBeginner
Ciao Maria,
Sembra che tu stia usando un blog WordPress.com. Consulta la nostra guida sulla differenza tra WordPress.org self-hosted vs blog WordPress.com gratuito.
Amministratore
Sparsh Goyal
Ho lo stesso problema ma non riesco a risolverlo. Solo la mia home page ha questo problema. La pagina di tipo post e la pagina di tipo pagina funzionano bene. La barra laterale della mia home page va in alto invece di stare appena accanto al mio contenuto. Puoi controllare cosa sta andando storto nel mio sito web. Il mio sito è coasilat.com
Mustafa
Grazie. Il problema è risolto. era un elemento div extra. quando l'ho rimosso il problema è risolto.
Jan Reilink
Mi hai salvato la vita, grazie!
Asha Shendre
Ho avuto problemi tutto il giorno per questo.
La soluzione al problema l'ho trovata solo qui.
Grazie..
Grazie mille signore…
Harish
Grazie per l'aiuto
Sly
Ciao, sono un principiante. Non so NULLA di codice CSS o HTML, non modifico il mio tema, non ho un tema child. Aggiungo solo plugin per qualsiasi cosa mi serva fare. Sembra che io abbia il problema con TUTTE LE PAGINE DEI MIEI POST DEL BLOG. La barra laterale è sotto i post del blog. Non ho idea di cosa sia un div e come risolverlo. Cari professionisti, qual è il modo migliore per risolvere questo problema della barra laterale?
Tamara
Sono un principiante e nemmeno una programmatrice, ma sono riuscita a risolvere questo problema utilizzando il link W3 Validator in questa pagina. In cima al validator, sotto Opzioni, ho selezionato tutto il disponibile, quindi ho inserito l'indirizzo web del mio blog ed eseguito il validator. Sotto un elenco numerato di errori, c'era una visualizzazione molto dettagliata (e intimidatoria, ma tieni duro) degli errori così come si trovano nel testo del mio blog. Mi sono concentrata su quanto menzionato in questo articolo. Scorrendo il report dettagliato, ho trovato un errore evidenziato in rosso. Poiché il mio testo era visualizzato, potevo vedere che si trovava in uno dei miei post del blog subito dopo un link internet che avevo inserito. Sono andata a quel post del blog dalla dashboard di WordPress, ho cliccato su "modifica" e ho eliminato il link. (Tenendo premuto "elimina" per essere sicura di aver eliminato qualsiasi cosa invisibile potesse esserci e tornando indietro di un paio di lettere per lo stesso motivo. Ho quindi salvato il post del blog. La mia pagina web era sistemata! Ho poi rieditato il post del blog per riaggiungere il link e tutto è rimasto a posto. Problema risolto.
Lisa W Boyle
Grazie, sono riuscita a trovare e correggere immediatamente il problema basandomi sulle tue istruzioni. Ho scoperto di aver inserito un extra nel mio file single.php. Sei un salvavita, grazie mille!
Roney Oenophile
Non so cosa ho sbagliato, per favore aiutami. Stavo modificando del testo e ho accidentalmente premuto una combinazione di tasti che ha cambiato il modo in cui appariva. Alcuni pulsanti come schermo intero sono ora mancanti. E il pulsante di pubblicazione è spostato a sinistra. E l'immagine che ho caricato con il post è apparsa sopra il mio contenuto ed è molto grande ora. Non so come sia successo, non so qual è il problema. Non sono esperta di computer. Di solito scrivo post. Per favore aiutami. L'indirizzo della mia pagina è wordpress.com
Supporto WPBeginner
Si prega di consultare la nostra guida sulla differenza tra WordPress.org self-hosted vs blog WordPress.com gratuito. È necessario contattare il supporto di WordPress.com.
Amministratore
Danielle
Prima volta che mi occupo dell'aggiornamento del nostro sito… ho provato ad aggiornare la pagina principale statica e in qualche modo la mia barra laterale è finita in fondo. Non riesco a vedere alcun tag < o >… aiuto! Non voglio dire alla persona da cui ho preso il posto che ho già combinato un pasticcio se riesco a capire cosa ho fatto!
giovanni
Qualcuno può per favore aiutarmi, ho lo stesso problema…
questo è il mio header.php
Susan
Perfetto! Grazie! Sapevo che nel momento in cui hai detto div esattamente il post di chi nel mio blog della community doveva essere modificato!
Leah
This is happening to me right now every time I try out a new theme. Only one widget stays on the sidebar and the rest goes to the bottom of the content. But when I go back to my current theme, everything looks okay. I still can’t figure it out.
Sam
Ah! Mi hai appena risparmiato un sacco di tempo e frustrazione! Grazie
srik
Grazie mille per questo! È stato davvero utile
Amy
Grazie per questo post. Sto cercando di risolvere questo problema sul mio sito web in questo momento. Ho provato tutto ciò che è menzionato in questo post, ma ho ancora problemi. So un po' di siti web, ma sono completamente perso sul perché la mia barra di navigazione superiore vada su 2 righe e perché la mia barra laterale venga spinta in fondo. Il mio sito web non è ancora online, ma ecco il sito web
Grazie per qualsiasi aiuto!!
sean
Problema simile con il mio blog personalizzato all'interno del mio sito web; la barra laterale scivola sotto il piè di pagina se non c'è abbastanza contenuto per spingerla verso il basso.
Ho scoperto che rimuovere (o più sicuro, commentare) quanto segue ha risolto il problema:
Non so a cosa serva questo div vuoto e finora non ha influito negativamente sul blog. Un altro motivo più ovvio è dovuto ai div senza tag di chiusura – è un po' più difficile tenere traccia di tutti i tuoi tag div aperti/chiusi in WP poiché il footer e l'header vengono rimossi a differenza di un sito HTML standard.
Sean
Ehm, questo sta commentando il div vuoto "delimitatore" in fondo a varie pagine WP – è scomparso dal mio commento originale!
David Pomazzo
puoi dare un'occhiata al mio sito web e aiutarmi? http://www.americasfreedomfighters.com/ ho inserito google adsense e ora la mia barra laterale è spinta in fondo e ho una storia che va sulla barra laterale! grazie mille
Jen
THANK YOU! It was the content width that did it for me
Cecilia
Ho questo problema e non riesco a risolverlo (ci provo da diversi giorni)
Ecco il mio sito:
Per favore, ho davvero bisogno di aiuto. Grazie!!!! =)
Supporto WPBeginner
Probabilmente devi aggiungere clear prima di terminare il tuo div .hfeed come questo:
1-click Use in WordPress
Amministratore
Katie Clark
Ho questo problema e non so nemmeno da dove cominciare, dato che oggi non ho fatto alcuna modifica. Suggerimenti? Ecco il mio sito
http://clarkscondensed.com/
Staff editoriale
Il tuo sito sembra a posto in Chrome.
Amministratore
Doomish
Ottimo consiglio! Sarà molto utile, e il commento di Kathy è tipicamente quello che mi succede.
kathy
Poiché la maggior parte dei temi ha il CSS corretto, trovo che questo sia quasi sempre un problema di HTML chiuso in modo errato. Di solito si verifica su una pagina specifica, perché l'utente ha cercato di aggiungere il proprio HTML nell'editor dei post e le cose sono andate storte da lì. Errore semplice, ma può richiedere molto tempo per il debug.