WordPress-temahandledning för nybörjare – Del 7: Temainställning och utvalda bilder

Den här lektionen av WordPress-temahandledningen för nybörjare fortsätter genom att lägga till den grundläggande, nödvändiga koden för temainställning. Vi lär oss att lägga till temastöd och som ett resultat av det aktiveras WordPress utvalda bildfunktionalitet. I den här lektionen kommer vi också att fixa framsidans titel genom att använda vårt första filter.

Vi kommer att arbeta mestadels i functions.phpfil som vi lade till i föregående lektion. I slutet kommer vi att lägga till kod för utmatning av utvalda bilder i våra mallar.

Temainställning

Alla teman behöver lite kod för att ställa in det genom att säga åt WordPress att aktivera viss funktionalitet. Detta inkluderar aktivering av menyer, widgets, översättning och så vidare. Detta görs vanligtvis i en "setup-tema-funktion", vanligtvis kopplad till en bekvämt namngiven krok after_setup_theme. För vissa specifika saker måste vi använda WordPress-initieringskroken som heter init.

Skriver nödvändig temainställningskod förafter_setup_theme

Låt oss ställa in en sådan "inställningstemafunktion" i vår functions.php, kopplad till after_setup_theme:

add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
 
}

Inuti den här funktionen kommer vi att lägga till ett gäng vanliga och användbara installationsfunktioner för WordPress-teman. Vänligen placera alla följande kodbitar i din inställningsfunktion.

Först måste vi definiera en maximal bredd på bilder och inbäddningar (som videor). Detta säkerställer att när författare lägger in stora bilder i inlägg, håller bilderna sig inom en viss bredd. Jag ställer in den på 840 pixlar (eftersom jag vill ha plats för sidofältet), men du kan justera detta efter eget tycke.

$GLOBALS['content_width'] = 840;

Vi bör också informera WordPress om att temat är översättbart och var det kan leta efter översättningsfiler. Jag kommer att gå in på översättning av WordPress-tema i detalj i nästa steg i denna temahandledningsserie.

load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');

Notera användningen av en ny funktion för att få din temakatalog, get_stylesheet_directory(). Detta är väldigt likt det get_stylesheet_directory_uri()vi stötte på i det sista steget, men här behöver vi den relativa sökvägen, inte URL:en.

Sedan måste vi lägga till några "temastöd", som aktiverar WordPress-funktionalitet som inte är aktiverad som standard.

Det var en hel massa add_theme_supportsamtal! Som namnet antyder, add_theme_supportber WordPress att aktivera funktioner som inte är aktiverade som standard. Till exempel utvalda bilder (‘post-thumbnails’), stöd för HTML5-taggar och WordPress’ anpassade logotypfunktion i Customizer (justera önskad logotypbild om du vill!).

Det finns många fler coola funktioner, så jag uppmuntrar dig att skumma igenom dokumentationen för add_theme_support. Till exempel finns det en ganska ny, title-tag, som hanterar titeltaggen. Jag har utelämnat det i den här handledningen eftersom vi redan har lagt till titeltaggen header.phpmanuellt.

Tänk på att om du lägger till stöd för title-tag, bör du ta bort titeltaggen från din rubrikfil för att förhindra att du får dubbletter av titeltaggar.

Slutligen lägger vi till några add_theme_supportför nya Gutenberg i WordPress. Vi kommer att lägga till stöd för breda sektioner, aktivera blockstilarfunktionalitet och stöd för responsiva inbäddningar:

add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');

Slutresultatet

Här är den sista inställningsfunktionen i vår functions.php:

Efter att ha sparat bör du nu kunna lägga till utvalda bilder till inlägg i admin! Låt oss lägga till ytterligare en temafix i vår functions.phpinnan vi lägger till utvalda bilder till våra mallar; kom ihåg att wp_titlei vår som header.phpstandard inte kan eka ut något på förstasidan? Låt oss fixa det.

Lägger till ett filter tillwp_title

Låt oss lägga till vår första riktiga filtermodifieringsfunktion, med hjälp av add_filter(). Filtret vi ska haka på har samma namn som funktionen vi använde för WordPress för att dynamiskt hämta sidtiteln; wp_title. Det vi ska fixa är att se till att titeln inte är tom på framsidan – vilket är standard i WordPress. När vi är på förstasidan vill vi att den ska fyllas med WordPress-webbplatsens namn.

Tänk på att alltid returnera den filtrerade variabeln i dina filterfunktioner! Alla filter modifierar en variabel, och om du inte returnerar något blir variabeln odefinierad. Detta kan orsaka många problem. För mer djupgående om filter, ta en titt på mitt inlägg som förklarar allt om krokar och filter.

Att veta när titeln ska anpassas

Vi vill bara anpassa titelvariabeln om vi är på förstasidan. För alla andra sidor vill vi lämna det ifred (bara lämna tillbaka det som det är). Men hur vet vi när vi är på förstasidan?

Vi kan dra nytta av WordPresss villkorliga taggar, som är en hel massa användbara funktioner som returnerar sant eller falskt baserat på ett villkor. Dessa används oftast för att fråga om vi är på en viss sida eller mall. Vi kan helt enkelt fråga "Är vi på förstasidan?". Om den här metoden returnerar true, kommer vi bara att ändra titelvariabeln.

Det är värt att notera att det finns två villkorliga taggar för förstasidan, nämligen is_home()och is_front_page().Dessa skiljer sig beroende på din "Läsning"-inställning – om din förstasida visar senaste inlägg eller inte, eller är inställd på en fast sida. Om du följer den här handledningen med en helt ny WordPress-installation med standardinställningen använder du is_front_page().

Få WordPress-webbplatsens namn

Nu vet vi vilket filter vi ska använda och hur vi ser till att vi bara ändrar titeln om vi är på rätt plats. Men vad ska titeln vara? Vanligtvis är sidtiteln för förstasidan namnet på din WordPress-webbplats. Men hur får vi den informationen?

För att hämta information om den aktuella WordPress-installationen använder vi bloginfo()funktionen. Som parameter ber vi att returnera webbplatsens namn, vilket görs genom att ställa parametern till ‘ name‘. Och eftersom det här är ett filter och vi behöver returnera det, inte upprepa det, använder vi dess systermetod get_bloginfo(). Anrop bloginfo()kommer alltid att eko.

add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
    if (is_front_page()) {
        return get_bloginfo('name');
    }
    return $title;
}

Om du uppdaterar din förstasida bör du se att ditt webbplatsnamn visas i <title>taggen (och i webbläsarfliken)! Vårt filter påverkar endast förstasidan, så alla andra sidor som enstaka inlägg bör fortfarande returnera samma som tidigare; inläggets rubrik.

Utmatning av utvalda bilder i mallfiler

Tidigare när vi satte upp temastöden lade vi till stöd för utvalda bilder. Med detta aktiverat kan vi nu mata ut dessa bilder i våra mallar. Låt oss göra det nu!

Öppna upp index.phpoch hitta en plats för dem inne i slingan. Jag valde att placera den efter titeln, men det är upp till dig var du vill ha dem. Du använder funktionen the_post_thumbnail()för att mata ut bilden. Det rekommenderas att först kontrollera om inlägget ens har satt en utvald bild, vilket vi gör med hjälp av has_post_thumbnail().

Om ditt inlägg inte har en utvald bild kommer du att se ingenting som matas ut efter titeln. Men om du ställer in en utvald bild på ett av dina inlägg, the_post_thumbnail()skulle du mata ut en <img>tagg med den valda bilden. Denna funktion accepterar några ytterligare parametrar. Du kan till exempel definiera vilken bildstorlek du vill använda och kontrollera vilka attribut som läggs till på bilden. Som vanligt uppmuntrar jag dig att ta en snabb titt i dokumentationen och anpassa efter ditt tycke.

Dokumentation om använda metoder

• add_action
• load_theme_textdomain
• get_stylesheet_directory
• add_theme_support
• add_filter
• is_front_page
• get_blogginfo
• has_post_thumbnail
• the_post_thumbnail