Martin Koksrud Bekkelund

Martin Koksrud Bekkelund

Teknologi • Samfunn • Politikk

WordPress og menyer

15.05.08

Behovet

I skrivende stund er jeg i ferd med å ferdigstille webloggen til Friprog. Som flere ganger tidligere når jeg har designet for WordPress, har jeg savnet en funksjon for å markere hvilket menypunkt brukeren er inne på, for eksempel slik:

Meny med aktivt menyelement

Utfordringen

WordPress løser dette helt frem til mållinjen, dog uten å komme helt i mål. Som det fremgår av illustrasjonen over, ønsker jeg å vise menyen også med valget «Hovedsiden», samt en del andre sider som er opprettet som sider i WordPress. I WordPress finnes det en funksjon til bruk i temaene, som heter wp_list_pages som gjør dette for deg. Problemet med wp_list_pages er at denne funksjonen ikke genererer menypunktet «Hovedsiden», ettersom hovedsiden ikke er en egen side. Dette virker kanskje forvirrende, men har du arbeidet med WordPress forstår du (forhåpentligvis) hva jeg mener.

For alle de andre menypunktene WordPress lister ut, påføres klassen current_page_item på det aktive listeelementet. Koden som genereres av wp_list_pages vil for eksempel se slik ut:

  1. <ul>
  2. <li><a href=»#»>Friprog på nettet</a></li>
  3. <li><a href=»#»>Kontakt Friprog</a></li>
  4. <li class=»current_page_item»><a href=»#»>Om Friprog</a></li>
  5. </ul>

(URL-ene er fjernet for lesbarhetens skyld)

Dette gjør deg i stand til å stilsette det valgte menyelementet for seg, slik at man oppnår designet vist over. Når WordPress derimot ikke lister ut «Hovedsiden» som et eget menypunkt, har vi heller ingen enkel mulighet til å stilsette dette menyelementet kun når det er valgt.

Løsningen

Som med så mye annet lar heldigvis også denne lille utfordringen seg løse ved hjelp av et lite hack.

I temaet finner du frem koden som lister ut sidene, eller menyen. Den pleier å befinne seg i filen header.php, ligger inne i <div id="header"> og ser normalt ut som følger:

  1. <ul>
  2. <?php wp_list_pages(‘title_li=’); ?>
  3. </ul>

Aller først legger vi manuelt til hovedmenyen selv. Tillegget er markert med fet tekst.

  1. <ul>
  2. <li><a href=»/»>Hovedsiden</a></li>
  3. <?php wp_list_pages(‘title_li=’); ?>
  4. </ul>

Flott, nå listes «Hovedsiden» som en del av menyen, men vi har fortsatt ingen mulighet til å sette på klassen current_page_item kun når vi befinner oss på hovedsiden.

Det neste vi gjør er å endre den siste kodelinjen vi la til, slik at vi lar WordPress identifisere hvilken side vi befinner oss på, og deretter påføre klassen current_page_item dersom gjeldende side er hovedsiden. Den endelige koden blir seende ut som følger:

  1. <ul>
  2. <li<?php
  3. if (is_home())
  4. {
  5. echo » class=\»current_page_item\»»;
  6. }
  7. ?>><a href=»/»>Hovedsiden</a></li>
  8. <?php wp_list_pages(‘title_li=’); ?>
  9. </ul>

Med denne metoden kommer vi helt i mål, også med hovedsiden. Som regel finner man løsningen på WordPress’ eget hjelpenettsted, eller man gjør som i dette tilfellet, kombinerer flere forskjellige løsninger.

Nå er det bare å vente i spenning til Friprog lanserer webloggen. :-)

Martin skriver regelmessig om hvordan teknologi, samfunn og politikk påvirker hverandre. Dersom du er interessert i å følge med på hva Martin skriver, finnes det flere måter å holde deg oppdatert på. Les mer...

Flere artikler

Enda flere artikler? Besøk arkivet.

Martin Koksrud Bekkelund

Martin Koksrud Bekkelund

Bekkelund.net er Martin Koksrud Bekkelund sitt private nettsted, hvor han skriver om samspillet mellom teknologi, samfunn og politikk. Martin arbeider til daglig som direktør for produkt- og forretningsutvikling i et av Norges største selskaper. Les mer...

Følg Martin

Facebook Twitter Instagram LinkedIn GitHub SlideShare Martin Koksrud Bekkelunds RSS-kanal

Søk

© 1995-2016 Martin Koksrud Bekkelund
OpphavsrettRSS og abonnementKontakt