Vai al contenuto principale

Come dare uno stile unico per le diverse categorie di WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Vorresti classificare le categorie in modo diverso su WordPress?

La maggior parte dei temi WordPress utilizza lo stesso stile per tutte le pagine di archivio delle categorie. Tuttavia, se hai un sito web ricco di contenuti, puoi scegliere di visualizzare ciascuna categoria in modo diverso per massimizzarne il potenziale.

In questo tutorial, ti mostreremo come visualizzare le categorie in modo diverso sul tuo blog WordPress.

Senza ulteriori indugi vi invitiamo a scoprire la nostra lista. Ma prima, se non hai mai installato WordPress, scoprilo 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é dare uno stile diverso alle categorie su WordPress

Come abbiamo detto prima, la maggior parte dei temi WordPress utilizza lo stesso modello per ogni pagina di archivio di categoria. Questo perché gli sviluppatori di temi WordPress non sanno come utilizzerai le categorie sul tuo sito web.

Leggi anche: Come visualizzare i contenuti RSS solo per gli abbonati su WordPress

Tuttavia, se disponi di un sito Web ricco di contenuti, modificare il layout di una pagina di archivio categoria può avere un impatto notevole sul modo in cui gli utenti interagiscono con il contenuto di quella pagina.

Ad esempio, se gestisci un sito web di notizie o riviste, puoi visualizzare annunci locali nella categoria di notizie locali. È possibile visualizzare le informazioni meteorologiche, visualizzare le storie più popolari in questa categoria e così via.

Detto questo, vediamo come personalizzare facilmente le singole categorie su WordPress.

Come dare uno stile alle categorie

Esistono diversi modi per classificare le categorie su WordPress. Ti mostreremo due diversi metodi per dare alle categorie uno stile diverso e puoi scegliere quelli che si adattano meglio alle tue esigenze e al tuo livello di abilità.

Utilizzo di un modello di categoria singola su un tema WordPress

I temi di WordPress seguono una gerarchia di modelli standard. In base al nome del file modello, WordPress può scegliere automaticamente il modello giusto per visualizzare una pagina.

Ad esempio, cerca il file category.php per visualizzare le pagine di archivio delle categorie.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

WordPress ti consente anche di creare modelli per singole categorie. Supponiamo di voler classificare la categoria "Apple"A differenza. Puoi farlo aggiungendo un nuovo file modello al tuo tema WordPress e nominandolo categoria-apple.php.

Connettiti al tuo sito Web WordPress utilizzando un client FTP, quindi vai a / Wp-content / themes / il-tuo-theme / e crea un nuovo file chiamato category-apple.php. Ricordati di sostituire "Apple" con il nome della tua categoria.

Aggiungi una nuova categoria wordpress

È possibile utilizzare il file " category.php Del tuo tema WordPress come punto di partenza. Basta modificare e copiare tutto il suo contenuto. Ora rinomina il nuovo file in " categoria-apple.php E incolla il codice all'interno.

Quindi puoi iniziare ad apportare modifiche al tuo modello di categoria individuale. Puoi creare e utilizzare una barra laterale diversa per questa categoria, trasformarla in una pagina a larghezza intera, aggiungi un messaggio di benvenuto o qualunque cosa tu voglia.

Dai uno stile alle categorie usando il codice CSS

WordPress aggiunge automaticamente classi CSS a diversi elementi sul tuo sito Web. Questi includono sia la classe corporea che la classe di pubblicazione.

Ad esempio, se visualizzi una pagina di archivio di categorie, quindi utilizzi lo strumento Ispeziona, noterai le "categorie" delle classi CSS e il nome della categoria nel tag "corpo".

Tag di categoria wordpress per il corpo

Puoi usare questa classe CSS per ogni singola categoria diversa da aggiunta di CSS personalizzati.

Ecco un esempio di CSS che puoi utilizzare come punto di partenza.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

body.category-apple {background-color: #EEE; sfondo: url ( "http://example.com/wp-content/uploads/2017/background.jpg ') no-repeat fisso; color: #FFFFFF; } .category-mela .site {background: #232323; } .category-mela {color: # CCCCCC; }

Non dimenticare di cambiare il nome della categoria nella classe CSS con il nome della tua categoria.

Modifica di una categoria di codice css wordpress

Ora puoi aggiungere un codice CSS personalizzato a WordPress. Ma, se hai bisogno di una soluzione premium per riuscire ad aggiungere un codice CSS personalizzato, offriamo sotto 2 plugin WordPress premium che ti aiuteranno in questa attività.

1. Easy Custom JS e CSS 

Questo plugin premium per WordPress è un potente editor di codice CSS e Javascript che ti consente di aggiungerli a qualsiasi sezione del tuo sito web. Ti consente di mantenere le tue personalizzazioni anche dopo un importante aggiornamento al tuo tema WordPress. Plugin per wordpress di personalizzazione extra js e CSS personalizzato facile

Hai la possibilità di limitare il campo di utilizzo del tuo codice personalizzato. Ad esempio, puoi utilizzare il tuo codice solo per un articolo con il formato video.

Vedi i nostri articoli su Come richiedere l'accettazione delle condizioni d'uso su WordPress

Oppure puoi limitare il tuo codice a un tema WordPress specifico; Il che è utile se stai cambiando temi per il tuo blog WordPress.

Download | Demo | Web hosting

2. JavaScript e CSS personalizzati nelle pagine!

Grazie a questo plugin per WordPress, hai la possibilità di aggiungere Stili CSS e JavaScript personalizzato su pagine specifiche. Inoltre, consente di definire regole per più pagine. In questo modo, puoi avere stili predefiniti o unici per sezioni specifiche.

CSS javascript personalizzato nelle pagine plugin wordpress e1558356028853

Come qualsiasi altra funzionalità offerta da questo plugin di WordPress, puoi facilmente includere diversi script su diverse pagine del tuo sito web.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti permetterà di aggiungere codice CSS personalizzato su 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.

...  

Questo articolo contiene i commenti 2

  1. Salut!
    Per favore, vedi se puoi aiutarmi perché mi sto fumando la testa
    Sto facendo un negozio online con divi e woocommerce e ho un problema perché non riesco a personalizzare la pagina delle categorie.
    Passo il link per vedere:
    https://chachocarp.com/product-category/los-mas-vendidos
    Quello che voglio cambiare è:
    1. Ho 24 prodotti in questa categoria e invece di mostrarli su due pagine di 12 prodotti li mostra su tre pagine di 9, 9 e 6 ed è fatalmente chiaro.
    2. Non ho mantenuto la configurazione del passaggio del mouse sopra i prodotti. Vorrei che la trasparenza fosse blu e le lettere "visualizza il prodotto da naranaja" come nel modulo negozio della pagina principale.
    3. Vorrei che la barra laterale sinistra mostrasse tutte le categorie e le sottocategorie.
    Come ha fatto?
    Merci pour ton aiutante

    1. Ciao Miguel,

      Poni la domanda su un articolo riguardante WooCommerce o Divi. Ed è con piacere che ti risponderò. 😉

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
7 azioni
quota4
Tweet1
Enregistrer2