WordPress als “klassisches” CMS: weiteres Beispiel

Da mich mittlerweile schon fünf Leute um mehr Informationen gebeten haben, dachte ich mir ich verfasse einen Artikel dazu. Worum geht es? Es geht darum wie ich WordPress auf meiner Herr-der-Ringe-Website einsetze: welche Anpassungen ich umgesetzt habe und welche Plugins ich einsetze?

Die Website ist so gesehen ein “Hybrid”. Sie besteht größtenteils aus “statischen” Unterseiten und hat einen kleinen Newsbereich. Die Seite existiert seit Frühjahr 2002 und bis Sommer 2010 war es ein rein statisches HTML-Projekt. Da habe ich sie dann in WordPress überführt.

Vieles was ich bei Faszination-Tolkien verwende habe ich bereits sehr ausführlich auf WordPress-Buch im Artikel “WordPress als “klassisches” CMS: ein Beispiel” beschrieben: wie man eine Page (Seite) als Startseite in WordPress festlegt, wie man Seiten-Templates erstellt etc. Daher werde ich mich hier nur darauf konzentrieren, was ich dort nicht beschreiben habe.

Seiten verwalten

Da die Website um das Blog herum weitere 86 Unterseiten hat, die von den WordPress-eigenen Pages betrieben werden, musste eine Hilfe her, die mir bei der Verwaltung dieser Unterseiten hilft. Ich habe mich für CMS Tree Page View entschieden.

Mit Hilfe dieses Plugins kann man die Seiten sehr einfach durch Klicken und Ziehen neu sortieren, verschachteln und man kann die Kindseiten ein- oder ausklappen, was das ganze übersichtlicher macht. Wenn man dann irgendwann mit der Anordnung der Seiten fertig ist, kann man das Plugin deaktivieren.

Die (Haupt-) Navigation

Ich habe in den letzten Wochen ein bisschen an der Navigation gebastelt und anstatt in der Sidebar sind nun die wichtigsten Punkte oben im Kopfbereich in Form einer Dropdown-Navigation. Um das ganze zu realisieren habe ich folgendes in die functions.php eingefügt:

function die_hauptnavi() {
	register_nav_menus(
		array(
			'haupt_navi' => 'Die Hauptnavigation',
		)
	);
}

add_action( 'init', 'die_hauptnavi' );

function meine_hauptnavi() {
    if ( function_exists( 'wp_nav_menu' ) )
        wp_nav_menu( 'menu=haupt_navi&container_class=pagemenu&fallback_cb=die_ersatznavi' );
    else
        die_ersatznavi();
}

function die_ersatznavi() {
echo "    <ul class=\"hauptnavi\">
            <li>Die Hauptmenüpunkte manuell eingefügt</li>
    </ul>";}

Mit diesem Code habe ich die Möglichkeit aktiviert im Admin-Bereich die Menüs zu erstellen und darüber hinaus wurde auch eine Reserve-Navigation (engl. Fallback) definiert falls mal aus welchen Gründen auch immer, dass individuelle Menü nicht angezeigt werden sollte.

Im Theme selber wird das individuelle Menü mit <?php meine_hauptnavi(); ?> ausgegeben und in meinem Fall habe ich die Hauptnavi im Fußbereich (footer.php) eingebunden und mit Hilfe von absoluter Positionierung im Kopfbereich positioniert:

#menu-hauptnavi {
    position: absolute; top: -86px; left: 0;
    list-style: none; margin: 0; padding: 0;
}

Und hier die CSS-Regeln, die sich um das Dropdown der Hauptnavigation kümmern:

.pagemenu li {float: left; position: relative;}
.pagemenu a {
    color: #eee; text-decoration: none;
    float: left; line-height: 40px; padding: 0 8px; margin: 0 1px;
}
.pagemenu a:first-child {margin-left: none;}
.pagemenu a:hover, .pagemenu .current-menu-item a,
.pagemenu .current-menu-parent a {
    background: #8b9b87 url(img/hover.png) repeat-x;
    color: #2B3A27; font-weight: normal;
}
.pagemenu li:hover {background: #8b9b87 url(img/hover.png) repeat-x;}
.pagemenu .sub-menu {
    display: none; padding: 0 0 2px 0; margin: 0; list-style: none;
    position: absolute; top: 40px; background: #a1ad9e;
}
.sub-menu li {
    float: none; display: block;
    position: static; padding-bottom: 1px;
}
.pagemenu li:hover .sub-menu {display: block; background: #8b9b87;}
.pagemenu .sub-menu a {
    padding: 3px 10px; display: block; float: none;
    margin: 0; color: #2b3a27; line-height: 1.5;
    background: none; white-space: nowrap;
}
.pagemenu li ul a:hover {color: #eee; background: #425c3b;}

Überschriften vs. Bezeichnung von Menüpunkten

Da ich auf der einer Seite gerne aussagekräftige Überschriften habe, aber diese nicht immer von der Länge her in die Navigation passen, habe ich mich für den Einsatz von benutzerdefinierten Feldern entschieden. Folgenden Code habe ich in die page.php eingefügt:

<?php get_header(); ?>
        <div id="inhalt">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <?php $alternativ_titel = get_post_meta($post->ID, 'alternativ_titel', true);
            if ($alternativ_titel) { ?>
            <h2 class="storytitle"><?php echo $alternativ_titel; ?></h2>
            <?php } else { ?>
            <h2 class="storytitle"><?php the_title(); ?></h2>
            <?php } ?>
            <div class="der-beitrag">

Somit habe ich die Möglichkeit auf der jeweiligen Unterseite ein benutzerdefiniertes Feld einzufügen, welches dann als Überschrift agiert:

Gibt es kein benutzerdefiniertes Feld, dann fügt WordPress automatisch die “normale” Überschrift ein. Diese Funktion brauche ich momentan nicht, weil wie bereits beschrieben, die Navigation hauptsächlich im Kopfbereich als Dropdown ausgelagert wurde. Aber als die Navigation noch in der Sidebar war, war diese Funktion wichtig, weil der Platz bzw. die Breite dort begrenzt ist.

Die Artikelbilder aktivieren und einbinden

Um die Artikelbilder im Blog zu aktivieren habe ich zuerst folgenden Code in die functions.php eingefügt:

add_theme_support( 'post-thumbnails' );

… und dann folgendes in die index.php:

<div class="der-beitrag">
	<?php if (has_post_thumbnail()) { ?>
		    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
		<?php } else { ?>
                        <a href="<?php the_permalink() ?>"><img src="adresse-irgendeines-ausweichbildes.jpg" width="120" height="120" alt="" class="attachment-thumbnail" /></a><?php } ?>
                <div class="ausschnitt"><?php the_content(); ?></div>

Somit hatte ich in den Archiven (Kategorien, Hauptübersicht etc.) ein Artikelbild neben jedem Artikel. Entweder eines welches ich beim jeweiligen Artikel bestimmt habe oder ein Ersatzbild, wenn kein Artikelbild bestimmt wurde.

In der oberen Abbildung sieht man ein Beispiel eines Artikelbildes.

Weitere Plugins und Anpassungen

Um die Brotkrümelnavigation zu realisieren habe ich auf das Plugin Breadcrumb NavXT zurückgegriffen. Um die Bilder ansprechender zu präsentieren und als Galerien darzustellen habe ich auf das Plugin Shadowbox JS zurückgeriffen, weil es in Vergleich zu den Konkurrenz sehr schlank ist: sowohl in der Verwaltung als auch in der Ausgabe.

Um den Weiterlesen-Link im Blog auf den Anfang des Artikels verweisen zu lassen habe ich folgendes in die functions.php eingefügt:

function remove_more_jump_link($link) {
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

Im großen und ganzen war’s das dann auch. Ist das so weit verständlich, gibt es noch Fragen dazu?

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.