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.
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.
2. Lägg till filen för WordPress-widgetområdet (i sidfoten eller där du föredrar)
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 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 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.
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.
Din WordPress-sidwidget är klar!
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.
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.
och många fler ...