Sådan laver du en topmenu i WordPress

2. august 2007 | Skrevet af Dann

Det primære formål med vores hjemmeside er at holde venner og familie opdateret med hvad vi går ov laver. Vi har så mange fantastiske venner at vi dårligt kan nå at se dem alle i løbet af en måned eller to. For at holde kontakten lidt ved lige kan de nu gå ind på denne side og holde sig opdateret – hvis de har lyst.

Administrationen af siden skal være så nem som mulig. Det betyder at alt på hjemmesiden skal administreres i et system. Det troede jeg umidelbart at WordPress kunne håndtere idet det for nylig har fået tilføjet en lille funktion til at lave “pages”. Det var bare ikke lige så nemt som jeg troede. [ Inden nogen siger at det er grimt at bruge blog software som CMS: Det er grimt, men det er funktionelt – det er et hack ].

Efter at have installeret WordPress DK ver 2.2.1 (som gik utrolig nemt) var det tid til at få står på CMS delen. At lave sider er utrolig nemt. Det er også muligt at få siderne til at være placeret i et træ (dvs. en side er en underside til en anden osv.). Problemet kommer når man får den (efter min mening ret fornuftige) idé at der skal være en horisontal menu til de sider der er øverst i træet. Der skulle også helst være en mulighed så man kan se hvor i hierakiet (på øverste niveau) man er.

Det lyder jo som noget der må være nemt, da det er standardfunktionalitet i selv det mest simple CMS. Helt nemt var det nu ikke. Google og WordPress.net kunne ikke hjælpe. Så jeg begyndte at bladre kildekoden til WordPress igennem og her kommer en vejledning trin for trin. Jeg antager at man benytter “default” temaet.

N.B. Det er et hack, hvorfor det ikke vil virke efter en opgradering!

  1. Gå ind og rediker koden i filen /wp-includes/classes.php og find linien med følgende kode:

    Den erstatter du med følgende linie:
    Hos mig er det linie 517 i classes.php.

    Formålet med denne ændring er at lave et unikt ID til hvert menupunkt. (se nedenfor)

    Det var hacket, resten kan klare en opgradering da der rettes i temaer.

  2. Gå ind og rediger i temaet. Vælg filen “Header”
    Her skal vi have tilføjet en hel del kode. Start med at copy pase nedenstående ind lige over php wp_head();

    Ovenstående giver al den CSS kode der er nødvendig for at få det til at virke. Det er nødvendigt at koden er på denne side. Den kan altså ikke flyttes til et eksternt stylesheet (det skyldes at der er noget PHP kode blandet ind der hjælper lidt til).

  3. Nu skal vi have tilføjet selve menuen
    Der hvor headerimg DIV’en afsluttes skal nedenstående indsættes

    < ?php wp_list_pages(‘depth=1&title_li=’); ?>


    Nu er der indsat den nødvendige kode til at lave menuen.

  4. Gem siden
    Hvis du har lavet nogle sider/pages i WordPress, ja så vil de nu dukke op i toppen af din side.
  5. Men, der er en bug i visse browsere (IE) der viser CSS’en lidt forkert.
    Den kan vi fikse ved at åbne style.cssfilen i Temaredigering. Herinde skal du finde de to ting der piller direkte iheaderimg. I den første erstatter du height så den nu hedder height: 200px;. I den anden slette du height angivelsen. Gem filen.
  6. Du er nu helt færdig

Bonus – Lav en “underside menu”

  1. Åbn filen “Side” til temaredigering
  2. Lige før koden php endwhile; endif; indsættes nedenstående

    echo “Undersider

      “;
      wp_list_pages(“title_li=&child_of=”.$post->ID);
      echo “

    “;

    ?>

  3. Gem siden
    Nu er der en “undermenu” på alle dine sider.

5 kommentarer til “Sådan laver du en topmenu i WordPress”

  1. Dann siger:

    Opgradering (delta) til WordPress 2.2.2 er uproblematisk i forhold til denne ændring.

  2. Lene & Dann Bleeker Pedersen » Blogarkiv » Husholdning siger:

    […] gik helt efter bogen. Eneste lille ulempe er at mit tidligere “hack” for at lave en topmenu skulle tilpasses lidt. Alt i alt tog det maks 20 […]

  3. Dann siger:

    Opdateringen til version 2.5 kræver en lidt anden kode end ovenfor. Følgende kode skal bruges istedet:

    $output .= $indent . '<li class="' . $css_class . '" id="liPageID-'.$page->ID. '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '">' . apply_filters('the_title', $page->post_title) . '</a>';</li>

  4. Lene & Dann Bleeker Pedersen » Blogarkiv » Opgraderet til Wordpress 2.6 siger:

    […] Eneste ulempe ved opgraderingen er at jeg skal rette lidt i det “hack” der er lavet for at lave topmenuen på siden. […]

  5. Dann siger:

    I WordPress 2.6 er der en lille ændring i koden igen. Denne gang i linje 578 i clases.php:

    $output .= $indent . 'ID. '"&gt;<a>ID) . '" title="' . attribute_escape(apply_filters('the_title', $page-&gt;post_title)) . '"&gt;' . apply_filters('the_title', $page-&gt;post_title) . '</a>';