{"id":233686,"date":"2023-02-21T13:46:00","date_gmt":"2023-02-21T10:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233686"},"modified":"2022-11-11T08:52:12","modified_gmt":"2022-11-11T05:52:12","slug":"wordpress-temahandledning-foer-nyboerjare-del-7-temainstaellning-och-utvalda-bilder","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-temahandledning-foer-nyboerjare-del-7-temainstaellning-och-utvalda-bilder\/","title":{"rendered":"WordPress-temahandledning f\u00f6r nyb\u00f6rjare \u2013 Del 7: Temainst\u00e4llning och utvalda bilder"},"content":{"rendered":"\n

Den h\u00e4r lektionen av WordPress-temahandledningen f\u00f6r nyb\u00f6rjare forts\u00e4tter genom att l\u00e4gga till den grundl\u00e4ggande, n\u00f6dv\u00e4ndiga koden f\u00f6r temainst\u00e4llning. Vi l\u00e4r oss att l\u00e4gga till temast\u00f6d och som ett resultat av det aktiveras WordPress utvalda bildfunktionalitet. I den h\u00e4r lektionen kommer vi ocks\u00e5 att fixa framsidans titel genom att anv\u00e4nda v\u00e5rt f\u00f6rsta filter.<\/p>\n

Vi kommer att arbeta mestadels i functions.php<\/code>fil som vi lade till i f\u00f6reg\u00e5ende lektion<\/a>. I slutet kommer vi att l\u00e4gga till kod f\u00f6r utmatning av utvalda bilder i v\u00e5ra mallar.<\/p>\n

Temainst\u00e4llning<\/h2>\n

Alla teman beh\u00f6ver lite kod f\u00f6r att st\u00e4lla in det genom att s\u00e4ga \u00e5t WordPress att aktivera viss funktionalitet. Detta inkluderar aktivering av menyer, widgets, \u00f6vers\u00e4ttning och s\u00e5 vidare. Detta g\u00f6rs vanligtvis i en "setup-tema-funktion", vanligtvis kopplad till en bekv\u00e4mt namngiven krok after_setup_theme<\/code>. F\u00f6r vissa specifika saker m\u00e5ste vi anv\u00e4nda WordPress-initieringskroken som heter init<\/code>.<\/p>\n

Skriver n\u00f6dv\u00e4ndig temainst\u00e4llningskod f\u00f6rafter_setup_theme<\/code><\/h3>\n

L\u00e5t oss st\u00e4lla in en s\u00e5dan "inst\u00e4llningstemafunktion" i v\u00e5r functions.php<\/code>, kopplad till after_setup_theme<\/code>:<\/p>\n

add_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n\u00a0\n}<\/code><\/pre>\n
Inuti den h\u00e4r funktionen kommer vi att l\u00e4gga till ett g\u00e4ng vanliga och anv\u00e4ndbara installationsfunktioner f\u00f6r WordPress-teman. V\u00e4nligen placera alla f\u00f6ljande kodbitar i din inst\u00e4llningsfunktion.<\/p>\n
F\u00f6rst m\u00e5ste vi definiera en maximal bredd p\u00e5 bilder och inb\u00e4ddningar (som videor). Detta s\u00e4kerst\u00e4ller att n\u00e4r f\u00f6rfattare l\u00e4gger in stora bilder i inl\u00e4gg, h\u00e5ller bilderna sig inom en viss bredd. Jag st\u00e4ller in den p\u00e5 840 pixlar (eftersom jag vill ha plats f\u00f6r sidof\u00e4ltet), men du kan justera detta efter eget tycke.<\/p>\n
$GLOBALS['content_width'] = 840;<\/code><\/pre>\n
Vi b\u00f6r ocks\u00e5 informera WordPress om att temat \u00e4r \u00f6vers\u00e4ttbart och var det kan leta efter \u00f6vers\u00e4ttningsfiler. Jag kommer att g\u00e5 in p\u00e5 \u00f6vers\u00e4ttning av WordPress-tema i detalj i n\u00e4sta steg<\/a> i denna temahandledningsserie.<\/p>\n
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\n
Notera anv\u00e4ndningen av en ny funktion f\u00f6r att f\u00e5 din temakatalog, get_stylesheet_directory()<\/code>. Detta \u00e4r v\u00e4ldigt likt det get_stylesheet_directory_uri()<\/code>vi st\u00f6tte p\u00e5 i det sista steget, men h\u00e4r beh\u00f6ver vi den relativa s\u00f6kv\u00e4gen, inte URL:en.<\/p>\n
Sedan m\u00e5ste vi l\u00e4gga till n\u00e5gra "temast\u00f6d", som aktiverar WordPress-funktionalitet som inte \u00e4r aktiverad som standard.<\/p>\n
add_theme_support('automatic-feed-links');\nadd_theme_support('post-thumbnails');\nadd_theme_support('html5', [\n    'search-form',\n    'comment-form',\n    'comment-list',\n    'gallery',\n    'caption',\n]);\nadd_theme_support('custom-logo', [\n    'height'      => 100,\n    'width'       => 300,\n    'flex-width'  => true,\n    'flex-height' => false,\n]);\nadd_theme_support('customize-selective-refresh-widgets');<\/code><\/pre>\n
Det var en hel massa add_theme_support<\/code>samtal! Som namnet antyder, add_theme_support<\/code>ber WordPress att aktivera funktioner som inte \u00e4r aktiverade som standard. Till exempel utvalda bilder (’post-thumbnails’), st\u00f6d f\u00f6r HTML5-taggar och WordPress’ anpassade logotypfunktion i Customizer (justera \u00f6nskad logotypbild om du vill!).<\/p>\n
Det finns m\u00e5nga fler coola funktioner, s\u00e5 jag uppmuntrar dig att skumma igenom dokumentationen f\u00f6r add_theme_support<\/a>. Till exempel finns det en ganska ny, title-tag<\/code>, som hanterar titeltaggen. Jag har utel\u00e4mnat det i den h\u00e4r handledningen eftersom vi redan har lagt till titeltaggen header.php<\/code>manuellt.<\/p>\n
T\u00e4nk p\u00e5 att om du l\u00e4gger till st\u00f6d f\u00f6r title-tag<\/code>, b\u00f6r du ta bort titeltaggen fr\u00e5n din rubrikfil f\u00f6r att f\u00f6rhindra att du f\u00e5r dubbletter av titeltaggar.<\/p>\n
Slutligen l\u00e4gger vi till n\u00e5gra add_theme_support<\/code>f\u00f6r nya Gutenberg i WordPress. Vi kommer att l\u00e4gga till st\u00f6d f\u00f6r breda sektioner, aktivera blockstilarfunktionalitet och st\u00f6d f\u00f6r responsiva inb\u00e4ddningar:<\/p>\n
add_theme_support('wp-block-styles');\nadd_theme_support('align-wide');\nadd_theme_support('responsive-embeds');<\/code><\/pre>\n
Slutresultatet<\/h3>\n
H\u00e4r \u00e4r den sista inst\u00e4llningsfunktionen i v\u00e5r functions.php<\/code>:<\/p>\n
add_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n    $GLOBALS['content_width'] = 840;\n    \/\/ Make your theme ready for translation\n    load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');\n    \/\/ Add theme support for WordPress functionality\n    add_theme_support('automatic-feed-links');\n    add_theme_support('title-tag');\n    add_theme_support('post-thumbnails');\n    add_theme_support('html5', [\n        'search-form',\n        'comment-form',\n        'comment-list',\n        'gallery',\n        'caption',\n    ]);\n    add_theme_support('custom-logo', [\n        'height'      => 100,\n        'width'       => 300,\n        'flex-width'  => true,\n        'flex-height' => false,\n    ]);\n    add_theme_support('customize-selective-refresh-widgets');\n    \/\/ Add theme support for Gutenberg specific functionality\n    add_theme_support('wp-block-styles');\n    add_theme_support('align-wide');\n    add_theme_support('responsive-embeds');\n}<\/code><\/pre>\n
Efter att ha sparat b\u00f6r du nu kunna l\u00e4gga till utvalda bilder till inl\u00e4gg i admin! L\u00e5t oss l\u00e4gga till ytterligare en temafix i v\u00e5r functions.php<\/code>innan vi l\u00e4gger till utvalda bilder till v\u00e5ra mallar; kom ih\u00e5g att wp_title<\/code>i v\u00e5r som header.php<\/code>standard inte kan eka ut n\u00e5got p\u00e5 f\u00f6rstasidan? L\u00e5t oss fixa det.<\/p>\n
L\u00e4gger till ett filter tillwp_title<\/code><\/h2>\n
L\u00e5t oss l\u00e4gga till v\u00e5r f\u00f6rsta riktiga filtermodifieringsfunktion, med hj\u00e4lp av add_filter()<\/code>. Filtret vi ska haka p\u00e5 har samma namn som funktionen vi anv\u00e4nde f\u00f6r WordPress f\u00f6r att dynamiskt h\u00e4mta sidtiteln; wp_title<\/code>. Det vi ska fixa \u00e4r att se till att titeln inte \u00e4r tom p\u00e5 framsidan \u2013 vilket \u00e4r standard i WordPress. N\u00e4r vi \u00e4r p\u00e5 f\u00f6rstasidan vill vi att den ska fyllas med WordPress-webbplatsens namn.<\/p>\n
T\u00e4nk p\u00e5 att alltid returnera<\/strong> den filtrerade variabeln i dina filterfunktioner! Alla filter modifierar en variabel, och om du inte returnerar n\u00e5got blir variabeln odefinierad. Detta kan orsaka m\u00e5nga problem. F\u00f6r mer djupg\u00e5ende om filter, ta en titt p\u00e5 mitt inl\u00e4gg som f\u00f6rklarar allt om krokar och filter<\/a>.<\/p>\n
Att veta n\u00e4r titeln ska anpassas<\/h3>\n
Vi vill bara anpassa titelvariabeln om vi \u00e4r p\u00e5 f\u00f6rstasidan. F\u00f6r alla andra sidor vill vi l\u00e4mna det ifred (bara l\u00e4mna tillbaka det som det \u00e4r). Men hur vet vi n\u00e4r vi \u00e4r p\u00e5 f\u00f6rstasidan?<\/p>\n
Vi kan dra nytta av WordPresss villkorliga taggar<\/a>, som \u00e4r en hel massa anv\u00e4ndbara funktioner som returnerar sant eller falskt baserat p\u00e5 ett villkor. Dessa anv\u00e4nds oftast f\u00f6r att fr\u00e5ga om vi \u00e4r p\u00e5 en viss sida eller mall. Vi kan helt enkelt fr\u00e5ga "\u00c4r vi p\u00e5 f\u00f6rstasidan?". Om den h\u00e4r metoden returnerar true, kommer vi bara att \u00e4ndra titelvariabeln.<\/p>\n
Det \u00e4r v\u00e4rt att notera att det finns tv\u00e5 villkorliga taggar f\u00f6r f\u00f6rstasidan, n\u00e4mligen is_home()<\/code>och is_front_page().<\/code>Dessa skiljer sig beroende p\u00e5 din "L\u00e4sning"-inst\u00e4llning \u2013 om din f\u00f6rstasida visar senaste inl\u00e4gg eller inte, eller \u00e4r inst\u00e4lld p\u00e5 en fast sida. Om du f\u00f6ljer den h\u00e4r handledningen med en helt ny WordPress-installation med standardinst\u00e4llningen anv\u00e4nder du is_front_page()<\/code>.<\/p>\n
F\u00e5 WordPress-webbplatsens namn<\/h3>\n
Nu vet vi vilket filter vi ska anv\u00e4nda och hur vi ser till att vi bara \u00e4ndrar titeln om vi \u00e4r p\u00e5 r\u00e4tt plats. Men vad ska titeln vara? Vanligtvis \u00e4r sidtiteln f\u00f6r f\u00f6rstasidan namnet p\u00e5 din WordPress-webbplats. Men hur f\u00e5r vi den informationen?<\/p>\n
F\u00f6r att h\u00e4mta information om den aktuella WordPress-installationen anv\u00e4nder vi bloginfo()<\/code>funktionen. Som parameter ber vi att returnera webbplatsens namn, vilket g\u00f6rs genom att st\u00e4lla parametern till ’ name<\/code>’. Och eftersom det h\u00e4r \u00e4r ett filter och vi beh\u00f6ver returnera det, inte upprepa det, anv\u00e4nder vi dess systermetod get_bloginfo()<\/code>. Anrop bloginfo()<\/code>kommer alltid att eko.<\/p>\n
add_filter('wp_title', 'wptutorial_title_filter');\nfunction wptutorial_title_filter($title) {\n    if (is_front_page()) {\n        return get_bloginfo('name');\n    }\n    return $title;\n}<\/code><\/pre>\n
Om du uppdaterar din f\u00f6rstasida b\u00f6r du se att ditt webbplatsnamn visas i <title><\/code>taggen (och i webbl\u00e4sarfliken)! V\u00e5rt filter p\u00e5verkar endast f\u00f6rstasidan, s\u00e5 alla andra sidor som enstaka inl\u00e4gg b\u00f6r fortfarande returnera samma som tidigare; inl\u00e4ggets rubrik.<\/p>\n
Utmatning av utvalda bilder i mallfiler<\/h2>\n
Tidigare n\u00e4r vi satte upp temast\u00f6den lade vi till st\u00f6d f\u00f6r utvalda bilder. Med detta aktiverat kan vi nu mata ut dessa bilder i v\u00e5ra mallar. L\u00e5t oss g\u00f6ra det nu!<\/p>\n
\u00d6ppna upp index.php<\/code>och hitta en plats f\u00f6r dem inne i slingan. Jag valde att placera den efter titeln, men det \u00e4r upp till dig var du vill ha dem. Du anv\u00e4nder funktionen the_post_thumbnail()<\/code>f\u00f6r att mata ut bilden. Det rekommenderas att f\u00f6rst kontrollera om inl\u00e4gget ens har satt en utvald bild, vilket vi g\u00f6r med hj\u00e4lp av has_post_thumbnail()<\/code>.<\/p>\n
...\n    <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n    <?php if (has_post_thumbnail()) {\n        the_post_thumbnail();\n    } ?>\n    <?php the_excerpt(); ?>\n...<\/code><\/pre>\n
Om ditt inl\u00e4gg inte har en utvald bild kommer du att se ingenting som matas ut efter titeln. Men om du st\u00e4ller in en utvald bild p\u00e5 ett av dina inl\u00e4gg, the_post_thumbnail()<\/code>skulle du mata ut en <img><\/code>tagg med den valda bilden. Denna funktion accepterar n\u00e5gra ytterligare parametrar. Du kan till exempel definiera vilken bildstorlek du vill anv\u00e4nda och kontrollera vilka attribut som l\u00e4ggs till p\u00e5 bilden. Som vanligt uppmuntrar jag dig att ta en snabb titt i dokumentationen<\/a> och anpassa efter ditt tycke.<\/p>\n
Dokumentation om anv\u00e4nda metoder<\/h2>\n