En nyttig funksjon av WordPress er måten den genererer klasser og IDer på. Noen av disse genereres av selve systemet, mens du i andre tilfeller legger inn noen PHP i temaet ditt, og WordPress bruker det for å legge til klasser og IDer til sidemerkingen.
I denne opplæringen vil jeg demonstrere tre måter som WordPress gjør på dette og gi praktiske applikasjoner og eksempler for hver. De tre områdene jeg skal håndtere er som følger:
Klasser og IDer generert for bilder som du laster opp til WordPress via mediaopplasteren
Template-koder som brukes i et temas malfiler for å generere klasser og IDer basert på innholdet og siden som vises
Parametre du kan angi når du registrerer widgets og menyer (eller som allerede skal settes i et godt skrevet tema), som vil generere klasser og IDer som er relevante for bestemte typer widget, individuelle widgets og menyelementer
For hver av disse skal jeg forklare hvordan de fungerer og demonstrere hver med noen eksempler.
Hva du trenger for å fullføre denne opplæringen
For å følge de praktiske eksemplene i denne opplæringen, trenger du:
En utviklingsinstallasjon av WordPress
Et tema som du kan redigere
Jeg skal jobbe med et barn tema på tjue tolv - du kan få tilgang til temafiler i kodebunken.
Klasser og IDS Generert for bilder av Media Uploader
Når du laster opp bilder via Media Uploader, får du muligheten til å angi hvordan bildet skal justeres, som vist på skjermbildet. Du blir også bedt om å velge hvilken bildestørrelse du vil vise: miniatyr, medium, stor eller full størrelse.
Basert på ditt valg, tilordner WordPress tag for de opplastede bildene dine en rekke klasser. Klassene for justering er som følger:
.alignnone
.aligncenter
.alignright
.alignleft
I tillegg tilordner WordPress .wpcaption klasse til noen bildetekst som du legger til i et bilde. Undertekster vil ha denne klassen, så vel som en av justeringsklassene ovenfor, basert på hvordan du velger å justere bildet.
WordPress legger også til klasser for hver bildestørrelse:
.size-fulle
.size-large
.størrelse-medium
.size-thumbnail
Du kan bruke disse til å utforme bilder av hver filstørrelse.
De fleste temaer vil inkludere CSS for å utforme hver av disse klassene på riktig måte, for eksempel omfatter temaet Twenty Twelve følgende:
CSS ovenfor justerer ethvert element (ikke bare bilder) med .alignleft, .alignright eller .aligncenter klasse, noe som betyr at du også kan bruke disse klassene til å stil annet innhold enn bilder hvis du vil.
Det legger også til marginer til bilder som har disse klassene, og sikrer at bilder i full og stor størrelse ikke går ut av deres inneholdende element, ved å bruke maksimal bredde: 100%.
Du kan se effekten av dette i skjermbildet nedenfor. Det første bildet er rettet rett og det andre er sentrert og full størrelse.
Legg til din egen stil med disse klassene og IDene
I tillegg til å sette inn justering og marginer for hver av disse klassene, kan du bruke dem til å legge til ekstra styling.
Det første bildet i skjermbildet over er rettjustert. Hvis skjermbildet er endret, forblir det i samme størrelse og teksten brytes slemme rundt det:
Du kan legge til styling for å sikre at et rettjustert bilde ikke tar opp mer enn 50% av bredden på skjermen, slik at teksten vil pakke inn mer pent, ved å legge til følgende CSS i stilarket ditt:
img.alignright maksimal bredde: 50%;
Nå når siden vises på en smal skjerm, er bildet mindre dominerende:
I tillegg til å legge til CSS for layout eller dimensjonering, kan du legge til dekorativ stilering til bilder som er justert på en bestemt måte. For å legge til dekorativ stilering til sentrert fullstørrelsesbilder, legg til følgende i stilarket ditt:
Dette legger til en kant på bildet og reduserer størrelsen:
Mallemerker for å legge til klasser og IDer
Klassene og IDene vi har sett på bilder blir generert av WordPress selv. Andre klasser og IDer kan genereres av maltekoder i temaet ditt.
Merk: Hvis du ikke er kjent med maltekoder, kan du se på kodeksens maltekstartikkel.
Det er to sett med maletiketter: en som gjelder for HTML-kode og to som gjelder for individuelle innlegg.
De body_class () Mal tag
Et godt skrevet tema vil ha følgende tag i sin header.php fil:
>
Dette erstatter det normale stikkord. De body_class () template tag forteller WordPress å tildele klasser til tag basert på siden som vises og malfilen den bruker fra det aktive temaet.
Listen over klasser som kan genereres er lang, og du kan finne den i WordPress Codex.
Noen eksempler inkluderer:
.hjem for hjemmesiden
.enkelt-postid- ID når et enkelt innlegg blir vist, hvor ID er det innleggets numeriske ID
.arkiv for enhver arkivside
.side-templat- filnavn -PHP når en egendefinert sidemal brukes
Hvis du vil legge til flere klasser til tag som ikke genereres av WordPress, kan du. For eksempel å legge til klassen "hallo", er koden:
>
Du kan legge til så mange klasser som du vil på denne måten, skille dem med mellomrom.
Du kan bruke klassene generert av body_class () tag for å legge til styling som er spesifikk for en bestemt plassering på nettstedet eller en malfil, eller til elementer i denne malfilen.
For eksempel, i min barnetema har jeg opprettet en sidemal som heter side-full bredde-med-sidebar.php, som er utformet for å vise sider med innholdet full bredde og sidebjelken under innholdet i stedet for å ha det til høyre. Du finner denne sidemalen i kodebuntet.
Bruker body_class () tag, genererer WordPress a .side-mal-side-full bredde-med-sidebar-php klasse for tag (blant andre klasser).
Så å style elementer på en side ved hjelp av denne malen, legger du til følgende i stilarket ditt:
/ * stil layout for full side mal med sidebar * / .page-template-side-full bredde-med-sidebar-php .site-innhold, .side-mal-side-full bredde-med-sidebar-php. widget-området bredde: 100%; klare: begge; .page-template-side-full-width-med-sidebar-php # secondary.widget-området .widget width: 48%; margin: 0 1%; flyte: venstre;
Dette angir bredden på hovedinnholdet og sidebjelken (#secondary) til 100%, og justerer også widgets i sidefeltet ved siden av hverandre. Du kan se effekten i skjermbildet:
Merk: Hvis temaet ditt er responsivt, må du sørge for at du justerer bredden på widgets på smale skjermbilder i medieforespørsmålene dine.
De post_class () og POST_ID () Malemerker
Disse kodene fungerer på samme måte som body_class () tag, men du bruker dem med individuelle innlegg i løkken i stedet for element.
For eksempel i Twenty Twelve-temaet, blir hver post i løkken innpakket i a elementet med disse kodene ble brukt:
> // innhold her
Dette genererer en rekke klasser basert på innleggets kategori og type og en ID basert på postens numeriske ID. For eksempel vil et innlegg i min demonstrasjonsside med kategorien "rødt" ha følgende klasser og ID generert:
// innhold
Du kan bruke disse klassene til å style innlegg fra individuelle kategorier annerledes. I demoområdet er det tre kategorier satt opp: 'rød', 'blå' og 'viktig'.
Hvis du vil utforme disse, legger du til følgende CSS i temaets stilark:
/ * stil innlegg i "rød" kategori * / .category-red border-top: 2px solid # cc0000; / * stil innlegg i "blå" kategori * / .kategori-blå border-top: 2px solid # 3366ff; / * stil innlegg i "viktig" kategori * / .blog .kategori-viktig polstring-toppen: 2em; margin-venstre: 2em; .kategori-viktig: før innhold: 'LES DENNE POSTEN! DET ER VIKTIG';
Dette legger til styling for hver av kategoriene: en farget ramme for hver av fargekategoriene og en ekstra margin for kategorien «viktig». Det bruker også et pseudo-element for å sette inn ekstra innhold før hvert innlegg i kategorien «viktig».
Resultatet vises i skjermbildet.
Bruke klasser og IDer med widgets og menyer
Når widgets er registrert i et tema (eller noen ganger et plugin), kan funksjonene inneholde kode som forteller WordPress å generere klasser og IDer basert på widgetens navn, type og ID.
Når menyer er registrert, kan WordPress generere klasser basert på menyens navn, plasseringen av elementer i menyen og plasseringen på nettstedet. Du kan bruke alle disse til å stille inn widgets og menyer.
Klasser og IDer for Widgets
For å registrere et widgetområde bruker du register_sidebar () Fungerer i temaet ditt functions.php fil. Dette tar følgende parametere:
Det er to parametere som genererer klasser og / eller IDer:
'class' => "
'before_widget' => '
'
De 'klasse' parameteren lar deg manuelt spesifisere en klasse for widgetområdet. Innstillingene for 'Before_widget' parameter fortell WordPress å generere en unik ID for hver widget i widgetområdet og en rekke klasser for det også, som vil være basert på hvilken type widget det er.
For eksempel på demoområdet har jeg lagt til to widgets - en liste over innlegg og en liste over sider. For listen over innlegg utføres følgende HTML:
For listen over sider utføres følgende HTML:
Du kan bruke dette til å stil widgets som lister innlegg, ved å legge til følgende CSS i temaets stilark:
Dette legger til en kantlinje for widgets oppføring sider, som vist på skjermbildet:
Merk: Dette fungerer på demoområdet fordi det bruker et barnemne for de tjuefem temaet, som har sidebars registrert riktig. Hvis du bygger ditt eget tema, må du legge til register_sidebar () taggen med parameterne ovenfor. Finn ut hvordan du gjør dette i den tilknyttede Codex-artikkelen.
Klasser og IDer for menyer
Navigasjonsmenyer vises med wp_nav_menu () tag i temaet ditt header.php fil. Dette tar en rekke parametre, som beskrevet i wp_nav_menu artikkel.
En av disse legger til klasser og IDer til hver enkelt gjenstand i menyen:
'items_wrap' => '
% 3 $ s
'
Dette legger til en ID og en rekke klasser for hvert element. Klassene er basert på klassen for menyen selv og plasseringen på stedet. For eksempel, når brukeren er på en side på nettstedet, vil oppføringen i navigasjonsmenyen ha .current_page_item klasse.
Du kan bruke dette til å legge til styling til gjeldende sideoppføring i menyen. For eksempel, for å legge til en understreke på gjeldende side, legg til følgende i stilarket ditt:
/ * stil aktiv sidekobling i navigasjon * / .main-navigation .current_page_item en text-decoration: understreke;
Den resulterende understreken kan ses på skjermdumpen (i tillegg til fargeendringen som allerede er i parentemetets stilark):
Merk: Når jeg bruker et barnemne for de tjuefem temaet, trenger jeg ikke å legge til wp_nav_menu () tag, da dette allerede er til stede i foreldetemaet.
Sammendrag
Som vi har utforsket over, finnes det en rekke måter som WordPress vil generere klasser og IDer på elementer på et nettsted. Noen av disse genereres av WordPress selv, og andre bruker maltekoder eller funksjonsparametere for å fortelle WordPress å skrive ut klassene og IDene. Du kan bruke disse til å utforme sider, menyer, widgets, innleggslister og andre elementer i ditt design.
Det er mange andre måter du kan bruke disse klassene og IDene på, for å utforme prosjektene dine. For eksempel:
Du kan opprette et nettsted med en rekke forskjellige seksjoner, ved hjelp av klasser generert av body_class () tag for å gjøre innhold i hver seksjon ser veldig tydelig ut
Du kan utforme individuelle innleggslister annerledes på en arkivside ved å målrette IDen som genereres av the_ID () stikkord
Du kan markere nåværende menyelementer i navigasjonen din, skape en knapplignende effekt og bruke bilder, bakgrunner, gradienter og mer
Du kan bruke en kombinasjon av det ovenstående, for eksempel å utforme bestemte widgets annerledes i forskjellige områder av nettstedet
Mulighetene er begrenset kun av fantasien din!
ressurser
Noen nyttige Codex-sider på emnene som er omtalt i denne opplæringen:
Klasser generert for bilder: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
De body_class () tag: http://codex.wordpress.org/Function_Reference/body_class
De post_class () tag: http://codex.wordpress.org/Function_Reference/post_class
De the_ID () tag: http://codex.wordpress.org/Function_Reference/the_ID
De wp_register_sidebar () funksjon: http://codex.wordpress.org/Function_Reference/register_sidebar
De wp_nav_menu () tag: http://codex.wordpress.org/Function_Reference/wp_nav_menu
En guide til maltekoder: http://codex.wordpress.org/Template_Tags
Share
Accentsconagua
