Tutorial 2: Lav dine egne temaindstillinger (PRO)

Denne gang skal vi have kigget på, hvordan du kan lave dine egne temaindstillinger. Personligt har jeg ofte haft brug for dette, da det tema, som jeg har fundet eller købt, ikke lige havde den ønskede indstilling. Det er ret nemt at fikse med Advanced Custom Fields PRO.

I denne tutorial vil jeg fortælle dig, hvordan du opretter temaindstillinger til dit theme. Jeg tager udgangspunkt i temaet “astra” – som jeg ved, at en del danskere benytter sig af. Hvis du gerne vil øve dig først, så kan jeg anbefale dig at kigge på min guide til at installere WordPress på localhost. På den måde kan du lege rundt i koden, uden at du skal frygte for at ødelægge noget. Det er helt klar noget jeg vil anbefale.

Der er 2 måder at gøre det på…

Man kan oprette temaindstillinger på 2 måder. Den ene måde er med et plugin, som jeg helst vil undgå, og den anden måde er med lidt kode, som skal smides ind i functions.php. Det kan godt være det lyder skræmmende med kode – men det er faktisk slet ikke så skræmmende – og jeg skal nok give dig et eksempel du bare kan kopiere.

Hvorfor ikke bare gøre det med et plugin?

Man kan sagtens gøre det med et plugin. Men da jeg er typen, som helst laver alt udenom plugins, da man så undgår en masse bloat, så vil jeg også anbefale at du gør det i dette tilfælde. Det er altså kun en smule kode der skal til – og den er selvforklarende.

Hvor kan jeg hente det omtalte plugin henne?

Pluginnet hedder ACF Options Page Admin – og kan hentes i WordPress’ eget plugin-repo her. Da jeg ikke har arbejdet med pluginnet før, kan jeg desværre ikke lave en guide til dette. Men du skal være mere end velkommen til at kontakte mig, hvis du oplever problemer med det, så kan jeg da tage et kig på det.

Okay, jeg vil gerne lave det med lidt kode

Super fedt!
Hvis du er nået hertil, så betyder det at du er klar til at kaste dig ud i noget, du måske ikke føler dig 100% hjemme i – eller måske slet ikke har prøvet før – og stor respekt for det.

Som jeg sagde tidligere, så er koden for at kunne lave et menupunkt til dine indstillinger super simpel. Herunder får du koden – forklaring følger under selve kode-stumpen.

if( function_exists('acf_add_options_page') ) {
  
  acf_add_options_page(array(
    'page_title' 	=> 'Temaindstillinger',
    'menu_title'	=> 'Temaindstillinger',
    'menu_slug' 	=> 'tema-indstillinger',
    'capability'	=> 'edit_posts',
    'redirect'	=> false
  ));
}

Linje 1: Denne linje tjekker om den funktion, som bruges til at lave en “options page”, som det hedder, findes i din WordPress installation. Hvis du har købt Advanced Custom Fields PRO, så vil den findes – ellers ikke. Denne linje er dog vigtig, for hvis du ikke har PRO-versionen, og du ikke har denne linje, så vil din side fejle, da du så har en funktion der ikke er deklareret. Kort sagt – pil ikke ved denne linje…

Linje 3: Denne funktion opretter din “options page” – det var den vi tjekkede på om den fandtes i linje 1.

Linje 4: Denne linje angiver din sidetitel. Hvis du f.eks. klikker på “Indstillinger” i venstre side, så vil din sidetitel hedde “Generelle indstillinger”. Det er dét vi angiver her.

Linje 5: Denne forklarer sig selv. Hvad skal dit menupunkt hedde. Jeg anbefaler at den hedder det samme som sidetitel – medmindre du gerne vil dele det op i små undermenuer. Mere om dette senere.

Linje 6: Hvilket slug skal dit menupunkt have oppe i URL’en. Almindelige bogstaver A-Z (ingen æ, ø og å) – og så vidt muligt, heller ikke tal (dog tror jeg det er tilladt).

Linje 7: Her angiver du hvilke brugerrettigheder man skal have, for at kunne tilgå denne side. Typisk vil den være på “edit_posts”, da det passer til administratorer og redaktører.

Linje 8: Hvis denne er sat til “true”, så vil dit menupunkt redirecte til den første undermenu. Det er f.eks. det der sker, når man klikker på “Indstillinger” i venstremenuen. Men da vi endnu ikke har oprettet undersider, så skal denne bare stå til “false”.

Linje 9: Denne afslutter linje 3

Linje 10: Denne afslutter linje 1

Nu har jeg styr på koden – hvordan gør jeg så?

Allerførst skal du lige have lavet et childtheme, hvis du ikke allerede har gjort dette. Da vi bruger Astra i dette eksempel, kan du bruge Astras egen childtheme generator, som du finder her.

Hvis du ikke bruger Astra, kan du finde en guide til hvordan du opretter et childtheme her. Guiden er på engelsk, men den er ganske god – og der er også en video du kan se. Det var denne guide jeg lærte at lave childthemes med.

Nu er du klar!
Grunden til at du skal bruge et childtheme er, at dine “option pages” ikke skal forsvinde ved næste opdatering af temaet. Nå – nu kan du, med ro i kroppen, kopiere ovenstående kodestump, og smide den i dit childthemes functions.php fil (nederst i filen). Når du har gjort dette, skulle du gerne have menupunktet “Temaindstillinger” ude i venstre side. Og klikker du på den, så får du denne “fejl”.

Eksempler på indstillinger

Grunden til ovenstående fejl er, at du endnu ikke har oprettet nogle indstillinger. Men hvilke indstillinger skal man oprette, og hvilke giver mening at have i dette menupunkt? Herunder har jeg listet nogle forskellige indstillinger jeg plejer at gemme under sådan et menupunkt.

• Logo og header-indstillinger
  Altså indstillinger, hvor jeg kan redigere f.eks. logoet, men måske også noget med header-farve eller tekst.
• Footer-indstillinger
  Hvis mit theme ikke understøtter brugen af widgets i footeren, så vil jeg helt sikkert lave det under dette menupunkt. Heldigvis har de fleste themes nu om dage styr på dette.
• Farveskemaer
  Man kan oprette en hel side til at styre forskellige farver på ens hjemmeside.
• Udseende på websitet
  Dette er nok dét jeg bruger det allermest til. Jeg kan angive kolonner, bredder, fonte og meget andet. Det er også dette eksempel vi vil bruge i denne tutorial.

Kort sagt, mulighederne er uendelige – og det er kun fantasien der sætter grænser. Hvis du har et theme, som allerede har nogle indstillinger, men du føler der mangler noget, så opret dem selv og rediger dem fra dette menupunkt!

Opret og gem dine indstillinger

Nu hvor vi har oprettet et menupunkt til temaindstillinger, så skal vi have oprettet nogle indstillinger, som vi vi bruge i vores theme. Måden man opretter felter på og henter dem ud er ens for alle themes – men min guide tager udgangspunkt i Astra theme, da det er det mest populære gratis theme i WordPress’ repository.

Indstillinger vi skal oprette

• Baggrundsfarve i headeren
• Payoff i headeren (tekst under logo)
• Vise/skjule copyright-bar

– Baggrundsfarve i headeren

Jeg er ikke sikker på, at dette er en indstilling i Astra. Jeg kunne i hvert fald ikke finde noget på det – så nu viser jeg dig hvordan du opretter en indstilling til det.

1. Når du er logget ind, skal du i dit kontrolpanel klikke på “Custom Fields” – og derefter på “Add New” i toppen.
2. Indtast en titel på din indstilling. Jeg kalder min for “Tema – Headerfarve”, da jeg så ved, at det er en indstilling til headeren, og den har noget med farve at gøre.
3. Nu skal du klikke på den blå knap, hvor der står “+ Add Field”
4. Her er de oplysninger du skal indtaste (jeg skal nok forklare hvad de betyder bagefter)
   – Field Label: Baggrundsfarve
   – Field Name: header_baggrundsfarve
   – Field Type: Color Picker
   
   Ovenstående 3 felter er faktisk nok til at vi kan bestemme en baggrundsgfarve i headeren. Eller det er i hvert fald første skridt. I field name angiver vi egentlig bare en titel på den pågældende indstilling. Field name fungerer som et ID – det er dette vi skal bruge når vi skal have dataen ud i frontenden. I Field type angiver vi hvilken slags input-felt vi vil have vist. Da vi har noget med farver at gøre, så er en color-picker oplagt!
5. Nu skal du scrolle lidt længere ned – for vi skal ned til det næste afsnit, som hedder “Location” – og her skal vi vælge:
   – Optionspage – is equal to – Temaindstillinger
   
   Dette giver næsten sig selv. Vi angiver bare, hvor indstillingen skal vises – og den skal vises på den options-side som hedder “Temaindstillinger” – og det var den vi oprettede tidligere.
6. Klik på “Udgiv“

Nu har du faktisk gjor det hele!
Hvis du klikker på Temaindstillinger nu, skulle du gerne få følgende frem:

– Baggrundsfarve i headeren

Igen skal vi ind i “Custom Fields” i admin-menuen, og igen skal vi klikke på “Add New” i toppen. Denne gang kalder vi vores Field Group for “Header – Payoff”. Når du klikker på “+ Add Field”, skal du udfylde felterne således:

– Field Label: Payoff
– Field Name: header_payoff
– Field Type: Lad denne stå på “Text”

Igen skal vi ned i “Location” – og igen skal vi vælge samme opstilling som før, altså:

– Options Page – is equal to – Temaindstillinger

Tryk så på “Udgiv“.
Når du har gjor dette, skulle du meget gerne se følgende billede, når du klikker på “Temaindstillinger”

– Vise/skjule copyright-bar

Dette er den sidste indstilling vi skal lave.
Igen skal du følge ovenstående steps – og her er de data du skal udfylde:

– Overskrift på Field Group: Footer – Copyright
– Field Label: Vis/Skjul copyright
– Field Name: footer_show_hide_copyright
– Field Type: Checkbox
– Choices: “true : Skjul copyright”

Som du kan se, så er der et ekstra felt du skal have med her. I Choices angiver du de muligheder der er med de checkbokse du laver. Du skal indsætte ovenstående uden gåseøjne – altså der skal kun stå: true : Skjul copyright

Og igen skal du bruge samme opsætning under “Location“.
Herefter skal du klikke på “Udgiv“.

Nu skulle dine “Temaindstillinger” gerne se således ud.

Hvis du ikke er helt glad for rækkefølgen på dine indstillinger, kan du klikke på “Custom Fields” – og herefter klikke ind på den enkelte field group. Hvis du scroller ned i “Settings” sektionen, så kan du finde Order No. og så kan du rette i rækkefølgen på den måde. “0” er det laveste, så den vil altid stå øverst. Jeg har sat min “Tema – Headerfarve” øverst, derefter kommer “Header – Payoff” og til sidst “Footer – Copyright“. Det er en mære kronologisk rækkefølge.

Hvad er næste step?

I næste tutorial skal vi så bruge ovenstående data, til at vise ændringerne i temaet. En ting er at oprette indstillingerne visuelt, som du lige har gjort – men det er noget helt andet når du kan se at det hele arbejder sammen dynamisk. Det er vores hovedfokus i næste tutorial i serien, som udkommer i løbet af marts 2020.

Den næste tutorial er en fortsættelse på denne, og vil derfor kræve en PRO version af Advanced Custom Fields.