WordPress Body Class 101: awgrymiadau a thriciau ar gyfer dylunwyr thema

Trwy gydol ein profiad yn defnyddio WordPress, rydym wedi darganfod bod dylunwyr thema yn aml yn meddwl llawer am nodwedd benodol. Maen nhw’n chwilio am hidlwyr a bachau WordPress gwallgof i wneud tasg pan mai’r cyfan sydd ei angen arnyn nhw yw CSS syml. Yn ddiofyn, mae WordPress yn cynhyrchu llawer o ddosbarthiadau CSS. (Taflen twyllo WordPress CSS). Un o’r dosbarthiadau CSS hyn yw’r arddulliau dosbarth corff. Yn yr erthygl hon, byddwn yn esbonio dosbarth corff WordPress 101 ac yn rhannu rhai awgrymiadau a thriciau defnyddiol ar gyfer dylunwyr thema newydd.

Beth yw Dosbarth Corff WordPress?

Swyddogaeth WordPress yw Body Class (body_class) sy’n darparu gwahanol ddosbarthiadau i’r elfen gorff, fel y gall awduron thema greu eu gwefannau gyda CSS yn effeithiol. Mae’r tag corff HTML yn bresennol yn bennaf yn y ffeil header.php, sy’n cael ei lwytho ar bob tudalen. Wrth godio thema, gallwch atodi swyddogaeth body_class i elfen y corff, fel a ganlyn:

>

Trwy ychwanegu’r elfen fach hon, mae gennych yr hyblygrwydd i addasu ymddangosiad pob tudalen yn hawdd gan ddefnyddio CSS. Yn dibynnu ar y math o dudalen sy’n cael ei llwytho, mae WordPress yn ychwanegu’r dosbarth priodol yn awtomatig. Er enghraifft, os ydych chi ar dudalen ffeil, bydd WordPress yn ychwanegu’r dosbarth ffeiliau yn awtomatig at elfen y corff, os byddwch chi’n dewis ei ddefnyddio. Mae’n gwneud hyn ar gyfer bron pob tudalen. Dyma rai enghreifftiau o ddosbarthiadau cyffredin y gallai WordPress eu hychwanegu:

.rtl {}
.Tŷ {}
.Blog {}
.archive {}
.meeting {}
.search {}
.paged {}
.attachment {}
. 404 gwall {}
. postid sengl- (id) {}
.attachmentid- (id) {}
.attachment- (math meim) {}
.author {}
.author- (enw defnyddiwr) {}
.Categori {}
.category- (gwlithod) {}
.tag {}
.tag- (gwlithod) {}
.page-parent {}
.page-child pai-pageid- (id) {}
.page-template page-template- (enw ffeil enghreifftiol) {}
Canlyniadau Chwilio {}
.search-no-results {}
.Logged {}
.paged- (rhif tudalen) {}
.single-paged- (rhif tudalen) {}
.page-paged- (rhif tudalen) {}
.category-paged- (rhif tudalen) {}
.tag-paged- (rhif tudalen) {}
.date-paged- (rhif tudalen) {}
.author-paginado- (rhif tudalen) {}
.search-paged- (rhif tudalen) {}

Fel y gallwch weld, gyda nodwedd mor bwerus wrth law, gallwch chi addasu’ch tudalen WordPress yn llwyr gan ddefnyddio CSS yn unig. Gallwch chi addasu tudalennau proffil awdur penodol, ffeiliau yn seiliedig ar ddyddiadau, ac ati. Felly, sut a phryd fyddech chi’n defnyddio hwn?

Sut i ddefnyddio Dosbarth Corff WordPress

Yn y rhan fwyaf o achosion, dosbarth corff WordPress yw’r ateb syml y mae dylunwyr thema yn aml yn ei anwybyddu. Ydy, mae hynny hefyd yn ein cynnwys ni. Tua blwyddyn yn ôl, roedd angen i ni greu eitem dewislen WordPress a oedd ar dudalen benodol yn unig. Fe benderfynon ni wneud chwiliad manwl i ddod o hyd i hidlydd i ychwanegu dosbarth llywio arbennig at yr eitemau ar y ddewislen a fyddai’n cael eu hychwanegu gan ddefnyddio datganiad amodol. Er enghraifft, os yw’n dudalen sengl, ychwanegwch “Blog” y dosbarth at yr eitemau ar y ddewislen. Ar ôl treulio’r holl amser yn dehongli hyn i gyd ac yn ysgrifennu post amdano, nododd un o’n defnyddwyr y gallem fod wedi gwneud hyn yn hawdd gyda’r dosbarth corff presennol fel hyn:

.single #navigation .leftmenublog div {view: bloc in line! pwysig;}

Rhybudd: sut rydych chi’n defnyddio’r dosbarth corff .single sy’n cael ei ychwanegu at bob tudalen bostio unigol.

Bachgen, onid ydyn ni’n teimlo’n dwp ar ôl hynny? Ers hynny, rydyn ni wedi gwneud nodyn i weld a ellir gwneud pethau gyda dosbarth y corff yn gyntaf cyn mynd yn ddyfnach.

I roi enghraifft arall. Pan ddaeth defnyddiwr atom, gan ofyn am ffordd i newid delwedd y logo ar ei wefan yn seiliedig ar y dudalen categori. Llwythodd y mwyafrif o ddyluniadau thema, gan gynnwys eich un chi, y logo gan ddefnyddio CSS (#header .logo). Rydym yn awgrymu sut i ddefnyddio’r dosbarth corff .category-slug i newid eich logo fel hyn:

.categori-cyngor # pennawd .logo {cefndir: url (images / logo-Council.png) heb ailadrodd! pwysig;}
.category-health #header .logo {cefndir: url (images / logo-health.png) dim-ailadrodd! pwysig;}

Cafodd y dylunydd thema newydd hwn yr un foment ah-hah ag a gawsom. Yn ffodus, rydych chi nawr yn dysgu sut i ddefnyddio dosbarth corff yn eich dyluniadau thema. Ond aros, mae’n dod yn fwy pwerus fyth, oherwydd mae ffordd i ychwanegu dosbarthiadau corff personol gan ddefnyddio hidlydd. Gadewch i ni edrych ar sut i wneud hyn.

Ychwanegu dosbarthiadau corff personol

Mae gan WordPress hidlydd y gallwch ei ddefnyddio i ychwanegu dosbarthiadau corff penodol pan fo angen. Byddwn yn dangos i chi sut i ychwanegu dosbarth corff gan ddefnyddio’r hidlydd cyn dangos y senario achos defnydd penodol, fel y gall pawb fod ar yr un dudalen.

Gan fod y dosbarthiadau corff yn benodol i thema, byddai angen i chi ysgrifennu swyddogaeth wedi’i haddasu yn eich ffeil functions.php fel hyn:

swyddogaeth my_class_names ($ dosbarthiadau) {
// ychwanegu ‘enw dosbarth’ at yr arae $ dosbarthiadau
$ classes () = ‘enw dosbarth prawf’;
// yn dychwelyd yr amrywiaeth $ dosbarthiadau
dychwelyd $ dosbarthiadau;
}

// Nawr ychwanegwch y dosbarth prawf i’r hidlydd
add_filter (‘body_class’, ‘my_class_names’);

Bydd y cod uchod yn ychwanegu dosbarth “test-class-name” at y tag corff ar bob tudalen o’ch gwefan. Nid yw hyn mor ddrwg, ynte? Mae gwir bwer y swyddogaeth hon mewn labeli amodol. Gallwch ychwanegu’r dosbarth XYZ yn unig ar dudalennau unigol, ac ati. Gadewch i ni gymryd yr enghraifft hon a’i chymhwyso i’r senario achos defnydd gwirioneddol.

Ychwanegu dosbarth categori at dudalennau post unigol

Gadewch i ni ddweud eich bod chi eisiau addasu’r tudalennau postio unigol ar gyfer pob categori. Yn dibynnu ar y math o addasu, gallwch ddefnyddio dosbarthiadau corff ar gyfer hyn. Er symlrwydd, gadewch i ni ddweud eich bod am newid lliw cefndir y dudalen yn seiliedig ar y categori swyddi unigol. Gallwch wneud hyn trwy ychwanegu dosbarthiadau categori at y golygfeydd tudalen bost sengl. Gludwch y swyddogaeth ganlynol i ffeil functions.php eich thema:

// ychwanegu enwau categori arbenigol yn nosbarth y corff
swyddogaeth category_id_class ($ dosbarthiadau) {
$ post byd-eang;
foreach ((get_the_category ($ post-> ID)) fel $ categori)
$ classes () = $ category-> category_nicename;
dychwelyd $ dosbarthiadau;
}

add_filter (‘body_class’, ‘category_id_class’);

Bydd y cod uchod yn ychwanegu’r dosbarth categori i’ch dosbarth corff ar gyfer tudalennau postio unigryw. Yna gallwch ddefnyddio dosbarthiadau CSS i’w ddylunio sut bynnag rydych chi eisiau.

Ychwanegwch wlithen dudalen i ddosbarth corff eich themâu WordPress

Gludwch y cod canlynol i ffeil functions.php eich thema:

// Tudalen dosbarth corff gwlithod
add_slug_body_class ($ dosbarthiadau) swyddogaeth {
$ post byd-eang;
os (isset ($ post)) {
$ classes () = $ post-> post_type. ‘-‘. $ post-> post_name;
}
dychwelyd $ dosbarthiadau;
}
add_filter (‘body_class’, ‘add_slug_body_class’);

Darllenwch ein herthygl ar y dudalen gwlithod yn nosbarth y corff sy’n esbonio pam mae angen hyn arnom.

Canfod porwr a dosbarthiadau corff sy’n benodol i’r porwr

Weithiau, efallai y bydd angen cael arddulliau CSS arbennig er mwyn i bopeth weithio’n gywir mewn rhai porwyr (TIP: Internet Explorer). Wel, awgrymodd Nathan Rice ddatrysiad diddorol iawn sy’n ychwanegu dosbarthiadau porwr-benodol i’r dosbarth corff yn seiliedig ar y porwr y mae’r defnyddiwr yn ymweld â’r wefan ynddo.

Y cyfan sy’n rhaid i chi ei wneud yw gludo’r cod canlynol i’r ffeil functions.php:

Yna gallwch ddefnyddio dosbarthiadau fel:

.ie .navigation {mae rhywbeth yn ymddangos yma}

Os oes problem ymyl fach neu badio, mae’n ffordd gyflym iawn i’w drwsio.

Mwy o achosion defnydd:

Mae’n debyg y gallwn restru llawer o achosion defnydd eraill, ond ni fyddwn, fel arall bydd yr erthygl hon yn mynd allan o law. Y prif amcan oedd helpu datblygwyr themâu newydd i ddeall cysyniadau sylfaenol dosbarth corff WordPress a’i fanteision. Mae achosion defnydd yn gyfyngedig i’ch dychymyg. Rydym wedi gweld datblygwyr thema busnes (Genesis) yn defnyddio dosbarthiadau corff i gynnig amryw o opsiynau dylunio. Er enghraifft, cynllun tudalen lawn, cynnwys bar ochr, bar ochr cynnwys, ac ati. Trwy wneud hyn, gall y defnyddiwr newid dyluniad ei dudalen yn hawdd heb boeni am broblemau ymddangosiad, oherwydd mae eisoes wedi’i gywiro â CSS.0

Gwelsom rai datblygwyr yn ychwanegu ceisiadau HTTP i lwytho ffeiliau CSS ar gyfer yr amrywiol gynlluniau lliw y maent yn eu cynnig. Mewn llawer o achosion, mae’r newidiadau hefyd yn fach iawn. Dim pwynt gwefru 3 taflenni arddull pan ellir gwneud gwaith. Defnyddiwch ddosbarth y corff ar gyfer hyn.

Rwy’n gobeithio bod yr erthygl hon wedi bod o gymorth i chi. Byddwn yn falch iawn o glywed eich meddyliau am Ddosbarth y Corff a sut rydych chi wedi’i ddefnyddio yn y gorffennol neu’n bwriadu gwneud hynny yn y dyfodol.