Glossar / Lexikon-Verzeichnis mit Sprungmarken in WordPress erstellen

Für ein Kundenprojekt sollte ein Lexikon erstellt werden. Auf der Verzeichnisseite sollte ein Alphabet mit Sprungmarken zu den aufgelisteten Beiträgen dargestellt werden. Als Hauptseite habe ich eine Seite „Lexikon“ erstellt, diese verwendet folgendes Template:

<?php
/*
Template Name: Lexikon
*/
?><?php get_header(); ?>

<div id="wrapcontent">
<div id="content">

<h2>Lexikon</h2>

<ul class="alphabet">
<?php
$pages = get_pages ('child_of=99&parent=99');

foreach ($pages as $page)
{
        echo '<li><a href="#l'. $page->ID .'">' .
        $page->post_title . '</a></li>';
}
?>
</ul>

<ul class="lexikon">
<?php
$pages = get_pages ('child_of=99');

foreach ($pages as $page)
{
        echo '<li><a id="l'. $page->ID .'" href="' . get_page_link($page->ID) . '">' .
        $page->post_title . '</a></li>';
}
?>
</ul>

</div> <!-- Ende Content -->
</div> <!-- Ende WrapContent -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Aufgelistet werden zunächst die Unterseiten von „Lexikon“ (hat hier die ID 99) ohne Unterseiten, das sind die Seiten von „A“ bis „Z“. Diese Seiten haben dann die eigentlichen Lexikonbeiträge als Unterseiten, diese werden in der zweiten „Schleife“ auflistet.

Mit CSS erfolgt dann das Styling

/* Das Alphabet  */

#content ul.alphabet{border-bottom:1px solid #ccc;margin:15px 0;padding:0 0 10px 0}
#content ul.alphabet li{background:transparent;display:inline;list-style:none;padding:5px;}

/* Die Auflistung  */

#content ul.lexikon{margin:10px 5px 20px 0}
#content ul.lexikon li{background:transparent;color:#3471aa;margin:0;padding:0;list-style:none;}
#content ul.lexikon li a,#content ul.lexikon li a:hover{background:#fff;color:#555;font-weight:200;margin:0 0 0 15px;padding:0;text-decoration:underline;}
#content ul.lexikon li a:hover{color:#000;text-decoration:none;}

/* Die Buchstaben - jeder Link hat seine eigene ID ( = Sprungmarke) */

#content ul.lexikon li a#l100,#content ul.lexikon li a#l101 ... {color:#000;display:block;font-weight:700;margin:15px 0 0 0;padding:0 0 0 15px;text-decoration:none;}

Inspiriert durch www.mydigitallife.info

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (No Ratings Yet)
Loading...

Weitere Artikel aus dieser Kategorie


Ein Kommentar zu diesem Artikel bisher »

Kommentare zu »Glossar / Lexikon-Verzeichnis mit Sprungmarken in WordPress erstellen«

  1. Hallo, danke für den Quellcode. Viele Grüße Joe Hessner

Kommentieren

Erlaubtes XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>