[Hur] Lägg till ett widgetområde till valfritt WordPress-tema (2021)

Standardtema för WordPress 2014 var Tjugo Femton, en mall med ett fast sidofält till vänster som förvandlas till en sidhuvud i mobilvy, ett minimalt sidfotområde, bra typografi och ett trevligt utvalt bildområde. Sedan dess har vi sett släppet av TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen och det nuvarande temaet utan defualt Tjugotvå.

Dessa teman är fantastiska, de går igenom en hel process för att bli valda som standard WordPress-tema, men vi kan förstå att användare fortfarande vill anpassa det och göra det till sitt eget. 

Eftersom dessa teman vanligtvis erbjuder vissa begränsningar, till exempel en enda sidofält (som kallas widget-ready area i WordPress), kommer vi att visa dig hur du lägger till en widget i sidfoten eller hur du justerar koden för något tema för att lägga till fler widgetområden till ett tema. 

Lägga till ett widgetområde i sidfoten TwentyFifteen to TwentyTwenty skiljer sig inte från att lägga till ett widgetområde i de flesta WordPress-teman.

Om du är intresserad av att se andra WordPress -teman rekommenderar vi att du tittar på andra populära teman som Divi from Elegant Themes. Kolla in vår fullständiga recension här.

Innehåll[Show]

wordpress sidfot och andra positioner

Skapa ett WordPress-barntema

När du anpassar ett WordPress-temas mallfiler för att skapa ett widgetområde är det bra att skapa en barn tema.

Konceptet med ett barntema är helt enkelt - vi vill inte bryta möjligheten att uppgradera temat till nya versioner.

När du skapar anpassningar till ett underordnat tema läggs dina ändringar till underordnade temat snarare än till det ursprungliga temat. När en uppdaterad version av det ursprungliga temat är ute kan du uppdatera din kopia av det ursprungliga temat och lämna dina ändringar intakta i det underordnade temat.

Om du vill lära dig mer tips och tricks relaterade till WordPress, besök resten av avsnittet om CollectiveRay.

1. Skapa underordnad temakatalog och filer 

Som ett första steg, skapa en mapp inuti wp-content> teman mapp. Ring mappen XNUMX-barn, tjugo-barn. Det är dock viktigt att barnets tema följer föräldrarnas namnkonvention.

Så om föräldern kallas tjugofemtonmåste barnet kallas tjugofemton barn. På samma sätt om temat du anpassar heter tjugotvåmåste barnet temat kallas tgick tjugo barn.

När du har skapat underordnat tema måste du skapa ytterligare två filer.

Filen som kommer att användas för att utföra ändringar i CSS-format bör kallas style.css. Vi behöver också  functions.php fil för underordnat tema, där vi kan lägga till vissa funktioner som krävs.

Dessa två filer går in i den tjugofem-barn-mappen eller respektive mapp som du har skapat för barnet-temat.

wordpress barn temakatalogstruktur

Eftersom widgetområdet ska läggas till i sidfoten måste du ha en fil för sidkod.

Det säkraste sättet att koda en WordPress-mallfil är att börja från en färdig mall och sedan lägga till det du vill ha och / eller ta bort det du inte vill ha.

I det här fallet, ta footer.php från Twenty Fifteen-temat, eller Twenty Twenty-temat eller vad det tema du anpassar kallas och klistra in det i ditt barns tema.

3. Lägg till kod i barnets temafiler för att skapa widgeten

Just nu har vi bara tomma filer, så som det är kan barntema inte göra någonting.

För att vi ska kunna göra förändringar behöver ett arbetande barns tema några kommentarer högst upp style.css. Öppen style.css i din favoritkodredigerare och lägg till den här 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 riktigt viktiga delen här är i Mall så i exemplet ovan är det Mall: tjugofemton. Detta instruerar WordPress om namnet på det överordnade temat.

Se till att namnet är exakt detsamma som det överordnade temat mappnamn (bokstäver eller några mellanslag, streck, understrykningar etc. är viktiga: allt måste matcha exakt föräldrarnas mappnamn).

Nästa, öppna functions.php  och lägg till följande bit kod.

 

Även om detta steg inte är strikt obligatoriskt, rekommenderas det starkt för att med den här koden kommer barnets tema att ärva utseendet hos sin förälder.

Så låt oss skriva en funktion som hakar i wp_enqueue_scripts () åtgärdskrok. Inuti funktionen du enqueue överordnat temas stilark med hjälp av wp_enqueue_style () funktion

Detta säkerställer att underordnade temat ärver sina föräldrars stilar medan det åsidosätter en specifik stilregel i sin egen 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' );

Ditt barns tema är mest gjort!

Gå till teman -panelen i din WordPress-installation och du bör se ditt Twenty Fifteen Child-tema redo för användning. Klick Aktivera och besök din webbplats. Det ska se ut exakt samma som överordnat tema.

Lägga till widgetområdet

Nu måste vi lägga till koden för att definiera sidfotens widgetområde. Här är utdraget som går in i functions.php

/ ** * Registrera sidfots 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', 'twenty) -fifteen-child '),' id '=>' sidebar-2 ',' description '=> __ (' Lägg till widgets här för att visas i ditt sidfotområde. ',' tjugofemton barn '),' before_widget ' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'twentyfifteen_child_widgets_init');

Koden ovan lägger till en funktion som registrerar en sidofält med ID för sidofält-2 (Twenty Fifteen-temat har redan ett sidofält med ID för sidofält-1), och sedan hakar den här funktionen i widgets_init () actionkrok.

Låt oss sedan fortsätta och lägga till det nya sidofältet i sidfoten. Öppna footer.php i en kodredigerare och ange detta kodavsnitt precis nedanför denna kodrad: <footer id="colophon" class="site-footer" role="contentinfo">.

 
 
  
 
 
 

Koden ovan kontrollerar först om sidofältet-2 har några widgets, i så fall visar det sidofältet inuti en div med klassen "widget-area". 

Nästa sak du behöver göra är att gå över till widgetpanelen i din WordPress-back-end, hitta sidfältet i sidfoten Widgets och lägga till några widgets till den. Spara widgetarna när du lägger till dem och kontrollera resultatet.

Wordpress sidfot widget
Sidfot widgets i Twenty Fifteen tema

Ovanstående visar ett par widgets på sidfältet Twenty Fifteen Child och du kan se att texten var för nära toppen av behållaren och widgets bottenmarginal var för hög. Det här lilla utdraget style.css förbättrar utseendet avsevärt. 

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

Här är ett annat exempel på att lägga till ett annat sidofält:

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

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


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


</div>



Koden du behöver använda beror på vilket tema du använder i verkligheten.

I det här inlägget har vi sett hur man lägger till ett nytt widgetområde till Twenty Fifteen WordPress-sidfot. Även om vi placerade widgetområdet i temaets sidfot kan du använda den här logiken för att lägga till widgetområden nästan överallt i ett tema genom att följa liknande steg.

Ladda ner listan över 101 WordPress-trick som alla bloggare borde veta

101 WordPress-tricks

Klicka här för att ladda ner nu

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...