Eller besøk arkivet

Martin på nettet

Med Martins øyne

WordPress og menyer

15. May 2008

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

  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • Reddit
  • TwitThis
  • Google Bookmarks
  • Identi.ca
  • Netvibes
  • Slashdot
  • Technorati

Abonner på kommentarer til denne artikkelen, alle kommentarer eller nye artikler.
Legg igjen trackback fra din egen side.

12 kommentarer

  1. 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.

    Kommentar av Geir — 15. May 2008 7:37

  2. 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.

    Kommentar av Kristin — 15. May 2008 8:31

  3. 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.

    Kommentar av Martin — 15. May 2008 11:31

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

    Kommentar av Håvard Pedersen — 15. May 2008 13:45

  5. 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?

    Kommentar av Atle — 15. May 2008 14:48

  6. 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.

    Kommentar av Kristin — 15. May 2008 15:33

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

    Kommentar av Ronny-André Bendiksen — 15. May 2008 16:27

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

    Kommentar av Martin — 15. May 2008 16:56

  9. 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…

    Kommentar av Christian — 15. May 2008 21:48

  10. 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.

    Kommentar av Martin — 16. May 2008 0:01

  11. 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.

    Kommentar av Geir — 16. May 2008 7:55

Si noe du også

Ved å trykke Post kommentar samtykker du i at du er kjent med personvernpolitikken og vil overholde retningslinjene for bruk av bekkelund.net.

Trackback og Pingback

Opphavsrett Martin Bekkelund © 1995-2009
Informasjon om opphavsrett — RSS — Kontakt