Martin Koksrud Bekkelund

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:

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

WWW