CSS personalizzato e nascondimento di parti del sito web tramite CSS

Le richieste piuttosto comuni riguardano l'occultamento di parti specifiche del sito Web che non hanno il proprio pulsante di attivazione/disattivazione sul lato amministratore. Poiché non è possibile avere pulsanti di amministrazione del tema per ogni dettaglio sul frontend, puoi semplicemente nascondere le parti indesiderate utilizzando i CSS se non hai familiarità con la modifica dei codici HTML per rimuovere la parte.

Individua la parte da rimuovere

Puoi utilizzare gli strumenti di sviluppo del browser per individuare la parte esatta che desideri rimuovere.
Supponiamo che tu voglia rimuovere la parte con la data e l'autore sotto il post del blog, facendo clic con il pulsante destro del mouse su questa parte Ispeziona elemento e apri gli strumenti di sviluppo del browser:

Apri Strumenti per sviluppatori

Spostando il cursore del mouse sul codice sorgente puoi vedere la sezione evidenziata nella pagina che fa riferimento a una riga di codice sorgente sotto il cursore del mouse:

Trova elemento nella sorgente

In questo modo puoi trovare par che vorresti nascondere, ad esempio facendo riferimento agli screenshot sopra se è tutta la sezione con data e autore, o solo la sezione data, o solo la sezione autore.

Scrivi CSS per nascondere la sezione selezionata

Quando hai selezionato una parte che vuoi nascondere, usa l'attributo ID o CLASS del tag HTML selezionato nei tuoi stili CSS, oppure usa l'esatto selettore CSS usato dal tema per questo tag. Selettore CSS per il tag selezionato utilizzato dal tema che puoi individuare sul lato destro degli strumenti di sviluppo del browser.
Ad esempio, se hai deciso di eliminare tutta la parte con la data e l'autore, il selettore utilizzato dal tema è: .elm-posts-main .item .item-info

Selettori CSS per tag

Lo stile CSS per nascondere il tag HTML sul lato è "display: none;", puoi anche usarlo !importante istruzione per impedire un'ulteriore sovrascrittura dello stile CSS con un altro CSS.

Quindi lo stile CSS finale per nascondere la parte con la data e l'autore sarà:

.elm-posts-main .item .item-info { display: none !important; }

Aggiungi codice CSS personalizzato in Customizer

Puoi aggiungere il codice CSS personalizzato in Aspetto > Personalizza > CSS aggiuntivo

Dopo la pubblicazione puoi verificarlo sul tuo sito web:

stile_css_applicato