:::: MENU ::::

HOWTO: Dynamische Signatur ( für WordPress Blogger )

Signaturen gibt es seid dem es Foren gibt :D, dynamische Signaturen sind da allerdings schon eher selten und wenn dann sind sie zum größten Teil nicht selbst gemacht sondern von einem Webservices ( z.B. Gamemonitor oder zetbit), dabei ist es gar nicht so schwer selber eine eigene individuelle Signatur zu erstellen, sogar mit transparentem Hintergrund, ein wenig PHP und eine gute Idee und schon geht es los:

Dynamische Signatur mit transparentem Hintergrund für WordPressartikel:

1. Die Verbindung zur Datenbank, Einstellungen und Bildererzeugung
Zunächst muss die DB Verbindung hergestellt und Grundeinstellungen getätigt werden,
in diesem Schritt wird auch bereits die Bildgrundfläche erzeugt und mit Transparenz „gefüllt“

<?php
########## Verbindung zur DB / Einstellungssache ###########
$db_server = 'localhost';
$db_name = 'wordpress_db';
$db_user = 'wordpress_usr';
$db_passwd = 'changeme';
$tabelle = "wp_posts"; // Evtl Prefix aendern
$hoehe = 50; // Angabe in px
$breite = 500;
$listlimit = 2; // Zahl der zu lesenden Einträge bei uns 2, da 2 Artikel in Signatur

//Schriftarten
$font1 = '/var/www/verdana.ttf'; // Hochladen nicht vergessen ;)
$font2 = '/var/www/verdanab.ttf'; // Fettschrift ;)
$font3 = ''; // ... wenn es mehr sein darf

// ( Bildererzeugung inklusive Alphachannel also Transparenz muss
//   muss vor die allocalisierung der Farben )
$png = imagecreatetruecolor($breite, $hoehe);
imagesavealpha($png, true);

//Transparenz "Farbe"
$trans_colour = imagecolorallocatealpha($png, 0, 0, 0, 127);
imagefill($png, 0, 0, $trans_colour);

//Farben ( beliebig Aender und Addierbar )
$grey = imagecolorallocate($png, 136, 136, 136); // RGBfarben
$red = imagecolorallocate($png, 255, 0, 0);
$bplacedblue  = imagecolorallocate($png, 11,95,180);

2. WordPress-Posts auslesen und in Array schreiben
Zunächst der DB Query und seine Aufgabe:
Lese Artikel_Datum und Artikel_Titel aus der Datenbanktabelle aus mit der Bedingung
das der Post_Type „Post“ ( also Artikel ) ist und sein Status veröffentlicht und sortiere diese
nach dem Artikel_Datum mit dem Limit xy

##Datenbankverbindung ##
$conn = mysql_connect($db_server,$db_user,$db_passwd);
mysql_select_db($db_name);
$result = mysql_query("SELECT post_date, post_title FROM $db_name.$tabelle
WHERE post_type = 'post' AND post_status = 'publish'
ORDER BY post_date DESC LIMIT $listlimit",$conn) or die("Error".mysql_error());

Der Titel muss nun in einen PHP-Array was wir mit der folgenden Schleife reallisieren:

###### Titel in PHP Array ##########
$i=0;
 if(mysql_num_rows($result)){ // Solange wir Zeilen haben ( im Beispiel 2) durchlaufen
 while($row = mysql_fetch_assoc($result)){
 $text[$i]= $row['post_title']; // Titel in den Array $text schreiben
 $i++; // Einen Addieren, Erklaerung Array: http://www.schattenbaum.net/php/array.php
 }
 }

3. Das Bild mit Inhalten ( bei uns WordPress Artikel Titel ) füllen
Dies ist der einzige schwierige Schritt in diesem Tutorial, weil hier zum ersten mal Gehirn und Raumgefühl gefordert werden,  aus diesem Grund möchte ich erstmal die imagettftext(); Funktion und ihrer Parameter erklären:

imagettftext ( resource $im , int $size, int $angle , int $x , int $y , int $col , string $fontfile , string $text )

  • Ressource $im ist bei uns $png also das Bild das zur Grundlage / zuschreiben vorliegt
  • Int $size gibt die Schriftgröße als Zahl ( wie auch sonst? ) an
  • Int $angle ermöglicht es den Text zudrehen den man erzeugen möchte ( Angabe in Grad, bei uns 0 )
  • Int $x, $y beschreiben die Stelle von der aus geschrieben werden soll ( 2D Koordinatensystem )
  • Int $col hier steht später unsere Farbe z.B. $red
  • String $fontfile ist der Pfad zu unserer Schriftart
  • String $text , der Text den wir schreiben wollen

So soll das ganze später aussehen:

sig2

Fangen wir also an mit der ersten Zeile, wie ihr seht besteht sie aus 3 Teilen: Grau, Blau und wieder Grau, hier wird
nochmal deutlich das es einzelne „Mal“-Funktionen sind ( die Reihenfolge ist übrigens egal, hier im Beispiel mach ich es nur der Ordnung und der Verständnis wegen )

## Erste Zeile schreiben ##
imagettftext($png, 8, 0, 0, 15, $grey, $font2, 'Michael bloggt auf');

// andere Farbe und keine Fettschrift mehr
imagettftext($png, 8, 0, 112, 15, $bplacedblue, $font1, 'http://michaelplas.de/');
// Unterschreiben geht nur über einen Trick - Malt eine Linie
// imageline  ( resource $image  , int $x1  , int $y1  , int $x2  , int $y2  , int $color  )
imageline($png  , 112 ,16  , 230  , 16  , $bplacedblue  );

// Und wieder fettes Grau
imagettftext($png, 8, 0, 235, 15, $grey, $font2, 'über  folgendes:');

So und nun die WordPress Titel ( in meinem Beispiel sind es 2 Stück, ich denke für eine Forensignatur reicht das, aber jetzt wisst ihr ja wie es geht )

imagettftext($png, 8, 0, 0, 29, $grey, $font1, $text[0]);
imagettftext($png, 8, 0, 0, 45, $grey, $font1, $text[1]);

Und zum Abschluss noch schnell den Mimetyp und das Bild erzeugen und ausgeben:

header("Content-type: image/png");
imagepng($png);
?>

Und das war es auch schon 😀 Hoffe ich konnte euch weiterhelfen, hier ist nochmal der Sourcecode zum Downloaden, Schriftarten bitte selber besorgen

[download id=“3″]

CODE – HIGHLIGHTED Version


Comments are closed.