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.
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.
2. Legg til filen for WordPress-widgetområdet (i bunnteksten eller der du foretrekker det)
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 ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText 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.
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.
WordPress-bunntekst-widgeten din er ferdig!
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.
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.
og mange flere ...