Stilizzare ogni post di WordPress in modo univoco è un modo intelligente per far risaltare il tuo sito web. Ti consente di evidenziare contenuti specifici e di abbinare il design all'atmosfera del tuo brand.
Alcuni siti utilizzano sfondi personalizzati per i post fissi o danno a ciascuna categoria il proprio stile. Queste piccole modifiche aiutano i tuoi contenuti a sembrare più organizzati e visivamente accattivanti.
Ma farlo può essere complicato. Senza gli strumenti e i passaggi giusti, potresti perdere ore in tentativi ed errori, o peggio, rompere accidentalmente il layout del tuo sito.
Abbiamo fatto la ricerca per te e trovato alcuni metodi semplici per stilizzare i post in modo diverso.
Utilizzando WPCode, il miglior plugin per snippet di codice per WordPress, puoi facilmente aggiungere stili personalizzati ai tuoi post e creare un look unico per ciascuno, senza sudare.
Nota: questo tutorial richiede di aggiungere CSS personalizzato in WordPress. Dovrai anche essere in grado di utilizzare lo strumento Inspect e avere alcune conoscenze CSS di base, quindi potrebbe non essere adatto a principianti assoluti.
Pro e contro dello stilizzare ogni post di WordPress in modo diverso
Se hai un blog WordPress, stilizzare ogni post in modo diverso può creare un'esperienza visiva unica in cui colori diversi sono associati a diverse categorie o tipi di contenuto.
Ad esempio, potresti usare un colore di sfondo diverso per le listicle, i post del blog e i tutorial del tuo sito web. Questo può catturare immediatamente l'attenzione degli utenti e aumentare l'engagement.
Tieni presente che farlo può anche comportare alcuni svantaggi importanti. Ad esempio, dovrai mantenere regolarmente il design di ogni post di WordPress, il che può richiedere molto tempo.
Inoltre, può fornire un'esperienza utente incoerente e non aiutare la tua identità di brand. Principalmente, è perché devi usare gli stessi colori in tutto il tuo sito web per stabilire l'immagine della tua attività.
Se sei un principiante, aggiungere CSS personalizzato per stilizzare ogni post può anche essere difficile. Detto questo, ti mostreremo come stilizzare facilmente ogni post di WordPress in modo diverso.
Ecco una rapida panoramica di tutti gli argomenti che tratteremo in questa guida:
- Come stilizzare singoli post in WordPress
- Come stilizzare post in una categoria specifica
- Come stilizzare post in modo diverso in base all'autore
- Come stilizzare post in base alla popolarità utilizzando il conteggio dei commenti
- Bonus: Visualizza una barra laterale diversa per ogni post in WordPress
Iniziamo.
Come stilizzare singoli post in WordPress
WordPress aggiunge classi CSS predefinite a vari elementi del tuo sito web. I temi utilizzano una funzione principale di WordPress chiamata post_class() per indicare a WordPress dove aggiungere quelle classi CSS predefinite per i post.
Se visiti il tuo sito web e utilizzi lo strumento Ispeziona nel tuo browser, sarai in grado di vedere quelle classi aggiunte per ogni post.
Di seguito sono riportate le classi CSS aggiunte per impostazione predefinita in base alla pagina visualizzata dall'utente:
- .post-id
- .post
- .attachment
- .sticky
- .hentry (pagine microformato hAtom)
- .category-ID
- .category-name
- .nome-tag
- .formato-{nome-formato}
- .tipo-{nome-tipo-post}
- .ha-miniature-post
Un esempio di output sarebbe questo:
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">
Puoi stilizzare ogni post di WordPress in modo diverso utilizzando queste rispettive classi CSS o ID. Per fare ciò, dovrai prima trovare l'ID del post per un singolo post.
Per questo, devi visitare la pagina Post » Tutti i Post dalla bacheca di WordPress e passare il mouse sopra un post.
Ora apparirà un URL di modifica del post nell'angolo in basso a sinistra dello schermo. Qui, puoi trovare l'ID del post guardando il numero tra 'post=' e '&action'.
Nell'esempio seguente, l'ID del post è 25.
Una volta fatto ciò, devi aggiungere la classe CSS insieme al codice personalizzato ai file del tuo tema o nel personalizzatore del tema. Tuttavia, ciò può essere rischioso e bloccare il tuo sito con un solo errore.
Ecco perché ti consigliamo invece di utilizzare WPCode.
Dopo un'attenta verifica, abbiamo riscontrato che è il modo più semplice e sicuro per aggiungere codice personalizzato al tuo sito. Per saperne di più sulla nostra esperienza con il plugin, consulta la nostra recensione di WPCode.
Innanzitutto, devi installare e attivare il plugin gratuito WPCode. Per i dettagli, consulta la nostra guida per principianti su come installare un plugin WordPress.
Nota: Se ti piace la versione gratuita, l'aggiornamento a WPCode Pro potrebbe portare la tua esperienza a un livello superiore. La versione premium sblocca l'accesso a oltre 100 snippet di codice verificati da esperti, logica condizionale intelligente, modifiche al codice pianificate e molto altro ancora.
Dopo l'attivazione, visita la pagina Code Snippets » + Add Snippet dalla dashboard di WordPress. Qui, fai clic sul pulsante ‘Use Snippet’ sotto l'opzione ‘Add Your Custom Code (New Snippet)’.
Questo ti porterà alla pagina ‘Crea Snippet Personalizzato’, dove puoi iniziare aggiungendo un nome per il tuo snippet di codice. Successivamente, selezioniamo ‘Snippet CSS’ come tipo di codice dal menu a discesa sulla destra.
Quindi, devi aggiungere la classe CSS e l'ID del tuo singolo post nella casella ‘Anteprima Codice’ in questo modo:
.post-13 { }
Successivamente, puoi aggiungere qualsiasi tipo di codice CSS personalizzato tra le parentesi per stilizzare il tuo post.
Ad esempio, se vuoi cambiare il colore di sfondo di un singolo post, puoi aggiungere il seguente codice CSS personalizzato. Tieni presente che devi sostituire l'ID del post in questo codice con il tuo ID. Dove questo è .post-13, il tuo potrebbe essere .post-23873.
Puoi anche cambiare il codice esadecimale per il colore di sfondo in qualsiasi colore di tua scelta:
.post-13 {
background-color: #FF0303;
color:#FFFFFF;
}
Successivamente, sposta l'interruttore ‘Inattivo’ in alto su ‘Attivo’ e fai clic sul pulsante ‘Salva Snippet’ per memorizzare le tue impostazioni.
Il codice CSS personalizzato verrà ora eseguito automaticamente sul tuo singolo post dopo l'attivazione dello snippet.
Vai avanti e visita il tuo post del blog di WordPress per vedere le modifiche in tempo reale.
Puoi anche aggiungere altri snippet di codice CSS personalizzato nella casella ‘Anteprima Codice’ per cambiare il colore di selezione del testo, il colore del testo, il colore dei link interni e molto altro ancora.
Per maggiori informazioni, puoi consultare la nostra guida per principianti su come personalizzare i colori in WordPress.
Come stilizzare post in una categoria specifica
Se vuoi stilizzare tutti i post che appartengono a una specifica categoria, puoi farlo anche con WPCode.
Devi visitare la pagina Snippet di codice » + Aggiungi snippet e selezionare l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.
Quindi, aggiungi un nome allo snippet di codice nella nuova pagina e scegli 'Snippet CSS' come tipo di codice. Dopodiché, digita la classe CSS di una categoria specifica nella casella di anteprima del codice, come questa, utilizzando lo slug del permalink della categoria dopo il trattino:
.category-books { }
Una volta fatto ciò, puoi aggiungere qualsiasi snippet CSS personalizzato nella casella e applicarlo a tutti i post in diverse categorie.
Ad esempio, se vuoi cambiare la dimensione e lo stile del font per tutti i post di una categoria specifica, puoi utilizzare il seguente snippet di codice. Ricorda solo di sostituire il nome della categoria in base al tuo sito web.
category-books {
font-size: 18px;
font-style: italic;
}
Successivamente, dovrai attivare l'interruttore 'Inattivo' su 'Attivo' in alto.
Dopodiché, fai clic sul pulsante 'Salva snippet' per memorizzare le tue impostazioni.
Ora puoi visitare tutti i post di una categoria specifica per vedere le modifiche applicate con il codice CSS.
Questo è come appariva sul nostro sito demo:
Come stilizzare post in modo diverso in base all'autore
Le classi CSS predefinite generate dalla funzione the_posts() non includono il nome dell'autore come classe CSS.
Se desideri personalizzare lo stile di ogni post in base all'autore, dovrai prima aggiungere il nome dell'autore come classe CSS.
Per fare ciò con WPCode, puoi selezionare l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.
Questo ti porterà alla pagina 'Crea snippet personalizzato', dove dovrai aggiungere un nome per lo snippet di codice e selezionare 'Snippet PHP' come tipo di codice.
Dopodiché, aggiungi semplicemente il seguente codice personalizzato nella casella 'Anteprima codice' e sostituisci 'user_nicename' con il nome dell'autore.
$author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author );
Infine, puoi attivare l'interruttore 'Inattivo' su 'Attivo' e fare clic sul pulsante 'Salva snippet' per memorizzare le tue impostazioni.
Dovrebbe apparire così:
Questo codice aggiungerà ora il nicename dell'utente come classe CSS. Nicename è un nome adatto all'URL utilizzato da WordPress. Non contiene spazi e tutti i caratteri sono in minuscolo, il che lo rende perfetto da usare come classe CSS.
Ora devi visitare nuovamente la pagina Snippet di codice » + Aggiungi snippet e scegliere l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.
Nella schermata successiva, vorrai aggiungere un nome per il tuo codice personalizzato e scegliere 'Snippet CSS' come tipo di codice dal menu a discesa sulla destra.
Puoi quindi aggiungere il nome specifico dell'autore nella casella 'Anteprima codice' in questo modo:
.sarahclare
Il passo successivo è aggiungere il codice CSS personalizzato per modificare il colore di sfondo, la dimensione del bordo, il colore del testo e altro ancora.
Puoi usare il codice seguente per cambiare il colore di sfondo dei post di un autore e aggiungere un bordo all'area del contenuto.
.sarahclare {
background-color:#EEE;
border:1px solid #CCC;
}
Una volta terminato, fai clic sul pulsante 'Salva snippet' in alto.
Quindi, non dimenticare di attivare l'interruttore 'Inattivo' su 'Attivo'.
Il codice personalizzato verrà eseguito automaticamente all'attivazione.
Ora puoi visitare il post di un autore specifico per vedere le modifiche.
Come stilizzare post in base alla popolarità utilizzando il conteggio dei commenti
Potresti aver visto siti con widget per i post più popolari, che a volte si basano sul numero di commenti. In questo esempio, ti mostreremo come stilizzare i post in modo diverso utilizzando il conteggio dei commenti.
Innanzitutto, dobbiamo ottenere il conteggio dei commenti e associargli una classe.
Per ottenere il conteggio dei commenti, dovrai aggiungere il seguente codice ai file del tuo tema, oppure puoi utilizzare un plugin per snippet di codice come WPCode.
Scegli semplicemente l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' per aprire la pagina 'Crea snippet personalizzato' in WPCode.
Qui, dovrai selezionare 'Snippet PHP' come 'Tipo di codice' e quindi copiare e incollare il seguente codice nella casella 'Anteprima codice':
<?php
$postid = get_the_ID();
$total_comment_count = wp_count_comments($postid);
$my_comment_count = $total_comment_count->approved;
if ($my_comment_count <10) {
$my_comment_count = 'new';
} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
$my_comment_count = 'emerging';
} elseif ($my_comment_count >= 20) {
$my_comment_count = 'popular';
}
?>
Dopodiché, facciamo clic sul pulsante 'Salva snippet' e attiviamo l'interruttore 'Inattivo' su 'Attivo' per salvare le tue impostazioni.
Questo codice controlla il numero di commenti per il post visualizzato e assegna loro un valore basato sul conteggio.
Ad esempio, i post con meno di 10 commenti ottengono una classe chiamata 'new', quelli con meno di 20 sono definiti 'emerging' e tutto ciò che supera i 20 commenti è 'popular'.
Ora, devi aggiungere il conteggio dei commenti come classe CSS alla funzione post_class. Per fare ciò, devi aprire nuovamente la pagina 'Crea snippet personalizzato' e scegliere l'opzione 'Snippet PHP' dal menu a discesa.
Quindi, puoi aggiungere il seguente codice personalizzato nella casella di anteprima:
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>
Dopodiché, fai semplicemente clic sul pulsante ‘Salva frammento’.
Quindi, puoi attivare l'interruttore ‘Inattivo’ su ‘Attivo’.
Questo aggiungerà classi CSS nuove, emergenti e popolari a tutti i post in base al numero di commenti che ogni post ha. Ora puoi aggiungere CSS personalizzato per stilizzare ogni post in base alla sua popolarità.
Ad esempio, puoi utilizzare il seguente codice per aggiungere diversi colori di bordo ai post in base al numero di commenti pubblicati su di essi:
.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}
Una volta terminato, non dimenticare di fare clic sul pulsante ‘Salva frammento’ per memorizzare le tue impostazioni.
Bonus: Visualizza una barra laterale diversa per ogni post in WordPress
Dopo aver stilizzato ogni post in modo diverso, potresti anche voler aggiungere una barra laterale unica per ogni post. Ciò ti consentirà di mostrare contenuti specifici relativi a quell'articolo che potrebbero interessare agli utenti.
Ad esempio, se hai un blog di viaggi e hai pubblicato un post sul blog sui luoghi da visitare in Florida, puoi creare una barra laterale specifica che mostri pacchetti di viaggio in Florida. In alternativa, potresti mostrare un modulo di registrazione per un viaggio in Florida che stai organizzando.
Puoi usare SeedProd, il miglior plugin per page builder per WordPress, per visualizzare una barra laterale diversa per ogni post.
Ha un'interfaccia drag-and-drop, oltre 320 modelli predefiniti e integrazioni con servizi di email marketing, il che lo rende un'ottima scelta.
Dopo l'attivazione del plugin, puoi selezionare una pagina personalizzata come design della tua landing page e quindi un layout con una barra laterale.
Dopodiché, puoi facilmente trascinare e rilasciare blocchi a tua scelta dalla colonna di sinistra, inclusi moduli di contatto, archivi, giveaway, caselle di ricerca, commenti e altro ancora.
Una volta terminato, fai semplicemente clic sui pulsanti ‘Salva’ e ‘Pubblica’ dal menu a discesa in alto.
Ora hai progettato con successo una barra laterale specifica per un post o una pagina di WordPress.
Per maggiori dettagli, non esitare a consultare il nostro tutorial su come visualizzare una barra laterale diversa per ogni post e pagina in WordPress.
Speriamo che questo articolo ti abbia aiutato a imparare come stilizzare ogni post di WordPress in modo diverso. Potresti anche voler consultare le nostre guide per principianti su come aggiungere una favicon e come aggiungere fiocchi di neve che cadono al tuo blog WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Rafael
Bel articolo. Immagino che potrei usare qualcosa del genere per controllare la categoria di un post e inserire un CSS personalizzato per cambiare lo stile di parte del sito web in base alla categoria, giusto?
Sto cercando di impostare colori diversi solo per lo sfondo del Titolo del Post per ogni Categoria in un Blog.
Kany
Ciao, ottimo articolo. Come personalizzare lo stile CSS delle ultime notizie del blog? Solo l'ultima, qualche idea? Grazie.
Supporto WPBeginner
Il tuo tema dovrebbe aggiungere qualcosa che possa essere selezionato tramite CSS, al momento non abbiamo un metodo consigliato per aggiungerlo.
Amministratore
Les
Ottimo articolo. Volevo impostare la dimensione del carattere predefinita per categoria e ho seguito le istruzioni aggiungendo il codice al file Style.css, ma quando ho aggiunto un nuovo post il carattere era della vecchia dimensione. Vedi il codice? Cosa mi manca?
/* Inizio Stili CSS Aggiuntivi */
.art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}
.desktop .art-nav-inner{width: 1200px!important;}
.category-firstg { font-size: 18px; font-style: bold; } /* Fine Stili CSS Aggiuntivi */
William D
Ottimo articolo, grazie mille. Il colore del pulsante "leggi di più"/colore del testo può essere modificato in modo simile? Qualcosa (probabilmente ho fatto io) ha cambiato i miei pulsanti in modo molto spiacevole e sto avendo un sacco di difficoltà a capire come renderli di nuovo piacevoli.
Grazie in anticipo per qualsiasi aiuto potrai fornire!
Matus
Ottimo tutorial. Spiegazione semplice e chiara.
Neon Emmanuel
Ciao, se includo questo in single.php, restituisce il titolo del post corrente, ma funziona bene in index.php, qualche suggerimento?
MayMyatKhine
Ciao, per favore inviami il nuovo evento da usare per wordpress.
marisa
Questo è un ottimo articolo ma ho problemi con il posizionamento
ID, ‘post-class’); ?>
Dove esattamente nel loop devo metterlo? Sto usando underscore.me con foundation 5 e la mia nuova classe non appare.
Alberto Hartzet
Perfetto!, grazie. E per il primo e "l'ultimo" post? qualche idea?
Nadeem
Grazie mille fratello..è molto utile
RW
un altro segnalibro! ottimo post! grazie...
Payal
Molto informativo, grazie. Ho salvato questa pagina nei preferiti.
Ho anche una domanda: cosa succede se volessi stilizzare il primo (più recente) post in modo diverso — in modo che il post visualizzato in cima alla mia pagina indice appaia in modo diverso?
James
Ehi, ci sto lottando in questo momento..
Il mio loop di post non sembra avere una funzione post_class, quindi non riesco a capire dove inserire il codice sopra...
Questo è il loop che uso per i post, dove dovrei inserire il codice sopra? O come potrei far funzionare i campi personalizzati con questo?
Staff editoriale
Devi aggiungere qualcosa di simile nel tuo loop di post:
1-click Use in WordPress
Amministratore
Jon Fuller
Ciao, sono abbastanza nuovo nella creazione di temi WordPress e sto cercando un modo per visualizzare ogni post in una sua casella separata da un margine superiore e inferiore. Potresti spiegare come è possibile?
Grazie
Staff editoriale
Per impostazione predefinita, ogni post è all'interno del proprio elemento div. Devi solo usare il CSS per aggiungere margini superiori e inferiori.
Amministratore
Shaun
Curioso, come si potrebbe applicare questo per aggiungere una classe CSS solo ai post che hanno lo stesso "valore meta" o "numero di valore meta"?
Grazie per l'ottimo tutorial, a proposito!
Saluti
Staff editoriale
Abbiamo mostrato come farlo con i campi personalizzati, ma questo viene fatto per chiave. Ma se hai la stessa chiave con più valori, allora dovresti usare la funzione get_post_custom_values.
Amministratore
Em
Ho appena trovato questo post ed è fantastico, chiaro, conciso e preciso, grazie mille
Jim
Vorrei fare qualcosa in cui il post uno ottiene la classe "1", il post due ottiene "2", il post tre ottiene "3", e poi ripete questo ordine, quindi il post quattro ottiene di nuovo "1".
Qualche consiglio? Si tratta solo di ripetere tre classi diverse ogni tre post.
Staff editoriale
Dovresti usare l'opzione super loop.
Amministratore
Brit
Quello che sto cercando di fare specificamente è solo fare in modo che quando qualcuno atterra sul mio blog, l'anteprima (che è solo un cerchio con il titolo del post) abbia un colore diverso SOLO per il post più recente. Sono perso su come farlo accadere. Tutto ciò che ho trovato è specifico per categoria o ordine. Pensieri?
Staff editoriale
Brit, dovresti usare l'ultimo metodo "Super Loop". Questo è probabilmente l'unico modo per farlo perché tutto ciò che faresti è sul primo post, aggiungi una classe unica come "first-post", e poi stilizzala usando il tuo file CSS.
Amministratore
Jayaseelan Arumugam
È un post molto bello e utile. Soprattutto mi piace il modo di stilizzare i post basati sui campi personalizzati. Grazie.
Kathleen
Thanks for this great article! It’s exactly what I searched for and so much helpful!
dina
Come posso aggiungere una classe univoca al 3°, 6°, 9° e 12° post in un super loop. Grazie!
vajrasar
Beh, questo è un ottimo pezzo. Ho capito quello che hai detto, ma puoi fare un po' di luce su come implementerò questo sul mio tema figlio News basato su Genesis, dato che devo fare tutto questo con function.php
Vorrei stilizzare i post specifici della categoria in modo diverso. Grazie mille per questo articolo. molto informativo.
Staff editoriale
Quindi, se stai usando solo il metodo della classe del post, allora Genesis ha il campo nelle sue impostazioni di layout per ogni post. Puoi inserire una classe personalizzata e stilizzarla in quel modo. Il resto può diventare piuttosto complicato a seconda di tutti gli hook e così via. Non pubblichiamo necessariamente articoli specifici di Genesis qui.
Amministratore
jim
Cosa intendi con index.php nel loop. quale index.php. Il mio non ha niente di simile al tuo. Questo è il decimo post che leggo dove nessuno ha spiegato questo concetto di base correttamente. E per quanto riguarda il CSS. Gli ultimi 10 post non l'hanno spiegato neanche quello. Internet sta peggiorando sempre di più.
Staff editoriale
Ciao Jim,
Ogni tema di WordPress fa le cose in modo diverso. Il concetto di loop è spiegato abbastanza bene nel WordPress Codex. Richiede una semplice ricerca su Google: Loop WordPress che ti porterà a: http://codex.wordpress.org/The_Loop
Poiché ogni tema varia, alcuni utilizzano un file loop.php separato, altri sono temi child che non hanno nemmeno file index.php. È davvero difficile spiegare tutti questi concetti. Quando inseriamo tutorial in una categoria di temi, ci aspettiamo che gli utenti abbiano una buona conoscenza di come funzionano i temi di WordPress (anche se non conosci PHP).
Amministratore
Haider E Karrar
Penso che dovresti usare invece i filtri in combinazione con i tag del template qui http://codex.wordpress.org/Conditional_Tags
Ad esempio
function my_post_css_filters($content) {
if(is_category(…))
return ” $content “;
else if (something else)
….
}
add_filter(‘the_content’, ‘my_post_css_filters’, 1) — (priorità 1, non sono sicuro di cos'altro possa influenzare).
Hossein
Ciao..
Come posso racchiudere ogni 4 post in un div?
gashface
Lasciato perdere, ho risolto, ma ORA non stilizza ogni post in modo diverso, li stilizza tutti secondo il primo autore di post che trova?
gashface
C'è un modo per specificare un tag come H2 che venga stilizzato dall'autore che sto cercando.username h2{} per esempio, ma non funziona?
gashface
Questo non mostra l'autore con me, solo uno spazio vuoto, ho incollato il tuo codice esatto, qualche idea? post creati dall'amministratore e sono privati, fa differenza?
wpbeginner
@gashface no, non fa differenza se il post è privato o pubblico... Se restituisce una pagina bianca, allora stai incollando il codice nel posto sbagliato.
gashface
Mi sono reso conto che era perché stavo mettendo il codice prima della chiamata al ciclo, pensavo intendessi prima dell'if have posts ecc.. quando invece deve andare dopo, grazie per l'avviso
KimeeDoherty
This was a little helpful, but I am still lost
Not sure how to include the loop file in order to override the template. You started the <div> tag but not ended them, what’s inside the div? I’m lost 
kristelvdakker
Grazie mille per questo post! È stato molto utile.
Stuart
Ciao, grazie per le idee – specialmente il super loop – sono lieto di averlo fatto funzionare sul mio sito.
Ma mi chiedo, sono un principiante assoluto di php, c'è un modo per adattare il codice in modo che ogni pagina successiva di post non riceva lo stile che i post 1, 2, 3 e 4 ottengono nella prima pagina.
In altre parole, voglio solo che i primi quattro post nella prima pagina abbiano un aspetto diverso dagli altri.
Salute,
Stu
Staff editoriale
Sì. Puoi usare il tag condizionale is_paged(), così appare solo nella prima pagina, ma non nelle altre. Puoi anche usare is_home()… così solo nella homepage.
Amministratore
Stuart
Fantastico – grazie. Sembra che is_paged() sia quello che fa per me – ma sfortunatamente, le mie capacità da novizio mi fanno faticare a capire come integrarlo nel codice.
Stuart
Alla fine ci sono riuscito…
Michael
Se volessi usare questo approccio per separare visivamente i post in base alla loro data di pubblicazione. Come faresti? Ad esempio: stilizzare i 5 post pubblicati il 1° con uno sfondo nero, e poi stilizzare i post pubblicati il 2° con uno sfondo rosso? Grazie in anticipo!
Staff editoriale
Il modo migliore per farlo è usare il metodo del superloop. Dove usi la variabile contatore per impostare i valori della classe del post.
Amministratore
Dale
Sto cercando di stilizzare il nome di ogni autore con un colore diverso sul nostro sito WordPress e ho seguito il tuo codice come segue:
Mentre questo codice sta in qualche modo funzionando sul mio tema WordPress, sta mettendo virgolette finali dopo class-2 ma prima del nome dell'autore, quindi la classe viene chiusa senza il nome al suo interno. L'ho scoperto solo mettendo quel php all'interno del body dove puoi vedere l'intera stringa.
Qualcuno ha idee sul perché sta succedendo questo?
Dale
Mi dispiace che abbia rimosso il php che ho pubblicato, ma ecco l'output della classe per stilizzare i miei post con il nome dell'autore. L'autore qui si chiama admin e, come puoi vedere, il tag di chiusura è prima del nome dell'autore admin.
“post-395 post type-post hentry category-uncategorized class-1 class-2″admin
Bec
Ottimo post! Queste informazioni sono fantastiche per aggiungere quelle funzionalità personalizzate extra speciali al tuo design.
Adam W. Warner
Davvero un ottimo post, tanto di cappello! Tuttavia, non ho potuto fare a meno di pensare a quando sarà il momento di aggiornare il tema su cui stai apportando tutte queste modifiche personalizzate. Cerco di usare il file functions ogni volta che è possibile per evitare sovrascritture.
Penserei che sarebbe meglio integrare queste modifiche al loop in una funzione. So che con i temi padre come Thematic, Hybrid, Genesis, ecc... è possibile (e consigliabile) filtrare il loop e quindi aggiungere queste modifiche.
@Ken – Forse il tuo plugin annullerebbe la necessità di qualsiasi funzione?
Comunque, solo la mia opinione e congratulazioni a Syed e al team per la vostra continua eccellenza su questo sito!
Azad Shaikh
Post molto utile davvero. Perché non pubblichi alcuni temi WordPress con le tue fantastiche idee e funzionalità. Sarebbe un grande successo.
Grazie!
Ken
Il tuo articolo mi ha dato alcune idee su come migliorare il mio plugin, grazie!
Ho appena scritto un plugin (Scripts n Styles) per aggiungere CSS direttamente all'elemento head dalla schermata di modifica del post/pagina. (Solo gli utenti amministratori possono farlo però.) Non è così robusto (o meglio, non affronta la stessa cosa) come la tua soluzione perché il CSS appare solo nella vista singola, non negli elenchi (archivi).
Sto pensando di aggiungere la funzionalità per includere un nome di classe in post_class, ma tramite una meta box nella schermata di amministrazione. Quindi, l'amministratore dovrebbe solo aggiungere il css al suo tema. (O, forse una schermata di impostazioni per facilitare questo?)
Comunque, il Super Loop sembra utile per il theming in generale, dovrò includerlo nel mio prossimo!
Connor Crosby
Wow, that is a great post! Perfect timing since I am making a new Wordpress theme