Umgesetzt habe ich es im Radwahl.de Blog (siehe obige Abbildung)

Ich will hier demonstrieren wie ich es in die Praxis umgesetzt habe.

Installation

1. Vorarbeit
   Zumeist hat man im Theme bereits einen Ordner für (Java)Scripte. Bei mir heisst der Ordner kurz und knapp /js.
   In dem Verzeichnis einen Ordner anlegen /timthumb.
   und den Unterordner /cache.
   Die Schreibrechte hierbei komplett auf 777 stellen!
2. Installation Script
   Script downloaden und in den /tinthumb Ordner ablegen. (auch 777)

Das TimThumb Script ist somit im Theme integriert.

Benutzerdefiniertes Feld im Beitrag

Damit das Script weiß welches Bild verkleinert auf der Startseite dargestellt werden soll, bedarf es einer Angabe.
Hierfür wird ein benutzerdefiniertes Feld benötigt.
Name: post-img
In das Feld wird dann die URL von dem gewünschten Bild eingegeben.
Das ist unkompliziert, einfach die URL von dem Bild im Beitrag kopieren und unten einfügen.

Fazit:
Somit weiß das Script welches Bild verkleinert angezeigt werden soll und kann seine Arbeit verrichten.

Aufruf des Scripts

Jetzt fehlt noch die Angabe wo das verkleinerte Bild angezeigt werden soll.
Hierzu muss im Theme die Funktion aufgerufen werden. In meinem Fall erfolgt der Aufruf auf der Startseite.

Code Grundgerüst:
<img Anzeigen – Aufruf vom Script (Pfadangabe) – Benutzerdefiniertes Feld auslesen – Größen Angaben und Qualitätsstufe>

und sieht dann der Code aus:
<img src="<?php bloginfo('template_url'); ?>/js/timthump/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&amp;w=120&amp;h=80&amp;zc=1&amp;q=95" width="120" height="80" alt="" />

Will man erreichen das man beim anklicken des Bildes zu dem passenden Beitrag geleitet wird, so muss der obige Code in einen Link eingebaut werden.

Code Grundgerüst:
<a href – Titel> obiger Code für verkl. Bild – Optional Ausgabe des Titels</a>

Code verkl. Bild mit Link und Titel-Anzeige*
<a href="<?php the_permalink() ?>" rel="bookmark"
title="<?php the_title(); ?> | Radwahl">
<img src="<?php bloginfo('template_url'); ?>/js/timthump/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&amp;w=120&amp;h=80&amp;zc=1&amp;q=95" width="120" height="80" alt="" /><br />
<?php the_title(); ?></a>

Nach dem Bild wird durch <br /> der Titel unterhalb angezeigt.
*=Achtung gefährliches Halbwissen. Ob das so korrekt ist vermag ich nicht zu sagen, aber es funktioniert.

Hinweis
Sollte man bei einem Beitrag kein Bild verwenden, so lässt sich stattdessen auch ein Symbol-Bild verwenden, dessen URL man in das benutzerdef. Feld eingibt.
Alternativ kann man den Code auch derart anpassen, das bei leerem benutzerdef. Feld das Script nicht aufgerufen wird. Dazu findet man bei WebDeMar einen Hinweis.

Feintuning (Optional)
Ich habe den obigen Code in einen div-Container gepackt. Dadurch lassen sich in der style.css noch Angaben hinzufügen.
Code und style.css Angaben anzeigen

Fazit:
Durch den Code würde ein verkleinertes Bild (120×80px) mit Titel auf der Startseite erscheinen. Fragt sich nur von welchem Beitrag…

Die Beiträge auf der Startseite

Auf der Startseite soll der neueste Beitrag mit dem kl. Bild + Titel dargestellt werden, darunter die nächsten drei Beiträge nur als Titel.

Hier der Code passend zu obiger Abbildung:

1. Aufruf des neuesten Beitrags.
Start div-Container – Überschrift h2
<div class="starter">
<h2><a title="Rahmen" href="http://www.radwahl.de/category/rahmen/">Rahmen</a></h2>
<?php query_posts('cat=9&showposts=1&offset=0'); ?>
<?php while (have_posts()) : the_post(); ?>
<!--<h1 id="post-<?php the_ID(); ?>"></h1>-->
CODE WIE OBEN
<!--<?php trackback_rdf(); ?>-->
<?php endwhile; ?>

2. Aufruf der weiteren drei Beiträge, ohne den Neuesten (offset=1),
als ul li-Liste, div-Container schließen
<?php query_posts('cat=3&showposts=3&offset=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<!--<h1 id="post-<?php the_ID(); ?>"></h1>-->
<ul><li>
<a href="<?php the_permalink() ?>" rel="bookmark"
title="<?php the_title(); ?> | Radwahl"><?php the_title(); ?></a>
</li></ul>
<!--<?php trackback_rdf(); ?>-->
<?php endwhile; ?>
</div>

Resultat: siehe Radwahl.de

Vielen Dank auch an Nick von der Stil-Etage der mir bei den benutzerdef. Feldern auf die Sprünge geholfen hat.

Ergänzungen und Hinweise sind willkommen. Bitte auf “Infos hinzufügen” klicken und einen Kommentar hinterlassen. Vielen Dank!

erhaltene Link-Tipps:

• Dee Scott: Komponist, Produzent und Interpret eingängiger Popsongs mit Ohrwurmqualität.
• webparadise.com
  Ausstellung der Malerin Christine Dumbsky mit erotischen Frauengemälden, Fotos und Bodypainting
• kulturtalk.de
  Community für Kulturfreunde, die sich für Kino/TV, Literatur, Kunst, Bühne oder Musik interessieren.

Sonstiges:
Theme-Gestaltung für Radwahl.de. Gestartet am 01. März

Als kleiner Junge bekam ich zum Geburtstag eine Stylophone Heimorgel geschenkt.
(Ich bin mir ziemlich sicher das meine Mutter diese Entscheidung schon nach kurzer Zeit bereut hat.)
Das Ding hat Spaß gemacht und dadurch das es mit Batterien lief, konnte man es überall hin mitnehmen.

Inzwischen gibt es die Stylophone Heimorgel als Neuauflage mit erweiterten Funktionen.

Es gibt aber auch ein komplett neues Gerät:

Die Stylophone Beatbox

Hinter der Optik eines USB-Tassenwärmers verbirgt sich eine Spassmaschine.
Der Name Beatbox lässt schon mal vermuten das es etwas mit Beats zu tun hat. Stimmt!
Aber es gibt neben einem Drum & Percussion-Set noch eine Human-Beatbox und für mich das Highlight einen Bass-Bereich um eine Bassline zu erstellen.

Das ganze mit Aufnahme-Funktion!
Sicherlich nicht alles perfekt. Einige Samples sind auch recht albern aber, wie schon beim Original, weckt es den Spieltrieb und nervt alle anderen. (Erwachsen werden kann man auch später)

Das Gerät gibt es für 30,- € bei Monsterzeug.de
dort gibt es auch weitere Infos und ein nettes Video

Infos über Stylophone:

• Stylophonica Offizielle Stylophone Homepage
• Stylophone Ralf Harris Seite
• Wikipedia-Eintrag (de) – (en)
• Bilder des Originals von Retrosound

Das Tab-Menü ist eigentlich nur eine unsortierte Auflistung (ul-li) die mit Styling-Angaben “aufgebohrt” wird.

• style.css-Angaben (txt-Datei)

Die Background-Bilder für die hinteren Karteikarten sind noch auszutauschen oder eine Farbe festlegen.
Einzig der aktive Link muss zusätzlich mit der class="aktiv" angegeben werden.

So sieht der Code zum obigen Bild aus: anzeigen

Um die Tab-Leiste bequem in Beiträgen einfügen zu können verwende ich das Plug-In AddQuicktags von Frank Bültge.
Mit folgenden Einstellungen (klick auf das Bild zum vergrößern):

Damit lässt sich auf einfache Art und Weise das Grundgerüst des Tab-Menüs einfügen.

Jetzt fehlen noch die Links zu den Beiträgen / Seiten.
Beispiel:

<li><a title="Seiten" href="http://blog.funkygog.de/archiv/seiten-uebersicht/">Seiten</a></li>

und anschließend das Tab-Menü schließen.

Verlinkung Shortcode
Für die Verlinkung gibt es eine elegante alternative Lösung:
Zukunftssicherer bei URL-Angaben ist die Nennung der ID weil der Name eines Beitrags oder der Name des Domain kann sich ändern. Die ID bleibt!
Hierzu hat Michael Oeser eine sehr gute Lösung gefunden:

• Shortcodes für Permalinks

Den Code von der Seite in die functions.php einfügen.
Hierbei ist sind die richtigen Anführungszeichen zu beachten! [siehe Bild]

Der daraus resultierende Shortcode*:
[permalinkz id=49 text='Linktext']
lässt sich dann mit AddQuicktags in eine <li>...</li>-Auflistung einfügen:

So würde dann der Code* im Beitrag aussehen: anzeigen

Anmerkungen / Hinweise: anzeigen

Die Tab-Menü-Leiste lässt sich auch in einem Template einbauen.
Die Tabs (Verlinkung) müssen dann über benutzerdefinierte Felder und logischen, automatisierten Links erzeugt werden.

Beispiel zur Automatisierung:

1. Der aktive Beitrag: (class: active)
   <li class="aktiv"><a title="Archiv" href="<?php the_permalink() ?>">Beschreibung</a></li>
2. Einen Link mit benutzerdefinierten Feld: custom fields
   <?php $produktlink = get_post_custom_values('Produkt'); ?>
<?php if(!(empty($produktlink))) { ?><li><a href="Deine-URL/?p=<?php echo $produktlink[0]; ?>">Produkt-Info</a></li><?php } ?>
   bei dem Code würde in dem benutzerdef. Feld “Produkt” eine ID angegeben und darauf würde der Beitrag mit dem Tab “Produkt-Info” verlinkt.
3. weitere Beiträge mit der Suchfunktion anzeigen
   <li><a title="weitere Beiträge" href="Deine URL/?s=TEXT+<?php the_title(); ?>">weitere</a></li>
   Mit dem Code wird ein Suchanfrage gestartet die automatisch den Titel des Beitrages + ein beliebigen Text verwendet.

*Deine URL ist dann auszutauschen. z. B. http://blog.funkygog.de

Anmerkungen / Hinweise:

• Im Internet-Explorer sehen übrigens die Karteikarten etwas anders aus, da dort die abgerundeten Ecken nicht dargestellt werden.
• Ich verwende hinter div-Containern mit float-Angaben zumeist:
  <div style="clear:both;"></div>
  damit ist man immer auf der sicheren Seiten.

weitere Links zum Tab-Menu:

Verlinkung mit Tab-Menue:

Verlinkung klassisch:

• Tab-Menü mit Plug-In Anleitung zum Einbau
• horizontale Linkleiste mit Sprungankern

inkl. “Slip Into Something More Comfortable” [Video]
basiert auf: Engelbert-From here to Eternity [Video]

zu kaufen bei: Amazon

inkl. “Is It Love You’re After” [Original]
Der Anfang wurde von S-Express verwendet für das “Theme from S-Express“

zu kaufen bei: mir (LP) oder bei Amazon