Tunnisteiden tyylisuunnittelu WordPressissä

WordPress antaa sinun lajitella sisältöä taksonomian mukaan. Oletuksena se sisältää luokkia ja tarroja. Vaikka luokkia voidaan käyttää lajittelemaan sisältöä eri osioissa, tunnisteita voidaan käyttää lajittelemaan sisältöä tarkempiin aiheisiin. Voit näyttää sivustossasi käytettävät tunnisteet tunnistepilvessä tai luettelomuodossa. Tässä artikkelissa näytetään, kuinka WordPress-tunnisteet suunnitellaan.

Näytä kaikki tunnisteet, joissa on WordPress-viestien lukumäärä

Jotkut suositut sivustot näyttävät suosituimmat tunnisteet teemoina tiedostosivulla tai alatunnisteella. Näin voit näyttää kaikki viestitunnisteesi, viestimäärän kanssa ja käyttämättä tunnistepilviä.

Ensimmäinen tehtävä on kopioida ja liittää tämä koodi teema- tai sivukohtaisen laajennuksen function.php-tiedostoon.

toiminto wpb_tags () {
$ wpbtags = get_tags ();
foreach ($ wpbtags kuin $ tag) {
$ merkkijono. = ‘Term_id).’ “>”. $ tag-> nimi. “$ Tag-> count. “. “N”;
}
palauta $ merkkijono;
}
add_shortcode (“wpbtags”, “wpb_tags”);

Tämä koodi näyttää vain kaikki tunnisteet ja vieressä olevien viestimäärien. Jotta se voidaan näyttää tiedossivulla tai widgetissä, sinun on kuitenkin käytettävä tätä lyhyttä koodia:

[wpbtags]

Tämän koodin käyttäminen näyttää vain tunnistelinkit ja niiden vieressä olevien viestimäärien. Se ei tee siitä näyttämään hyvältä. Lisäämme jonkin verran CSS: ää, jotta se olisi kaunis. Kopioi ja liitä tämä CSS teeman tyylisivulle.

.tagbox {
taustaväri: #eee;
reuna: 1px kiinteä #ccc;
marginaali: 0px 10px 10px 0px;
linjan korkeus: 200%;
täyttö: 2px 0 2px 2px;

}
.taglink {
täyttö: 2px;
}

.tagbox a, .tagbox a: vieraili, .tagbox a: aktiivinen {
tekstin sisustus: ei mitään;
}

.tagount {
taustaväri: vihreä;
Valkoinen väri;
asema: suhteellinen;
täyttö: 2px;
}

Muokkaa CSS: ää tarpeidesi mukaan. Näin näytti esittelysivumme:

Näytä WordPress-viestien vastakoodit

Tyylitunnisteet metatiedoissa jälkeen

Jotkut WordPress-teemat näyttävät tunnisteet erittäin hyvin postien metatietotiedoissa postituksen päiväyksen, kirjoittajan ja muiden metallisinkkien kanssa. Jotkut teemat eivät kuitenkaan välttämättä suunnittele niitä ollenkaan, tai haluat ehkä suunnitella ne eri tavalla.

Katsotaan kuinka voimme suunnitella tag-linkit WordPress-viestin alle.

Ensin on löydettävä CSS-luokka, jota WordPress-teema käyttää tunnisteiden näyttämiseen. Voit tehdä tämän napsauttamalla hiiren kakkospainikkeella tarroja ja valitsemalla tarkasta kohteen selainvalikosta.

Tämä jakaa selaimen näytön ja näyttää kehittäjätyökalurivin verkkosivun alla. Kehittäjän työkalupaikassa voit nähdä CSS-luokan, jota WordPress-teema käyttää tunnisteiden näyttämiseen.

Etsi tunnisteessa teeman käyttämä css-luokka

Yllä olevassa kuvakaappauksessa voit nähdä, että teema käyttää termejä CSS-luokalle. Käytämme nyt tätä luokkaa teemassamme tai lapsiteematyylisivulla korvaamaan CSS-oletusteeman.

.terms a, .terms a: vieraillut, .terms a: aktiivinen {
tausta: #eee;
reuna: 1px kiinteä #ccc;
reunasäde: 5 pikseliä;
tekstin sisustus: ei mitään;
täyttö: 3px;
marginaali: 3px;
tekstin muuntaminen: isot kirjaimet;
}

.terms to: hover {
tausta: # a8281a;
väri: #FFF;
}

Muokkaa CSS: ää vastaamaan teemavärejä. Tätä näyttivät näyttelysivultamme:

CSS-tyyli muuttui WordPress-viestien tunnisteille

Saatat huomata eron kahden kuvakaappauksen välillä CSS-muutosten lisäksi, muutimme myös tunnisteiksi Tagged ja poistimme pilkut tunnisteiden välillä. Kuinka teimme sen

Muokkaamme merkintöjä (); Mallitunniste single.php-tiedostossamme:

Jos haluat rajoittaa sanottujen tarrojen kokonaismäärää 5 Tai jotain muuta, lue tämä artikkeli siitä, kuinka rajoitettu määrä tageja näytetään julkaisemisen jälkeen.

Toivomme, että tämä artikkeli auttoi sinua suunnittelemaan WordPress-tunnisteita. Kutsun sinua kokeilemaan CSS: ää, kunnes saat halutun tuloksen.

Tilaa kanavasi, jos pidät tästä artikkelista YouTube lisää WordPress-video-oppaita. Löydät meidät myös Google+: sta ja Twitter.