Widgets gjør WordPress veldig fleksibel. Ved å legge til widgetområder i temaene dine, lar du brukerne sette inn eget tilpasset innhold uten å måtte skrive en linje med kode.
de er mest vanlige i sidefelt og bunntekst, hvor de ofte brukes til å holde widgeter som søkewidget, siste innlegg-widgeten eller kanskje en egendefinert meny. Men hvis du legger dem til på siden din og legger inn maler, gjør du dem enda kraftigere.
du kan legge til widget områder til en mal fil du liker. Jeg liker å legge til mange av dem til temaene mine, på steder som overskriften, før og etter hovednavigasjonen, og før og etter innholdet. Du kan enten legge dem til i en maldel (for eksempel toppteksten) som brukes av hver side på området, eller du kan være mer spesifikk og bare legge dem til i malfiler for en gitt innholdstype.
I dette innlegget skal jeg vise deg hvordan du gjør nettopp det. Jeg skal lage et barn tema av standard Tjue Sytten tema og deretter innenfor det barnet tema, jeg skal lage noen nye malfiler: en tilpasset side malfil, en kategori arkivfil og en enkelt post malfil.
i hver av disse skal jeg legge til et widgetområde som er spesifikt for den innholdstypen, slik at brukerne bare ser det når de ser på en side ved hjelp av sidemalen, et kategoriarkiv eller et enkelt innlegg.
så la oss komme i gang!
Notat: Jeg har lagt koden for dette innlegget Til GitHub, slik at du kan sjekke det hvis du jobber sammen med denne opplæringen.
Sette Opp Barnetemaet
jeg skal bruke et barn av twenty seventeen-temaet: hvis du jobber med ditt eget tema, kan du redigere det direkte i stedet for å lage et barntema. Men hvis du bruker et tredjepartstema, må du opprette et barntema. Dette er fordi når du oppdaterer temaet, vil eventuelle endringer du gjør i det gå tapt.
så opprett en ny mappe med navnet på temaet ditt i mappen wp-content/themes. Jeg ringer mine wpmu-template-widgets. Innenfor det legger du til en stil.dette til det:
Husk, hvis du arbeider med ditt eget tema kan du hoppe over dette trinnet. Og hvis du bruker et annet overordnet tema, må du redigere stilarket for å gjenspeile det. Hvis du ikke er sikker, sjekk ut vårt innlegg om å lage barnetemaer.
Registrere Widgetområdene
før vi kan legge til widgetområdene i våre malfiler, må vi registrere dem i temaets funksjonsfil. Åpne functions-filen hvis temaet ditt allerede har et, eller hvis det er et nytt barntema, oppretter du en fil som heter functions.php.
la oss begynne med å legge til den tomme funksjonen for å registrere widgets, og hekte den til widgets_init kroken. Legg til dette i funksjonsfilen din:
Innenfor denne funksjonen skal vi registrere fire widgetområder: en hver av de enkle post-og kategoriarkivmalene, og to for den egendefinerte sidemalen.
start med å registrere den første widgeten:
dette bruker funksjonen register_sidebar(), med en rekke parametere som følger:
- navnet på widgetområdet, som vil vises på Widgets admin-skjermen og Tilpasseren. Jeg har gjort dette oversettbart.
- en unik ID for widgetområdet.
- Markering for før widgeten, som bruker plassholdere for internasjonalisering.
- Markering for etter widgeten.
- Markering for før og etter widgettittelen, som er omsluttet av et
h3– element.
så det er den første. Nå, fortsatt inne i funksjonen din, legg til de andre tre:
så vi har nå fire widgets:
- En etter innholdet på enkeltinnlegg.
- En før innholdet i et kategoriarkiv.
- en før og en etter innholdet på vår widgetized sidemal.
hvis du vil flytte widgetområdene dine (f. eks. sette kategoriarkivet etter innholdet eller det enkle innlegget før innholdet), bør du gi nytt navn til dem på riktig måte. Dette er slik at du vet hva som skjer når du kommer til å redigere koden din i fremtiden, og brukerne vet hvor widgetområdene vil bli sendt ut når de legger til widgets til dem via Widgets admin-skjermen. Husk at hvis du endrer dette, må du plassere koden for å sende widgets på riktig sted i malfilene dine i neste trinn, noe som kan være forskjellig fra hvor jeg legger meg.
nå hvis du åpner Widgets admin siden, vil du se din widget områder, klar for widgets:
men hvis du legger til widgeter i de nye widgetområdene, vises de ikke i frontenden på nettstedet ditt. De trenger fortsatt å bli kodet inn i malfilene.
Legge Til Widgetområdene I Malfiler
nå legger vi til koden for å sende ut widgetområdene. Hvis du arbeider med ditt eget tema kan du bare trenger å redigere eksisterende tema malfiler. Hvis du arbeider med et barnetema (eller temaet ikke allerede har de relevante malfilene), må du opprette nye filer.
La oss starte med den widgetiserte sidemalfilen, da temaet ditt ikke vil ha det uansett.
opprett en ny fil i temamappen. Jeg ringer min page_widgetized.php. Åpne den filen og legg til dette:
dette forteller WordPress at Det er en tilpasset sidemal. Hvis du vil vite mer om dem, sjekk ut vår detaljerte guide.
Merk: ikke bruk side-widgetized som filnavn. Dette er fordi page – er et reservert suffiks I WordPress. Bruk en understrek i stedet for en strek, eller bare unngå å bruke siden i begynnelsen helt hvis du foretrekker.
nå under den kommenterte teksten, kopier alt fra temaets (eller overordnet tema) side.php-fil. Et alternativ er å lage en kopi av filen og legge til kommentert tekst, det er opp til deg.
du kan nå velge denne malen når du redigerer en side på nettstedet ditt:
Velg det for en av sidene dine, slik at du kan prøve ut widgets. Her er min side:
Det ser ikke veldig spennende akkurat nå som jeg ikke har lagt widget områder til malfilen. La oss gjøre det.
i malfilen legger du til denne koden umiddelbart over sideinnholdet, for widgetområdet over innhold:
dette kontrollerer om widgetområdet har blitt fylt ut, ved hjelp av den unike ID-EN du opprettet for widgetområdet da du registrerte det i funksjonsfilen. Hvis det har blitt befolket, sender den ut innholdet i widgetområdet.
legg nå til widgetområdet under innholdet. Etter innholdet ditt (og inne i et omsluttende element), legg til dette:
Lagre sidemalfilen din.
her er den fulle koden til sidemalfilen min, slik at du kan se hvor widgeten områder før og etter sløyfen:
nå for å teste Den ut. Jeg har lagt til en widget i hvert av de nye widgetområdene:
Og her er hvordan de ser ut på siden min:
Så det er den egendefinerte sidemalen satt opp. Nå må du redigere de to andre sidemalfilene (eller opprette dem om nødvendig). Følg disse trinnene:
- hvis du arbeider med et underordnet tema, oppretter du en fil som heter kategori.php. Kopier innholdet i kategorien.php-fil fra ditt overordnede tema (hvis det har en) eller arkivet.php-fil (eller indeks.php hvis det ikke har det).
- hvis du ikke arbeider med et barnetema, men temaet ditt ikke har en kategori.php-fil, gjør en ved å kopiere arkivet.php-fil (eller hvis du ikke har en av dem, indeksen.php-fil).
- Legg til widgetområdet over innholdet i kategoriarkivfilen din-igjen, rett før sløyfen.
her er koden for widgetområdet:
gjenta nå dette For enkeltmalen:
- Opprett et enkelt innlegg.php-fil hvis temaet ditt ikke har en (eller du bruker et barntema). Kopier innholdet fra det overordnede temaets enkeltinnlegg.php-fil inn i den, eller fra neste malfil opp i malhierarkiet(enkelt.php, entall.php eller indeks.php).
- legg til widgetområdet igjen-denne gangen etter innholdet.
her er koden:
nå, hvis du legger til widgets, vises de på nettstedet ditt. Her er min viser en liste over siste innlegg etter et enkelt innlegg:
Legge Widget Områder Til Maler Gir Deg Fleksibilitet
Widget områder gjør det mulig for temaets brukere å legge til ekstra innhold uten å måtte skrive kode. Men de er ikke bare for sidepanelet. Hvis du legger til ekstra widgetområder i malfilene, får du målrettede områder på nettstedet ditt som du kan legge til widgeter i, med fin kontroll over hvor de vises.
du kan ta disse eksemplene videre hvis du vil, legge til widgetområder i alle filene dine, eller til og med bruke forskjellige versjoner av sidepanelet.php-fil for ulike innholdstyper. Verden er din østers!