Den h\u00e4r handledningen \u00e4r inte f\u00f6r alla.<\/p>\n
Du beh\u00f6ver inte vara en erfaren utvecklare f\u00f6r att f\u00f6lja med, men du beh\u00f6ver ett genuint intresse f\u00f6r att l\u00e4ra dig mer om WordPress och hur teman fungerar.<\/p>\n
Om du inte \u00e4r r\u00e4dd f\u00f6r att arbeta med lite kod och smutsa ner h\u00e4nderna med n\u00e5gra temafiler, v\u00e4lkommen ombord!<\/p>\n
I den h\u00e4r guiden l\u00e4r du dig hur du anpassar din WordPress-webbplats till ditt hj\u00e4rta med hj\u00e4lp av ett barntema, men f\u00f6rst…<\/p>\n
L\u00e5t oss ta upp exakt varf\u00f6r du ens b\u00f6r anv\u00e4nda denna konstiga sak som kallas "barntema."<\/p>\n
S\u00e4g efter mig:<\/p>\n
Jag sv\u00e4r h\u00f6gtidligt att aldrig redigera en temafil.<\/p>\n
Nya WordPress-anv\u00e4ndare som \u00e4r intresserade av att g\u00f6ra anpassningar med kod redigerar ofta filerna i sitt tema direkt. Det h\u00e4r \u00e4r ett stort nej-nej.<\/p>\n
Varf\u00f6r?<\/p>\n
En anledning: n\u00e4r du uppdaterar ditt tema kommer WordPress att \u00e5sidos\u00e4tta ditt befintliga tema med den nya versionen av temat.<\/p>\n
S\u00e5 varf\u00f6r spelar det n\u00e5gon roll?<\/p>\n
F\u00f6rest\u00e4ll dig att du anv\u00e4nder version 1.04 av Challenger-<\/a> temat. Du flyttade menyn i header.php-filen och lade till lite ny CSS till style.css. Sedan kommer version 1.05 ut och du ser aviseringen i din instrumentpanel.<\/p>\n N\u00e4r du uppdaterar till v1.05 kommer b\u00e5de header.php- och style.css-filerna att ers\u00e4ttas med de i v1.05 av Challenger. De kommer inte att inneh\u00e5lla samma redigeringar som du gjorde, s\u00e5 ditt arbete kommer att g\u00e5 f\u00f6rlorat och det finns inget s\u00e4tt att f\u00e5 tillbaka det. Detta kan vara ganska nedsl\u00e5ende om du s\u00e4nkte timmar i dina anpassningar.<\/p>\n Men om du l\u00e4gger in dina anpassningar i ett Challenger-tema kan du s\u00e4kert uppdatera till version 1.05 utan att f\u00f6rlora n\u00e5gra av dina anpassningar eftersom de lagras s\u00e4kert i undertemat.<\/p>\n Detta kommer att bli lite tydligare n\u00e4r vi g\u00e5r in i ett verkligt exempel, s\u00e5 l\u00e5t oss g\u00e5 vidare och g\u00f6ra ett barntema nu.<\/p>\n \u00c4ven om jag inte kommer att f\u00f6rklara i detalj hur all kod fungerar h\u00e4r, \u00e4r det h\u00e4r de grundl\u00e4ggande id\u00e9erna och utdragen du beh\u00f6ver f\u00f6r att komma ig\u00e5ng.<\/p>\n B\u00f6rja med att skapa en tom mapp p\u00e5 skrivbordet. Du kan namnge det vad du vill, men standardnamnkonventionen \u00e4r att anv\u00e4nda temats namn med gemener f\u00f6ljt av "barn" och ers\u00e4tta mellanslag med bindestreck.<\/p>\n Till exempel skulle ett barntema f\u00f6r Challenger-temat ha ett mappnamn "challenger-child." Den h\u00e4r mappen kommer att inneh\u00e5lla alla filer f\u00f6r det underordnade temat.<\/p>\n Du beh\u00f6ver bara en fil f\u00f6r att skapa ett tekniskt giltigt underordnat tema, style.css.<\/p>\n Anv\u00e4nd kodredigeraren som du v\u00e4ljer, skapa en ny fil i mappen under temat och namnge den style.css.<\/p>\n Style.css-filen \u00e4r naturligtvis d\u00e4r du l\u00e4gger till all din CSS f\u00f6r att anpassa din webbplats. F\u00f6r att WordPress ska k\u00e4nna igen ditt barntema som ett giltigt tema m\u00e5ste du l\u00e4gga till en stilmallsrubrik s\u00e5 h\u00e4r h\u00f6gst upp p\u00e5 style.css:<\/p>\n Du kan kopiera exakt denna rubrik och anv\u00e4nda den f\u00f6r dina egna barnteman. Byt bara ut namnet p\u00e5 temat med vilket tema du \u00e4n anpassar.<\/p>\n Den viktigaste delen \u00e4r v\u00e4rdet "Mall" som m\u00e5ste st\u00e4llas in p\u00e5 namnet p\u00e5 det \u00f6verordnade temat. I synnerhet namnet som anv\u00e4nds f\u00f6r mappen som inneh\u00e5ller det \u00f6verordnade temat.<\/p>\n Med detta p\u00e5 plats kan du redan nu aktivera barntemat via menyn Utseende och anv\u00e4nda det. Din sajt kommer dock att vara helt ostilad!<\/p>\n N\u00e4r ett barntema \u00e4r aktiverat, kommer WordPress inte l\u00e4ngre att ladda \u00f6verordnadstemats style.css-fil och \u00e4r ist\u00e4llet beroende av ditt barntema f\u00f6r att g\u00f6ra det.<\/p>\n S\u00e5 h\u00e4r kan du ladda b\u00e5da stilmallarna…<\/p>\n Skapa en andra fil i det underordnade temat i din kodredigerare och d\u00f6p den till functions.php.<\/p>\n L\u00e4gg sedan till f\u00f6ljande kod i filen:<\/p>\n Den h\u00e4r funktionen talar om f\u00f6r WordPress att ladda det \u00f6verordnade temats style.css-fil och sedan ladda det underordnade temats style.css-fil efter. Om du laddar det underordnade temats stilmall efter g\u00f6r det l\u00e4ttare att \u00e5sidos\u00e4tta det \u00f6verordnade temats CSS-v\u00e4ljare.<\/p>\n Som jag n\u00e4mnde tidigare kommer jag inte att t\u00e4cka denna kod rad f\u00f6r rad, men du kan hitta en mer detaljerad f\u00f6rklaring av detta utdrag i WordPress Codex<\/a>.<\/p>\n Det \u00e4r allt du beh\u00f6ver g\u00f6ra f\u00f6r att skapa ett fungerande barntema!<\/p>\n Med inst\u00e4llningen av barntema finns det tre s\u00e4tt att anpassa din webbplats med den.<\/p>\n Du kan l\u00e4gga till s\u00e5 mycket ny CSS i det underordnade temats style.css-fil som du vill.<\/p>\n N\u00e4r du hittar v\u00e4ljare att anv\u00e4nda i din CSS, kontrollera inte det \u00f6verordnade temats style.css-fil. Alla v\u00e5ra teman anv\u00e4nder en "CSS-f\u00f6rprocessor" s\u00e5 vi tittar inte ens p\u00e5 den filen! F\u00f6lj ist\u00e4llet den h\u00e4r smartare processen f\u00f6r att hitta CSS-v\u00e4ljare<\/a>, och jag tror att du kommer att ha mycket st\u00f6rre framg\u00e5ng med att anpassa din webbplats.<\/p>\n Med ett v\u00e4lkodat f\u00f6r\u00e4ldratema kan du \u00e5sidos\u00e4tta alla funktioner som finns i dess functions.php-fil.<\/p>\n Till exempel \u00e4r varje funktion i Mission News<\/a> inslagen med en En vanlig anpassning som kr\u00e4ver ett barntema \u00e4r omordning av element. Till exempel kanske du vill flytta inl\u00e4ggets titel efter den utvalda bilden ist\u00e4llet f\u00f6r f\u00f6re den.<\/p>\n Du kan ta vilken som helst av mallfilerna som finns i det \u00f6verordnade temat och placera en kopia i ditt underordnade tema. Versionen i barntemat kommer d\u00e5 att laddas ist\u00e4llet. Detta g\u00f6r att du kan l\u00e4gga till, ordna om och ta bort alla element du vill ha i vilken del av webbplatsen som helst.<\/p>\n N\u00e4r du \u00e4r n\u00f6jd med dina redigeringar kan du installera barntemat p\u00e5 din webbplats.<\/p>\n Barnteman kan laddas upp precis som vanliga WordPress-teman, s\u00e5 det tar bara en minut eller tv\u00e5 att f\u00e5 dem aktiverade p\u00e5 din webbplats. F\u00f6lj med den h\u00e4r handledningen f\u00f6r att f\u00e5 ditt barntema installerat:<\/p>\n Hur man installerar ett WordPress-barntema<\/a><\/p>\n Om du \u00e4r helt ny p\u00e5 allt detta, h\u00e4r \u00e4r ett par gratisverktyg som hj\u00e4lper dig.<\/p>\n F\u00f6rst, om du inte har en kodredigerare, kolla in Visual Studio Code<\/a>. Det \u00e4r enkelt men flexibelt. Det \u00e4r ocks\u00e5 helt gratis och massor av professionell programvara g\u00f6rs med den. Det \u00e4r vad jag anv\u00e4nder f\u00f6r att g\u00f6ra teman h\u00e4r p\u00e5 Compete Themes.<\/p>\n F\u00f6r det andra \u00e4r att skapa en lokal WordPress-webbplats (offline) ett bra s\u00e4tt att prova kod utan att p\u00e5verka din riktiga webbsida. \u00c4ven om jag har anv\u00e4nt och rekommenderat MAMP<\/a> tidigare, \u00e4r Local by Flywheel<\/a> s\u00e5 j\u00e4kla l\u00e4tt att anv\u00e4nda att jag \u00e4lskar det. Det \u00e4r vad jag anv\u00e4nder f\u00f6r temautveckling och det \u00e4r ocks\u00e5 gratis.<\/p>\n G\u00e5r tillbaka till exemplet fr\u00e5n tidigare…<\/p>\n N\u00e4r du uppdaterar Challenger-temat (eller vilket tema som helst) ers\u00e4tts hela "challenger"-katalogen, vilket inte p\u00e5verkar det underordnade temat eftersom det nu har en egen katalog i "challenger-child"-mappen.<\/p>\n Med ditt barntema p\u00e5 plats kan du s\u00e4kert g\u00f6ra vilka anpassningar du vill och h\u00e5lla ditt \u00f6verordnade tema uppdaterat.<\/p>\n Om du \u00e4r ny p\u00e5 CSS och PHP kan det ta lite tid att f\u00e5 dina anpassningar som du vill, men med ett barntema har du en bra grund att arbeta med. Kom ih\u00e5g att f\u00f6lja dessa steg f\u00f6r<\/a> att hitta CSS-v\u00e4ljare att anv\u00e4nda, och alla stilanpassningar du g\u00f6r kommer att vara ganska enkla.<\/p>\nHur man skapar ett barntema<\/h2>\n
Grundl\u00e4ggande inst\u00e4llning<\/h3>\n
Skapa filen style.css<\/h3>\n
\/*\n Theme Name: Challenger Child\n Template: challenger\n Author: Compete Themes\n Version: 1.0\n Author URI: https:\/\/www.competethemes.com\n Description: This is a child theme used to customize the Challenger WordPress theme.\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\nSkapa filen functions.php<\/h3>\n
<?php \nfunction my_theme_enqueue_styles() { \n $parent_style = 'parent-style'; \n wp_enqueue_style( $parent_style, get_template_directory_uri(). '\/style.css' ); \n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '\/style.css', array( $parent_style ), wp_get_theme()->get('Version')\n );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/code><\/pre>\nAnpassa med ditt nya barntema<\/h2>\n
L\u00e4gg till och \u00e5sidos\u00e4tt stilar<\/h3>\n
\u00c5sidos\u00e4tt funktioner<\/h3>\n
[function_exists()](https:\/\/php.net\/manual\/en\/function.function-exists.php)<\/code>check. Det betyder att du kan kopiera funktionen till ditt barntemas functions.php-fil. Sedan kan du g\u00f6ra vilka \u00e4ndringar du vill i funktionen d\u00e4r.<\/p>\n\u00c5sidos\u00e4tt mallar<\/h3>\n
Installerar barntemat<\/h3>\n
Dina uppdateringar \u00e4r s\u00e4kra<\/h2>\n