smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

WordPress Plugin: In Image Ads Manager

Mit dem In Image Ads Manager könnt ihr einfache Textlink-Ads erstellen, die dann euren Besuchern beim Hovern über ein Bild angezeigt werden.

Ein solches In Image Ad bzw. eine solche Ad-Box besteht dabei aus einem Titel, einem Text und einer URL. Erfolgt ein Klick auf die Ad-Box, dann wird der Besucher zu der hinterlegten URL weitergeleitet.

Live-Beispiel

Wenn ihr euren Mauszeiger über das folgende Bild bewegt, wird eine entsprechende Ad-Box angezeigt. Je nach Position des Mauszeigers wird die Ad-Box entweder oben oder unten im Bild angezeigt.

Live-Vorschau: In Image Ads Manager

Download

Das Plugin könnt ihr auf wordpress.org oder direkt über euren im WordPress Admin-Bereich vorhandenen Plugin-Manager herunterladen und installieren.

Anleitung – In Image Ads Manager verwenden

Nachdem ihr das Plugin installiert habt, dürftet ihr in eurem Admin-Bereich ein neues Hauptmenü namens In Image Ads angezeigt bekommen. Das Hauptmenü selbst hat drei Untermenüs, die im Folgenden kurz erklärt werden:

Übersicht
Die Übersichtsseite zeigt euch alle bestehenden In Image Ads in einer Tabelle an. Dabei werden immer 6 Ads pro Tabellen-Seite angezeigt. Über eine Pagination könnt ihr zwischen den einzelnen Tabellen-Seiten hin- und herblättern.

Die Tabelle selbst hat 3 verschiedene Anzeige-Modi:

  • Alle – zeigt alle existierenden Ads an
  • Aktiv – zeigt alle aktiven Ads an (aktiv in dem Sinne, dass sie nicht im Papierkorb sind)
  • Papierkorb – zeigt alle Ads, die sich im Papierkorb befinden

Über einzelne Links könnt ihr hier direkt zur Bearbeitungsseite eines Ads gelangen, es in den Papierkorb werfen, wiederherstellen oder ganz löschen.

In Image Ads Manager - Übersichtsseite im Admin-Bereich

Neues Ad
Hier könnt ihr ein neues In Image Ad erstellen. Dazu müsst ihr nur einen Titel, einen Text und eine URL angegebn. Zusätzlich müssen noch die Bildmaße des Bildes, für welches das Ad bzw. die Ad.Box eingeblendet werden soll, eingegeben werden. Optional könnt ihr noch das Aussehen der Ad-Box anpassen. Dazu könnt ihr die Hintergrundfarbe, Titelfarbe und Textfarbe individuell anpassen.

Falls ihr bei der Eingabe falsche Werte eingetragen habt oder Felder leer gelassen habt, werden euch entsprechende Fehlerhinweise angezeigt.

Nachdem ihr ein Ad erstellt habt, wird diesem Ad eine ID zugeordnet. Diese ID ist immer in der Form iiam-x, wobei x für eine Zahl steht. Diese ID benötigt ihr, um das Ad einem Bild zuzuweisen.

Sowohl beim Erstellen als auch Bearbeiten eines Ads gibt es immer gleich eine Live-Vorschau, so dass ihr sehen könnt, wie das Ad aussehen würde.

Ad bearbeiten
Wenn ihr auf der Übersichtsseite ein Ad zum Bearbeiten ausgewählt habt, könnt ihr es auf dieser Seite aktualisieren.

Anleitung – In Image Ad einem Bild zuweisen

Um nun ein Ad einem Bild zuzuweisen, müsst ihr einfach die ID eines Ads als Klassenname (Atribut class) für das gewünschte Bild angeben:

<img class="iiam-1" src="{image-path}" width="300" height="200" alt="{image-description}"  />

Von nun an wird immer das Ad eingeblendet, wenn ein Besucher von euch mit dem Mauszeiger über das Bild fährt.

Alle Ads die sich im Papierkorb befinden, werden im Frontend nicht berücksichtigt. Habt ihr also ein Ad mehreren Bildern in eurem Blog zugewiesen und dieses Ad verlinkt z.B. auf eine Affiliate-Kampagne die es nicht mehr gibt, so könnt ihr ganz einfach das Ad in den Papierkorb werfen und die Ads werden nicht mehr angezeigt. Das hat den Vorteil, dass ihr nicht sofort alle Ad-Zuweisungen einzeln entfernen müsst.

Weitere Hinweise

Responsive
Die Breite der Ads passt sich immer dynamisch an die jeweilige Bildbreite an. Sollte der Titel oder Text zu lang sein, so wird der Titel bzw. Text abgeschnitten und mit … aufegüllt.

Performance
Für alle Performance-Junkies: Das Plugin bindet die benötigten JavaScript- und CSS-Dateien nur ein, wenn sie auch gebraucht weden. Das heißt also, dass wenn ein Artikel, für welchen es keine Bilder mit Ad-Zuweisungen gibt, aufgerufen wird, dann auch kein extra JavaScript oder CSS seitens des Plugins eingebunden wird.

Im Admin-Bereich werden vom Plugin benötigtes JavaScript und CSS auch nur auf den eigenen Plugin-Menüseiten eingebunden.

Update-Historie (Changelog)

1.1

  • Ersetzung des veralteten Farbtastic Color-Picker mit den neuen standardmäßigen WordPress Color-Picker Iris
  • Unterstützung für WordPress 3.5.1 getestet & sichergestellt

1.0

  • Veröffentlichung

Bekannte Probleme bzw. Bugs

Aktuell sind keine Probleme bekannt.

Geplante Neuerungen

  • Anpassbarkeit der Durchsichtigkeit der Hintergrundfarbe (Opacity) eines Ads
  • Anpassbarkeit der Höhe eines Ads (derzeit 50px fixed)
  • ein optionales Ad-Bild/Thumbnail soll eingefügt werden können

Habt ihr eventuell weitere Verbesserungsvorschläge oder Wünsche? Dann schreibt mir doch einfach ein Kommentar!