Blogroll und CSS3

29. Juni 2009 um 15:06 Uhr

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!

10 Kommentare zu “Blogroll und CSS3”

  1.  plerzelwupp am 29. Juni 2009 um 16:04 Uhr

    Hallo Hartmut,

    Du bist mir ja schon oft über den Weg gelaufen und durchaus kein Unbekannter – jedoch hatten wir nie persönlich das Vergnügen.

    Insofern fand ich Deine Verlinkung besonders nett – vielen Dank auch dafür :-)

    Hut ab – Deine Linkliste ist auch ohne Plugin sehr schön geworden. Ich finde es immer gut, wenn nicht nur der Name des Blogs genannt wird, sondern noch ein paar Informationen zusätzlich. In Deinem Fall ist es die Beschreibung aud dem Linkmanager(?)

    Das kleine 50kb tool „Blogroll Page“ (siehe auch Tipp Nr. 9 im o.g. Artikel) liefert das gleiche Ergebnis – jedoch bei Weitem nicht so schön

  2.  Hartmut am 29. Juni 2009 um 16:24 Uhr

    @plerzelwupp: Ja, Hallöchen!
    Ja, das mit dem „über den Weg laufen“, im Feed-Reader haben, die Hemmschwelle des ersten Kommentares, aneinander vorbeibloggen, das ist manchmal mal so. Aber auf Deinen Artikel mit der Blogrolle, konnte ich gar nicht anders. Der ist so geil und ausführlich, der muss einfach gewürdigt werden! :thumbup_tb:

    Ja, meine Link-Seite nutzt die im Backend eingetragenen Beschreibungen. Ich habe mir auch das von Dir genannte Plugin angeschaut, habe sogar den Quelltext zerlegt und fand dann eben meine Idee, mal eine Liste in Tabellenform statt mit einer ungeordneten Liste zu arbeiten, besser. Das schöne am selber machen ist ja nicht nur, dass man einen geilen Artikel schreiben kann, sondern sehr viel lernt. :)
    Möglicherweise werde ich meine Tabelle noch um den ConditionalTag „images“ erweitern, wenn ich mich mal aufraffe, jedem Blog noch ein Bild in Form eines Avatars zuzuweisen. Da ist bestimmt eine Menge mehr möglich. Und, wer weiß, vielleicht ist dieser Artikel für mich oder jemand anderen eine Inspiration, daraus ein Plugin zu basteln. :hmm2_ee:

  3.  plerzelwupp am 29. Juni 2009 um 17:16 Uhr

    Vor kurzem hab ich mich auch aufgerafft und jedem aus der Blogroll den entsprechenden Gravatar in der Linkverwaltung zugewiesen. bei der Gelegenheit hab ich gleich noch die RSS-Adressen ergänzt. Zumindest für letztere Aufgabe könnte ich mir auch ein praktisches Plugin vorstellen.

    mit dem „Lernen“ hast Du recht ….. das war auch meine Intnesion, als ich meinen Blog „plerzelwupps Erfahrungen“ nannte. Das soll nämlich nicht heißen, dass ich besonders reich an Erfahrungen bin, sondern dass ich durch’s Bloggen erfahre. Indem ich meine „Erfahrungen“ weitergebe, bin ich oftmals gezwungen, tiefer einzusteigen, als ich es normalerweise tun würde. Manchmal ist es einfach auch geil, etwas aufzudröseln, herumzuspielen und zu experimentieren….. das kostet halt leider auch ganz schön viel Zeit.

  4.  Hartmut am 30. Juni 2009 um 00:10 Uhr

    @plerzelwupp: So, vielen Dank für Deine Anregung bzw. tapfere Unterstützung :-) Als Dank dafür habe ich Dich jetzt in meine Blogrolle übernommen. Nein, das ist nicht der Grund des Kommentars. Ich habe jedem Link einen Screenshot zugewiesen. Dank Websnappr ist das nämlich sehr sehr einfach:

    http://images.websnapr.com/?size=s&key=xxxxxxxxxxxx&url=http://domain ← so in diesem Sinne muss einfach jeder Aufruf als Bild-URL eingetragen werden.

    Möchte man Bild und URL in der Linkliste (wie jetzt bei mir) eingetragen haben, muss noch zusätzlich in meinem obigen Code &show_name=1 mit eingefügt werden. Ich hätte das ganze noch gerne in einer eigenen Tabellenreihe gehabt, da muss ich noch gucken. Die Größe der Images, das Floating usw. ist ja dann wieder eine Sache des CSS.

  5.  plerzelwupp am 30. Juni 2009 um 09:19 Uhr

    Dann schau doch nochmals in meinen Artikel – Punkt 5  – dot hab ich mich ja auch über Websnapr und über die Implementierung ausgelassen.

    Nun sieht Deine Blogroll ja fast aus wie meine – bis auf die Gravatare ;-)

    So … und nun nehm ich Dich auch noch auf …. kann aber noch ein bisschen dauern……

  6.  Hartmut am 30. Juni 2009 um 09:53 Uhr

    @plerzelwupp: Aua! Das tut weh! Ich habe Deinen Artikel mehrmals sehr aufmerksam gelesen und Punkt 5 war dann gestern Abend aber sowas von raus aus meinem Hirn! :doh_tb: Aber gut, dass wir so schlaue Kerlchen sind :)

    Um über Deine Blogrolle zu diskutieren, werde ich mich jetzt aber mal zu Deinem Blog zum kommentieren begeben. Ich muss doch auch mal eine kleine duftmarke bei Dir setzen :tongue2_tb:

  7.  neue Blogroll | DELIJO am 3. Juli 2009 um 17:34 Uhr

    […] von Hartmuts Artikel Blogroll und CSS3 habe ich mich in den letzten Tagen wieder einmal meiner Linkliste gewidmet. Als erstes probierte […]

  8. […] Nachtrag: Wer die statische Seite nach dieser Methode noch mit Bildern aus Tipp Nr. 5 erweitern möchte, findet eine sehr schöne Anleitung bei medioman. […]

  9.  Kathrin & Alex am 16. Juli 2009 um 19:34 Uhr

    Neue Blogroll…

    Dank den Artikel von Plerzelwupp haben wir nun also auch eine neue Blogroll, zumindest eine Detailansicht. Bin zwar noch nicht so ganz 100 % zufrieden damit, aber den Rest bekomme ich nun auch noch hin. Ich hab übrigens kein Plugin benutzt sondern die I…

  10.  Wordpress-Plugin Thread Twitter - medioman am 17. Juli 2009 um 07:49 Uhr

    […] sich wieder eine eigene Template-Datei erstellen. Ich habe das zwar vor einigen Tagen für die Links-Seite erklärt, aber gerne zeige ich den vollständigen Code für die […]

Trackback URI | Kommentare als RSS

Einen Kommentar schreiben

Bold Italic Link Blockquote  Alle HTML-Tags sind erlaubt!
 Zum Bezug auf einen Kommentar, auf laufende Nummer klicken!

Smilies anzeigen/verstecken
:smile_wp: :biggrin_wp: :sad_wp: :surprised_wp: :eek_wp: :confused_wp: :cool_wp: :lol_wp: :mad_wp: :razz_wp: :redface_wp: :cry_wp: :evil_wp: :twisted_wp: :rolleyes_wp: :wink_wp: :exclaim_wp: :question_wp: :idea_wp: :arrow_wp: :neutral_wp: :mrgreen_wp: :annoyed_tb: :blink_tb: :blush_tb: :bye_tb: :clap_tb: :cool1_tb: :drunk_tb: :devil_tb: :doh_tb: :down_tb: :dry_tb: :dunce_tb: :flush_tb: :guns_tb: :furious_tb: :glurps_tb: :happy_tb: :huh_tb: :innocent1_tb: :jittery_tb: :smoke_tb: :king_tb: :laugh_tb: :lol_tb: :mad_tb: :mellow_tb: :nono_tb: :help_tb: :ohmy_tb: :ponder_tb: :rolleyes_tb: :sad_tb: :shock_tb: :sleep_tb: :thumbup_tb: :smile1_tb: :surrender_tb: :tongue1_tb: :tongue2_tb: :unsure_tb: :wacko_tb: :thumbdown_tb: :wink1_tb: :wub_tb: :cool2_tb: :cry_tb: :embarassed_tb: :foot_in_mouth_tb: :wallbash_tb: :frown_tb: :innocent2_tb: :kiss_tb: :laughing_tb: :money_mouth_tb: :sealed_tb: :smile2_tb: :surprised_tb: :tongue3_tb: :undecided_tb: :smiley2_tb: :yell_tb: :) :) :D :x :P 8) 8x 8P :o 8O :( :? ;) :!: :?: :| :lol_ee: :smirk1_ee: :rolleyes_ee: :tongue_laugh_ee: :tongue_rolleye_ee: :tongue_wink_ee: :rasberry_ee: :ohh_ee: :grrr_ee: :gulp_ee: :ohoh_ee: :embarrassed_ee: :sick_ee: :shuteye_ee: :hmm1_ee: :angry_ee: :zip_ee: :kiss_ee: :shock_ee: :smirk2_ee: :grin2_ee: :hmm2_ee: :vampire_ee: :snake_ee:

SetTextSize SetPageWidth