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. :-)

Hvor nyttig er denne artikkelen for deg?

Hva kan bli bedre?

Jeg blir veldig glad hvis du legger igjen noen stikkord om hva du tenker!

WWW

Som leser kan du gi et bidrag til produksjonen, til driften og til å skaffe utstyr til testing for å sikre regelmessige, uavhengige artikler, tester og vurderinger av høy kvalitet.

Gi et bidrag

Husk å abonnere på nyhetsbrevet, det er gratis og du får alle artikler rett i innboksen.

 

Flere artikler

Enda flere artikler? Besøk arkivet.

Om Martin

Martin Koksrud Bekkelund

Dette er Martin Koksrud Bekkelund sitt private nettsted, hvor han skriver om forbrukerteknologi, teknologiledelse og hvordan teknologi, samfunn og politikk påvirker hverandre. Martin er innehaver av konsulentselskapet Nivlheim. Les mer...

 

Mastodon Facebook LinkedIn Thingiverse GitHub Ko-Fi PayPal

© 1995-2024 Martin Koksrud Bekkelund
OpphavsrettRSS og abonnementKontaktPersonvern og informasjonskapsler