[Sådan gør] Tilføj et widgetområde til ethvert WordPress-tema (2021)

Standard WordPress-temaet i 2014 var Tyve Fifteen, en skabelon med et fast sidebjælke til venstre, der bliver til en sidehoved i mobilvisning, et minimalt sidefodsområde, god typografi og et flot fremhævet billedområde. Siden da har vi set frigivelsen af ​​TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen og det nuværende defualt gratis tema TyveTyve.

Disse temaer er fantastiske, de gennemgår en hel proces for at blive valgt som standard WordPress-tema, men vi kan forstå, at brugerne stadig vil tilpasse det og gøre det til deres eget. 

Da disse temaer typisk tilbyder nogle begrænsninger, såsom et enkelt sidebjælke (som kaldes widget-klar område i WordPress), viser vi dig, hvordan du tilføjer en widget til sidefoden, eller hvordan du tilpasser koden for ethvert tema for at tilføje flere widgetområder til et tema. 

Tilføjelse af et widgetområde til TwentyFifteen to TwentyTwenty footer adskiller sig ikke fra at tilføje et widgetområde i de fleste WordPress-temaer.

Hvis du er interesseret i at se andre WordPress -temaer, anbefaler vi at se på andre populære temaer som Divi from Elegant Themes. Se vores fulde anmeldelse her.

Indhold[show]

wordpress sidefod og andre positioner

Opret et WordPress-barnetema

Når du tilpasser et WordPress-temas skabelonfiler til at oprette et widgetområde, er det god praksis at oprette en barn tema.

Konceptet med et børnetema er ret ligetil - vi ønsker ikke at bryde muligheden for at opgradere temaet til nogen nyudgivne versioner.

Når du opretter tilpasninger til et underordnet tema, tilføjes dine ændringer til underordnet tema snarere end til det oprindelige tema. Når en opdateret version af det originale tema er ude, kan du opdatere din kopi af det originale tema og lade dine ændringer være intakte i underordnet tema.

Hvis du ønsker at lære flere tips og tricks i forbindelse med WordPress, kan du besøge resten af ​​afsnittet om CollectiveRay.

1. Opret underordnet tema-bibliotek og filer 

Som et første trin skal du oprette en mappe inde i wp-indhold> temaer folder. Ring til mappen tyve femten-barn, tyveogtyve-barn. Det er vigtigt, at barnetemaet følger navngivningskonventionen for forældrene dem dog.

Så hvis forældrene kaldes tyveogtreds, skal barnet kaldes tyve femten-barn. Ligeledes, hvis det tema, du tilpasser, kaldes tyveogtyve, bør barnetemaet kaldes tgik tyve-barn.

Når du har oprettet underordnet tema, skal du oprette to ekstra filer.

Den fil, der skal bruges til at udføre ændringer i CSS-stilarter, skal kaldes style.css. Vi har også brug for  functions.php fil til underordnet tema, hvor vi kan tilføje visse nødvendige funktioner.

Disse to filer går inde i mappen med XNUMX børn eller den respektive mappe, du har oprettet til barnetemaet.

wordpress barn tema bibliotek struktur

Fordi widgetområdet skal føjes til temaet sidefod, skal du have en fil til sidefodskoden.

Den sikreste måde at kode en WordPress-skabelonfil på er at starte fra en færdiglavet skabelon og derefter tilføje det, du vil have, og / eller slette det, du ikke ønsker.

I dette tilfælde skal du tage footer.php fra Twenty Fifteen-temaet eller Twenty Twenty-temaet eller hvad det tema, du tilpasser, kaldes og indsæt det i dit barns tema.

3. Tilføj kode til barnets temafiler for at oprette widgeten

Lige nu har vi kun tomme filer, så som det er, kan barnetemaet ikke gøre noget.

For at vi skal kunne foretage ændringer, har et arbejdende barn-tema brug for nogle kommentarer øverst på style.css. Åben style.css i din foretrukne kodeditor og tilføj denne bit kode. 

/*
 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 vigtige del her er i Skabelon så i ovenstående eksempel er det Skabelon: tyveogtreds. Dette instruerer WordPress om navnet på det overordnede tema.

Sørg for, at navnet er nøjagtigt det samme som det overordnede temas mappenavn (store bogstaver eller mellemrum, bindestreger, understregninger osv. Er vigtige: alt skal matche nøjagtigt det overordnede temas mappenavn).

Åbn derefter functions.php  og tilføj følgende bit kode.

 

Selvom dette trin ikke er strengt obligatorisk, anbefales det stærkt, fordi barnets tema med denne kode arver dets forældres udseende.

Så lad os skrive en funktion, der hænger i wp_enqueue_scripts () action hook. Inde i funktionen dig enqueue det overordnede temas stilark ved hjælp af wp_enqueue_style () funktion

Dette sikrer, at barnetemaet arver forældrenes stilarter, mens det tilsidesætter en bestemt stilregel i sig selv style.css fil.

 

<?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' );

Dit barns tema er for det meste færdigt!

Adgang til Temaer panel i din WordPress-installation, og du bør se dit Twenty Fifteen Child-tema klar til brug. Klik på Aktivere og besøg dit websted. Det skal se nøjagtigt ud som det overordnede tema.

Tilføjelse af widgetområdet

Nu skal vi tilføje koden for at definere sidefods-widgetområdet. Her er det uddrag, der går ind i functions.php

/ ** * Registrer sidefod widgetområ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', 'tyve) -fifteen-child '),' id '=>' sidebar-2 ',' description '=> __ (' Tilføj widgets her for at blive vist i dit sidefodsområde. ',' femogtyve-barn '),' before_widget ' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'twentyfifteen_child_widgets_init');

Koden ovenfor tilføjer en funktion, der registrerer et sidebjælke med sidebjælke-ID'et (temaet Tyve Femten har allerede et sidebjælke med ID'et for sidebjælke-2), og derefter tilslutter denne funktion til widgets_init () actionkrog.

Lad os derefter gå videre og tilføje det nye sidebjælke til sidefoden. Åben footer.php i en kodeditor, og indtast dette uddrag lige under denne kodelinje: <footer id="colophon" class="site-footer" role="contentinfo">.

 
 
  
 
 
 

Koden ovenfor kontrollerer først, om sidebar-2 har nogen widgets, og i så fald viser sidebjælken inde i en div med klassen "widget-area". 

Den næste ting du skal gøre er at gå over til Widgets-panelet i din WordPress-back-end, finde sidefeltet til sidefoden Widgets og tilføje nogle widgets til det. Gem widgets, når du tilføjer dem, og kontroller resultatet.

Wordpress sidefod-widget
Sidefod-widgets i Twenty Fifteen-temaet

Ovenstående viser et par widgets på sidefeltet i sidefeltet på Twenty Fifteen Child, og du kan se, at teksten var for tæt på toppen af ​​containeren, og widgets bundmargen var for høj. Dette lille uddrag ind style.css forbedrer udseendet betydeligt. 

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

Her er et andet eksempel på tilføjelse af endnu et sidebjælke:

hvis (is_active_sidebar ('sidebar-2') 
|| is_active_sidebar ('sidebar-3')):
?>
">

hvis (is_active_sidebar ('sidebar-2')) {?>


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






Koden, du skal bruge, afhænger af det tema, du bruger i virkeligheden.

I dette indlæg har vi set, hvordan du tilføjer et nyt widgetområde til Twenty Fifteen WordPress-temafod. Selvom vi placerede widgetområdet i temaets sidefod, kan du bruge denne logik til at tilføje widgetområder stort set overalt i et tema ved at følge lignende trin.

Download listen over 101 WordPress-tricks, som enhver blogger skal kende

101 WordPress-tricks

Klik her for at downloade nu

Om forfatteren
David Attard
Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/
David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...