Hartmut 29. Juni 2009
Durch den tollen Artikel beim plerzelwupp bin auch ich ins Grübeln gekommen, was ich mit meiner mehr als sträflich vernachlässigten Blogrolle so veranstalten sollte. Ich habe sie schon aus dem Grunde nie so recht gepflegt, weil sie mir einfach auf der Seitenleiste zu lang wurde.
Die zufällige Ausgabe von Links mag ich auch nicht so besonders, denn ich bin schon einer, der gerne bei anderen guckt, ob ich nicht einen Link auf deren Blog-Liste habe und manchmal ja und manchmal nein, gefällt mir irgendwie nicht.
Was mich auch gegen die reine Blogrolle auf der Seitenleiste trieb, ist dieses hübsche Plugin, welches die Top-Kommentatoren anzeigt. Irgendwie doppelt gemoppelt finde ich, denn die meisten sind ja auch meine Link-Tipps.
Also habe ich mich für die Seitenleiste für die Variante der Blog-Vorstellung mittels des Plugins blogintroduction via Websnapr entschieden.
Nichts desto trotz will ich auch eine gepflegte Link-Liste anbieten. Diese befindet sich jetzt in der oberen Seitennavigation mit Namen Links.
Ich wollte mit Absicht kein Plugin hierfür installieren, um mich an den von WordPress zur Verfügung gestellten Conditional Tags zu probieren.
Die dort aufgeführte Blogroll ist wegen der besseren Übersicht in tabellarischer Form aufgelistet.
Das Styling dieser Liste habe ich zum Teil mit neuen CSS3-Befehlen versehen. So ist diese Liste in jeder Zeile verschiedenfarbig, was aber nur im Firefox und in Opera dargestellt wird. Der IE8 spielt da überhaupt nicht mit und zeigt die Liste weiterhin einfarbig an. Der 3D-Effekt mit runden Ecken und Schatten wird einzig allein vom Firefox dargestellt.
Jetzt stellt sich für mich die große Frage, wie und wo erkläre ich diese Veränderungen für den interessierten Leser im Einzelnen.
Am besten von vorne, oder?
1. Ein Seiten-Template erstellen
Um lediglich die Liste darzustellen, wird eine neue Seite benötigt. Diese sollte aber keine Standard-Seite sein sondern ein sog. Template. Eine Vorlage also, die alles beinhaltet, was dargestellt werden soll.
Jedes Seiten-Template befindet sich im Theme-Ordner. Meines nennt sich page-links.php. So eine Vorlage beginnt immer mit folgender Syntax:
<?php
/*
Template Name: Links
*/
?>
Wichtig ist hierbei der Template Name. Dieser wird später beim Erstellen einer neuen Seite im Backend von WordPress bei den Seiteneigenschaften genau so angezeigt. Den Rest des Inhalts der Vorlage sollte man sich seiner – sofern vorhanden page.php – oder der index.php entnehmen. Im Prinzip muss alles zwischen den beiden DIV-Tags, die für das übrige Seitenlayout stehen, eingefügt werden. Als Beispiel hier mal mein komplettes Link-Template:
<?php
/*
Template Name: Links
*/
?>
<?php get_header(); ?>
<div id="content">
<div id="primarycontainer">
<div id="primarycontent">
<div id="contentarea"><!-- Primary content area start -->
<div class="post">
<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link: <?php the_title(); ?>"><?php the_title(); ?></a></h4>
<p><?php edit_post_link(); ?></p>
<div class="contentarea">
XXXXXX
</div>
</div>
</div><!-- primarycontent end -->
</div><!-- primarycontainer end -->
</div><!--content end -->
<?php get_sidebar(); ?>
<?php get_footer();?>
Natürlich funktioniert der obige Code nur in meinem Theme. Jeder muss schauen, wie sich sein Inhaltsbereich im Theme strukturiert. Wichtig ist nur, dass beachtet wird, dass der Kopfbereich mit get_header, die Seitenleiste mit get_sidebar (bzw. manche Themes arbeiten mit include) und ggf. sofern vorhanden der Fußbereich mit get_footer eingebunden werden.
2. Der Inhalt des Templates
Mit Absicht habe ich im obigen Code-Schnipsel den Inhalt herausgelassen. Weil erst mal das Grundgerüst der Vorlage stehen sollte, um alle eventuellen Darstellungsprobleme zu beseitigen.
Wie ich oben schon erwähnte, wollte ich eine Tabelle haben. Und CSS3 probieren. Daher habe ich mir dort, wo im Code XXXXXX steht, einen weiteren DIV-Container gebaut, damit ich ihn nachher beim Stylen ansprechen kann. Dann beginnt die Tabelle und dann der Conditional Tag für die Darstellung der Links.
Hier kurz mein Code als Beispiel:
<div id="linkpage">
<br />
<table>
<tr><td class="linkhead">Weblinks</td><td class="linkhead">Beschreibung</td></tr>
<tr>
<?php wp_list_bookmarks('between=</td><td>&title_li=&categorize=0&show_description=1&before=<td>&after=</td></tr><tr>'); ?>
</tr>
</table>
<br />
</div>
Das Beispiel soll verdeutlichen, dass es statt einer ungeordneten Liste durchaus möglich ist, eine Darstellung in Tabellenform zu erzeugen. Das ganze sieht kompliziert aus und ein wenig muss man sich halt mit dem Conditional Tag von wp_list_bookmarks beschäftigen.
3. Das CSS-Styling
Wie gesagt, mein Anliegen war es, dass bei den Webkrauts vorgestellte CSS3 zu probieren. Zunächst die CSS-Anweisung, die ich in die style.css meines Themes eingetragen habe:
#linkpage {
padding: 0px;
margin: 0px;
background-color: lightyellow;
border: 2px solid #333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 2px 2px 10px #666;
-webkit-box-shadow: 2px 2px 10px #666;
}
#linkpage table {
border-collapse: collapse;
width: 100%;
}
#linkpage .linkhead {
font-weight:bold;
text-decoration: underline;
padding: 0 10px;
background-color: rgba(255,255,255,.7);
}
#linkpage tr:nth-child(odd) {
background-color: #bbf;
}
#linkpage tr:nth-child(even) {
background-color: #fbb;
}
Das CSS3 beinhaltet bei #linkpage die letzten 4 Zeilen und sorgt für einen Rahmen mit runden Ecken und Schatten beim Firefox. Wie gesagt, leider nur bei dem Browser. Letztlich kann dieser Rahmen aber – ohne, dass das Layout sich insgesamt verändert, um jeden Container mit Rahmen gelegt werden. Ich z.B. habe diesen gleich um die gesamte Webseite hier gelegt. Mit der Rahmenstärke und den Farben sowie der Lage des Schattens kann man lustig herumexperimentieren.
Die unterschiedlichen Farben in den einzelnen Tabellenzeilen werden mit den in CSS3 neu eingeführten Pseudoklassen odd und even dargestellt. Auch hier gilt es, einfach mal zu probieren.
Stopp!
So, ich denke, dass ist harter Tobak. Das war er auch für mich, aber es macht einfach Spaß, es mal zu probieren und wenn es gelingt, ist es ein toller Mehrwert.
Wer Fragen hat, immer her damit!
Zufallsauswahl ähnlicher Artikel
Tags: Programmierung, Wordpress
Happy emote: :) oder :-)
Really happy emote: :D oder :-D
Wink emote: ;) oder ;-)
Happy eyes: ^_^
Laughing eyes: >:o
Cat smile: :3
Grumpy: >:-(
Sad: :(or :-(
Crying emote: :’(
Shocked emote: :o oder :-o
Glasses emote: 8) oder 8‑)
Cool shades: 8‑|
Rude: :p oder :-p
Woot?!: O.o
Dork emote: -_‑
Duhhh emote: :/ oder :\
Devil emote: 3:)
Angel emote: O:)
Kiss emote: :-* oder :*
Love emote: <3
Pacman: :v
Robot: :|]
Weird guy’s face: :putnam:
Shark emoticon: (^^^)
Penguin emoticon: <(“)
Verfolge die weitere Diskussion im Forum - (1) Beiträge
qq
Ugg Boots
Ninchen
