På en del af de WordPress-installationer jeg har lavet indtil nu, har der været mere behov for statiske sider end for blogs. WordPress bliver derved brugt som Content Management System mere end en blogging platform. Det har afstedkommet et ønske om noget funktionalitet, hvor hovedsider og undersider opfører sig, som de typisk gør, på de fleste websteder. Der kan f.eks. være en horisontal menu, hvor oversiderne er, og når de klikkes dukker undersiderne op i sidebar’en. Klikker du på en anden overside, så dukker dens undersider op i sidebar’en osv. Det kan WordPress ikke som udgangpunkt, og jeg har ikke kunnet finde et plugin, der giver siderne den funktionalitet.
Jeg har dog fundet ud af et par metoder. Den første jeg fandt på var simpelthen at lave en skabelon (template) for hver overside med hver sin unikke sidebar, der listede undersiderne med en standard wp_list_pages(child_of=oversidens ID). Det virker, men er unægteligt en smule bøvlet, da du skal oprette en ny skabelon for hver gang du laver en ny overside.
Senere opdagede jeg en mere elegant løsning. Det er at låne lidt kode fra K2-skabelonen. Den har simpelthen en undersidefunktion indbygget i sin sidebar, der gør præcist det, jeg har beskrevet ovenfor. Koden er som følger:
<?php /* Menu for subpages of current page */
global $notfound;
if (is_page() and ($notfound != '1')) {
$current_page = $post->ID;
while($current_page) {
$page_query = $wpdb->get_row("SELECT ID, post_title, post_status, post_parent FROM $wpdb->posts WHERE ID = '$current_page'");
$current_page = $page_query->post_parent;
}
$parent_id = $page_query->ID;
$parent_title = $page_query->post_title;
$page_menu = wp_list_pages('echo=0&sort_column=menu_order&title_li=&child_of='. $parent_id);
if ($page_menu) {
?>
<div class="sb-pagemenu">
<h2><?php echo $parent_title; ?> <?php _e('Subpages','k2_domain'); ?></h2>
<ul>
<?php echo $page_menu; ?>
</ul>
<?php if ($parent_id != $post->ID) { ?>
<a href="<?php echo get_permalink($parent_id); ?>"><?php printf(__('Back to %s','k2_domain'), $parent_title ) ?></a>
<?php } ?>
</div>
<?php } } ?>
<?php if (is_attachment()) { ?>
<div class="sb-pagemenu">
<a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php printf(__('Back to \'%s\'','k2_domain'), get_the_title($post->post_parent) ) ?></a>
</div>
<?php } ?>
OBS! Husk at snuppe koden fra den seneste udgave af K2 og ikke kopiere den fra denne artikel.
Det ser indviklet ud, men giver det rette resultat. Bemærk at K2’s class (sb-pagemenu) står i koden. Den skal naturligvis ændre til den class, der bruges i dit tema, men ellers kan det bare kopieres ind det rigtige sted i din sidebar. En anden ting, som de fleste (mig selv f.eks.) er interesseret i er, at linket til oversiden har en tilstand, hvor den “lyser”, har en anden farve eller på anden vis differentierer sig fra de andre links. De vil sige, at det er tydeligt, hvilken overside, du har klikket på. Desværre bliver oversiden “passiv”, når du klikker på en underside og det er ikke længere tydeligt, hvilken overside eller underafdeling af webstedet, du befinder dig i. Det er særligt kikset, hvis dine oversider er stylet som faneblade.
Det kan dog løses med Fold page list plugin’et. Det plugin kan flere ting. Den væsentligste er, at den kan folde undersiderne. Til brug hvis undersiden selv har flere undersider. Har den det, vil disse undersider først folde sig ud, når du klikker på en side et skridt længere oppe i sidehierarkiet. Normalt vil WordPress liste alle sider således:
underside1
Underside 2 og 3 vil med Fold page list plugin’et først folde sig ud, når der klikkes på underside 1. Alene det er ret smart. Derudover kan du i skabelonens styles.css tildele egenskaber til linkene til dine undersider og dine oversider, når plugin’et er i brug.
Der sker nemlig det som standard i WordPress, at der bliver tildelt nogle class’ til dine sider. Et link til en side får class’en “page_item”. Den aktive side får class’en “current_page_item”. Du kan se det ved at vælge “vis kilde” i din browser. Disse to kan styles, som du lyster, og på den måde tydeliggøre, hvilke sider der er aktive og passive. Men, som nævnt, er oversider ikke længere aktive, når du har klikket på en underside. Det har Fold page list løst på den måde, at den genererer en class der hedder “current_page_ancestor”, altså undersidens forfader. Den kan du style på samme måde som “current_page_item” og så burde du opnå den ønskede effekt. Se eksempelvis:
kulturvesterbro.dk
I styles.css bliver egenskaberne for linkene skabt med følgende kode:
#pages a {
background: #3D3D3D;
color: #999999;
font-weight: bold;
margin: 0 3px 0 0;
padding: 6px 10px;
}
#pages a:hover {
background: #fff;
color: #9c4f4f;
}
#pages a:active {
background: #fff;
color: #9c4f4f;
}
.current_page_item a, .current_page_item a:hover {
background: #fff !important;
color: #9c4f4f !important;
font-weight: bold;
}
.current_page_ancestor a, .current_page_ancestor a:hover {
background: #fff !important;
color: #9c4f4f !important;
}
Fanebladene ligger i en div, der hedder “Pages”. Ikke-aktive faner (#pages a) har næsten sort baggrund (#3D3D3D) og teksten er grå (#999999). Når musen føres over en fane (#pages a hover), bliver den hvid og den forbliver hvid, fra linket bliver klikket og indtil næste side dukker op (#pages a:active) og teksten bliver brun (#9c4f4f). Det sidste er ikke strengt nødvendigt, men det giver god mening for “#pages a:active” giver en forsmag på den tilstand linket vil få, når næste side er dannet. Af samme grund har “current_page_item” og “current_page_ancestor” samme tilstand. Dog med den detalje, at “current_page_item” også er fed. Det gør det aktive link i sidebar fed. Det er ikke nødvendigt med ancestor, da de links i forvejen har egenskaben fed.
Jeg håber at min lille vejledning kan bruges af andre. Den kunne være mere udførlig, men det er vigtigt at justere i forhold til det tema du bruger, og det må du selv eksperimentere med.
