Share
Până acum, în această serie, v-am prezentat ce formate postate sunt și cum se utilizează diferite șabloane pentru diferite formate postate în buclă. În această postare vă voi arăta cum să setați aplicarea css-urilor diferite pe anumite părți ale conținutului unei postări bazate pe formatul postului.
Exemplele pe care le voi arăta că sunt destul de simple, schimbă doar culoarea de fundal, dar odată ce înțelegeți aceste concepte de bază, veți putea să le folosiți pentru a aplica diferite modele la diferite formate postate și pentru a vă face cu adevărat tema standout pentru modul în care se ocupă media și alte tipuri de conținut specializat.
Standardele care respectă standardele utilizează funcția post_class () pentru a seta clasele pentru containerul din jurul conținutului mesajului. Această funcție adaugă o clasă bazată pe formatul postului. De exemplu, dacă un post are formatul "imagine", postul va avea o clasă "format-imagine". Acest lucru face foarte ușor să direcționați containerele în interiorul postului prin intermediul CSS fără a fi nevoie să modificați șabloanele de pagini sau să scrieți anumite funcții.
Pentru a schimba culoarea de fundal a conținutului postului în toate postările de imagine, ați putea să adăugați pur și simplu acest css la style.css-ul temei:
.format-imagine .entry-content fundal-culoare: roșu;
Uneori nu puteți obține ceea ce doriți fără a adăuga clase suplimentare sau pentru a schimba în întregime aspectul. A doua opțiune este motivul pentru care folosim diferite părți de conținut. Am stabilit cum să folosesc diferite părți de conținut pentru fiecare postare în ultima mea postare din această serie.
Odată ce aveți o altă parte de conținut, puteți face orice modificări doriți, de exemplu, poate în postările de imagine pe care doriți să le faceți imaginea recomandată un container cu lățime întreagă în loc de un element mic, plutind.
Dacă doriți doar să modificați modul în care arată un format de post în indexul blogului, pentru a-l face mai bine, puteți adăuga un filtru pentru a adăuga clase suplimentare la post_class () în situații specifice. Putem folosi filtrul post_class pentru a adăuga anumite clase la post în situații specifice, cum ar fi dacă are imaginea formatată și nu este singurul afișaj post.
Accentsconagua
funcția slug_preview_image_class ($ classes) global $ post; dacă has_post_format ('image', $ post-> ID) &&! is_single ($ post-> ID)) $ clase [] = 'preview-image-post'; returnează clase de $; add_filter ('post_class', 'slug_preview_image_class'); Acest filtru vă permite să vizați postările de imagini din indexul sau arhiva blogului, fără a afecta modul în care acestea apar ca postări unice, vizând clasa "previzualizare-imagine-postare".
De asemenea, puteți să adăugați o clasă de previzualizare la orice postare cu un format de postare diferit de formatul standard. Filtrul pe care tocmai l-am arătat poate fi modificat pentru a face acest lucru fie prin adăugarea manuală a tuturor formatelor de postare pe care tema suportă într-un tabel has_post_format ().
Desigur, este posibil să nu știți ce formate postate susține tema, dacă, de exemplu, adăugați această funcție într-un plugin, în loc de o temă. Dacă este așa, ar fi mai bine să utilizați lista post-formatelor înregistrate în prezent get_theme_support ("post-formate") după cum puteți vedea în această funcție de filtrare modificată.
funcția slug_post_format_preview_class ($ classes) global $ post; $ post_formats = get_theme_support ("post-formate"); dacă has_post_format ($ post_formats [0], $ post-> ID) &&! is_single ($ post-> ID)) $ clase [] = 'format de previzualizare'; returnează clase de $; add_filter ('post_class', 'slug_post_format_preview_class'); Cu ajutorul acestui filtru puteți încă să direcționați individual formate postate separat sau toate împreună. Acest CSS, împreună cu filtrul care filtrează filtrul de tip "previzualizare", modifică fundalul conținutului postării pentru fiecare post de post albastru, cu excepția cazului în care este o postare imagine, caz în care culoarea de fundal va fi roșie.
.formatul de previzualizare .entry-content background-color: # 00F; .preview-format.format-imagine .entry-content fundal-culoare: # F00;
Acest articol vă oferă doar un gust al modului în care puteți să vă formatați diferitele formate de postare pentru a le face să iasă în bucla sau chiar pentru a personaliza aspectul lor în vizualizarea postului unic. Ca întotdeauna, vă încurajez să experimentați exemplul de cod și temele de referință care acceptă formate postate, cum ar fi tema socialmente nepotrivită din tematica hibrid.
Dacă sunteți doar motivul pentru care nu utilizați formate de postare se datorează faptului că aveți atât de multe postări fără un set format de postare, asigurați-vă că vedeți următoarea postare din această serie. Voi acoperi în vrac actualizarea formatului posturilor.
