Share
Så langt i denne serien har jeg introdusert deg til hvilke innleggformater som er, og hvordan du bruker forskjellige maler for forskjellige innleggformater i løkken. I dette innlegget vil jeg vise deg hvordan du setter gjelder forskjellige css på deler av et innleggs innhold basert på innleggformatet.
Eksemplene jeg skal vise deg er ganske enkle, de endrer bare bakgrunnsfargen, men når du forstår disse grunnleggende konseptene, vil du kunne bruke dem til å bruke forskjellige motiver til forskjellige innleggformater og virkelig lage temaet ditt for å håndtere det media og annet spesialisert innhold.
Standarder-kompatible temaer bruker funksjonen post_class () å angi klassene for beholderen som omgir innleggsinnhold. Denne funksjonen legger til en klasse basert på innleggformatet. Så, for eksempel, hvis et innlegg har formatet «bilde», vil innlegget ha et klasses formatbilde. Dette gjør det veldig enkelt å målrette containere i posten via CSS uten å måtte endre sideskjerm eller skrive noen spesifikke funksjoner.
For å endre bakgrunnsfargen til innleggets innhold i alle bildeinnlegg, kan du ganske enkelt legge til dette csset til temaets stil.css:
.format-image .entry-innhold bakgrunnsfarge: rødt;
Noen ganger kan du ikke oppnå det du vil uten å legge til flere klasser eller endre layoutet helt. Det andre alternativet er hvorfor vi bruker forskjellige innholdsdeler. Jeg lagde ut hvordan jeg bruker forskjellige innholdsdeler per postformat i mitt siste innlegg i denne serien.
Når du har en annen innholdsdel, kan du gjøre hvilke endringer du vil ha, for eksempel kanskje i bildeinnlegg du vil gjøre det kjente bildet til en full breddebeholder i stedet for et lite, flytende element.
Hvis du bare vil endre en måte som et innlegg format ser ut i bloggindeksen, for å gjøre det skikkelig bedre, kan du legge til et filter for å legge til flere klasser til post_class () i bestemte situasjoner. Vi kan bruke post_class-filteret til å legge til bestemte klasser i posten i bestemte situasjoner, for eksempel hvis den har formatbildet og ikke er det enkelt innlegget.
Accentsconagua
funksjon slug_preview_image_class ($ klasser) global $ post; hvis (has_post_format ('image', $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'forhåndsvisning-bilde-innlegg'; returner $ klasser; add_filter ('post_class', 'slug_preview_image_class'); Dette filteret lar deg målrette bildeinnlegg i bloggindeksen eller arkivet, uten å påvirke hvordan de vises som enkelt innlegg, ved å målrette klassen for forhåndsvisningspost.
Du kan også ønske å bare legge til en forhåndsvisningsklasse til et innlegg med et annet innlegg enn standardformatet. Filteret jeg bare viste deg kan endres for å gjøre dette enten ved å manuelt legge til alle innleggformater temaet støtter i en matrise til has_post_format ().
Selvfølgelig kan du ikke vite hvilke innleggformater temaet støtter, hvis du for eksempel legger til denne funksjonen i et plugin, i stedet for et tema. Hvis det er tilfelle, ville det være bedre å få listen over nåværende registrerte postformater ved hjelp av get_theme_support ('postformater') som du kan se i denne endrede filterfunksjonen.
funksjon slug_post_format_preview_class ($ klasser) global $ post; $ post_formats = get_theme_support ('postformater'); hvis (has_post_format ($ post_formats [0], $ post-> ID) &&! is_single ($ post-> ID)) $ klasser [] = 'forhåndsvisning format'; returner $ klasser; add_filter ('post_class', 'slug_post_format_preview_class'); Med dette filteret på plass kan du fremdeles målrette individuelle innleggformater hver for seg eller alle sammen. Dette CSS, sammen med filteret som rangerer 'forhåndsformat'-filteret, endrer bakgrunnen for innleggets innhold for hvert innleggformat til blått, med mindre det er et bildeinnlegg, i så fall vil bakgrunnsfargen bli rød.
.forhåndsvisning-format .entry-innhold bakgrunnsfarge: # 00F; .preview-format.format-bilde .entry-innhold bakgrunnsfarge: # F00;
Denne artikkelen har gitt deg bare en smak av hvordan du kan formatere dine forskjellige innleggformater for å få dem til å skille seg ut i løkken, eller til og med for å tilpasse utseendet deres i single postvisning. Som alltid oppfordrer jeg deg til å eksperimentere med eksempelkoden og referansetemaene som støtter innleggformater, for eksempel temaet Sosialt Ubehagelig fra Theme Hybrid.
Hvis du bare er grunn til at du ikke bruker postformater, er fordi du har så mange innlegg med et innleggformat sett, må du se neste innlegg i denne serien. Jeg vil dekke masse oppdatering av formatet på innlegg.
