Come cambiare il lato della barra laterale in WordPress

Recentemente, uno dei nostri lettori ci ha chiesto come modificare il lato della barra laterale in un tema WordPress. Otteniamo questa domanda molto quando gli utenti vogliono cambiare la barra laterale da sinistra a destra o da destra a sinistra. In questo articolo, ti mostreremo come modificare il lato della barra laterale in WordPress.

Perché modificare il lato della barra laterale in WordPress

Gli esperti di usabilità ritengono che le persone eseguano la scansione delle pagine da sinistra a destra. Si consiglia di inserire il contenuto importante sulla sinistra in modo che gli utenti vedano prima i contenuti. Tuttavia, questo potrebbe essere invertito se il tuo sito è in una lingua scritta nella direzione da destra a sinistra.

Molti siti WordPress usano il tipico layout del blog con due colonne. Uno per il contenuto e l'altra per la barra laterale.

Se stai appena iniziando un sito web, dovresti selezionare un tema WordPress con la barra laterale nella tua posizione preferita.

Molti temi hanno opzioni per cambiare i lati della barra laterale dalle impostazioni del tema. Tuttavia se il tuo tema non ha questa opzione, dovrai modificare i lati della sidebar manualmente.

Detto questo, diamo un'occhiata a come è possibile modificare facilmente il lato della barra laterale in WordPress usando un po 'di CSS.

Cambiare Sidebar Side in WordPress usando CSS

Prima di apportare modifiche al tuo tema, dovresti innanzitutto considerare la creazione di un tema figlio. Utilizzando un tema figlio, sarai in grado di aggiornare il tema principale senza perdere le tue modifiche.

In secondo luogo, dovresti sempre creare un backup del tuo sito WordPress quando stai apportando modifiche dirette al tuo tema WordPress attivo.

È necessario un client FTP per modificare i file del tema. Guarda la nostra guida per principianti su come utilizzare FTP per caricare file su WordPress.

Collegati al tuo sito WordPress usando il client FTP e vai alla tua cartella dei temi. Di solito si trova in:

/ Yourwebsite / wp-content / themes / vostro-theme-cartella /

Ora è necessario scaricare e aprire il file del foglio di stile principale del tema in un editor di testo semplice come Blocco note. Questo file è chiamato style.css, e si trova nella directory principale del tuo tema.

In questo file, trova la classe CSS per la tua barra laterale. Di solito è .sidebar. In questo esempio, stiamo usando il tema predefinito di WordPress Twenty Fifteen che ha questo CSS per definire la barra laterale:

 .barra laterale float: sinistra; margine-destra: -100%; larghezza massima: 413 px; posizione: relativa; larghezza: 29,4118%;  

Come puoi vedere, fa fluttuare la barra laterale a sinistra con un margine di -100% a destra. Lo cambieremo in float right e margin-left in questo modo:

 .sidebar float: right; margin-left: -100%; larghezza massima: 413 px; posizione: relativa; larghezza: 29,4118%;  

Salva le tue modifiche e carica il file style.css sul tuo sito web usando il client FTP. Ora se visiti il ​​tuo sito web, sarà simile a questo:

Questo perché abbiamo spostato la barra laterale ma non abbiamo spostato l'area del contenuto. Twenty Fifteen usa questo CSS per definire la posizione dell'area del contenuto.

 .contenuto del sito display: block; fluttuare: a sinistra; margin-left: 29,4118%; larghezza: 70,5882%;  

Lo cambieremo per spostare il contenuto a destra. Come questo:

 .contenuto del sito display: block; fluttuare: a sinistra; margine-destra: 29,4118%; larghezza: 70,5882%;  

Questo è il modo in cui il nostro sito Web ha curato l'applicazione di questo CSS.

Come puoi vedere, abbiamo cambiato i lati sia per il contenuto che per le aree della barra laterale. Tuttavia c'è ancora un blocco bianco a sinistra.

Ti imbatterai in simili cose quando lavori con i CSS. Ci vorrà un po 'di lavoro investigativo per capire cosa sta causando questo e come regolarlo.

Usa lo strumento "Ispeziona" del tuo browser per guardare il codice sorgente. Puntare il mouse sulla regione interessata nel browser, fare clic con il tasto destro e selezionare Ispeziona dal menu del browser.

Spostando il mouse nella vista del codice sorgente, si noteranno le aree che influiscono evidenziate nell'anteprima dal vivo. Nel pannello di destra, sarai in grado di vedere il CSS usato per quell'elemento selezionato.

Abbiamo capito che questo CSS nel nostro foglio di stile ha bisogno di essere aggiustato.

 @media screen e (min-width: 59.6875em) body: before background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0,15); contenuto: ""; blocco di visualizzazione; altezza: 100%; altezza minima: 100%; posizione: fissa; inizio: 0; a sinistra: 0; larghezza: 29,4118%; z-index: 0; / * Risolto il bug che lampeggiava con lo scorrimento su Safari * / 

Questo codice CSS aggiunge un blocco di contenuto vuoto con larghezza del 29.4118% e larghezza del 100% in alto a sinistra. Ecco come lo sposteremo a destra.

 @media screen e (min-width: 59.6875em) body: before background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0,15); contenuto: ""; blocco di visualizzazione; altezza: 100%; altezza minima: 100%; posizione: fissa; inizio: 0; a destra: 0; larghezza: 29,4118%; z-index: 0; / * Risolto il bug che lampeggiava con lo scorrimento su Safari * / 

Dopo aver salvato e caricato di nuovo il foglio di stile sul server, questo è il modo in cui il nostro sito web è apparso.

Lavorare con i CSS può essere fonte di confusione per i principianti. Se non vuoi fare tutto il codice manuale, allora potresti provare CSS Hero. Ti permette di modificare i CSS senza scrivere alcun codice, e funziona con ogni tema WordPress.

Speriamo che questo articolo ti abbia aiutato a cambiare il lato della barra laterale in WordPress. Puoi anche vedere la nostra lista di 12 trucchi della barra laterale di WordPress per ottenere i massimi risultati.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.