Recentemente uno dei nostri lettori ci ha chiesto come cambiare il lato della barra laterale di un tema WordPress?
Solitamente riceviamo questa domanda dagli utenti che vogliono cambiare la posizione della barra laterale da sinistra a destra o da destra a sinistra.
In questo tutorial, ti mostreremo come modificare la posizione della barra laterale su WordPress.
Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog
Quindi torniamo al perché siamo qui.
Perché cambiare la posizione della barra laterale su WordPress?
Gli esperti di usabilità ritengono che le persone scansionino le pagine da sinistra a destra. Consigliano di mettere i contenuti importanti a sinistra in modo che gli utenti vedano prima questo contenuto. Tuttavia, questo potrebbe essere invertito se il tuo sito web è in una lingua RTL (a destra a sinistra).
Scopri se se il tuo blog WordPress ha barre laterali
Molti siti Web WordPress utilizzano il tipico layout del blog con due colonne. Una per il contenuto e l'altra per la barra laterale.
Se non conosci i siti Web, devi selezionare un tema WordPress con una barra laterale nella posizione preferita.
molti Temi WordPress offrire opzioni per cambiare il lato della barra laterale nelle impostazioni della barra laterale. Tuttavia, se il tuo tema WordPress non ha questa opzione, dovrai cambiare manualmente il lato della barra laterale. Vai oltre scoprendo come rimuovere la barra laterale su WordPress
Detto questo, diamo un'occhiata al metodo che devi usare per cambiare facilmente il lato della barra laterale di WordPress usando CSS.
Modifica della barra laterale con CSS
Prima di apportare modifiche al tuo tema WordPress, dovresti prima considerare il creando un tema figlio. Utilizzando un tema figlio, sarai in grado di aggiornare il tema principale senza perdere le modifiche.
Scopri Come visualizzare una barra laterale diverso per ogni voce su WordPress
In secondo luogo, dovresti sempre creare un backup del tuo sito Web WordPress quando apporti modifiche in tempo reale al tema attivo.
Avrai bisogno di un client FTP per modificare i file del tema WordPress. Consulta il guida su come utilizzare FTP.
Accedi al tuo sito Web WordPress utilizzando il client FTP e vai alla cartella dei temi. Di solito si trova in:
/ Yoursite / wp-content / themes / vostro-theme-cartella /
Ora devi scaricare e aprire il file del foglio di stile principale del tuo tema WordPress in un editor di testo come Blocco note. Questo file è chiamato style.cssed è nella directory principale del tema WordPress.
Scopri come gestire i file e le cartelle di WordPress
In questo file, trova la classe CSS della barra laterale. Generalmente questa classe è " sidebar ". In questo esempio, utilizziamo il tema WordPress predefinito " venti quindici Chi ha questa classe per la barra laterale:
.sidebar {float: left; margine-destra: -100%; larghezza massima: 413px; posizione: relativa; larghezza: 29.4118%; }
Come puoi vedere la barra laterale galleggia a sinistra con un margine di -100%. Cambieremo il galleggiante a destra:
.sidebar {float: right; margine-sinistra: -100%; larghezza massima: 413px; posizione: relativa; larghezza: 29.4118%; }
Salvare le modifiche e caricare il file style.css sul sito Web utilizzando un client FTP. Ora, se visiti il tuo sito web, sarà simile al seguente:
In effetti, abbiamo spostato la barra laterale, ma non abbiamo spostato l'area del contenuto. " Venti Quindici Utilizza questo CSS per definire la posizione dell'area contenuto.
.site-content {display: block; galleggiante: a sinistra; margine sinistro: 29.4118%; larghezza: 70.5882%; }
Lo cambieremo per spostare il contenuto a destra. Come segue:
.site-content {display: block; galleggiante: a sinistra; margine destro: 29.4118%; larghezza: 70.5882%; }
Ecco come apparirà il tuo sito web dopo aver applicato questo codice CSS.
Come puoi vedere, abbiamo modificato la posizione dell'area contenuto e della barra laterale. Tuttavia, c'è ancora un blocco bianco sulla sinistra.
Vai oltre scoprendo come gestire i file e le cartelle di WordPress
Incontrerai spesso questi errori quando lavori con CSS. Ci vorrà un po 'di lavoro investigativo per capire cosa sta causando questo e come risolverlo.
Usa lo strumento "Inspector" del tuo browser per visualizzare il codice sorgente. Punta il mouse sulla regione interessata nel browser, fai clic con il tasto destro e seleziona "Inspector" dal menu del browser.
Mentre muovi il mouse nella vista del codice sorgente, noterai che le aree che influiscono sono evidenziate nell'anteprima dal vivo. Nel riquadro di destra, sarai in grado di vedere il CSS utilizzato per quell'elemento selezionato.
Scopri la nostra Plugin 5 WordPress per modificare visivamente i CSS sul tuo blog
Pertanto, il CSS corrispondente all'elemento evidenziato deve essere riadattato.
@media screen e (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); contento: ""; display: blocco; altezza: 100%; altezza minima: 100%; posizione: fissa; in alto: 0; a sinistra: 0; larghezza: 29.4118%; indice z: 0; / * Correzione del bug lampeggiante con scorrimento su Safari * /}
Questo codice CSS aggiunge un blocco vuoto di 29,4118% di larghezza e una larghezza di 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); contento: ""; display: blocco; altezza: 100%; altezza minima: 100%; posizione: fissa; in alto: 0; a destra: 0; larghezza: 29.4118%; indice z: 0; / * Correzione del bug lampeggiante con scorrimento su Safari * /}
Dopo aver salvato e caricato il foglio di stile sul server, ecco come apparirà il tuo sito web.
Lavorare con i CSS può essere fonte di confusione per i principianti. Se non si desidera eseguire tutto il lavoro manuale, è possibile provare Plugin per WordPress CSS Hero. Ti consente di modificare CSS senza scrivere codice e funziona con tutti i temi WordPress.
Scopri anche alcuni plugin WordPress premium
Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.
Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.
1. Zxeion
Zxeion è un potente WordPress Plugin premium responsabile del miglioramento della sicurezza del tuo sito web. Questo plugin contiene una raccolta di strumenti di protezione e sicurezza che proteggeranno il tuo sito Web da possibili attacchi.
Il suo sistema di protezione in tempo reale ti aiuterà a identificare le minacce al tuo sito Web e a bloccarle, senza che tu debba fare nulla.
Scopri anche il nostro 7 plugin per potenziare le barre laterali su WordPress
Le sue caratteristiche sono: protezione in tempo reale, eccellente assistenza clienti, aggiornamenti regolari, blocco degli indirizzi IP, documentazione eccellente, interfaccia moderna e professionale, assistenza clienti dedicata e altro
Download | Demo | Web hosting
2. Slaido
Slaido è un WordPress Plugin premium che ti consente di scegliere tra quasi 320 modelli di slider reattivi e importarne uno nel tuo sito Web in pochi clic. È un pacchetto completo di modelli, perfetto per Slider Revolution. Quindi dovrai prima installarlo per utilizzarlo appieno WordPress Plugin
Le sue caratteristiche principali sono: un layout reattivo dei suoi cursori, la facilità di importare o esportare i cursori, aggiornamenti regolari, assistenza clienti disponibile 24 ore su 7, XNUMX giorni su XNUMX, animazioni fluide e molto interessanti, la disponibilità di tutorial video per un avvio rapido, supporto per Google Fonts e molti altri.
Download | Demo | Web hosting
3. Modulo di contatto
Contact Us Form è un plug-in WordPress reattivo premium e uno strumento semplice ma ricco di opzioni di personalizzazione che ti consente di visualizzare un modulo chiaro e incoraggiante, sul quale i tuoi visitatori possono contattarti lasciando il loro messaggio.
Sarai in grado di definire i campi necessari, scegliere il layout migliore dei campi e personalizzarlo completamente per incoraggiare i tuoi clienti o visitatori a lasciare i loro suggerimenti o messaggi.
Ti invitiamo anche a leggere: Plugin 10 WordPress per creare e gestire un sito web di ristoranti
Basta impostare l'indirizzo e-mail in cui si desidera ricevere i messaggi e utilizzarlo per far crescere la propria attività nella direzione più redditizia.
Download | Demo | Web hosting
Risorse raccomandate
Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.
- Come trovare l'URL di accesso del tuo blog WordPress
- Come creare una zona di supereroi con testo animato
- Come personalizzare il CSS del tuo sito Web WordPress
- Come aggiungere categorie al menu del vostro blog WordPress
Conclusione
Ecco! Questo è tutto per questo tutorial. Speriamo che ti aiuti a cambiare il lato della barra laterale del tuo blog WordPress. Non esitate a condividi questo articolo con i tuoi amici sui tuoi social network preferiti.
Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.
Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.
...
