Styling och modifiering av WordPress teman


Att skapa ett ”barn teman” – artikeln finns som PDF -> Child-Theme.

Källkoden är formaterad med en WordPress Plugin – Crayon Syntax Highlighter

OBS! Om du vill hoppa över kodning mm. och ta den enkla vägen, då längst ner på sidan.

Det enklaste sättet att modifiera ett WordPress tema är att skapa ett så kallat child theme som ärver all stil och funktionalitet från sin förälder tema, och blir då identisk med det. 

Så varför är detta bra då? Jo det ger dig en solid, testad startpunkt ( om du hämtat ett godkänt tema genom -> admin panelen -> teman ) och de gör det enkelt att uppdatera din förälder tema utan att radera dina ändringar.

Då börjar vi…

I det här exemplet kommer barntemat att baseras på Twenty Fourteen. För att skapa en barntema, börjar du med att skapa en ny mapp för din tema under – 

– ( där wp är rot-mappen för din installation ), ge den ett namn som du vill att temat ska heta, enligt konvention ska man välja namn utan mellanrum och lägga till -child efter huvudtema, så det här barntemat får heta twentyfourteen-child. I den nyskapade mappen sparar vi en ny stilmall / stylesheet, som ska heta style.css, som måste innehålla två saker för att fungera:

och

Här är de viktigaste delarna ( i mörk typsnitt ) den första raden som importerar stilen från huvudtemat, och “Template: mapp-namn-huvudtema” som anger förälder temat.

Det som är kommenterat kommer att synas när du kollar på Tema detaljer i admin panelen: 

Theme Name: är temats namn. Det som syns när man väljer ditt nya tema i Admin-panelen.

Theme URI: är temats hemaddress. Är en länk till nedladdnings/hemsidan för din tema om du ska distribuera den.

Description:en beskrivning av din tema. Står under temats namn i Admin-panelen.

Author:temats skapare.

Author URI: adress till skaparens hemsida.

Templateviktigt! WordPress gör skillnad på versaler eller gemener, så mappnamnet måste skrivas exakt så som det står skrivet.

Version: temats version. Bra att ha om du uppdaterar ditt tema, så att webbläsaren vet om att ladda in de nya stilarna istället för att läsa från cachen.

Det finns ett gäng till parametrar man kan skriva som t.ex. Tags som förklarar vad det är för typ av tema med hjälp av nyckelord som är komma separerade.

Om du har din admin panel öppen och kollar bland teman nu så ska du hittar din egen.  Aktivera din nya barntema och WordPress kommer nu att generera färger, marginaler, textstorlekar mm. efter huvudtemat.

Tjohoo! du har precis skapat ditt första child theme!

Nu kan du lägga till helt egna stilar fast ändå behålla basen från huvudtemat vilket sparar en massa jobb. Dom nya CSS reglerna skriver du i just barntemats style.css, eftersom @import står högst upp i din nya style.css så kommer allt du deklarerar att komma efter de gamla stilarna från huvudtemat, och på så sätt skriva över dom eftersom CSS är cascading

För att enklast hitta CSS klasser och id:n, öppnar sin sin sida i en webbläsare och väljer att kolla på källkoden med utvecklingsverktyg som Firebug, Internet Explorer Developer m.fl.

Om du nu bara behövde ändra på stil-egenskaper så kan du göra allt i style.css, men om du vill ha ännu mer kontroll över t.ex. layouten så har du en bit kvar.

 

functions.php

För att modifiera layouten och lägga till egna funktioner skapar man en functions.php fil i roten av sin barntema. Huvudtemats huvudfunktioner finns i just functions.php filen, och den läses in automatiskt först från barntemat och sedan huvudtemat.

functions.php:

Du behöver inte import functions.php utan bara skapa den i bartemats mapp och sedan skriva de funktioner du vill använda. Du får dock inte deklarerar en funktion som redan finns, utan måste hitta på nya namn till dina funktioner. 

Iden bakom Action Hooks

För att verkligen dra nytta av huvudtemat så får man koppla till så kallade hooks, som finns i huvudtemat och i själva WordPress, och det finns två typer av dom: action hooks och filter hooks.  

Theme hooks är bara funktioner; wp_head är en bra exempel på en sådan, och är definierad i wp-includes/general-template.php,  och definitionen är väldigt enkel:

 

do_action() som gör själva arbetet genom att koppla wp_head ( som är själva hooken ) till WordPress hook system. Det är rätt så enkelt att lägga till nya hooks på samma sätt.

 

Att lägga till egna hooks

Det finns tre steg som man tar när man skapar en hook till en tema. Först, lägg till hook funktionen. För det andra, lägg till funktionen där du vill att den ska exekveras, och för det tredje, kan du lägga en funktion som beskriver default beteendet – t.ex. om du skriver en hook för en header bild, så måste du skriva något som visar den. Till sist länkar du samman dom båda med do_action. Notera att tredje och fjärde steget är villkorligt; din hook behöver inte göra något per default.

Just för att man ska kunna använda sig av dess funktionalitet. Så nu skapar vi en ny PHP-fil under – 

 

– och den ska heta functions.php och innehåller det vanliga PHP öppnings- och stängnings taggarna:

 

Nedanför ser du ett gäng hooks från WordPress API.

 

Actions Functions Filter Functions Activation/Deactivation/Uninstall Functions
has_action() has_filter() register_activation_hook()
add_action() add_filter() register_uninstall_hook()
do_action() apply_filters() register_deactivation_hook()
do_action_ref_array() apply_filters_ref_array()
did_action() current_filter()
remove_action() remove_filter()
remove_all_actions() remove_all_filters()
doing_action() doing_filter()

Förstå sig på källkoden:

 

Lista över alla WordPress hooks här.
Hur man skapar en plugin och i WordPress codex här.

 

Att lägga stilar & scripter i kö > enqueueing

WordPress codex wp_enqueue_style()

Så här står det om enqueueing: enqueue |ɪnˈkjuː| verb (enqueues, enqueuing or enqueueing, enqueued) [ with obj. ] Computing add (an item of data awaiting processing) to a queue of such items. Så, enqueueing betyder att lägga i kö, och fungerar genom att man kallar funktionen wp_enqueue_style() som finns i WordPress API:n, och vi skriver in den i functions.php filen. Den har fem huvudparametrar:

 

Vi börjar med ett enkelt exempel med minimum parametrar som lägger default stilmallen style.css i kö, och vi gör det så att vi kan kalla det när det passar med just default stilen.  Skriv det här i functions.php ( i din child theme ):

 



Hela artikeln finns som PDF här > Child Theme

OBS! Det finns ett gäng plugins för just skapande av och modifiering av child theme:

En heter Child Theme Configurator och här finns en väglednings-video på YouTube

Sedan finns en annan som heter One-Click Child Theme och här finns en guide.

En annan heter Orbisius Child Theme Creator och en video på YouTube.

Och ännu en till Child Themify

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *