{"id":233384,"date":"2023-02-13T16:45:00","date_gmt":"2023-02-13T13:45:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233384"},"modified":"2022-11-10T23:24:19","modified_gmt":"2022-11-10T20:24:19","slug":"wordpress-theme-tutorial-foer-nyboerjare-del-6-ett-temas-funktioner-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-theme-tutorial-foer-nyboerjare-del-6-ett-temas-funktioner-php\/","title":{"rendered":"WordPress Theme Tutorial f\u00f6r nyb\u00f6rjare \u2013 Del 6: Ett temas funktioner.php"},"content":{"rendered":"\n

Idag kommer vi att l\u00e4ra oss var och hur man l\u00e4gger till kod utanf\u00f6r mallarna i v\u00e5rt tema. Vi g\u00f6r detta genom att l\u00e4gga till temats functions.php<\/code>fil. L\u00e4ngs v\u00e4gen kommer vi ocks\u00e5 att l\u00e4ra oss hur du l\u00e4gger till dina stilmallar och skript p\u00e5 r\u00e4tt s\u00e4tt.<\/p>\n

Ett temas functions.php-fil<\/h2>\n

Ett tema beh\u00f6ver n\u00e5gonstans att placera kod som inte \u00e4r en del av mallarna. Det finns alltid en massa kod som alla teman beh\u00f6ver l\u00e4gga till f\u00f6r att kunna hantera funktionalitet. Till exempel aktivera WordPress utvalda bildfunktion (m\u00e4rkte du att den saknades?), st\u00f6d f\u00f6r menyer, widgets, l\u00e4gga till stilmallar och skript (p\u00e5 r\u00e4tt s\u00e4tt) och mer.<\/p>\n

Den filen \u00e4r functions.php<\/code>. WordPress laddar automatiskt och alltid den h\u00e4r filen om den finns i ditt tema. Det laddas alltid b\u00e5de i admin och i frontend.<\/p>\n

L\u00e4gger till en functions.php-fil till v\u00e5rt tema<\/h2>\n

L\u00e5t oss skapa en ny, tom fil i v\u00e5r rottema-mapp och namnge den functions.php<\/code>.<\/p>\n

B\u00f6rja omedelbart med en PHP-tagg (<?php<\/code>) i den filen och inkludera inte den avslutande taggen<\/strong>. Filen functions.php<\/code>\u00e4r avsedd f\u00f6r PHP-kod, inte HTML. Ditt tema kan g\u00e5 s\u00f6nder (eller till och med bara agera konstigt) om du har tecken eller rader utanf\u00f6r PHP-taggar i den h\u00e4r filen. Du kan sj\u00e4lvklart bryta ut PHP-taggar f\u00f6r att mata ut HTML, men det m\u00e5ste g\u00f6ras i funktioner eller krokar. L\u00e5t mig f\u00f6rklara detta med ett experiment.<\/p>\n

L\u00e5t oss testa den h\u00e4r filen f\u00f6r att se hur den fungerar. Skriv functions.php<\/code>ett eko av n\u00e5gon dummytext inuti:<\/p>\n

<?php\necho 'This is an experiment';<\/code><\/pre>\n
Uppdatera din frontend. Dummytexten visas. Men om du inspekterar eller visar HTML-k\u00e4llan kommer du att se att texten visas innan du \u00f6ppnar <html><\/code>. Detta leder till helt ogiltig HTML!<\/p>\n
\"WordPress<\/a><\/p>\n
G\u00e5 till din adminpanel och tryck p\u00e5 Uppdatera. Det g\u00f6r samma sak d\u00e4r ocks\u00e5 (det kan vara g\u00f6mt bakom admin-f\u00e4ltet, men det finns d\u00e4r i HTML-koden).<\/p>\n
Som du kan se laddas vilken kod som helst i dina functions.php<\/code>laddningar f\u00f6re allt annat i v\u00e5ra mallar. D\u00e4rf\u00f6r m\u00e5ste som regel alla utdata (HTML utanf\u00f6r PHP-taggar eller echo<\/code>) vara inuti funktioner som kommer att k\u00f6ras vid r\u00e4tt tidpunkter, normalt kopplade till \u00e5tg\u00e4rder eller filter.<\/p>\n
Minns fr\u00e5n n\u00e4r vi l\u00e4rde oss om och lade till krokar i del 3<\/a> av WordPress-temanualen f\u00f6r nyb\u00f6rjare. S\u00e4ttet vi k\u00f6r kod p\u00e5 en krok \u00e4r att f\u00e4sta en funktion p\u00e5 kroken med add_action()<\/code>. L\u00e5t oss testa n\u00e5got annat; l\u00e5t oss g\u00f6ra en funktion kopplad till en krok som vi redan har definierat i v\u00e5ra mallar; wp_footer<\/code>.<\/p>\n
Ta functions.php<\/code>bort det echo<\/code>vi lagt till f\u00f6r test\u00e4ndam\u00e5l och skriv ist\u00e4llet:<\/p>\n
<?php\nadd_action('wp_footer', 'wptutorial_print_footer');\nfunction wptutorial_print_footer() {\n    echo 'This sentence will appear in footer!';\n}<\/code><\/pre>\n
Tryck p\u00e5 Refresh i frontend och se att str\u00e4ngen visas snyggt p\u00e5 exakt den plats du har definierat wp_footer<\/code>, precis innan st\u00e4ngning <\/body><\/code>. Observera ocks\u00e5 att detta inte kommer att eka n\u00e5got i admin. Detta beror p\u00e5 att wp_footer<\/code>det \u00e4r en krok som bara k\u00f6rs i frontend.<\/p>\n
L\u00e5t oss g\u00f6ra v\u00e5r f\u00f6rsta ordentliga operation i functions.php<\/code>!<\/p>\n
Obs: I PHP \u00e4r det inte m\u00f6jligt att ha tv\u00e5 funktioner med exakt samma namn. Det inkluderar funktionsnamn i WordPress, ditt tema och alla aktiverade plugin! F\u00f6lj b\u00e4sta praxis och prefix dina funktioner med din temasn\u00e4cka, som i exemplet ovan: " wptutorial_<function_name><\/code>". Detta minskar avsev\u00e4rt WordPress fr\u00e5n att krascha p\u00e5 grund av identiska funktionsnamn.<\/p>\n
Note 2: Det spelar ingen roll i vilken ordning du l\u00e4gger till funktioner och krokar i din functions.php<\/code>. Kom ih\u00e5g att krokar k\u00f6rs vid vissa checkpoints \u00e4nd\u00e5, inte den ordning de \u00e4r i functions.php<\/code>. Det enda undantaget \u00e4r om du inkluderar andra filer eller initierar dina egna klasser.<\/p>\n
R\u00e4tt s\u00e4tt att l\u00e4gga till stilar och skript kontra fel s\u00e4tt<\/h2>\n
N\u00e5gra av er kanske minns fr\u00e5n del 3<\/a> d\u00e4r vi lade till wp_head<\/code>kroken i v\u00e5r header.php<\/code>. Efter att vi gjorde detta kunde WordPress ladda sina stilar och skript, inklusive administrat\u00f6rsf\u00e4ltet. Du kanske t\u00e4nker att f\u00f6r att l\u00e4gga till v\u00e5ra stilmallar m\u00e5ste vi g\u00f6ra en funktion kopplad till wp_head<\/code>och mata ut den <link><\/code>f\u00f6r stilmallen… Vanligtvis skulle du ha r\u00e4tt!<\/p>\n
Men i WordPress finns det ett speciellt s\u00e4tt att l\u00e4gga till skript och stilar. Detta \u00e4r fr\u00e4mst f\u00f6r att hantera laddningsordningen och f\u00f6r att undvika att ladda dubbletter av bibliotek. Till exempel kan du som temaf\u00f6rfattare vilja l\u00e4gga till Javascript som \u00e4r beroende av jQuery<\/code>biblioteket. Sedan m\u00e5ste du se till att den jQuery<\/code>laddas innan dina filer. Men WordPress och alla plugins har samma behov, att se till att jQuery<\/code>de laddas f\u00f6re deras skript ocks\u00e5. Du kan inte ladda jQuery<\/code>biblioteket flera g\u00e5nger eftersom det orsakar problem. S\u00e5 WordPress har ett s\u00e4tt att hantera i vilken ordning<\/strong> skript och stilmallar laddas.<\/p>\n
L\u00e4gga till stilmallar (p\u00e5 r\u00e4tt s\u00e4tt)<\/h2>\n
F\u00f6r att l\u00e4gga till alla stilar och javascript anv\u00e4nder vi en krok som heter wp_enqueue_scripts<\/code>. Ja, du anv\u00e4nder den h\u00e4r kroken f\u00f6r stilar ocks\u00e5, trots namnet. Att l\u00e4gga till skript och stilar kallas f\u00f6r "enqueuing" \u2013 som i k\u00f6. L\u00e5t oss st\u00e4lla in (l\u00e4gga till) v\u00e5r stilmall genom att anv\u00e4nda funktionen wp_enqueue_style<\/a> i v\u00e5r functions.php<\/code>:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n}<\/code><\/pre>\n
Funktionen wp_enqueue_style<\/code>tar minst tv\u00e5 parametrar. Det f\u00f6rsta \u00e4r ett unikt namn (handtag eller "slug-ID") och f\u00f6r det andra platsen f\u00f6r filen. Handtaget m\u00e5ste vara unikt eftersom detta \u00e4r identifieraren som WordPress anv\u00e4nder f\u00f6r att avg\u00f6ra om det finns n\u00e5gra dubbletter.<\/p>\n
N\u00e4r det g\u00e4ller att \u00e5terv\u00e4nda till ditt tema s\u00e5 finns det m\u00e5nga funktioner tillg\u00e4ngliga. Ovan anv\u00e4nde jag get_stylesheet_directory_uri()<\/code>som returnerar URL:en till din temamapp, och sedan lade jag till resten av s\u00f6kv\u00e4gen till v\u00e5r stilmall.<\/p>\n
PS: WordPress erbjuder en separat funktion f\u00f6r att returnera hela webbadressen till ditt temas style.css<\/code>: get_stylesheet_uri()<\/code>. Jag anv\u00e4nde den andra funktionen ovan eftersom den \u00e4r mer anv\u00e4ndbar att bekanta sig med. Du kommer att anv\u00e4nda den f\u00f6r alla andra filer du beh\u00f6ver st\u00e4lla i k\u00f6.<\/p>\n
Funktionen wp_enqueue_style<\/code>accepterar mer anv\u00e4ndbara parametrar, s\u00e5som beroenden (vilka andra css-filer m\u00e5ste laddas innan) och versionsnummer (anv\u00e4ndbart f\u00f6r cachning).<\/p>\n
Uppdatera din frontend och se att din stilmall \u00e4r laddad i <head><\/code>taggen!<\/p>\n
Om du \u00e4r en av dem som l\u00e4ngtar efter att f\u00e5 ditt tema att se snyggare ut medan du kodar det, h\u00e4r \u00e4r din chans. Jag uppmuntrar dig att b\u00f6rja definiera din HTML, klasser och omslag och l\u00e4gga till lite styling i din style.css<\/code>. Vi kommer att l\u00e4gga till mer inneh\u00e5ll som kommer att kr\u00e4va styling n\u00e4r vi g\u00e5r vidare i denna handledningsserie.<\/p>\n
L\u00e4gga till skript (p\u00e5 r\u00e4tt s\u00e4tt)<\/h2>\n
L\u00e5t oss titta p\u00e5 hur vi l\u00e4gger till javascript till v\u00e5rt tema. Det g\u00f6rs med samma krok (s\u00e5 att du kan l\u00e4gga allt i en funktion). Men f\u00f6r skript anv\u00e4nder vi en lite annan funktion.<\/p>\n
F\u00f6r att st\u00e4lla ett skript i k\u00f6 anv\u00e4nder du wp_enqueue_script()<\/code>. Parametrarna \u00e4r desamma som wp_enqueue_style()<\/code>. Det f\u00f6rsta \u00e4r det unika handtaget och det andra \u00e4r v\u00e4gen till skriptet. F\u00f6r det tredje (valfritt) \u00e4r upps\u00e4ttningen av beroenden. Som fj\u00e4rde (valfri) parameter st\u00e4ller du in versionsnumret. Och slutligen femte (valfritt) definierar du om skriptet ska laddas i <head><\/code>taggen eller i slutet av <\/body><\/code>.<\/p>\n
WordPress kommer med ett stort utbud av bibliotek som redan ing\u00e5r. De \u00e4r inte alltid alla laddade, men tillg\u00e4ngliga om du beh\u00f6ver dem. Om du vill l\u00e4gga till ett vanligt biblioteksskript, kontrollera om WordPress redan har det f\u00f6rst<\/a>. Exempel \u00e4r jQuery, alla jQuery UI-moduler, Underscore och Backbone.<\/p>\n
Om du l\u00e4gger till ett av WordPress inkluderade skript som ett beroende, beh\u00f6ver du inte st\u00e4lla det skriptet i k\u00f6! L\u00e5t oss g\u00f6ra detta i praktiken.<\/p>\n
Skapa en mapp assets<\/code>och inuti den en undermapp js<\/code>i v\u00e5r temamapp och l\u00e4gg sedan till en ny tom main.js<\/code>fil. L\u00e5t oss s\u00e4ga att det h\u00e4r skriptet kr\u00e4ver jQuery<\/code>biblioteket, s\u00e5 vi st\u00e4ller in det som beroende. Vi vet att WordPress kommer med jQuery<\/code>buntar och handtaget f\u00f6r det \u00e4r jquery<\/code>. Vi st\u00e4ller v\u00e5rt manus i k\u00f6 s\u00e5 h\u00e4r:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n    wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery']);\n}<\/code><\/pre>\n
Om du uppdaterar gr\u00e4nssnittet och kontrollerar din k\u00e4llkod, b\u00f6r du se att ditt skript, main.js<\/code>, har lagts till, men ocks\u00e5 att jQuery<\/code>biblioteket \u00e4r laddat. Och jQuery<\/code>laddas f\u00f6re din fil!<\/p>\n
\"WordPress<\/a><\/p>\n
Du har nu l\u00e4rt dig hur du l\u00e4gger till stilar och skript. F\u00f6r att l\u00e4gga till fler filer, l\u00e4gg till en wp_enqueue_style()<\/code>eller wp_enqueue_script()<\/code>f\u00f6r varje ny fil.<\/p>\n
Dokumentation om anv\u00e4nda metoder<\/h2>\n