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.
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 a vari elementi del tuo sito web. UN tema WordPress compatibile con lo standard deve avere il codice richiesto da WordPress per aggiungere classi CSS per corpo, post, 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.
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.
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
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
Secondo il tuo tema WordPress, troverai la funzione post_class() nel tuo file single.php o nei file template. Normalmente il codice sarà simile a questo:
" >
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
Per prima cosa, dobbiamo ottenere il numero di commenti e associare una classe.
Per ottenere il conteggio dei commenti devi aggiungere il seguente codice nei tuoi file tema WordPress. Questo codice entra nel ciclo WordPress, puoi aggiungerlo subito 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 usare altro plugin di WordPress per dare un aspetto moderno e per 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 è fantastico WordPress Plugin abbonamento premium e limitazione dei contenuti. Consente di gestire gli utenti in base al loro pacchetto (gratuito oa pagamento) creando livelli di accesso esclusivi.
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, Autorizza.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 WordPress Plugin premium che offre ai visitatori la possibilità di lasciare commenti sul tuo sito web. Con questa casella di commento moderna e non invadente, questo WordPress Plugin fornisce la funzione Like Box e Fan Page Wall che estenderà l'integrazione del tuo sito Web con il social network Facebook.
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.
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.
- Plugin 9 WordPress per gestire i pagamenti PayPal sul suo blog
- 10 plugin WordPress essenziali da installare sul tuo blog
- 10 plugin di WordPress da utilizzare per gestire la pubblicità
- Plugin 10 WordPress per creare attributi per i prodotti variabili
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.
...
