[Hvordan] Legge til et widgetområde til ethvert WordPress-tema (2021)

Standard WordPress-tema i 2014 var Twenty Fifteen, en mal med et fast sidefelt til venstre som blir til en topptekst i mobilvisning, et minimalt bunntekstområde, flott typografi og et flott bildeområde. Siden da har vi sett utgivelsen av TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen og det nåværende defualt gratis temaet TwentyTwenty.

Disse temaene er kjempebra, de går gjennom en hel prosess for å bli valgt som standard WordPress-tema, men vi kan forstå at brukerne fortsatt vil tilpasse det og gjøre det til sitt eget. 

Siden disse temaene vanligvis har noen begrensninger, for eksempel et enkelt sidefelt (som kalles widget-ready area i WordPress), vil vi vise deg hvordan du legger til en widget i bunnteksten eller hvordan du tilpasser koden til et hvilket som helst tema for å legge til flere widgetområder til et tema. 

Å legge til et widgetområde i TwentyFifteen to TwentyTwenty bunnteksten er ikke forskjellig fra å legge til et widgetområde i de fleste WordPress-temaer.

Hvis du er interessert i å se andre WordPress -temaer, anbefaler vi å se på andre populære temaer som Divi from Elegant Themes. Sjekk ut hele anmeldelsen vår her.

innhold[Forestilling]

wordpress sidefot og andre posisjoner

Lag et WordPress-barnetema

Når du tilpasser et WordPress-temas malfiler for å opprette et widgetområde, er det god praksis å lage en barn tema.

Konseptet med et barnetema er ganske greit - vi ønsker ikke å bryte muligheten for å oppgradere temaet til noen nylig utgitte versjoner.

Når du oppretter tilpasninger til et barnetema, vil endringene dine legges til barnetemaet i stedet for det opprinnelige temaet. Når en oppdatert versjon av det originale temaet er ute, kan du oppdatere kopien av det originale temaet og la endringene være intakte i barnetemaet.

Hvis du ønsker å lære flere tips og triks relatert til WordPress, kan du gå til resten av delen om CollectiveRay.

1. Lag underordnet temakatalog og filer 

Som et første trinn, opprett en mappe inne i wp-innhold> temaer mappe. Kall mappen tjuefem-barn, tjue-tju-barn. Det er viktig at barnetemaet følger navngivningskonvensjonen til foreldrene dem.

Så hvis foreldrene blir kalt tjuefem, må barnet kalles tjuefem-barn. På samme måte, hvis temaet du tilpasser heter tjueogtyve, må barnetemaet kalles tgikk tjue barn.

Når du har opprettet barnetemaet, må du opprette to ekstra filer.

Filen som skal brukes til å utføre endringer i CSS-stilene, skal kalles style.css. Vi trenger også  functions.php fil for barnetemaet, der vi kan legge til visse funksjoner som kreves.

Disse to filene går inn i mappen for XNUMX barn eller den respektive mappen du har opprettet for barnetemaet.

wordpress barnetema katalogstruktur

Siden widgetområdet skal legges til i bunnteksten, må du ha en fil for bunnteksten.

Den sikreste måten å kode en WordPress malfil på er å starte fra en ferdig mal, og deretter legge til det du vil og / eller slette det du ikke vil ha.

I dette tilfellet, ta footer.php fra Twenty Fifteen-temaet, eller Twenty Twenty-temaet eller hva temaet du tilpasser, heter og lim det inn i barnetemaet ditt.

3. Legg til kode i barnets temafiler for å opprette widgeten

Akkurat nå har vi bare tomme filer, så som det er, kan barnetemaet ikke gjøre noe.

For at vi skal kunne gjøre endringer, trenger et arbeidende barn-tema noen kommentarer på toppen av style.css. Åpen style.css i favorittkodeditoren din og legg til denne koden. 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

Den virkelig viktige delen her er i Mal så i eksemplet ovenfor er det Mal: tjue femten. Dette instruerer WordPress om navnet på foreldretemaet.

Forsikre deg om at navnet er nøyaktig det samme som foreldretemaets mappenavn (store bokstaver eller mellomrom, bindestreker, understrekninger osv. Er viktige: alt må stemme overens med det overordnede temaets mappenavn).

Neste, åpne functions.php  og legg til følgende kode kode.

 

Selv om dette trinnet ikke er strengt obligatorisk, anbefales det på det sterkeste fordi med denne koden vil barnetemaet arve utseendet til foreldrene.

Så la oss skrive en funksjon som hekter seg inn i wp_enqueue_scripts () action krok. Inne i funksjonen du Enqueue foreldretemaets stilark ved hjelp av wp_enqueue_style () -funksjon

Dette sikrer at barnetemaet arver foreldrenes stiler mens det tilsidesetter en bestemt stilregel i seg selv style.css filen.

 

<?php 
//Import parent styles the right way and add other stylesheets if necessary.
function twenty_fifteen_child_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );

Barnetemaet ditt er stort sett ferdig!

Åpne temaer -panelet i WordPress-installasjonen din, og du bør se Twenty Fifteen Child-temaet klart til bruk. Klikk Aktiver og besøk nettstedet ditt. Det skal se nøyaktig ut som foreldretemaet.

Legge til widgetområdet

Nå må vi legge til koden for å definere bunntekstens widgetområde. Her er snutten som går inn på functions.php

/ ** * Registrer bunntekstområde. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar * / function twentyfifteen_child_widgets_init () {register_sidebar (array ('name' => __ ('Footer Widgets', 'twenty) -fifteen-child '),' id '=>' sidebar-2 ',' description '=> __ (' Legg til widgets her for å vises i bunnområdet ditt. ',' tjuefem-barn '),' before_widget ' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'twentyfifteen_child_widgets_init');

Koden ovenfor legger til en funksjon som registrerer et sidefelt med ID for sidefelt-2 (Tjuefemftema-temaet har allerede et sidefelt med ID for sidefelt-1), og deretter hekter denne funksjonen inn i widgets_init () action krok.

Deretter, la oss gå videre og legge til det nye sidefeltet i bunnteksten. Åpen footer.php i en kodeditor og skriv inn denne kodebiten rett under denne kodelinjen: <footer id="colophon" class="site-footer" role="contentinfo">.

 
 
  
 
 
 

Koden ovenfor sjekker først om sidefeltet-2 har noen widgets, i så fall viser det sidefeltet inne i en div med klassen "widget-area". 

Den neste tingen du trenger å gjøre er å gå over til widgets-panelet på WordPress-back-enden din, finne sidefeltet for Footer Widgets og legge til noen widgets i den. Lagre widgetene mens du legger til dem, og sjekk resultatet.

Wordpress bunntekst-widget
Bunntekst-widgets i Twenty Fifteen-temaet

Ovenstående viser et par widgets på sidefeltet Twenty Fifteen Child, og du kan se at teksten var for nær toppen av beholderen, og widgets bunnmargin var for høy. Denne lille snutten inn style.css vil forbedre utseendet betraktelig. 

.site-footer .widget {margin: 0; polstring: 10% 20% 0; } .site-footer .widget: last-child {margin-bottom: 10%; }	

Her er et annet eksempel på å legge til et nytt sidefelt:

hvis (is_active_sidebar ('sidebar-2') 
|| is_active_sidebar ('sidebar-3')):
?>
">
<?php
if (is_active_sidebar ('sidebar-2')) {?>


<?php }
if (is_active_sidebar ('sidebar-3')) {?>






Koden du trenger å bruke, vil avhenge av temaet du bruker i virkeligheten.

I dette innlegget har vi sett hvordan du legger til et nytt widgetområde i Twenty Fifteen WordPress tema bunntekst. Selv om vi plasserte widgetområdet i temaets bunntekst, kan du bruke denne logikken til å legge til widgetområder stort sett overalt i et tema ved å følge lignende trinn.

Last ned listen over 101 WordPress-triks hver blogger burde vite

101 WordPress-triks

Klikk her for å laste ned nå

om forfatteren
David Attard
Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/
David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...