WordPress-design: nyttige kodesnutter for functions.php

Når du bygger eller tilpasser et WordPress-design, dukker det ofte opp behov som standardinnstillingene ikke dekker. Da er noen få, riktige kodesnutter ofte alt som skal til. Nedenfor finner du fire praktiske tilpasninger for deg som jobber med WordPress-temaer: hvordan du skjuler admin-linjen, korter ned titler, viser dato som «X tid siden» og bytter ut teksten i bunnen av dashbordet. Alle snuttene er oppdatert til måten WordPress fungerer på i dag, og vi starter med det viktigste av alt – hvordan du legger inn kode uten å risikere at hele nettstedet går ned.

Hva functions.php er – og hvorfor du må være forsiktig

functions.php er temaets egen «plugin»-fil. Den ligger i mappen til det aktive temaet ditt (for eksempel /wp-content/themes/ditt-tema/functions.php) og kjøres hver gang WordPress laster en side. All koden i denne artikkelen legges inn her. Fordelen er at du får full kontroll; ulempen er at én eneste skrivefeil i filen kan ta ned hele nettstedet og gi den beryktede «hvite skjermen» (white screen of death), fordi en feil i PHP stopper hele siden fra å lastes.

Derfor bør du aldri redigere functions.php i det aktive, kjøpte eller nedlastede temaet direkte. Det finnes tre tryggere måter å legge inn egen kode på:

• Child-tema: et «barnetema» som arver alt fra hovedtemaet, men der du legger dine egne endringer. Da forsvinner ikke koden når hovedtemaet oppdateres. Dette er den anbefalte metoden når du jobber direkte med temakode.
• Kodesnutt-plugin: plugins som WPCode eller Code Snippets lar deg lime inn kode i et trygt grensesnitt i stedet for å røre temafilene. Feiler en snutt, deaktiverer pluginen den automatisk i stedet for å låse deg ute.
• Egen liten plugin: en enkel «site-spesifikk» plugin som samler all din egen kode på ett sted, uavhengig av temaet.

Uansett hvilken metode du velger: ta alltid en backup av WordPress-innholdet ditt først, og test gjerne endringene på en testside før du gjør dem på det ekte nettstedet. Er du helt fersk, kan det også være lurt å lese deg opp på hvordan du velger og setter opp et WordPress-design før du begynner å endre koden.

Slik skjuler du admin-linjen i toppen

Admin-linjen er den svarte verktøylinjen WordPress viser i toppen av siden når du er innlogget. Den er praktisk for raske snarveier, men mange ønsker å fjerne den – enten fordi den forstyrrer designet, eller fordi den skaper forvirring for innloggede kunder. Den enkleste og mest robuste måten å skru den av på i dag er med filteret show_admin_bar:

add_filter( 'show_admin_bar', '__return_false' );

Denne ene linjen skjuler admin-linjen for alle innloggede brukere. Den eldre metoden med å avregistrere skript og stiler (wp_deregister_script og remove_action) fungerer fortsatt delvis, men er mer skjør og unødvendig komplisert – filteret over er det WordPress selv peker på.

Vil du beholde linjen for deg selv, men skjule den for vanlige medlemmer og kunder, kan du gjøre den betinget av brukerrettigheter:

add_action( 'after_setup_theme', function() {
    if ( ! current_user_can( 'manage_options' ) ) {
        show_admin_bar( false );
    }
} );

Her vises linjen bare til brukere som kan administrere nettstedet (typisk administratorer), mens alle andre slipper å se den. Husk at hver enkelt bruker også kan skru av admin-linjen selv under Brukere → Profil i dashbordet.

Slik begrenser du antall tegn i en tittel

Lange overskrifter kan ødelegge et stramt design, for eksempel i en liste over relaterte innlegg eller i en sidestolpe. Da er det nyttig å kunne kappe tittelen etter et bestemt antall tegn. Legg denne funksjonen i functions.php:

function odd_kort_tittel( $antall = 20 ) {
    $tittel = get_the_title();
    if ( mb_strlen( $tittel ) > $antall ) {
        $tittel = mb_substr( $tittel, 0, $antall ) . '…';
    }
    return esc_html( $tittel );
}

Deretter henter du den forkortede tittelen der du ønsker den, for eksempel inne i løkken (loopen) i temaet ditt:

<?php echo odd_kort_tittel( 20 ); ?>

Tallet 20 bestemmer hvor mange tegn som vises – endre det til det du trenger. Et viktig poeng: bruk mb_substr og mb_strlen (med «mb» for multibyte), ikke den vanlige substr. Norske bokstaver som æ, ø og å lagres som flere byte i UTF-8, og den gamle substr-funksjonen kan kutte midt i en slik bokstav og lage rare tegn. Funksjonen over legger også på «…» bare når tittelen faktisk er lengre enn grensen, så korte titler blir stående urørt.

Vil du heller kappe etter antall ord enn tegn, har WordPress en innebygd funksjon som gjør jobben helt uten egen hjelpefunksjon:

<?php echo wp_trim_words( get_the_title(), 5, '…' ); ?>

Denne viser de fem første ordene i tittelen og legger på «…» hvis det er mer. Hvilken du velger avhenger av om designet ditt trenger en hard tegngrense eller en penere ordgrense.

Slik viser du «X tid siden» i stedet for en dato

Relativ tid – «2 timer siden», «3 dager siden» – er et kjent grep fra sosiale medier som får innhold til å virke ferskt og aktivt. WordPress har en innebygd funksjon, human_time_diff(), som regner ut avstanden mellom to tidspunkter på nøyaktig denne måten. Den enkleste moderne versjonen ser slik ut:

<?php echo human_time_diff( get_the_time( 'U' ), current_time( 'timestamp' ) ) . ' siden'; ?>

Vil du pakke det inn i en egen funksjon, kan du legge dette i functions.php og kalle odd_tid_siden() der du vil ha det:

function odd_tid_siden() {
    return human_time_diff( get_post_timestamp(), time() ) . ' siden';
}

Legg merke til at vi her bruker get_post_timestamp() og time(). Det er den anbefalte løsningen i dag. WordPress har nemlig frarådet bruk av current_time(‘timestamp’) og current_time(‘U’) helt siden versjon 5.3, da hele dato- og tidssystemet ble lagt om. get_post_timestamp() kom i samme versjon og gir deg et rent Unix-tidsstempel som sammenlignes trygt med time(). Et siste tips: avslutt med det norske ordet «siden» i stedet for det engelske «ago», slik eldre kodeeksempler ofte gjorde – ellers får norske lesere en halvt engelsk setning.

Slik endrer du bunnteksten i WordPress-dashbordet

Helt nederst til venstre i dashbordet står det som standard «Takk for at du bygger med WordPress». Lager du en side for en kunde, kan det se profesjonelt ut å bytte denne ut med din egen signatur eller firmanavn. Det styres av filteret admin_footer_text:

function odd_footer_tekst() {
    echo 'Nettsted levert av Ditt Firma';
}
add_filter( 'admin_footer_text', 'odd_footer_tekst' );

Bytt ut teksten inni echo-linjen med det du selv ønsker. Vil du legge inn en lenke, kan du skrive vanlig HTML i teksten, men pass på å ikke overskrive den helt med rot – mange holder det til et firmanavn og en liten lenke til egen support-side. Dette er ett av flere grep for å gi kunder et renere dashbord; vil du gå lenger, kan du tilpasse hele dashbordet for kundene dine med egne widgets og skjulte menyer.

Vanlige feil når du redigerer functions.php

De fleste problemene med egne kodesnutter skyldes noen få, gjentatte feil. Kjenner du dem igjen på forhånd, slipper du de fleste krisene:

• Du limer inn en ekstra <?php eller ?>: functions.php har som regel allerede en åpnende <?php på toppen. Limer du inn en ny midt i filen, bryter alt sammen. Lim inn selve funksjonskoden, ikke taggene rundt.
• Du glemmer et semikolon eller en klammeparentes: én manglende { } eller ; gir en «parse error» og hvit skjerm. Rør du filen via FTP, hold alltid forrige versjon klar så du kan legge den tilbake.
• Du kopierer «snedige» anførselstegn: kopierer du kode fra en nettside, blir rette anførselstegn (‘…’) noen ganger til krøllete («smarte») tegn som PHP ikke forstår. Skriv dem om for hånd hvis koden ikke vil kjøre.
• Du redigerer hovedtemaet i stedet for et child-tema: da forsvinner alt arbeidet neste gang temaet oppdateres. Bruk child-tema eller en kodesnutt-plugin.
• Du bruker substr på norsk tekst: som nevnt over gir det ødelagte æ, ø og å. Bruk alltid mb_substr.

Blir siden hvit etter en endring, er løsningen nesten alltid å fjerne den siste koden du la inn – enten via FTP/filbehandler hos webhotellet, eller ved å deaktivere snutten i plugin-grensesnittet.

Trygge måter å legge inn kode på – sammenlignet

Du trenger ikke kunne mye PHP for å bruke snuttene over, men du bør velge riktig verktøy for hvordan du legger dem inn. Tabellen under sammenligner de vanligste metodene, slik at du finner den som passer ditt nivå og prosjekt.

For de aller fleste – spesielt om du ikke er vant til å redigere temafiler – er en kodesnutt-plugin det tryggeste valget, mens et child-tema passer best når du uansett tilpasser designet i detalj. Vil du gå videre med flere tilpasninger, finner du mange flere grep i vår første samling med WordPress-tips, og en oversikt over nyttige utvidelser i guiden til WordPress-plugins og hva du bør bruke i dag.

Hvem passer disse kodesnuttene for?

Snuttene er laget for deg som bygger, tilpasser eller vedlikeholder et WordPress-tema – enten det er din egen blogg eller nettsteder du lager for kunder. Du trenger ikke være utvikler, men du bør være komfortabel med å finne functions.php (eller installere en kodesnutt-plugin) og lime inn kode nøyaktig. Er du helt nybegynner og mest opptatt av innhold og design, er ofte en god plugin eller et fleksibelt tema en enklere vei enn egen kode. Vil du vise fram koden din pent på selve nettsiden, finnes det egne verktøy for akkurat det – for eksempel kan du vise kode penere med en syntax highlighter.

Vanlige spørsmål (FAQ)

Hvor finner jeg functions.php-filen?

Den ligger i mappen til det aktive temaet ditt, under /wp-content/themes/ etterfulgt av temaets navn. Du kommer til den via FTP, via filbehandleren hos webhotellet, eller via Utseende → Temafileditor i dashbordet. Rediger den helst i et child-tema, ikke i selve hovedtemaet.

Hva gjør jeg hvis nettstedet blir helt hvitt etter at jeg la inn kode?

Den hvite skjermen betyr nesten alltid en feil i PHP-koden. Fjern eller angre den siste snutten du la inn – via FTP eller webhotellets filbehandler – så kommer siden tilbake. Derfor lønner det seg å ta backup og teste på en testside først.

Må jeg kunne programmere for å bruke disse snuttene?

Nei. Du trenger bare å lime inn koden nøyaktig på riktig sted. Bruker du en kodesnutt-plugin som WPCode eller Code Snippets, slipper du å røre temafilene i det hele tatt, og pluginen fanger opp de fleste feilene for deg.

Hvorfor ble æ, ø og å ødelagt da jeg kortet ned tittelen?

Fordi den vanlige substr-funksjonen teller byte, ikke bokstaver, og norske tegn bruker flere byte i UTF-8. Bruk mb_substr og mb_strlen i stedet, slik eksempelet i artikkelen gjør, så kuttes teksten på riktig sted.

Overlever kodesnuttene en temaoppdatering?

Bare hvis du har lagt dem i et child-tema, i en kodesnutt-plugin eller i en egen plugin. Legger du dem rett inn i hovedtemaets functions.php, blir de overskrevet neste gang temaet oppdateres.