medioman

Hartmut 17. Juli 2009 um 07:07 Uhr

Der liebe Luigi bat mich vor einigen Tagen, mal das o.g. Plugin näher vorzustellen und gerne möchte ich nun seiner Bitte nachkommen.

Wer das Plugin gleich in Action sehen möchte, der kann sich das vorab auf meiner Seite Twitter bei mir ansehen. Im Prinzip ist es nichts anderes, als dass es die letzten Aktionen bei Twitter in recht hübscher Darstellung aufbereitet.

Für mich als Administrator ändert sich auf der Seite lediglich eine Kleinigkeit: Ich kann von dort auch direkt via Eingabefeld twittern:

Das kann ich zwar auch im Backend, aber so direkt auf der eigenen Seite macht es einfach wesentlich mehr Laune.

Warum ich mich aber letztlich für dieses Plugin entschied, war, dass es mir vollkommen frei in die Hände legt, es so zu gestalten, wie es mir gefällt. Das heißt, es gibt auf der Plugin-Seite eine kleine Hilfe, welche CSS-Anweisungen in die eigene style.css einzutragen sind, damit es einigermaßen gut aussieht.

Nach der Installation und Aktivierung des Plugins sollte man 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 Twitter-Seite:

<?php
/*
Template Name: Threaded Twitter
*/
?>
<?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="&lt;?php the_permalink() ?>" rel="bookmark" title="Permanenter Link: <?php the_title(); ?>"><?php the_title(); ?></a></h4>
<div class="contentarea">
    <div class="twitter-tweedles">
    <h4><a href="http://twitter.com/habir" title="Folge mir bei Twitter" target="_blank">Folge mir</a></h4>
    <?php
    if (function_exists('thread_twitter')) {
    thread_twitter();
    }
    ?>
    </div>
</div>
</div>
</div><!-- primarycontent end -->
</div><!-- primarycontainer end -->
</div><!--content end -->
<?php get_sidebar(); ?>
<?php get_footer();?>

Die wichtigste Funktion habe ich etwas eingerückt, damit zu sehen ist, wie ich das ganze eingebunden habe.

Meine CSS-Anweisungen in der style.css sehen nun wie folgt aus:

/* Thread Twitter Start */

.post .twitter-tweedles {
background : #e2f2fb;
border : 1px dashed #3fcdeb;
padding : 10px 0 0;
}
.post .twitter-tweedles h4 {
background-image : none;
}
.post .twitter-tweedles h4 a {
background : url('images/twitterme.png') no-repeat;
padding-left : 22px;
padding-right : 50px;
height : 128px;
line-height : 128px;
display : block;
font-size : 11px;
float : right;
}
#thread_twitter ul {
margin : 0 12px 0 10px !important ;
margin : 0 10px;
}
#thread_twitter ul li {
background : #fcfcfc;
padding : 0;
float : left;
list-style-type : none;
border : solid #ccc;
border-width : 1px !important ;
border-width : 1px 0;
width : 100%;
padding-top : 10px;
margin-bottom : 10px;
}
#thread_twitter img {
float : left;
padding : 0 10px 0 0;
margin : 0 0 10px 10px;
}
#thread_twitter .twitter_source {
color : #999;
font-family : georgia;
font-style : italic;
font-size : 10px;
}
#thread_twitter .twitter_source a {
color : #999;
}
#thread_twitter .twitter_text {
margin-bottom : 5px;
display : block;
padding-left : 70px;
padding-right : 10px;
}
#thread_twitter .twitter_reply {
background : url('images/icons.gif') no-repeat 0 -112px;
padding-left : 22px;
padding-right : 10px;
height : 16px;
line-height : 16px;
display : block;
font-size : 11px;
float : right;
}
#thread_twitter .loading {
padding : 0 10px;
font-size : 11px;
}
#thread_twitter textarea {
height : 15px;
width : 70%;
}

/* Thread Twitter Ende */

Damit sieht es dann so aus:

Das geht weit über das hinaus, was der Programmierer als Grundkonfiguration vorschlägt, aber genau das wollte ich ja auch aufzeigen, wie viel Potenzial das Plugin beim Styling hat.

So, nun hoffe ich, dass ich wieder zur allgemeinen Verwirrung beigetragen habe. Ich werf den Brocken mal in die Runde. Wer fragen hat, der soll sie stellen oder für immer schweigen. :)

Zufallsauswahl ähnlicher Artikel

• Zeit‑ und Suchleiste (3)
• Wordpress-Plugin: Insights (1)
• Wordpress-Plugin: Bundestagswahl (6)
• Wordpress-Plugin Organize Series (11)
• Red Hot Wheels (1)

Tags: CSS, Plugin, Wordpress

• Projekte
Du kannst diesen Artikel auch als PDF-Version herunterladen.