Vai al contenuto principale

Come dare uno stile unico per ogni voce su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

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

Ti sei mai imbattuto in un sito web che pubblica i suoi articoli in modo diverso sul blog?

Alcuni siti Web hanno articoli in evidenza evidenziati con uno sfondo personalizzato, mentre altri possono avere ogni post di categoria con un aspetto unico. Se hai sempre desiderato imparare a personalizzare ogni post di WordPress, sei nel posto giusto.Come dare uno stile unico ad ogni articolo su wordpress

In questo tutorial, ti mostreremo come modellare ogni articolo di WordPress in modo diverso.

Ma, 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.

osservazione: Questo tutorial richiede di aggiungere CSS personalizzati su WordPress. Sarà inoltre necessario utilizzare lo strumento Inspect. È richiesta una certa conoscenza di CSS e HTML.

Dare stile individuale sugli articoli WordPress

WordPress aggiunge classi CSS predefinite su vari elementi del tuo sito Web. Un tema WordPress standard compatibile deve avere il codice richiesto da WordPress per aggiungere classi CSS per corpo, articoli, pagine, widget, menu e altro.

Scopri anche la nostra guida su Permalink: Come personalizzare i tuoi link del blog

Una funzione principale di WordPress chiamata " post_class () Viene utilizzato dai temi per indicare a WordPress dove aggiungere queste classi CSS predefinite agli articoli.

Se visiti il ​​tuo sito web e utilizzi lo strumento Inspect sul tuo browser, sarai in grado di vedere queste classi aggiunte per ogni post.

Classi css wordpress dashboard

Ecco le classi CSS aggiunte per impostazione predefinita in base alla pagina visualizzata da un utente.

  • .post-id
  • .poster
  • .attachement
  • .gluant
  • .hentry
  • ID .category
  • .category-nome
  • .tag-nome
  • .format- {size-name}
  • {Post-nome-tipo .type-}
  • .has post-miniature
  • .post-password necessaria
  • .protected-by-a-parola

Un esempio di display sarebbe simile al seguente:

Puoi personalizzare ogni pubblicazione di WordPress in modo diverso usando le rispettive classi CSS.

Leggi anche: Come migliorare il tuo blog WordPress in questo fine settimana

Ad esempio, se si desidera modificare una singola pubblicazione, è possibile utilizzare la classe post-ID nel CSS personalizzato.

.post-412 {background-color: #FF0303; color: #FFFFFF; }

Ricordati di cambiare l'ID del post in modo che corrisponda al tuo ID del post.

Personalizza l'aspetto di un articolo su wordpress

Diamo un'occhiata a un altro esempio.

Questa volta, tratteremo tutti gli articoli pubblicati in una categoria specifica chiamata "notizie".

Scopri la nostra guida su Come aggiungere CSS personalizzati al tuo blog WordPress

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]

Possiamo farlo aggiungendo il seguente CSS personalizzato al nostro tema.

.category-news {font-size: 18px; font-style: italic; }

Questo CSS influenzerà tutti gli elementi nella categoria " attualità '.

La funzione post_class ()

Gli sviluppatori di temi utilizzano la funzione post_class () per dire a WordPress dove aggiungere le classi di post. Di solito è nel tag "articolo".

la funzione post_class () non solo carica le classi CSS generate da WordPress per impostazione predefinita, ma ti consente anche di aggiungere le tue classi.

Scopri Come proteggere i vostri raschietti contenuto del blog

A seconda del tema WordPress, troverai la funzione post_class () nel tuo file single.php o nei file modello. Normalmente, il codice sarà simile al seguente:

" >

Puoi aggiungere la tua classe CSS personalizzata con un attributo come questo:

" >

La classe post_class stamperà le rispettive classi CSS predefinite con la tua classe CSS personalizzata.

Se si desidera aggiungere più classi CSS, è possibile definirle come un array e utilizzarle nella funzione post-class ().

" >

Mostra articoli con uno stile diverso secondo gli autori

Le classi CSS predefinite generate dalla funzione posts_class non includono il nome dell'autore come classe CSS.

Se desideri personalizzare lo stile di ogni post in base all'autore, devi prima aggiungere il nome dell'autore come classe CSS.

Leggi anche: Come aggiungere animazioni CSS WordPress

Puoi farlo utilizzando il seguente snippet:

" >

Questo codice aggiungerà il nome utente come classe CSS. Il nome utente è un nome compatibile con l'URL utilizzato da WordPress. Non ha spazi e tutti i caratteri sono minuscoli, il che lo rende perfetto per l'uso come classe CSS.

Vedi anche la nostra guida su Come aggiungere CSS personalizzati al tuo blog WordPress

Il codice sopra verrà probabilmente visualizzato in questo modo:

Ora puoi usare ".peter" nel tuo CSS personalizzato per modificare tutti i post di quel particolare autore in modo che appaiano in modo diverso.

.peter {background-color: #EEE; border: solid 1px #ccc; }

Personalizza la pubblicazione di articoli in base ai commenti

Potresti aver visto siti Web con widget con articoli popolari che a volte sono classificati in base ai commenti. In questo esempio, ti mostreremo come creare uno stile diverso usando il numero di commenti.

Scopri la nostra 10 plugin WordPress premium per gestire i tuoi commenti

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]

Per prima cosa, dobbiamo ottenere il numero di commenti e associare una classe.

Per ottenere il numero di commenti, è necessario aggiungere il seguente codice nei file del tema WordPress. Questo codice entra nel ciclo di WordPress, puoi aggiungerlo appena prima del tag .

approvato; if ($ my_comment_count <10) {$ my_comment_count = 'new'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popular'; }?>

Questo codice controlla il numero di commenti per la pubblicazione pubblicata e assegna loro un valore basato sull'account. Ad esempio, i messaggi con meno di commenti 10 ottengono una classe chiamata " nuovi Vengono chiamati meno di 20 emergenti del mondo ", E tutto ciò che riguarda più dei commenti 20 è" popolare '.

Quindi è necessario aggiungere la classe CSS alla funzione post_class.

" >

Ciò aggiungerà le nuove classi CSS emergenti e popolari a tutti gli articoli in base al numero di commenti in ciascun post.

Ti invitiamo anche a leggere il nostro articolo su Plugin 6 WordPress per la firma di documenti online

Puoi anche aggiungere CSS personalizzati per pubblicare pubblicazioni in base alla popolarità:

.new {border: solid 1px #FFFF00;} .emerging {border: tratteggiato 1px #FF9933;} .popular {border: tratteggiato 1px #CC0000;}

Aggiungiamo solo i bordi, ma puoi aggiungere tutte le regole CSS che desideri.

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la connessione al tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Ultimate Membership Pro

Ultimate Membership Pro è un eccellente plugin premium per l'abbonamento e la limitazione dei contenuti. Consente agli utenti di essere gestiti secondo il loro piano (gratuito o a pagamento) creando livelli di accesso esclusivi.

Ultimo abbonamento pro wordpress plugin per wordpress

Sarà quindi possibile proteggere tutto il contenuto del tuo sito Web, o solo una parte di esso. Sarà ad esempio un corso, una lezione, una pagina, un prodotto, una categoria, un'immagine, ecc ...

Leggi anche il nostro articolo su 4 premium plugin WordPress per creare miniature

Le sue funzioni principali sono tra le altre: protezione dei contenuti, più livelli di accesso, supporto per più gateway di pagamento - PayPal, Authorize.net, Stripe, 2CheckOut, bonifico bancario, protezione parziale del contenuto, E altro ancora…

Download | Demo | Web hosting 

2. Come Slider per Facebook

Come Slider per Facebook è un plugin WordPress premium che offre ai visitatori l'opportunità di lasciare commenti sul tuo sito web. Con questa casella di commento moderna e non intrusiva, questo plug-in WordPress offre funzionalità Like Box e Fan Page Wall che estenderanno l'integrazione del tuo sito Web con il social network Facebook.Come slider per il plugin sociale di facebook wordpress wordpress

Il plugin offre anche varie funzionalità per estendere le capacità del tuo sito Web: ad esempio una sezione Mi piace ("Like Box") o una pagina dedicata ai fan ("Fan Page Wall).

Scopri anche Come caricare gradualmente i commenti di Facebook e Disqus

Non è necessario incorporare i pulsanti "Mi piace" e "Condividi" nei post o nelle pagine, perché il dispositivo di scorrimento dei commenti di Facebook li ha già e possono apparire su qualsiasi post o pagina. I visitatori troveranno il pulsante "Mi piace", il pulsante "Condividi" e la casella dei commenti sul dispositivo di scorrimento di Facebook. Ovviamente useranno i loro account Facebook.

Inoltre, puoi attivare, disattivare e impostare il tempo dell'effetto shake.

Download | Demo | Web hosting

3. Login Ninja

Questo plugin premium per WordPress ti consente di personalizzare la tua pagina di accesso. È più di una semplice personalizzazione il tuo modulo di accesso. È possibile personalizzare l'intera pagina, modificando il colore della pagina, aggiungendo un'immagine di sfondo, aggiungendo un logo e altro.Plugin di wordpress per l'accesso ninja

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]

Le altre sue caratteristiche sono: protezione dei moduli di login e registrazione con captcha, esclusione automatica e manuale degli IP che ti attaccano con la forza bruta, un registro dettagliato di tutte le attività di connessione, reindirizzamento utente in base a ruoli e nomi utente ricevere notifiche e-mail per tutti gli eventi di connessione, un'interfaccia grafica di facile utilizzo, documentazione dettagliata e altro.

Download | Demo | Web hosting

Risorse raccomandate

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

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti permetta di personalizzare la visualizzazione degli articoli sul tuo blog WordPress. Se hai dubbi o suggerimenti in quest'area, troviamoci dentro la sezione commenti da discutere.

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 o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

... 

Questo articolo contiene i commenti 0

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
2 azioni
quota
Tweet1
Enregistrer1