Das Putzlowitsch Test- und SEO-Blog

Ich will den alten Datei-Hochlader in WordPress zurück haben!

Bis zur Version 3.4 war die WordPress-Welt für mich noch in Ordnung.

Doch mit Version 3.5 wurde ein neuer Dialog zum Hochladen von Dateien installiert, der mir überhaupt nicht zusagt.

Das linke Bild zeigt den alten Dialog, das rechte den neuen.

Gut, es gibt nun eine hübsche Thumbnail-Übersicht, aber darunter leiden die Beschreibungs- und Beschriftungsfelder zum Bild. Sie sind einfach zu schmal.

Außerdem ist mir die Handhabung der neuen Galerie-Funktion zu umständlich. In der alten Version konnte ich einfach alle zum Artikel hochgeladenen Bilder als Galerie einfügen. Jetzt muß ich erst eine Galerie erstellen.

Ich weiß nicht, wie es Euch geht, mir zumindest hat der alte Medien-Dialog besser gefallen.

Kurz und gut, ich habe mich durch die WordPress-Dateien gewühlt und den alten Upload-Dialog wieder hervor geholt. Es war letztendlich einfacher, als ich dachte. Mit ein paar Zeilen PHP-Code kann man den guten alten Datei-Hochlader wieder ans Licht holen.

Diese paar Zeilen PHP habe ich in ein kleines Plugin verpackt, welches Ihr hier findet:
123 Old Uploader

Nun will ich mal hoffen, daß der Code für den alten Uploader von WordPress nicht entfernt wird, dann sähe es nämlich schlecht aus. Aber solange die Möglichkeit besteht, werde ich den alten Uploader nutzen.

Ein Kommentar »

Die WordPress-Gallery (Galerie) ohne Links, so gehts

Erklärungen überspringen – direkt zur Lösung :-)

Die WordPress-Bildergalerie

Seit WordPress Version 2.5 gibt es eine eingebaute Bilder-Galerie, die mit dem Shortcode [gallery] in einen Beitrag integriert werden kann.

Der ersten Version fehlten ein paar sinnvolle Optionen wie Include und Exclude und auch die Art des Links, mit dem ein Galerie-Bild unterlegt ist, konnte nicht beeinflußt werden. Das Bild verlinkte immer auf die Anhang-Seite.

Da ich aber lieber direkt auf die Bilddatei verlinke, habe ich das Plugin „123 Extended Gallery“ geschrieben, welches die WordPress-eigene Gallery-Funktion ersetzt und erweitert.

Mittlerweile kennt WordPress für die Galerie auch die Parameter exclude und include, um Bilder von der Anzeige auszuschließen oder beliebige Bilder hinzuzzfügen. Mit dem Parameter [gallery link=“file“] kann nun auch auf das Bild direkt verlinkt werden.

Was aber immer noch fehlt ist die Möglichkeit, überhaupt keine Links zu verwenden. Das scheint für den einen oder anderen aber durchaus eine erwünschte Option zu sein.

Mein Plugin hat gewissermaßen ausgedient, denn WordPress kann nun praktisch alles selber, was meine „Extended Gallery“ bisher umgesetzt hat, außer eben keine Links zu verwenden.

Deshalb stelle ich im Folgenden eine eigenständige Lösung dafür vor, die z.B. in die Datei functions.php des Themes intergriert werden kann.

In den Tiefen der WordPress Action- und Filter-Hooks

Erweiterungen und Änderungen für WordPress sollten immer über die definierte Plugin-Schnittstelle erfolgen, direktes Manipulieren der WP-Dateien ist unsauber, fehleranfällig und daher zu vermeiden.

In der Gallery

Die Implementierung der Shortcode-Funktion gallery_shortcode in der Datei media.php hat am Anfang einen Filter-Einstiegspunkt (Hook), mehr aber nicht:

// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
  return $output;

An der Stelle kann man die gesamte Funktion ersetzen, indem man den selbst erzeugten Gallery-HTML-Code zurück gibt. Genau an der Stelle setzt auch mein altes Gallery-Plugin an, aber ich will ja jetzt nur die Links entfernen.

Die Bilder mit den Links werden weiter unten erzeugt:

foreach ( $attachments as $id => $attachment ) {
  $link = ... ? wp_get_attachment_link($id, $size, false, false) ...

Die Funktion wp_get_attachment_link bietet auch einen Filter-Hook, aber ein dort eingehängtes Filter soll ja nur innerhalb der Galerie-Erzeugung aktiv sein.

Nun kann man zwar mit einer Filterfunktion für ‚post_gallery‘ am Anfang eine passende Funktion bei wp_get_attachment_link einklinken, bekommt sie aber am Ende nicht mehr weg. Dann wirkt sie aber auf alle noch folgenden Attachment-Links auch außerhalb der Galerie, was natürlich nicht erwünscht ist.

Wenn man die Anzahl der Bilder kennen würde, könnte man diese in einer globalen Variable vermerken und im eigenen Attachment-Link-Filter runterzählen. Wenn der letzte Link bearbeitet ist, kann man die Filterfunktion wieder ausklinken.

Die anzuzeigenden Bilder werden in der WP-Gallery mit den WordPress-Funktionen get_posts bzw. get_children ermittelt. Diese Funktionen bieten leider keine Filter- oder Action-Hooks. Sie erzeugen ein neues WP_Query-Objekt und holen sich das Ergebnis mit der Objekt-Funktion query ab.

Im WP_Query-Objekt

In der Funktion query gibt es erfreulicherweise mehrere Action- und Filterhooks. Am besten geeignet erscheint der Filteraufruf für ‚the_posts‘ fast am Ende, da hier alle Daten vorliegen und damit die Anzahl der gefundenen Bilder bekannt ist. Leider wird dieser Hook nur bedingt aufgerufen:

if ( !$q['suppress_filters'] )
  $this->posts = apply_filters_ref_array('the_posts', array( $this->posts, &$this ) );

Man ahnt es schon, genau die Variable suppress_filters wird von get_posts und damit auch get_children gesetzt, um die Ausführugn der meisten Filter zu unterdrücken. Das ist auch wichtig und richtig, denn diese Filter sind oft nur in der WordPress-Loop sinnvoll einsetzbar und würden bei der Abfrage einer kompletten Liste der Bilder möglicherweise unerwünschte Ergebnisse liefern.

Und nun? Der Rettungsanker ist der Action-Hook ganz am Anfang der Funktion query:

do_action_ref_array('pre_get_posts', array(&$this));

Meine erste Idee war es nun, die Variable suppress_filters einfach zu löschen, so daß die Filter aufgerufen werden. Das führt aber wie schon gesagt möglicherweise zu unerwarteten Ergbnissen, weil die Filter für die WordPress-Loop gedacht sind. Keine Gute Idee!

Mein nächster Ansatz war nun, daß ich mir zunächst in der Action-Funktion für pre_get_posts das WP_Query-Objekt global speichere um später wieder darauf zugreifen zu können.

Wenn es eine Funktion nach der eigentlichen Abfrage der Datenbank gibt, die ihrerseits einen Filter- oder Action-Hook enthält, könnte ich diese „mißbrauchen“, um über das gespeicherte Objekt schließlich die Anzahl der Bilder zu ermitteln.

Seit WordPress 2.7 gibt es die Sticky-Posts, also Beiträge, die ganz oben auf der Artikelseite fest getackert werden können. Um diese Sticky-Posts vor allen anderen in die Liste einzufügen, wird in der Funktion query die Option ’sticky_posts‘ abgefragt:

$sticky_posts = get_option('sticky_posts');

Die Funktion get_option enthält netterweise ganz am Anfang den Filterhook für ‚pre_option_‘ . $option. Damit kann ich nun meine Abfrage der Anzahl über das zuvor gespeicherte WP_Query-Objekt „triggern“, die Anzahl der Bilder global speichern und letztendlich das eigentliche Filter für wp_get_attachment_link installieren.

Die Filter- und Action-Kette zusammengefaßt

Ist doch eigentlich alles ganz einfach, oder? :-)
Hier nochmal eine kurze, grafische Zusammenfassung aller Schritte:
Gallery-No-Link PAP
Erstellt mit yEd

Nachtrag 13.02.2012: Es geht auch viel einfacher, wie man hier sehen kann: Gallery with No Image Links-Plugin :-)

Die Zip-Datei gallery_no_link.zip runter laden und auf dem heimischen Rechner entpacken.

Download: 123 Gallery No Link

In der enthaltenen Datei plw123_gallery_no_link.php kann eine Option konfiguriert werden.

define( 'PLW123GOL_NO_LINK', false );

Mögliche Werte:
false: die Links werden durch den Link-Parameter ’none‘ im gallery-shorcode unterdrückt:

[gallery link="none"]

true: die Links werden immer in allen Galerien unterdrückt

Das Modul 123 Gallery No Link kann auf drei unterschiedlichen Arten in WordPress installiert werden.

1. in der functions.php des Themes

Dazu ist die Datei plw123_gallery_no_link.php in das WordPress-Theme-Verzeichnis des aktiven Themes zu kopieren und in der functions.php am Ende folgendes einzufügen:

@include( 'plw123_gallery_no_link.php'

2. als Plugin

Dazu ist die Datei plw123_gallery_no_link.php in das WordPress-Plugin-Verzeichnis (/wp-content/plugins/) zu kopieren und im Backend bei den Plugins zu aktivieren.

3. als MU-Plugin (ab WordPress 2.8)

Dazu ist die Datei plw123_gallery_no_link.php in das MU-Plugin-Verzeichnis (/wp-content/mu-plugins/) zu kopieren. Falls dieses Verzeichnis nicht existiert, muß es neu angelegt werden. Eine Aktivierung des Plugins ist nicht erforderlich, PHP-Dateien in diesem speziellen Verzeichnis werden immer geladen.

Keine Kommentare »

WordPress Bilder – welcher Text kommt wo hin

Bilder in WordPress nutzen

Ich benutze für meine Bilder den in Wordpess vorhandenen Dateiupload und auch die integrierte Gallery-Funktion. Zusätzliche Plugins sind dafür bei mir nicht im Einsatz.

Wenn ich in WordPress ein Bild hochlade, bekomme ich gleich vier Felder für Texteingaben angeboten. Doch was kommt in welches Feld und wo wird es später angezeigt?

Wordpress Bilderupload - Texte und Beschriftungen (alt)

Die neue Version des Media-Uploaders sieht etwas anders aus (links). Am konfortabelsten lassen sich die Informationen und Texte zu einem Bild im Editor der Mediathek (rechts) bearbeiten

Titel – Title

Das erste Feld ist selbsterklärend, hier schreibe ich den Titel, die Überschrift für das Bild rein. Der Titel ist mit dem Dateinamen des Bilder vorbelegt und ein Pflichtfeld. Falls vorhanden, wir das Titelfeld mit den passenden EXIF/IPTC-Daten belegt.

Die Daten zu Bildern werden in WordPress genau wie Artikel und Seiten gespeichert. Also entspricht der Titel eines Bilder dem, was ich für einen normalen Beitrag als Titel eingebe.

Wenn ich ein Bild in einen Artikel einfüge, wird der Titel später auf der Seite nicht direkt sichtbar. Er wandert in das title-Attribut des img-Tags und wird vom Browser als Tooltip beim überfahren mit der Maus eingeblendet.

Auf einer Bilder-Einzelseite ist der Titel wie bei Artikeln und Seiten die Überschrift (h2).

Alternativtext – Alternate Text

Die deutsche Übersetzung des zweiten Textfeldes ist seit WP 3.x etwas unglücklich ausgefallen, denn hier kann ich den alternativen Text eintragen. In der aktuellen WP-Version (4.1) ist das richtig mit „Alternativer Text“ bzw. „Alternativtext“ beschriftet. Dieser erscheint dann im alt-Attribut des Image-Tags.

Falls ich „Alternativtext“ leer lasse, wird der Titel-Text als alt-Text übernommen. Der Alt-Text wir immer dann ausgegeben, wenn aus irgend einem Grund keine Bilder angezeigt werden können oder sollen. Außerdem spielt dieser Text eine wichtige Rolle für die Suchmachinen, denn die Suchmaschinenbots können Bildinhalte auch nicht „sehen“.

Beschriftung – Caption

Wordpress Bild - TextIn das dritte Textfeld trage ich eine Bildunterschrift ein. Dieser Bildtext kann eine kurze Beschreibung des Bildinhaltes oder auch ein Hinweis auf den Urheber sein. Falls vorhanden, wir das Beschriftungsfeld mit den passenden EXIF/IPTC-Daten belegt.

Der Text wird je nach verwendetem WordPress-Theme direkt unter dem Bild angezeigt. Deshalb sollte dieser Text auch nicht zu lang sein.

Auch dieser Text ist für Suchmaschinen wichtig, falls er als Bildunterschrift sichtbar ist, da er sich in unmittelbarer Nähe des Bildes befindet.

Beschreibung – Description

Im vierten Feld kann ich eine längere Beschreibung des Bildes eintragen. Dieser Text enspricht dem normalen Inhalt bei Artikeln oder Seiten. Hier kann ich auch HTML-Tags verwenden und Links einfügen.

Der Text wird auf der Bilder-Einzelseite angezeigt. Diese Seite enthält alle vier Text-Elemente, die einem Bild zugeordnet werden können.

Der Titel erscheint als Seitenüberschrift, danach kommt das Bild mit dem Alt-Text gefolgt von der Bildunterschrift. Darunter wird die Beschreibung als Artikeltext ausgegeben.

Ein Bild sagt nicht immer mehr als tausend Worte

Auch wenn es mehr Arbeit bedeutet, ich trage immer sinnvolle Texte in die vier Textfelder ein. Naja, fast immer.

Beim „Alternate Text“ spare ich mir einen extra Eintrag, da dieser dann mit dem Titel-Text identisch ist. Ein guter Titel ist jedoch wichtig. In die Beschriftung kopiere ich meist den Titel rein. Ja, ich bin auch ein bißchen faul. :-)

Die ausführliche Beschreibung fülle ich nur dann aus, wenn ich nicht auf das Bild selbst, sondern die Bildseite verlinke. Das mache ich zunehmend bei der Putzlowitscher Zeitung, hier bei Schnurpsel aber nicht.

Ganz ohne Text geht es nicht. Besonders wenn der Bilddateiname z.B. DSC00547.JPG ist, würd ich immer zumindest einen ordentlichen Titel vergeben. Noch besser ist es, der Datei selbst schon einen schönen Namen zu geben, dann klappts auch mit der Google-Suche.

14 Kommentare »

WordPress 2.5 – Shortcode und die Bildergalerie

Neue Features

In WordPress ab Version 2.5 wurde die Attachment-Verwaltung erheblich erweitert und verbessert. Sie firmiert nun unter dem Schlagwort Mediathek. Eine wesentliche Erleichterung ist meiner Meinung nach die Möglichkeit, mehrere Dateien (z.B. Bilder) auswählen und in einem Rutsch hochladen zu können. Ein weiteres Highlight sind die sogenannten Shortcodes, kleine Textbausteine, die bei der Ausgabe in viele schöne Sachen verwandelt werden können. Die Shortcodes sin aber eher etwas für Plugin-Entwickler, der normale Nutzer hat erstmal nichts davon.
Einen solchen Shortcode liefert WordPress aber bereits mit, es ist eine einfache Bilder-Galerie.

Die Worpress-Bildergalerie

Aus Anwendersicht ist das mit den Shortcodes ganz einfach, man fügt das gewünschte Kürzel, gegebenfalls mit Parametern, einfach in eckigen Klammern an der Stelle im Text ein, wo die Ausgabe erfolgen soll. Für die WP-Bildergalerie sieht das z.B. so aus:

[gallery columns='2']

Bei der Anzeige das Artikels wird dann dieser Shortcode z.B. durch eine Bildergalerie ersetzt:

So könnte es aussehen. Die Ausgabe läßt sich durch ein paar Parameter steuern, so legt der Parameter ‚columns‘ z.B. fest, wieviele Spalten die Galerie verwenden soll (Standardwert ist 3). Im Beispiel habe ich 2 Spalten eingestellt.
Alle Parameter und die Verwendung des Gallery-Shortcodes sind im WP-Codex beschrieben.

Erweiterung – Der Link

Eine wie ich meine wichtige Sache haben die Entwickler aber vergessen. In der Standard-Galerie wird vom Vorschaubild immer auf die Bilderseite (Beispiel Bild 1) verlinkt, nicht auf das Bild selbst. Das ist so im PHP-Quelltext fest „verdrahtet“. Dabei wäre es kein großes Sache gewesen auch dafür einen Parameter vorzusehen. Aber was nicht ist, kann man glücklicherweise mit einem Plugin nachrüsten. So habe ich einfach die originale gallery_shortcode-Funktion genommen und um den Parameter attlink erweitert. Das Plugin selbst und eine Kurze Beschreibung findet man auf meiner Plugin-Seite „123 Extended Gallery„.

Und noch etwas habe ich verändert. Im Originalcode wird der CSS-Teil zur Formatierung der Galerie direkt in den Artikel geschrieben. Das ist alles andere als HTML-konform. So habe ich den CSS-Teil rausgezogen und in den Header verlegt, dahin wo soetwas hingehört. Einziger kleiner Nachteil, die CSS-Sachen werden immer im Header ausgegeben, auch wenn später im Artikel gar keine Galerie vorhanden ist. Aber damit kann ich leben.

Ein Kommentar »