Nascondere la sidebar in mobile: WordPress

Oggi andremo a vedere come nascondere la sidebar in mobile version in WordPress

Buongiorno a tutti i lettori,
vi è mai capitato di visitare un sito web, da mobile, con scroll di pagine infinite anche quando l’articolo che dovete leggere è solo di pochissime righe? Questo accade, nella maggior parte dei casi, per “colpa” della sidebar che viene visualizzata in fondo alla pagina, dopo il vostro articolo.
Ma come nascondere sidebar in mobile in WordPress?

Come nascondere la sidebar Nella versione mobile di un sito web

Il modo più semplice è quello di usare i CSS per nascondere la sidebar in versione mobile, inserendo una query che vada a dire a WordPress, che quando un utente visualizza la pagina web tramite device piccoli, come smartphone o tablet, la sidebar debba essere nascosta (Attenzione, non rimossa, verrà comunque caricata insieme alla pagina)

Ma come fare tutto ciò?

Supponendo di avere una struttura della sidebar come nell’esempio seguente:

<aside class="col-md-4 sidebar">
    <h3>TITOLO DELLO WIDGET</h3>
    <p>Testo dello widget</p>
</aside>

Basterà aggiungere al CSS del vostro sito web la seguente stinga

@media (max-width:767px){
    aside.sidebar {
    display:none;
  }
}

Tecnicamente il codice dice:
per una larghezza massima del dispositivo (767px comprende sia tablet che smartphone), il selettore aside.sidebar non mostrarlo.

Ovviamente nei restati punti di interruzione la sidebar verrà mostrata.

Eliminare la sidebar dalla pagina per desktop e mobile

Se invece, il vostro intento è quello di andare completamente a rimuovere la sidebar dalle vostre pagine e/o post, possiamo agire andando a rimuovere un template tag dalla page.php o single.php del vostro tema wordpress.

Dando già per scontato che usiate un Theme Child (un tema figlio) che vi permette di apportare modifiche al tema primario senza andare ad inficiare in nessun modo sul corretto funzionamento, andate pure ad aprire la page.php e copiate in contenuto al suo interno.

Create una nuova pagina con il nome page-no-sidebar.php e inserite il contenuto al suo interno.

Adesso ad inizio della pagina, cercate la voce

<?php get_header();>

e andate a sostituirla con la seguente stringa

<?php
/*
*
Template Name: No sidebar
*/
get_header(); ?>

Adesso, nelle vostre pagine avrete la possibilità di utilizzare questo template, che vi permetterà di non visualizzare la sidebar ( come potete vedere dall’immagine sopra ) e con un pizzico di css potrete aggiustare la pagina web in full-width per farla diventare così:.

Basterà che dalla console di Chrome, firefox etc, andiate a trovare il container del contenuto principale e gli diate un valore

article {
    width:100%;
}

NB: non in tutti i temi il selettore sarà un “article”, per questo motivo dovrete scoprire il vostro dalla Console di Chrome.

Conclusioni

Che si mostri la sidebar in versione Desktop e si vada a nascondere solo in versione Mobile, o che si rimuova completamente, i passaggi da fare sono veramente semplici e alla portata di molti.

Se avete problemi con la procedura, o volete dei consigli, commentate pure il post.

#nascondere sidebar WordPress #rimuovere sidebar WordPress