Martin Bekkelund

En blogg om IT

WordPress og menyer

15.05.08 • 12 kommentarer

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

Følg @MartinBekkelund på Twitter!

12 kommentarer

  1. Geir
    15. mai 2008 7.37

    Det er på grunn av dette jeg ønsker meg en WYSIWYG-editor for WordPress, og syns faktisk det er litt rart at det ikke er utviklet enda – men det viser igjen hvor lite peil jeg har på hvilke muligheter man har i koding/programmering.

    Svar på denne kommentaren

  2. Kristin
    15. mai 2008 8.31

    Geir: Det er noe som har utviklet en pakke med forskjellige html strukturer hvor du først kan leke med CSS og siden ha man en egen fil med temafiler hvor man da bare kan kopiere css filen over etterpå.

    Martin: Du skal få en klasse til av meg – current_page_ancestor – du vil trenge denne hvis du legger til undersider som ikke vises i menyen, men likevel gi folk et hint om hvor de er på sida.

    Svar på denne kommentaren

  3. Martin
    15. mai 2008 11.31

    WordPress har jo allerede en WYSIWYG-editor, Geir, men du tenker kanskje for utvikling? Selv har jeg aldri forstått hvorfor noen sverger til WYSIWYG-editorer når de utvikler, ettersom man (naturlig nok) har langt større kontroll over koden med en tekst-editor. Men det er nå meg, da.

    Jeg kom over current_page_ancestor da jeg søkte etter current_page_item, Kristin. Det er et smart tips.

    Svar på denne kommentaren

  4. Håvard Pedersen
    15. mai 2008 13.45

    Kjekt å notere seg siden jeg (så fort jeg plutselig finner ledig tid under en sofapute) har tenkt å emigrere bloggen min fra Serendipity til WordPress. :)

    Svar på denne kommentaren

  5. Atle
    15. mai 2008 14.48

    litt på siden, men jeg legger merke til at kode-markupen din blir ekstremt liten i opera på kubuntu.. nesten så det grenser mot uleselig.. Regner ikke med at det er slik den er tenkt å være?

    Svar på denne kommentaren

  6. Kristin
    15. mai 2008 15.33

    current_page_ancestor kom med 2.5 nå, og så er det vel en current_page_parent klasse i tillegg, så man har egentlig et hav av muligheter. Men dette funket ikke helt bra med eldre versjoner av WP, så det var ikke så morro alltid.

    Svar på denne kommentaren

  7. Ronny-André Bendiksen
    15. mai 2008 16.27

    På siden Hack WordPress finnes det et hav av lure tips og triks til slike ting!

    Svar på denne kommentaren

  8. Martin
    15. mai 2008 16.56

    Problemet med kodeformateringen er at skriftstørrelsen på Windows blir rimelig stor, mens den er en del mindre på andre plattformer. Spørsmålet er hvem jeg skal tilfredsstille. ;-) Det blir nok en løsning på det, Atle.

    Takk for bra tips, Ronny-André og Kristin! :-)

    Svar på denne kommentaren

  9. Christian
    15. mai 2008 21.48

    Syns template-opplegget i WordPress er skikkelig grisete og lite intuitivt. Mange funksjoner genererer ferdige HTML-strukturer, og om du skal gjøre noe litt eget må du ofte til å hacke på plass template-hjelpere som returnerer rene data osv.

    Hadde det ikke vært bedre om templatene hadde lettere tilgang til ren data istedenfor alle disse HTML-komponentene? Kanskje jeg bare ikke kjenner WordPress godt nok…

    Svar på denne kommentaren

  10. Martin
    16. mai 2008 0.01

    Jeg er helt enig, Christian. Enkelte funksjoner spytter ut både ferdiggenerert markup og innhold, mens andre igjen kun spytter ut innholdet, slik at man kan putte på markup selv. Jeg tafser riktignok ikke alt for ofte på templatekoden i WordPress, men det er i hvert fall mitt inntrykk.

    Svar på denne kommentaren

  11. Geir
    16. mai 2008 7.55

    Jeg skjønner opplagt at koding er best, men det forutsetter en god del know how, og mange har verken nese eller tid til slike ting. Skal jeg fungere i Sverige, kan jeg godt bruke svorsk uten større problemer, men det tar lang tid å beherske det svenske språket. Jeg er desverre av de som bare har tid til å bruke svorsk. Paralellen til WYSIWYG er ikke så fjern…. Og ja, jeg tenkte til utvikling, ikke til skriving.

    Svar på denne kommentaren

Har du synspunkter? Legg igjen en kommentar!

Ingen anonyme kommentarer! Ved å trykke Send kommentar samtykker du i at du er kjent med personvernpolitikken og vil overholde retningslinjene for bekkelund.net.

Abonner uten å kommentere

RSS og trackback

Med RSS kan du abonnere på nye kommentarer som postes til denne artikkelen.

Du kan legge igjen et trackback fra ditt eget nettsted ved å benytte trackback-adressen til denne artikkelen. Eventuelle tracback ser du under.

Flere artikler

Enda flere artikler? Besøk arkivet.

Bekkelund.net er en blogg av Martin Bekkelund, hvor han lufter sine tanker om IT og IT-politikk. Martin arbeider til daglig som seniorrådgiver, foredragsholder og skribent i IT-bransjen, hvor han veileder bedrifter og organisasjoner i strategisk bruk av IT. Les mer...

Facebook Twitter LinkedIn Flickr Vimeo Google Reader Martin Bekkelunds blogg Martin Bekkelunds RSS-kanal

© 1995-2012 Martin Bekkelund
Opphavsrett • RSS • Kontakt