WordPress Theme Tutorial för nybörjare – Del 6: Ett temas funktioner.php
Idag kommer vi att lära oss var och hur man lägger till kod utanför mallarna i vårt tema. Vi gör detta genom att lägga till temats functions.phpfil. Längs vägen kommer vi också att lära oss hur du lägger till dina stilmallar och skript på rätt sätt.
Ett temas functions.php-fil
Ett tema behöver någonstans att placera kod som inte är en del av mallarna. Det finns alltid en massa kod som alla teman behöver lägga till för att kunna hantera funktionalitet. Till exempel aktivera WordPress utvalda bildfunktion (märkte du att den saknades?), stöd för menyer, widgets, lägga till stilmallar och skript (på rätt sätt) och mer.
Den filen är functions.php. WordPress laddar automatiskt och alltid den här filen om den finns i ditt tema. Det laddas alltid både i admin och i frontend.
Lägger till en functions.php-fil till vårt tema
Låt oss skapa en ny, tom fil i vår rottema-mapp och namnge den functions.php.
Börja omedelbart med en PHP-tagg (<?php) i den filen och inkludera inte den avslutande taggen. Filen functions.phpär avsedd för PHP-kod, inte HTML. Ditt tema kan gå sönder (eller till och med bara agera konstigt) om du har tecken eller rader utanför PHP-taggar i den här filen. Du kan självklart bryta ut PHP-taggar för att mata ut HTML, men det måste göras i funktioner eller krokar. Låt mig förklara detta med ett experiment.
Låt oss testa den här filen för att se hur den fungerar. Skriv functions.phpett eko av någon dummytext inuti:
Uppdatera din frontend. Dummytexten visas. Men om du inspekterar eller visar HTML-källan kommer du att se att texten visas innan du öppnar <html>. Detta leder till helt ogiltig HTML!
Gå till din adminpanel och tryck på Uppdatera. Det gör samma sak där också (det kan vara gömt bakom admin-fältet, men det finns där i HTML-koden).
Som du kan se laddas vilken kod som helst i dina functions.phpladdningar före allt annat i våra mallar. Därför måste som regel alla utdata (HTML utanför PHP-taggar eller echo) vara inuti funktioner som kommer att köras vid rätt tidpunkter, normalt kopplade till åtgärder eller filter.
Minns från när vi lärde oss om och lade till krokar i del 3 av WordPress-temanualen för nybörjare. Sättet vi kör kod på en krok är att fästa en funktion på kroken med add_action(). Låt oss testa något annat; låt oss göra en funktion kopplad till en krok som vi redan har definierat i våra mallar; wp_footer.
Ta functions.phpbort det echovi lagt till för teständamål och skriv istället:
Tryck på Refresh i frontend och se att strängen visas snyggt på exakt den plats du har definierat wp_footer, precis innan stängning </body>. Observera också att detta inte kommer att eka något i admin. Detta beror på att wp_footerdet är en krok som bara körs i frontend.
Låt oss göra vår första ordentliga operation i functions.php!
Obs: I PHP är det inte möjligt att ha två funktioner med exakt samma namn. Det inkluderar funktionsnamn i WordPress, ditt tema och alla aktiverade plugin! Följ bästa praxis och prefix dina funktioner med din temasnäcka, som i exemplet ovan: " wptutorial_<function_name>". Detta minskar avsevärt WordPress från att krascha på grund av identiska funktionsnamn.
Note 2: Det spelar ingen roll i vilken ordning du lägger till funktioner och krokar i din functions.php. Kom ihåg att krokar körs vid vissa checkpoints ändå, inte den ordning de är i functions.php. Det enda undantaget är om du inkluderar andra filer eller initierar dina egna klasser.
Rätt sätt att lägga till stilar och skript kontra fel sätt
Några av er kanske minns från del 3 där vi lade till wp_headkroken i vår header.php. Efter att vi gjorde detta kunde WordPress ladda sina stilar och skript, inklusive administratörsfältet. Du kanske tänker att för att lägga till våra stilmallar måste vi göra en funktion kopplad till wp_headoch mata ut den <link>för stilmallen… Vanligtvis skulle du ha rätt!
Men i WordPress finns det ett speciellt sätt att lägga till skript och stilar. Detta är främst för att hantera laddningsordningen och för att undvika att ladda dubbletter av bibliotek. Till exempel kan du som temaförfattare vilja lägga till Javascript som är beroende av jQuerybiblioteket. Sedan måste du se till att den jQueryladdas innan dina filer. Men WordPress och alla plugins har samma behov, att se till att jQueryde laddas före deras skript också. Du kan inte ladda jQuerybiblioteket flera gånger eftersom det orsakar problem. Så WordPress har ett sätt att hantera i vilken ordning skript och stilmallar laddas.
Lägga till stilmallar (på rätt sätt)
För att lägga till alla stilar och javascript använder vi en krok som heter wp_enqueue_scripts. Ja, du använder den här kroken för stilar också, trots namnet. Att lägga till skript och stilar kallas för "enqueuing" – som i kö. Låt oss ställa in (lägga till) vår stilmall genom att använda funktionen wp_enqueue_style i vår functions.php:
Funktionen wp_enqueue_styletar minst två parametrar. Det första är ett unikt namn (handtag eller "slug-ID") och för det andra platsen för filen. Handtaget måste vara unikt eftersom detta är identifieraren som WordPress använder för att avgöra om det finns några dubbletter.
När det gäller att återvända till ditt tema så finns det många funktioner tillgängliga. Ovan använde jag get_stylesheet_directory_uri()som returnerar URL:en till din temamapp, och sedan lade jag till resten av sökvägen till vår stilmall.
PS: WordPress erbjuder en separat funktion för att returnera hela webbadressen till ditt temas style.css: get_stylesheet_uri(). Jag använde den andra funktionen ovan eftersom den är mer användbar att bekanta sig med. Du kommer att använda den för alla andra filer du behöver ställa i kö.
Funktionen wp_enqueue_styleaccepterar mer användbara parametrar, såsom beroenden (vilka andra css-filer måste laddas innan) och versionsnummer (användbart för cachning).
Uppdatera din frontend och se att din stilmall är laddad i <head>taggen!
Om du är en av dem som längtar efter att få ditt tema att se snyggare ut medan du kodar det, här är din chans. Jag uppmuntrar dig att börja definiera din HTML, klasser och omslag och lägga till lite styling i din style.css. Vi kommer att lägga till mer innehåll som kommer att kräva styling när vi går vidare i denna handledningsserie.
Lägga till skript (på rätt sätt)
Låt oss titta på hur vi lägger till javascript till vårt tema. Det görs med samma krok (så att du kan lägga allt i en funktion). Men för skript använder vi en lite annan funktion.
För att ställa ett skript i kö använder du wp_enqueue_script(). Parametrarna är desamma som wp_enqueue_style(). Det första är det unika handtaget och det andra är vägen till skriptet. För det tredje (valfritt) är uppsättningen av beroenden. Som fjärde (valfri) parameter ställer du in versionsnumret. Och slutligen femte (valfritt) definierar du om skriptet ska laddas i <head>taggen eller i slutet av </body>.
WordPress kommer med ett stort utbud av bibliotek som redan ingår. De är inte alltid alla laddade, men tillgängliga om du behöver dem. Om du vill lägga till ett vanligt biblioteksskript, kontrollera om WordPress redan har det först. Exempel är jQuery, alla jQuery UI-moduler, Underscore och Backbone.
Om du lägger till ett av WordPress inkluderade skript som ett beroende, behöver du inte ställa det skriptet i kö! Låt oss göra detta i praktiken.
Skapa en mapp assetsoch inuti den en undermapp jsi vår temamapp och lägg sedan till en ny tom main.jsfil. Låt oss säga att det här skriptet kräver jQuerybiblioteket, så vi ställer in det som beroende. Vi vet att WordPress kommer med jQuerybuntar och handtaget för det är jquery. Vi ställer vårt manus i kö så här:
Om du uppdaterar gränssnittet och kontrollerar din källkod, bör du se att ditt skript, main.js, har lagts till, men också att jQuerybiblioteket är laddat. Och jQueryladdas före din fil!
Du har nu lärt dig hur du lägger till stilar och skript. För att lägga till fler filer, lägg till en wp_enqueue_style()eller wp_enqueue_script()för varje ny fil.