Inzwischen ist es noch viel leichter, den Google-Kalender in die eigene Website einzubinden.

Dazu geht man wie folgt vor:

Nachdem del.icio.us den Quelltext ein bisschen geändert hat, habe ich die del.icio.us-Tag-Wolke und die Einzellinks einmal überarbeitet.

Sie können den aktuellen Quellcode hier runterladen.

Und hier können Sie noch einmal meinen ersten Artikel sehen, wo alles genau erklärt ist.

Viel Spaß mit den del.icio.us – Links!

Sucht man eine Lösung nur für Wordpress, so gibt es nun ein Plugin, das das Hochladen, Verwalten, Einbinden und Präsentieren von Videos und MP3s in Wordpress NOCH einfacher macht, und zwar wordTube von Alex Rabe.

Die Einbindung der Medien funktioniert mit WordTube auch im WYSIWYG-Editor.
Zudem können nicht nur Videos und MP3s, sondern auch Bilder eingebunden und alle Medien in einer Playliste angezeigt werden.

wordTube arbeitet, genau wie das von mir beschriebene WP-FLV-Plugin, auch mit Jeroen Wijerings Flash-Video-Player.

Die benötigten FLV-Video-Dateien werden am einfachsten mit dem kostenlosen Riva-FLV-Encoder erstellt, wie hier beschrieben.

Zur Anwendung des wordTube-Plugins:

1. Installation

1. das WordTube-Plugin bei Alex Rabe downloaden, entpacken und das Verzeichnis /wordtube/ komplett in den WP-Plugin-Ordner legen
2. den Flash Media Player von Jeroen Wijering downloaden, entpacken und die Datei mediaplayer.swf aus dem Ordner /flash_media_player/ in den /wordtube/-Ordner im WP-Plugin-Verzeichnis kopieren.
3. Wer MP3-Dateien einbinden möchte, holt sich auch den Flash MP3 Player von Jeroen, entpackt wieder das .zip-File und kopiert die Datei mp3player.swf aus dem /flash_mp3_player/-Ordner ebenfalls in das /wordtube/-Verzeichnis.
4. Nun den gesamten /wordtube/-Ordner auf den Server laden.
5. Das Plugin im WP-Admin-Bereich aktivieren.

2. Anwendung

2.1. Konfiguration

2.3. Medien in Posts einbinden

Die Anzeige der Medien innerhalb eines Beitrags oder einer statischen Seite ist von nun an ein Kinderspiel.

Man merke sich die ID des gewünschten Mediums aus dem MediaCenter und platziere dann in seinem Post lediglich den Tag

[MEDIA=ID]

und füge die gemerkte ID ein, also bspw. [MEDIA=1].

Alternativ können über den Tag

[MYPLAYLIST]

alle verfügbaren Videodateien auf einmal als Playliste angezeigt werden.

Die Eingabe der Tags funktioniert im WYSIWYG-Editor genauso wie im Text-Editor von Wordpress.

2.4. Live

…in Aktion kann das Plugin auf der Webseite von Alex Rabe, dem Autor des Plugins, betrachtet werden »

Danke :)
Echt ein prima Plugin!

das flickrrss-Plugin von eightface

Was damit möglich ist:

• Anzeige einer bestimmten Anzahl von jeweils aktuellsten flickr-Bildern.
• Es können Bilder eines bestimmten Nutzers, alle öffentlich verfügbaren Bilder oder Bilder einer Nutzergruppe angezeigt werden.
• Filtern nach tags. Es werden dann nur die Fotos mit einem oder mehreren bestimmten tags angezeigt.
• Vor und nach Anzeige der Bilder kann eigenes (X)HTML platziert werden, so dass man diese dann beliebig in sein Layout einbinden und stylen kann.
• Die Bilder können in verschiedenen Größen angezeigt werden.

Wie´s funktioniert:

• flickrrss-Plugin downloaden und entpacken
• flickrrss.php ins Wordpress-Plugin-Verzeichnis (wp-content/plugins/) legen und auf den Serverhochladen
• im Adminbereich das Plugin aktivieren
• unter Einstellungen > flickrss das Plugin konfigurieren:
  Für die Eingabe der flickr-UserID muss diese erst mit dem igettr ausfindig gemacht werden. Dort die Adresse des eigenen flickr-Feeds eingeben und die ausgelesene ID dann im Plugin-Kofigurationsbereich eintragen.
• Anschließend kann mit dem Codeschnipsel: <?php get_flickrRSS(); ?> die so konfigurierte Anzeige der Bilder in jedes Wordpress-Template eingebunden werden.

Für eine umfangreichere Einbindung der flickr-Bilder als ausgewachsene Bildergalerie empfehlen sich wohl die Plugins FAlbum von RandomByte oder Flickr Album For Wordpress von tan tan noodles, die ich aber beide noch nicht getestet habe.

<img scr="images/meinbild.jpg" />

Bisher habe ich mir damit beholfen, den Pfad vom Index der Wordpress-Installation aus zu beschreiben, da alle Wordpress-Dateien ja über die dort liegende index.php “geladen” werden. Der Code sah dann so aus:

<img src="wp-content/themes/meintheme/images/meinbild.jpg" />

Nun gibt es aber seit Wordpress 1.5 eine viel bessere Lösung, und zwar den Wordpress-eigenen Template-Tag bloginfo(’template_directory’).
Dieser Tag sorgt automatisch immer auf den richtigen Verweis zum aktuellen Template-Verzeichnis, so dass ich mein Bild nun über den folgenden Link erreichen kann:

<img src=&quot;<?php bloginfo('template_directory'); ?>/images/meinbild.jpg" />

Das Gute daran ist, dass man hier den Namen des Templates nicht mehr hart in das Template coden muss.
Und natürlich kann man so auf alle erdenklichen Dateien innerhalb des Templates verweisen.

Praktisch :)

PS: bloginfo(); kann noch mehr über ein Weblog preisgeben. In der Wordpress-Dokumentation findet sich dafür eine schöne Übersicht »

Seitdem ich vor etwa 3 Jahren mein erstes Paar ART-Company-Schuhe erstanden habe, bin ich verliebt in diese Schuhe und möchte eigentlich kaum noch andere.
Die Investition hat sich übrigens gelohnt. Die Schuhe sind extrem robust. Oben genanntes Paar trage ich seit 3 Jahren fast täglich. Jetzt ist die Sohle abgelaufen. Von oben sehen sie aber immer noch prima aus!

Leider sind die Kult-Schuhe aus Spanien hier sowohl im echten Leben als auch über Google extrem schlecht zu finden.

Umso glücklicher war ich, als ich letzte Woche an meinem neuen Paar einen Hinweis auf die Website fand. Und hier ist sie nun: The ART Company »

Inzwischen weiß ich auch, wie man hier an ART-Schuhe ran kommt:

Der Versandhändler OTTO hat ART-Schuhe vor etwa einem Jahr ins Programm aufgenommen:

~

Und bei backstreetnoise, einem Klamotten-Versandhändler aus Chemnitz, kann man ART-Schuhe sogar in noch größerer Auswahl zu noch kleineren Preisen bestellen »

Falls jemand einen Laden im Großraum Stuttgart/Ludwigsburg kennt, der ART-Schuhe führt, würde ich mich über einen Hinweis sehr freuen!

2. Kleidung von LUZIFER aus Berlin

Ebenfalls ausgefallen, wenn auch in ganz anderer Stilrichtung, sind Kleidungsstücke von LUZIFER aus Berlin.

Die selbst entworfenen Schnitte reichen von klassisch über mittelalterlich bis hin zu modern.

Die Kleider werden gefertigt aus Naturmaterialien wie Leinen und Baumwolle in absolut Top-Qualität. Die Stoffe sind robust. Die Färbung ist unauswaschbar.

Einziger Wermutstropfen: die Preise sind genauso hochwertig wie die Klamotten. ;o)

Noch ein paar Empfehlungen

Und zum Schluss …

… noch der Hinweis, dass ich kein Geld dafür bekomme, was ich hier schreibe, sondern dies meine persönlichen Favoriten sind …

Wo findet Ihr ausgefallene Klamotten, Schuhe und Accessoirs? Was ist Euer Geheimtip?

Lösungen gibt es in Form von JavaScript und CSS-Expressions.

Stu Nicholls hat für das Problem eine Lösung entwickelt, die auf reinem CSS basiert und auf seiner CSS-Play -Webseite zu finden ist unter: Min-Width for Internet Explorer.

Die Lösung ist zwar nicht ganz neu, ich möchte sie hier aber trotzdem nochmal in der deutschen Übersetzung darstellen.

Zuerst einmal sind hier die funktionsfähigen Versionen für

1. InternetExplorer im QUIRKS-Mode – linksbündiges Layout
2. InternetExplorer im STANDARD-Mode – linksbündiges Layout
3. InternetExplorer im STANDARD-Mode – zentriertes Layout
4. Mac IE5 – zentriert
5. Mac IE5 – linksbündig & transparente Inhaltsbox

Die notwendigen HTML- und CSS-Definitionen lassen sich direkt dem Quelltext der jeweiligen Seiten entnehmen.

Wie funktioniert das Ganze?

Methode 1: IE im Quirks Mode

Diese Methode basiert auf dem InternetExplorer im Quirks-Mode und nutzt das fehlerhafte Box Modell, um den richtigen Effekt zu bekommen.

Es werden zwei div-Elemente verwendet:
ein äußeres <div>, das die prozentuale Breite UND die Minimum-Breite kontrolliert
und ein inneres <div>, das den Inhalt enthält.

INNERES DIV

Das innere <div>-Element hat eine Breite von 100% bezogen auf das äußere <div>-Element UND ein negatives rechtes (oder linkes) Margin, das der minimalen Breite entspricht.

Damit nimmt es die ganze prozentuale Breite des äußeren <div>-Elementes ein.

Wenn das Browserfenster verkleinert wird, reduziert sich die prozentuale Breite des äußeren <div>-Elements so lange bis nur noch der Rahmen, der der minimalen Breite entspricht, übrig bleibt.

Das innere <div>-Element verringert ebenfalls seine Größe und hört gleichzeitig mit dem äußeren <div>-Element dann auf zu schrumpfen, wenn nur noch dessen Rahmen “übrig” ist.
An diesem Punkt entspricht der Rahmen des äußeren <div>-Elementes der minimale Breite des inneren <div>-Elementes.

Eigentlich ganz leicht :)

Methode 2: IE im Standard-Mode

Diese Methode ist identisch mit der oben beschriebenen. Sie benötigt lediglich zusätzlich einen alles umschließenden Container mit einer Breite (width) von 90%.

Das äußere <div>-Element braucht dann nur eine Rahmenbreite (border). Seine vollständige Breite erstreckt sich automatisch auf den alles umschließenden Container (90%).

Auch JavaScript kann zur Überprüfung der Formularfelder im Browser des Internetnutzers hilfreich sein.

Hier eine kleine Zusammenfassung, wie Textfelder, Checkboxen und Radiobuttons innerhalb von Formularen mit JavaScript und PHP abgefragt werden können.

Textfelder

Ein Beispiel:

<form id="kontaktformular" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
Vorname: <input type="text" id="vorname" value="Felix" />
<textarea id="nachricht">Das ist meine Nachricht.</textarea>
</form>

JavaScript

In JavaScript können Textfelder von Formularen innerhalb des Browsers über die dem Formular und Textfeldern vergebenen IDs ausgelesen werden, und zwar so:

var vorname = document.kontaktformular.vorname.value;
var nachricht = document.kontaktformular.nachricht.value;

PHP

In PHP werden nach dem Senden des Formulars aus dessen Werten Variablen erzeugt, welche zur weiteren Benutzung zur Verfügung stehen.

register_globals = on

Ist PHP mit register_globals = on konfiguriert, so wird für jedes übergebene Formularfeld eine Variable mit demselben Namen generiert.

Aus der ID wird der Variablenname.
Der Variablenwert entspricht dann dem eingegebenen Text.

o.g. Beispiel erkennt PHP als

$vorname = "Felix";
$nachricht = "Das ist meine Nachricht."

D.h. mit den Werten der Formularfelder “vorname” bzw. “nachricht” kann nach Absenden des Formulars über die Variablen $vorname bzw. $nachricht im PHP-Script weitergearbeitet werden.

register_globals = off

Ist PHP mit register_globals = off konfiguriert, so kann auf die Variablen über das superglobale Array $_POST zugegriffen werden (natürlich nur, wenn das Formular per method=”post” versendet wurde):

$vorname = $_POST['vorname'];
$nachricht = $_POST['nachricht'];

Nicht-gruppierte Checkboxen

Checkboxen können entweder einzeln oder mit anderen Checkboxen gruppiert in ein Formular integriert werden.

Typisches Beispiel für eine nicht-gruppierte Checkbox:

<form id="bestellformular">
<input type="checkbox" name="agb" id="agb" /> Ich akzeptiere die AGB.
</form>

JavaScript

Mit folgendem JavaScript-Code kann man nun abfragen, ob die Checkbox markiert wurde:

if (document.bestellformular.agb.checked == true) {
  alert('AGB akzeptiert');
}

PHP

In PHP steht die Variable einer nicht-gruppierten Checkbox nach dem Senden des Formulars nur dann zur Verfügung, wenn sie zuvor ausgewählt bzw. markiert wurde.

Das bedeutet, dass es ausreicht, zu fragen, ob die Variable nach dem Senden in PHP initiiert wurde oder nicht.

Der Einfachheit halber hier (und im Folgenden) nur der Code für die PHP-Konfiguration mit register_globals = on (s.o.) :

<?php
  if(isset($agb)) {
    echo "AGB akzeptiert";
  }
?>

Gruppierte Checkboxen und Radiobuttons

Checkboxen und Radiobuttons können gruppiert werden, indem ihnen das gleiche name-Attribut vergeben wird. Im value-Attribut steht dann der jeweils zugewiesene Wert der Checkbox oder des Radiobuttons.

Beispiel für gruppierte Checkboxen:

<form name="bestellformular" method="post" action="">
   Bitte senden Sie mir Informationen &uuml;ber
   <input type="checkbox" name="infosendung" id="infosendung"
   value="Hotels">
   Hotels
   <input type="checkbox" name="infosendung" id="infosendung"
   value="Hausboote">
   Hausboote
   <input type="checkbox" name="infosendung" id="infosendung"
   value="Pensionen">
</form>

Beispiel für gruppierte Radiobuttons:

<form name="kontaktformular" method="post" action="">
 Anrede:
 <input type="radio" name="anrede" value="Herr">
 Herr
 <input type="radio" name="anrede" value="Frau">
 Frau
</form>

JavaScript

Mit JavaScript kann nun der Zustand jeder Checkbox bzw. jedes Radiobuttons ausgelesen werden.

Leider kann man hier nicht direkt auf die Werte bspw. über das value-Attribut zugreifen.
Man macht sich aber zunutze, dass gruppierte Checkboxen bzw. Radiobuttons der Reihenfolge ihres Vorkommens im Quellcode nach in ein Array mit dem Namen des gemeinsamen name-Attributs gespeichert werden. Über dieses Array kann dann der Zustand der Checkboxen und Radiobuttons der Reihe nach abgefragt werden.

Beispiel Checkboxen:

if ( document.bestellformular.infosendung[0].checked == true ) {
  alert('Informationen über Hotels');
};
if ( document.bestellformular.infosendung[1].checked == true ) {
  alert('Informationen über Hausboote');
};
if ( document.bestellformular.infosendung[2].checked == true ) {
  alert('Informationen über Pensionen');
};

Beispiel Radiobuttons:

if ( document.kontaktformular.anrede[0].checked == true ) {
  alert('Herr');
}
if ( document.kontaktformular.anrede[1].checked == true ) {
  alert('Frau');
}

PHP

In PHP kann man nun auch direkt auf die Value-Attribute der gesendeten Check- und Radiobuttons zugreifen.

Hier kann wie bei den nicht-gruppierten Checkboxen zuerst einmal überprüft werden, ob überhaupt ein Element aus den gruppierten Checkboxen oder Radiobuttons ausgewählt wurde.

Ist dies nicht der Fall, so sind die Variablen, welche aus den gemeinsam vergebenen name-Attributen generiert werden, nicht existent.

Für unsere Beispiele:

if ( isset($infosendung) ) {
  echo "Ein oder mehrere Elemente aus der Gruppe 'infosendung' wurde(n) ausgewählt";
}
if ( !isset($anrede) ) {
 echto "Sie haben keine Anrede ausgewählt."
}

Doch nun zur Abfrage der einzelnen Radiobuttons bzw. Checkboxen.

RADIOBUTTONS

Von gruppierten Radiobuttons kann jeweils nur ein einziger ausgewählt werden.
Wird ein zweiter aktiviert, so wird der vorher ausgewählte automatisch abgewählt.

Das bedeutet, dass bei Empfang des Formulars in PHP eine Variable mit dem Namen des name-Attributes und dem Wert (value) des aktiven Radiobuttons erzeugt wird.

Dann kann gefragt werden:

<?php
  if ( $anrede == "Herr" ) {
    echo "Sehr geehrter Herr";
  } else if ( $anrede == "Frau" ) {
    echo "Sehr geehrte Frau";
  }
?>

CHECKBOXEN

Werte ausgewählter gruppierter Checkboxen hingegen werden wie bei JavaScript in einem Array gespeichert, welches den Namen des name-Attributs der Checkboxen trägt.

Die Werte können dann zum Beispiel so ausgegeben werden:

$info_bestellung = “Sie haben folgende Informationen bestellt:
“;

for ( $i=0; $i < count($infosendung); $i++ ) {
  if ($infosendung[$i] != "") {
    $zaehler = $i + 1;
    $info_bestellung .= "$zaehler. $infosendung[$i] <br />";
  }
}

Wären in unserem Beispiel der gruppierten Checkboxen (s.o.) alle Checkboxen markiert, würde folgender Text ausgegeben werden:

Sie haben folgende Informationen bestellt:
1. Hotels
2. Hausboote
3. Pensionen

Submit-Buttons

Eine weitere häufig auftretende Frage ist, wie abgefragt werden kann, mit welchem Submit-Button ein Formular übermittelt wurde, wenn innerhalb des Formulares mehrere Submit-Buttons definiert wurden. (um zum Beispiel verschiedene Funktionalitäten auszuführen)

Angenommen wir haben ein Formular mit den Buttons “Überprüfen” und “Abschicken”:

<form name="formular" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
  <input name="ueberpruefen" type="submit" value="Ueberpruefen"><br />
  <input name="abschicken" type="submit" value="Abschicken">
</form>

PHP

In PHP wird nur für denjenigen Button eine Variable erzeugt, der das Senden des Formulars ausgelöst hat.
Welcher dies ist, kann damit überprüft werden, indem man die Existenz der entsprechenden Variable abfragt:

<?php
  if (isset($ueberpruefen)) {
    ueberpruefen();
  }
  if (isset($abschicken)) {
    abschicken();
  }
?>

Für ein Projekt habe ich diese wunderbare JavaScript-Diashow von S.G. Chipman ein wenig modifiziert.

Vorteile der Slideshow:

• Eine beliebige Anzahl von Bildern kann als Slideshow eingebaut werden.
• Es werden anfangs nur zwei Bilder vorausgeladen. Alle folgenden werden nach und nach dazu geladen (spart Ladezeiten).
• Ist JavaScript nicht aktiviert, wird nur das erste Bild angezeigt, nicht wie im Original-Script alle Bilder untereinander. So kann die Slideshow in eine Website z.B. im Header integriert werden und sieht dann auch noch gut aus, wenn JavaScript deaktiviert ist.
• Die Slideshow ist in unaufdringlichem JavaScript geschrieben, was sie sehr flexibel macht.
• Der (X)HTML-Quellcode ist standardkonform und semantisch korrekt aufgebaut.

Slideshow einbinden

1.

Bilder für die Slideshow erstellen und nummeriert mit Endung 001.jpg bis 00x.jpg in einem Ordner auf dem Webserver speichern.

z.B. http://www.meinedomain.de/slideshow/image-001.jpg usw.

2.

Erstes Bild der Slideshow mit class="start" in div-Container mit ID “slideshow” mit folgendem Code in die Seite einfügen:

<div id="slideshow">
<img class="start" src="www.meinedomain.de/slideshow/image-001.jpg" />
</div>

3.

Slideshow-JavaScript-Datei downloaden »

4.

JavaScript-Datei anpassen:

Die folgenden Variablen am Anfang des Scriptes nach eigenen Bedürfnissen definieren:

bilderAnzahl=5;
bilderPfad="http://www.meinedomain.de/slideshow/image-";
geschwindigkeit=3000;

Für bilderAnzahl die Anzahl der Slideshow-Bilder angeben.
Bei bilderPfad den absoluten Pfad zu den Slideshow-Bildern angeben und zwar bis zu dem Zeichen, welches vor der Nummerierung 00x.jpg steht (s. Beispiel oben).
Für geschwindigkeit die Zeit zwischen den Überblendungen in Millisekunden angeben, also für 1 Sekunde 1000.

5.

JavaScript-Datei einbinden:

<script type="text/javascript" src="http://www.meinedomain.de/scripte/slideshow.js"></script>

6.

Folgendes CSS in die Stylesheet-Datei der Website einbinden:

/* SLIDESHOW */
#slideshow {
 height:100px; /* hier Hoehe der Slideshow-Bilder angeben */
 position:relative;
}
#slideshow img {
 display:none;
 position:absolute;
 top:0; left:0;
}
#slideshow img.start {
 display:block;
}

7.

Slideshow bewundern!

PS:
Das Script funktioniert bei mir in allen getesteten Browsern.
Falls es das irgendwo nicht tut, würde ich mich über eine Nachricht freuen!

YouTube & co. machen es vor und konvertieren Videos in das Flash-Video-Format FVL um diese dann so zu veröffentlichen.

Wie bekomme ich aber ein eigenes Video in meine Website oder mein Wordpress-Blog?

1. Videos in das FLV-Format konvertieren

Zum Konvertieren von AVI, MPEG, Quicktime und WMV-Dateien in das FLV-Format eignet sich vorzüglich der Riva FLV-Encoder (Freeware).

Die Bedienung ist kinderleicht

• Erst das Quellvideo aussuchen,
• ein Zielverzeichnis und -name angegeben,
• und Einstellungen, wie Filmgröße oder Bildfrequenz einstellen,
• auswählen, ob die Audio-Spur eingebunden werden soll
• eventuell dem Video ein Padding hinzufügen oder es beschneiden
• und dann auf Knopfdruck (Encodieren) den Film in das FLV-Format umwandeln.

Über den Vorschau-Button kann das Ergebnis gleich betrachtet und dann eventuell noch korrigiert werden.

Die so erhaltene FLV-Datei lässt sich nun aber leider nicht einfach in den Quelltext einer Webseite einbinden.

Sie muss dazu entweder über Flash in eine .swf-Datei eingebunden werden. Oder aber man bedient sich eines FLV-Players für Webseiten.

2. Der Flash-Video-Player

Jeroen Wijerings Flash Video Player 2.4 ist für diesen Zweck wie geschaffen und äußerst komfortabel. Der FLV-Datei werden automatisch Abspiel- und Lautstärkeregler hinzugefügt.

Installation und Anwendung:
Der Flash-Video-Player mediaplayer.swf wird einfach auf dem Webserver abgelegt und dann inclusive abzuspielender Videodatei mit Hilfe eines object-Tags der folgenden Form in die Webseite eingebunden:

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="mediaplayer.swf?file=movies/holiday.flv">  <param name="movie" value="mediaplayer.swf?file=movies/holiday.flv" />  <param name="wmode" value="transparent" /> </object>

Und schon wird das Video auf der Internetseite angezeigt!

Der Flash Video Player wurde unter Creative Commons License veröffentlicht, was bedeutet, dass er für nicht-kommerzielle Zwecke kostenfrei eingesetzt werden darf.
Eine Lizenz ist aber mit 20 Euro auch durchaus erschwinglich.

Übrigens nutzt auch YouTube Jeroen Wijerings Flash Video Player.

3. WP-FLV – Das Flash Video Player – Plugin für Wordpress

Für Wordpress gibt es – wie so oft – praktischerweise ein Plugin zum Integrieren des Flash Video Players mit dem einfachen Namen WP-FLV.

Installation

• Jeroen Wijerings Flash Video Player downloaden
• ZIP-Paket entzippen und die Datei flvplayer.swf in einem Ordner auf dem Webserver ablegen
• dann den Quellcode des WP-FLV-Plugins downloaden
• die Datei von wp-flv.php.txt in wp-flv.php umbenennen
• und in den Wordpress-Plugin-Ordner auf den Webserver laden
• in den Wordpress-Admin-Bereich einloggen
• das Plugin WP-FLV im Plugin-Menu aktivieren

Unter Einstellungen > WP-FLV können nun im Administrationsbereich noch einige Einstellungen vorgenommen werden.

Vor allem muss hier, damit das Plugin funktioniert, die absolute URL zum Flash Video Player, also der Datei flvplayer.swf, angegeben werden!
Alle weiteren Einstellungen sind selbsterklärend und optional.

Damit ist das Plugin fertig installiert!

Benutzung des Plugins

Das Plugin ersetzt ein spezielles <flv>-tag mit dem benötigten (validen!) XHTML-Flash-Code.

Das <flv>-tag hat vier Attribute.

href
Das ist das einzige Pflicht-Attribut. Es beinhaltet die URL zur Flash-Video-Datei (die natürlich vorher auf den Webserver geladen werden muss).
width
Optionales Attribut mit dem die Breite des Films angegeben werden kann.
Wenn der Wert nicht gesetzt ist, wird die in den Wordpress-Einstellungen angegebene Standard-Breite verwendet.
height
Legt die Höhe des Films fest (funktioniert wie width).
autostart
Werte: false oder true
Mit diesem Attribut kann festgelegt werden, ob der Film automatisch starten soll oder nicht.

Drei Beispiel-Codes:

<flv href="http://www.yourdomain.com/movie.flv" autostart="true" /> <flv href="/movie.flv" autostart="false" width="540" height="10" /> <flv href="/movie.flv" />

Außerdem hilft ein FLV-Quicktag beim Einfügen des Films in den Wordpress-Text.

Mehr ist dann nicht mehr zu tun, um ein Video in Wordpress einzubinden :)

Update: Legt man in den Video-Ordner noch ein JPG mit dem gleichen Namen und gleicher Größe wie das FLV-File, so wird dieses Bild als Standbild vor dem Starten des Films angezeigt.
(Hinweis von Mario, auf dessen Seite man das Plugin prima in Aktion sehen kann!)

Nur für Wordpress: Jetzt NOCH einfacher!

Update: 11.01.2007:

Wer eine optimale Lösung NUR für Wordpress sucht, der sollte sich unbedingt mal das wordTube-Plugin von Alex Rabe anschau´n. Hier beschreibe ich, wie es funktioniert »
Ist wesentlich einfacher zu bedienen und das Problem mit den Vorschaubildern ist auch behoben.

Danke Jochem für den Hinweis!

Über den Einsatz von Wordpress als CMS wurde schon an verschiedenen Stellen berichtet.

Ich möchte diese Anregungen hier gern noch ein wenig erweitern, indem ich erläutere, wie ich Wordpress für die Netzspielwiese als CMS konfiguriert habe.

1. Die Navigation

Die horizontale Hauptnavigation der Netzspielwiese unter dem Header enthält sowohl Wordpress-Kategorien als auch statische Seiten als Navigationspunkte.

Als erstes habe ich meine Permalink-Struktur wie folgt eingerichtet:

/%category%/%year%-%monthnum%/%postname%

Damit können nun sowohl statische Seiten als auch Kategorien über einen Link der Art:

<a href="http://www.meinblog.de/menuepunkt">Menuepunkt</a>

aufgerufen werden.

Mit <?php echo get_settings('home'); ?> wird von Wordpress automatisch die URL, in dem das Blog installiert wurde, eingefügt.

In der Datei header.php kann nun darauf aufbauend die Navigation von Hand erstellt und eingebunden werden:

<ul>
 <li>
 <a href="<?php echo get_settings('home'); ?>/home">
  Home</a></li>
 <li>
 <a href="<?php echo get_settings('home'); ?>/leistungen">
  Leistungen</a></li>
 <li>
 <a href="<?php echo get_settings('home'); ?>/portfolio">
  Portfolio</a></li>
 <li id="aktiv">
 <a href="<?php echo get_settings('home'); ?>">
  Blog</a></li>
 <li>
 <a href="<?php echo get_settings('home'); ?>/links">
  Links</a></li>
 <li>
 <a href="<?php echo get_settings('home'); ?>/kontakt">
  Kontakt</a></li>
</ul>

HOME, LINKS und KONTAKT sind dabei als statische Wordpress-Seiten angelegt.
BLOG ist die Startseite des Blogs mit den chronologisch aktuellsten Beiträgen.
LEISTUNGEN und PORTFOLIO sind zwei einzelne Kategorien des Blogs.

Um nun die jeweils aktuellen Navigationspunkte als aktiv darstellen zu können, bedarf es einiger weitergehender Überlegungen.
Hierbei ist zu unterscheiden zwischen Menüpunkten, welche auf statische Seiten verweisen, denen, die auf eine Kategorie verweisen und dem Standard-Menüpunkt, in meinem Fall BLOG, der immer aktiv sein soll, wenn die anderen Menüpunkte nicht aktiv sind.

1.1. Navigationspunkte für statische Seiten aktivieren

Am einfachsten lässt sich die Auswahl des aktuellen Menüpunktes für statische Seiten mit der Abfrage if (is_page('seitenname')) realisieren.
Ist die Bedingung erfüllt, wird dem Menüpunkt die CSS-Klasse “aktiv” zugewiesen.
Für die Menüpunkte HOME, LINKS und KONTAKT sieht der Code also wie folgt aus:

<li<?php if (is_page('home')) echo ' id="aktiv"'; ?>>
 <a href="<?php echo get_settings('home'); ?>/home">
 Home</a>
</li>

<li<?php if (is_page('links')) echo ' id="aktiv"'; ?>>
 <a href="<?php echo get_settings('home'); ?>/links">
 Links</a>
</li>

<li<?php if (is_page('kontakt')) echo ' id="aktiv"'; ?>>
 <a href="<?php echo get_settings('home'); ?>/kontakt">
 Kontakt</a>
</li>

1.2. Navigationspunkte für Kategorien aktivieren

Bei Blog-Kategorien als Navigationspunkten (wie LEISTUNGEN und PORTFOLIO auf der Netzspielwiese) gestaltet sich das Ganze schon schwieriger.

Mit der Abfrage if (is_category('leistungen') wird abgefragt, ob die Kategorie Leistungen aktiv ist.
Dies ist der Fall, wenn die Seite über den Link www.netzspielwiese.de/leistungen aufgerufen oder die Kategorie aus dem Kategorie-Menü in der Sidebar ausgewählt werden würde.

Die Abfrage || in_category('8')) ist erfüllt, wenn ein einzelner Beitrag auf der Seite angezeigt wird und dieser in die Kategorie Leistungen eingeordnet wurde, welche bei mir die ID 8 hat.

Nun muss noch ausgeschlossen werden, dass nicht die Home-Seite && !is_home() und nicht die Archiv-Seite eines Tages && !is_day() und nicht die Archiv-Seite eines Monats && !is_month() und nicht die Archiv-Seite eines Jahres && !is_year() und nicht die Ergebnisseite der Suche && !is_search() und keine statische Seite && !is_page()) ausgewählt ist.

Denn wenn auf der Startseite oder einer der Archiv- oder Such-Seiten nur Beiträge aus der Kategorie LEISTUNGEN oder PORTFOLIO erscheinen würden, würden sowohl der Menüpunkt BLOG als auch der Menüpunkt der KATEGORIE als aktiv dargestellt werden.

Der vollständige Code für die Navigationspunkte LEISTUNGEN und PORTFOLIO lautet also:

<li<?php if (is_category('leistungen') || (in_category('8')
&& !is_home() && !is_day() && !is_month() && !is_year()
&& !is_search() && !is_page() )) echo ' id="aktiv"'; ?>>
 <a href="<?php echo get_settings('home'); ?>/leistungen">
 Leistungen</a>
</li>

<li<?php if (is_category('portfolio') || ( in_category('4')
&& !is_home() && !is_day() && !is_month() && !is_year()
&& !is_search() && !is_page() )) echo ' id="aktiv"'; ?>>
 <a href="<?php echo get_settings('home'); ?>/portfolio">
 Portfolio</a>
</li>

1.3. Standard-Navigationspunkt (BLOG) aktivieren

Wenn die Home-Seite, eine Archiv-, oder Suchseite aufgerufen wurden und dann, wenn keiner der bisher genannten Menüpunkte aktiv ist, soll immer der Menüpunkt BLOG als aktiv erscheinen.
Im Einzelnen gilt dies für folgende Fälle:

Die Home-Seite wurde aufgerufen if ((is_home()) oder das Archiv eines Tages || is_day() oder das Monatsarchiv || is_month() oder das Jahres-Archiv || is_year() oder die Suchergebnisseite || is_search().

Zusätzlich müssen nun noch die Bedingungen für alle anderen Menüpunkte abgefragt werden. Trifft keine der Bedingungen für die anderen Menüpunkte zu, wird BLOG aktiviert.

Abfrage für den Menüpunkt HOME: || ((!is_page('home')),
die Kategorie LEISTUNGEN: && (!is_category('leistungen')) && (!in_category('8')),
die Kategorie PORTFOLIO: && (!is_category('portfolio')) && (!in_category('4')) und
die statischen Seiten LINKS && (!is_page('links'))und KONTAKT && (!is_page('kontakt')) )).

Und hier der ganze Code zum Menüpunkt BLOG:

<li
<?php
 if (
  (is_home()) || is_day() || is_month() || is_year()
  || is_search() || (
   (!is_page('home')) && (!is_category('leistungen'))
    && (!in_category('8')) && (!is_category('portfolio'))
    && (!in_category('4')) && (!is_page('links'))
    && (!is_page('kontakt'))
   )
  ) 
 echo ' id="aktiv"';
?>
>
 <a href="<?php echo get_settings('home'); ?>/">Blog</a>
</li>

(Der Code wurde zur Verdeutlichung auf mehrere Zeilen mit Einrückung verteilt, muss aber im Quelltext ohne Zeilenumbrüche und Einrückungen notiert werden.)

Damit steht also die Navigation. Nun noch ein paar Worte zu den einzelnen Kategorien.

2. Die Kategorien

2.1. Die Startseite

Wie schon erwähnt, nehmen die Kategorien LEISTUNGEN und PORTFOLIO auf der Netzspielwiese eine Sonderstellung ein.

Die Beiträge der Kategorien LEISTUNGEN und PORTFOLIO erscheinen nicht innerhalb des Blogbereiches.

Dazu werden im Template index.php (der Startseite des Blogs) innerhalb des Wordpress-Loops mit der Bedingung if( (!in_category(4)) && (!in_category(8)) ) die Beiträge der beiden Kategorien ausgeschlossen:

<?php
// Wordpress-Loop
while (have_posts()) : the_post(); ?>

<?php
// alle Beitraege ausser Kategorie Portfolio und Leistungen anzeigen
if ( (!in_category(4)) && (!in_category(8)) ) { ?>

... Post-Inhalt ausgeben ...

<?php } ?>
<?php endwhile; ?>

2.2. Die Anzeige der Kategorien

Die Anzeige einer Kategorie wird in Wordpress über das Templatefile archive.php realisiert.

Die auf der Netzspielwiese in den Kategorien LEISTUNGEN und PORTFOLIO veröffentlichten “Beiträge” sollen nicht kommentiert werden. Zudem werden keine Meta-Informationen über das Veröffentlichungsdatum, Autor o.ä. angezeigt.

Um dies zu erreichen, habe ich innerhalb des Loops in der Datei archive.php wiederum zwischen der Anzeige der Kategorien LEISTUNGEN und PORTFOLIO sowie den restlichen Kategorien unterschieden.

<?php while (have_posts()) : the_post(); ?>

<?php  // wenn nicht Kategorie PORTFOLIO und nicht LEISTUNGEN ausgewaehlt ist
if (!is_category(4) && (!is_category(8))) { ?>

 <?php  // alle Beitraege ausser Kategorie PORTFOLIO und LEISTUNGEN anzeigen
 if ( (!in_category(4)) && (!in_category(8)) ) { 

 // Anzeige der Beiträge aus allen anderen Kategorien incl. Datum und Post-Meta-Daten
 ?>

   <div class="post">
    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <div class="post_datum"> <?php the_time('j.M.Y') ?> </div>
    <div class="entry">
     <?php the_content('(Weiterlesen &raquo;)'); ?>
     <?php link_pages('<p><strong>Seiten:</strong> ', '</p>', 'number'); ?>
    </div><!-- entry -->
    <p class="postmetadata"> <?php edit_post_link('&#187; Bearbeiten ','','<strong class="unsichtbar">|</strong>'); ?><span class="bullet_zeit"><?php the_time('G:i ') ?><?php print ' Uhr ' ?></span>in <span class="bullet_kategorie"><?php the_category(', ') ?></span> <strong class="unsichtbar">|</strong> <span class="bullet_kommentar"><?php comments_popup_link('kommentieren &#187;', '1 Kommentar &#187;', '% Kommentare &#187;'); ?></span></p>
   </div><!-- post -->

  <?php } // Ende Aussparung PORTFOLIO und LEISTUNGEN ?>

 <?php } else { // wenn Kategorie PORTFOLIO oder LEISTUNGEN ausgewaehlt ist ?>

  <?php  // nur Beitraege aus Kategorie PORTFOLIO bzw. LEISTUNGEN anzeigen
  if (in_category(4) || (in_category(8))) { 

   // nur der Inhalt des Posts wird angezeigt (kein Datum, keine Post-Meta-Daten)  ?>
   <div class="post">
    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <div class="entry">
     <?php the_content('(Weiterlesen &raquo;)'); ?>
    </div><!-- entry -->
   </div><!-- post -->

  <?php } ?>
 <?php } ?>

<?php endwhile; ?>