WordPress-temahandledning för nybörjare – Del 11: Anpassade sidmallar

I den här lektionen av WordPress-temahandledning för nybörjare lär vi oss om sidmallar, vad de är, hur man skapar dem och bästa praxis. Vi gör en mall i full bredd som ett exempel. Längs vägen lägger vi också till en klass i brödtexten genom att fråga om sidan använder en specifik sidmall.

Vad är sidmallar

Sidmallar är användbara för fall där du vill ha en annan layout eller inställning för en specifik sida. Vanliga exempel på användning av sidmallar är att lista inlägg i en anpassad inläggstyp (t.ex. portfölj, böcker eller tjänster), med ett helt annat innehåll eller layout (t.ex. inuti kolumner), eller till och med helt enkelt göra en sida i full bredd (ingen sidofält).

Användbarheten av sidmallar har minskat efter WordPress version 5.x (Gutenberg). Den nya Gutenberg-redigeraren möjliggör stor flexibilitet för att bygga sådana sidor utan behov av sidmallar. Oavsett vilket kommer vi att lära oss hur du lägger till en anpassad sidmall i vårt tema.

Inuti metaboxen "Sidattribut" för sidor visas valet av sidmall, men mallalternativet visas bara om det aktiva temat har minst en sidmall.

Sidmallar kan faktiskt också användas för inlägg och anpassade inläggstyper. Efter WordPress 4.7 och uppåt kan du definiera vilka inläggstyper du vill att mallen ska vara tillgänglig för. WordPress kommer automatiskt att lägga till den nödvändiga metaboxen "Sidattribut" till dessa inläggstyper.

Namn och placering av sidmall

Till att börja med skulle du vanligtvis göra en kopia av den mallfil som ligger närmast det du vill uppnå med sidmallen. I de flesta fall är det page.php. När det gäller namnet på din sidmall är det lite upp till dig. Men det finns vissa regler och lite sunt förnuft.

Det är frestande att helt enkelt namnge din sidmall, t.ex. page-books.phpför en mall som listar böcker av anpassad inläggstyp. Prefix aldrig din sidmall med ‘ page-‘! Om du kommer ihåg från WordPresss malhierarki, kommer WordPress att leta efter page-<slug>.phpinnan det försöker page.php, och användare av ditt tema kan stöta på oväntat beteende.

En bra praxis är att prefixa din sidmall med något som inte ingår i WordPress sidmallsnamn. Till exempel ‘ pagetemplate-', ‘ pt-‘ eller helt enkelt bara det fullständiga namnet ‘ fullwidth-template.php‘. Det är också bra att förvara dem i en undermapp; /page-templates/detta är dock inte bra om du vill att ditt tema ska vara tillgängligt för att utökas med ett barntema. Ett underordnat tema kan inte åsidosätta sidmallar som är placerade i en undermapp i det överordnade temat.

När du har bestämt dig för ett namngivningsmönster, låt oss gå vidare och skapa en sidmall.

Skapa en sidmall

Gör en kopia av page.phpoch byt namn på den till pagetemplate-fullwidth.php. För att göra det till en sidmall behöver du bara lägga till en kommentar i början som talar om för WordPress att detta är en sidmall:

Allt du behöver är en kommentar i början av filen, med "Mallnamn:" och ditt mallnamn efter. Det är allt! Gå in på admin, redigera en sida och du bör se alternativet att välja "Fullbredd" som mall.

Jag nämnde att i WordPress 4.7 kan du definiera vilka inläggstyper du vill att sidmallen ska vara tillgänglig för. Just nu är det bara tillgängligt för sidor, men säg att du vill ha möjligheten att göra inlägg i full bredd också? Lägg i så fall till "Mallposttyp:" i samma kommentarsblock och definiera dina inläggstyper separerade med kommatecken. Till exempel för att göra den tillgänglig för både inlägg och sidor;

Redigera ett inlägg och du bör se en ny metabox "Inläggsattribut" där du kan välja Fullwidth-mall. Trevlig!

Ändra koden i vår sidmall

Låt oss nu redigera sidmallen så att den faktiskt gör något annorlunda än den enstaka sidvisningen. Låt oss ta bort begäran om sidofältsmall: (Jag kommenterade den för att göra den mer synlig, men du kan bara ta bort raden).

Låt oss göra en sak till för att göra vår sidmall lättare att styla. När du lägger till CSS behöver du ofta veta om sidan har en sidofält eller inte, för att kunna justera kolumnerna/layouten. Kom ihåg body_classvilken ger en hel massa användbara klasser till kroppselementet? Vad händer om vi lägger till en anpassad klass i brödtexten som talar om för oss om den aktuella sidan har ett sidofält eller inte?

Filtrera påbody_class

Obs! Du kanske har märkt att alla sidor eller inlägg som använder en sidmall redan får en specifik kroppsklass; "page-template-" – i vårt exempel "page-template-pagetemplate-fullwidth". Det är en ganska lång klass, och dessutom vill vi göra vårt tema mer flexibelt – och tillåta fullbredd på andra mallar förutom de som använder sidmallar. Till exempel vill du vanligtvis inte ha en sidofält på framsidan, eller hur?

Obs: Detta lägger bara till en klass till kroppen så att stylingen blir enklare, det inaktiverar faktiskt inte sidofältsutgången. Du måste komma ihåg att ta bort den get_sidebar()där du inte vill ha den.

Låt oss lägga till ett filter för body_classatt lägga till en anpassad sidofältsklass i vår functions.php, så att du senare kan lägga till mer till den i andra fall du inte vill ha sidofältet. WordPress har en trevlig villkorlig tagg för att kontrollera om en sidmall används; is_page_template()där du sätter ditt sidmallsnamn som parameter. Vi vill lägga till en klass om detta inte är sant, så vi lägger till det omvända med "!":

add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
    if (!is_page_template('pagetemplate-fullwidth.php')) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}

Mest troligt när du utvecklar mallarna kommer du ibland stöta på mallar som du inte vill lägga till sidofältsklassen till, och när du går lägg till dessa fall i denna if. Om du till exempel inte vill ha sidofältsklassen på förstasidan kan du lägga till !is_front_page(). Detta kommer att lägga till klassen ‘has-sidebar’ på alla sidor utom framsidan och sidmallen:

if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))

Det är upp till dig hur många sidmallar du vill ha och vad de ska innehålla. Detta var bara en enkel introduktion. Om du är intresserad av hur du frågar efter andra inlägg i en sidmallar, ta en titt på nästa steg.