{"id":233577,"date":"2023-02-18T13:01:00","date_gmt":"2023-02-18T10:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233577"},"modified":"2022-11-11T00:26:44","modified_gmt":"2022-11-10T21:26:44","slug":"handledning-foer-wordpress-tema-foer-nyboerjare-del-3-dynamiskt-innehaall","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/handledning-foer-wordpress-tema-foer-nyboerjare-del-3-dynamiskt-innehaall\/","title":{"rendered":"Handledning f\u00f6r WordPress-tema f\u00f6r nyb\u00f6rjare \u2013 Del 3: Dynamiskt inneh\u00e5ll"},"content":{"rendered":"\n

I den h\u00e4r lektionen av WordPress-temahandledningen f\u00f6r nyb\u00f6rjare kommer vi att l\u00e4ra oss om krokar i WordPress och l\u00e4gga till n\u00e5gra krokar i v\u00e5rt tema som kr\u00e4vs f\u00f6r att ett tema ska fungera korrekt med WordPress och plugins. Vi kommer ocks\u00e5 att b\u00f6rja komma \u00e5t dynamiskt inneh\u00e5ll fr\u00e5n WordPress i v\u00e5r header, som att automatiskt f\u00e5 den aktuella sidtiteln.<\/p>\n

F\u00f6rst m\u00e5ste vi l\u00e4ra oss lite om hooks i WordPress. Krokar \u00e4r en k\u00e4rnfunktion du beh\u00f6ver f\u00f6r att bekanta dig med. Jag \u00e4r inte ett fan av att bara visa en hel massa kod d\u00e4r du beh\u00f6ver kopiera+klistra in utan att veta vad det egentligen g\u00f6r. Om du f\u00f6ljer den h\u00e4r handledningen vill du l\u00e4ra dig detta ordentligt, eller hur?<\/p>\n

Oroa dig inte, jag h\u00e5ller det kort tills vidare. Vi kommer att l\u00e4ra oss mer om dessa senare i denna handledning.<\/p>\n

Krokar i WordPress<\/h2>\n

Kortfattat; eftersom WordPress k\u00f6r all kod f\u00f6r att ladda och rendera en sida, finns det vissa "checkpoints" \u2013 som vi kallar hooks. Dessa punkter \u00e4r d\u00e4r WordPress till\u00e5ter utvecklare att \u00e4ndra eller l\u00e4gga till sin egen kod. WordPress har definierat en hel massa "checkpoints" d\u00e4r, var och en med ett unikt namn. Om du k\u00e4nner till namnet p\u00e5 den kan du l\u00e4gga till din egen kod vid dessa kontrollpunkter. Och d\u00e4rmed enkelt s\u00e4ga \u00e5t WordPress att k\u00f6ra din kod n\u00e4r den n\u00e5r den kontrollpunkten som en del av processen.<\/p>\n

Det finns tv\u00e5 typer av krokar; \u00e5tg\u00e4rder och filter. \u00c5tg\u00e4rder<\/strong> \u00e4r punkter i koden d\u00e4r du kan l\u00e4gga till anpassad kod, till exempel att mata ut n\u00e5got eller g\u00f6ra n\u00e5got f\u00f6r dina egna syften. Filter<\/strong> \u00e4r punkter i koden d\u00e4r du kan modifiera en viss variabel innan den anv\u00e4nds eller matas ut. De \u00e4r v\u00e4ldigt lika, men filter \u00e4r kopplade till en specifik variabel och \u00e5tg\u00e4rder \u00e4r det inte.<\/p>\n

Plugins, teman och sj\u00e4lva WordPress kan "haka" sin kod med add_action()<\/code>f\u00f6r \u00e5tg\u00e4rder och add_filter()<\/code>f\u00f6r filter. Dessa tv\u00e5 funktioner s\u00e4ger \u00e5t WordPress att k\u00f6ra den krokade koden n\u00e4r exekveringen n\u00e5r dessa krokar.<\/p>\n

F\u00f6r att definiera krokar anv\u00e4nder du do_action()<\/code>f\u00f6r \u00e5tg\u00e4rder och apply_filters()<\/code>f\u00f6r filter.<\/p>\n

F\u00f6r alla som \u00e4r intresserade av att veta mer har jag ett annat inl\u00e4gg som g\u00e5r in i detalj om hooks<\/a> i WordPress.<\/p>\n

Ett WordPress-tema m\u00e5ste inneh\u00e5lla n\u00e5gra specifika viktiga krokar (\u00e5tg\u00e4rder). Dessa krokar till\u00e5ter WordPress, plugins och sj\u00e4lva v\u00e5rt tema att haka p\u00e5 och g\u00f6ra viktiga saker. L\u00e5t oss titta p\u00e5 de kritiska krokarna vi beh\u00f6ver l\u00e4gga till.<\/p>\n

Temats sidhuvud och sidfot krokar<\/h2>\n

Alla WordPress-teman m\u00e5ste ha tv\u00e5 krokar i mallarna. En \u00e5tg\u00e4rd m\u00e5ste placeras i sidhuvudet (inuti <head><\/code>taggen), och en annan i sidfoten (precis f\u00f6re st\u00e4ngningstaggen <\/body><\/code>). Dessa tv\u00e5 krokar \u00e4r absolut n\u00f6dv\u00e4ndiga f\u00f6r att WordPress, ditt tema och alla plugin ska kunna l\u00e4gga till sina skript och stilkod till ditt tema.<\/p>\n

Krokarna vi beh\u00f6ver \u00e4r wp_head<\/code>och wp_footer<\/code>f\u00f6r sidhuvudet respektive sidfoten.<\/p>\n

Normalt n\u00e4r vi vill k\u00f6ra en krok, skulle vi ringa do_action(<hook name>)<\/code>. Men eftersom dessa tv\u00e5 krokar \u00e4r s\u00e5 kritiska har WordPress f\u00f6renklat dem f\u00f6r oss genom att l\u00e4gga dem i ett enkelt funktionsanrop. S\u00e5 f\u00f6r dessa tv\u00e5 krokar kan du helt enkelt anv\u00e4nda wp_head()<\/code>och wp_footer()<\/code>. I bakgrunden k\u00f6r dessa tv\u00e5 do_action()<\/code>.<\/p>\n

L\u00e5t oss l\u00e4gga till dessa tv\u00e5 krokar (funktionsanrop) till v\u00e5ra sidhuvuds- och sidfotsmallar och se vad som h\u00e4nder.<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n\u00a0\n        <?php wp_head(); ?>\n    <\/head>\n<body><\/code><\/pre>\n
        <?php wp_footer(); ?>\n    <\/body>\n<\/html><\/code><\/pre>\n
Tryck p\u00e5 Uppdatera p\u00e5 din frontend. Om du \u00e4r inloggad b\u00f6r du nu se WordPress adminf\u00e4lt visas! Detta inneb\u00e4r att WordPress nu framg\u00e5ngsrikt kan l\u00e4gga till sina skript och stilar till ditt tema.<\/p>\n
\"Handledning<\/a><\/p>\n
Du kan kontrollera din HTML-k\u00e4lla och se att din rubrik nu inneh\u00e5ller en hel del kod. Det h\u00e4r \u00e4r kod som du inte har lagt till i ditt tema. Som du kan se anv\u00e4nder WordPress sj\u00e4lva krokarna vi lade till f\u00f6r att g\u00f6ra sina egna saker.<\/p>\n
L\u00e5t oss g\u00e5 vidare fr\u00e5n krokar och b\u00f6rja titta p\u00e5 hur vi dynamiskt kan h\u00e4mta inneh\u00e5ll fr\u00e5n WordPress och mata ut dessa i v\u00e5r header.<\/p>\n
Dynamiskt inneh\u00e5ll i header<\/h2>\n
L\u00e5t oss s\u00e4ga \u00e5t WordPress att dynamiskt st\u00e4lla in dokumenttiteln (f\u00f6r <title><\/code>taggen). F\u00f6r detta kommer vi att anv\u00e4nda en funktion, (som har ett filter f\u00f6rresten), som heter wp_title()<\/code>. Som vi l\u00e4rde oss ovan, eftersom wp_title()<\/code>det \u00e4r ett filter, kan du, WordPress eller plugins \u00e4ndra utdata. Vi kommer att l\u00e4gga till ett filter till detta senare i denna handledning.<\/p>\n
Funktionen wp_title()<\/code>tar flera argument<\/a> som du kan justera efter eget tycke, men f\u00f6r n\u00e4rvarande l\u00e4gger jag till en tom str\u00e4ng s\u00e5 att den bara visar titeln p\u00e5 vilken sida vi \u00e4n befinner oss p\u00e5.<\/p>\n
Byt ut din <title><\/code>tagg header.php<\/code>till detta:<\/p>\n
<title><?php wp_title(''); ?><\/title><\/code><\/pre>\n
De glada av er kanske har m\u00e4rkt att f\u00f6rstasidan inte kommer att generera en titel. Detta \u00e4r standard WordPress-beteende som vi kommer att fixa senare i denna handledning (vi kommer att g\u00f6ra detta med hj\u00e4lp av filtret). Om du bes\u00f6ker ett enskilt inl\u00e4gg eller en sida b\u00f6r du f\u00e5 inl\u00e4ggets titel.<\/p>\n
WordPress har en snygg funktion som dynamiskt genererar ett g\u00e4ng klasser f\u00f6r <body><\/code>taggen beroende p\u00e5 vilken sida vi \u00e4r p\u00e5; kallas body_class<\/a>. Uppdatera <body><\/code>taggen header.php<\/code>till detta:<\/p>\n
<body <?php body_class(); ?>><\/code><\/pre>\n
Uppdatera och ta en titt p\u00e5 alla klasser som lagts till i <body><\/code>taggen. Ta en titt p\u00e5 olika sidor (framsida, singel, kategori). Alla dessa klasser \u00e4r mycket anv\u00e4ndbara f\u00f6r styling och f\u00f6r att skilja olika liknande delar \u00e5t. Du kommer med st\u00f6rsta sannolikhet att anv\u00e4nda n\u00e5gra av dessa i din CSS.<\/p>\n
F\u00f6r att f\u00f6lja god HTML-praxis b\u00f6r vi ocks\u00e5 informera om webbplatsens spr\u00e5k i HTML-koden. F\u00f6r detta anv\u00e4nder vi en WordPress-funktion f\u00f6r att h\u00e4mta spr\u00e5ket fr\u00e5n Inst\u00e4llningar; spr\u00e5k_attribut<\/a>.<\/p>\n
<html <?php language_attributes(); ?>><\/code><\/pre>\n
Och till sist skulle jag vilja l\u00e4gga till n\u00e5gra metataggar och s\u00e5dant som inte \u00e4r WordPress-specifika, utan f\u00f6ljer vanliga webbdesignpraxis. S\u00e5 h\u00e4r ser hela header.php<\/code>filen ut:<\/p>\n
<!DOCTYPE html>\n<html class=\"no-js\" <?php language_attributes(); ?>>\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title><?php wp_title(''); ?><\/title>\n\u00a0\n    <?php wp_head(); ?>\n<\/head>\n<body <?php body_class(); ?>><\/code><\/pre>\n
F\u00f6r n\u00e4sta steg i denna handledning kommer vi att l\u00e4mna header.php<\/code>och dyka in index.php<\/code>f\u00f6r att l\u00e4ra oss hur man h\u00e4mtar mer dynamiskt inneh\u00e5ll, till exempel inl\u00e4gg.<\/p>\n
Dokumentation om anv\u00e4nda metoder<\/h2>\n