Come creare personalizzati WordPress Stili per Sticky, Categoria, e Tag Post

WordPress consente di utilizzare un tag personalizzato per visualizzare gli stili personalizzati per i messaggi (post-it che rimangono nella parte superiore del vostro blog in ogni momento), categorie e tag sul tuo blog WordPress. Questo tag speciale simile al seguente:

<? Div <php post_class ()> id = "post - <? Php the_ID ();?>"?>

La parte di quel tag template che è così interessante è la sezione post_class (). Questo tag template dice WordPress per inserire specifico markup HTML nel modello che consente di utilizzare i CSS per rendere stili personalizzati per i post-it, categorie e tag.

Quando si pubblicano nuovi post al tuo blog, ci sono diverse opzioni è possibile impostare per i tuoi post del blog, come categorie, tag e impostazioni di pubblicazione. Una delle impostazioni è la Stick questo post per l'impostazione Front Page. È possibile lo stile personalizzato tali posti appiccicoso - non è così disordinato come sembra!

Ad esempio, un post potrebbe essere pubblicato con le seguenti opzioni impostate per esso:

  • Stick questo post al Front Page
  • Archiviato in una categoria chiamata WordPress
  • Contrassegnati con Notizie

Avendo il tag post_class () nel modello, WordPress inserisce markup HTML che permette di utilizzare i CSS per lo stile post-it, o posti assegnati ai tag o categorie specifiche, in modo diverso. WordPress inserito il seguente codice HTML per il posto:

<Div class = "post sticky categoria-wordpress tag-news">

Selettori CSS e il lavoro markup HTML insieme per creare lo stile e formato per il tema WordPress. Si può andare al file CSS e definire gli stili per i seguenti selettori CSS:

  • .post: utilizzare questo come lo stile generico per tutti i post sul tuo blog. Il CSS per questo tag è

    .post {background: #ffffff; border: 1px argento massiccio; padding: 10px;}

    Uno stile è creato per tutti i messaggi che hanno uno sfondo bianco con un bordo d'argento sottile e 10 pixel di spazio imbottitura tra il testo del messaggio e il bordo del post.

  • .sticky: Il concetto di attaccare un posto alla tua pagina è di richiamare l'attenzione su quel post, quindi si consiglia di utilizzare diversi stili CSS per farlo risaltare dal resto dei messaggi su blog:

    .sticky {background: #ffffff; border: 4px rosso fisso; padding: 10px;}

    Questo crea uno stile per tutti i post-it che si compone di uno sfondo bianco, un bordo rosso spesso, e 10 pixel di spazio imbottitura tra il testo del messaggio e il bordo del post.

  • .category-wordpress: Se il tuo blog molto su WordPress, i tuoi lettori possano apprezzare se si dà loro un segnale visivo su quale post sul tuo blog sono su questo argomento. È possibile farlo tramite CSS dicendo WordPress per visualizzare una piccola icona WordPress in alto a destra di tutti i tuoi post nella categoria WordPress:

    .category-wordpress {background: url (wordpress-icon.jpg) in alto a destra no-repeat; height: 100px; width: 100px;}

    Questo codice inserisce un elemento grafico - wordpress-icon.jpg - che è di 100 pixel in altezza e 100 pixel in larghezza in alto a destra di ogni post che avete assegnato alla categoria WordPress sul vostro blog.

  • .tag-notizia: è possibile lo stile tutti i messaggi contrassegnati con notizie allo stesso modo in cui hai dallo stile le categorie:

    .tag-news {background: # f2f2f2; border: 1px solid black; padding: 10px;}

    Questo stili CSS tutti gli articoli con tag con la notizia con uno sfondo grigio chiaro e un bordo nero sottile con 10 pixel di imbottitura tra il testo del messaggio e il bordo del post.

Utilizzando il tag post-class (), in combinazione con i CSS, per creare stili dinamici per i post sul tuo blog è facile e divertente!