Ziel ist es, Inhalte gleichen Typs, die in zahlreichen WordPress-Posts verstreut sind, auf einer Übersichtsseite zusammenzufassen. Folgende Typen sind z.B. denkbar:
Die Übersichtsseite soll sozusagen als Bild-, Tabellen-, oder Inhaltsverzeichnis dienen. In meinem Blog "Blaustern Fotografie" gibt es z.B. eine Bildzusammenfassung (siehe Abbildung unten).
Es wird ein Plugin benötigt, welches automatisch den HTML-Code aller Posts durchsucht und die HTML-Elemente des gewünschten Typs zusammenfasst. Der Anwendungsfall soll wie folgt aussehen:
Das Plugin, welches ich zu diesem Zweck entwickle, nenne ich 'specific_directory'. Zuerst lege ich einen neuen Ordner mit diesem Namen an. In dem Ordner erstelle ich eine neue php-Datei ‘specific_directory.php’. Für den Aufbau dieser Datei gibt es einige Konventionen, auf die ich nicht näher eingehen werde (es geht u.a. um Lizenzinformationen und Namenskonventionen). Wenn Sie aber vorhaben, ein Plugin zu veröffentlichen, beachten Sie bitte die Hinweise im WordPress Codex.
Im Folgenden beschreibe ich die Entwicklung des Plugins am Beispiel eines Bildverzeichnisses.
Im Admin-Bereich befinden sich über dem Editor die sogenannten "Media-Buttons" (z.B. der Button "Add Media"). WordPress stellt die Aktion 'media_buttons' bereit. Für sie lässt sich eine Funktion registrieren, die einen oder mehrere "Media-Buttons" hinzufügt. In der PHP-Datei füge ich folgenden Code ein:
add_action('media_buttons', 'specific_directory_image_button');
function specific_directory_image_button() {
echo '<a class="button" id="specific_directory_images_button"
title="Insert image directory">Insert image directory</a>';
}
Die ID und die Beschriftung (title) sollten Sie an Ihren Anwendungsfall anpassen.
Als nächstes muss definiert werden, was beim Anklicken des Buttons mit der ID 'specific_directory_images_button' passiert. Das Anklicken geschieht auf Clientseite im Browser des Benutzers, daher muss die Ereignisbehandlung im Javascript-Code erfolgen. Ich lege eine neue Javascript-Datei mit dem Namen 'specific_directory.js' an. Der folgende Javascript-Code basiert auf der jQuery-API.
jQuery(document).ready(function() {
$('#specific_directory_images_button').click(function(){
var data = {
'action': 'specific_directory_getimages'
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
tinymce.execCommand('mceInsertContent', false, response);
});
});
});
Beim Klick auf den Button wird ein Ajax-Post-Request ausgelöst. Die Adresse, an die der Request geschickt wird, ist in der Eigenschaft 'ajax_url' im Objekt 'ajax_object' abgespeichert. Die Initialisierung des Objekts mit den richtigen Werten wird vom PHP-Code aus gesteuert, den ich weiter unten gleich zeigen werde. Als Post-Parameter wird der Aktionsname 'specific_directory_getimages' mitgeschickt. Dieser Aktion wird im PHP-Code die Funktion zur Erstellung des Verzeichnisses zugeordnet (siehe Abschnitt 2).
Zu beachten ist auch der dritte Parameter der post-Funktion: Es wird eine Funktion angegeben, die bei erfolgreichem Abschluss des Requests ausgeführt werden soll. Der Parameter 'response' dieser Funktion ist die Antwort des Servers, d.h. in meinem Fall der generierte HTML-Code des Verzeichnisses.
Der WordPress-Editor ist ein tinyMCE-Editor. Seine Javascript-Bibliothek stellt ein Kommando 'mceInsertContent' bereit, um automatisch Inhalt in den Editor einzufügen. Im Codeabschnitt oben wird gezeigt, wie die 'response' in den Editor eingefügt wird.
Zurück zur PHP-Datei. Damit beim Laden der Admin-Seite meine Javascript-Datei überhaupt an den Client ausgeliefert wird, muss das Skript registriert werden. Dies geschieht über die Aktion 'admin_enqueue_scripts':
add_action('admin_enqueue_scripts', 'specific_directory_add_script' );
function specific_directory_add_script(){
wp_enqueue_script( 'specific_directory_js', plugin_dir_url( __FILE__ ) .
'specific_directory.js', array('jquery'));
wp_localize_script( 'specific_directory_js', 'ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' )) );
}
Für das Skript vergebe ich den Titel 'specific_directory_js'. Es ist zu beachten, dass als dritter Parameter von 'wp_enqueue_script' die Bibliothek 'jquery' angegeben wird. Damit wird definiert, dass mein Skript von jQuery abhängig ist. Demzufolge muss das jQuery-Skript von WordPress an den Browser ausgeliefert werden, bevor mein Skript ausgeführt wird.
Mit Hilfe der Funktion 'wp_localize_script' erstelle ich ein Javascript-Objekt mit dem Namen 'ajax_object' und einer Eigenschaft 'ajax_url'. Deren Wert setze ich auf den Pfad zum zentralen Ajax-Verteiler 'admin-ajax.php', der über die WordPress-Funktion 'admin_url' ermittelt werden kann.
Grundsätzlich werden alle Ajax-Requests, die aus dem Admin-Bereich stammen, an 'admin-ajax.php' geschickt. Wenn ich also per Javascript einen benutzerdefinierten Ajax-Request abschicken möchte, muss ich die URL dieser Datei kennen. Ich hätte auch auf den Aufruf von 'wp_localize_script' verzichten und stattdessen die Initialisierung des Javascript-Objekts direkt in der Javascript-Datei vornehmen können. Die URL zur admin-ajax.php hätte ich dann allerdings herausfinden und statisch eintragen müssen. Die oben gezeigte Variante ist im Vergleich dazu flexibler, da sie auch bei einer Änderung der URL gültig bleibt.
Weiter oben habe ich bereits erwähnt, dass ich 'specific_directory_getimages' als Aktionsname für meinen Ajax-Request gewählt habe. Um diese Aktion in WordPress zu registrieren, rufe ich im PHP-Code einfach die Funktion 'add_action' auf und gebe als ersten Parameter den Aktionsnamen mit dem Präfix 'wp_ajax' und als zweiten Parameter den Namen der zugeordneten PHP-Funktion an. WordPress kümmert sich darum, dass ein Ajax-Request mit meinem Aktionsnamen an die angegebene PHP-Funktion weitergeleitet wird.
add_action('wp_ajax_specific_directory_getimages', 'specific_directory_getimages_callback' );
An dieser Stelle zeige ich die PHP-Funktion zur Erstellung des Verzeichnisses. Diese Funktion müssen Sie für Ihren eigenen Anwendungsfall anpassen. In meinem Fall enthält der Algorithmus im Wesentlichen die folgenden Schritte:
function specific_directory_getimages_callback() {
$posts = get_posts(array('posts_per_page' => -1));
echo '<div class="my_images_gallery">';
foreach($posts as $post)
{
$doc = new DOMDocument();
$doc->loadHTML($post->post_content);
$tags = $doc->getElementsByTagName('img');
foreach($tags as $tag){
if($tag->hasAttribute("id")){
$id_val = $tag->getAttribute("id");
$path = pathinfo(parse_url($tag->getAttribute("src"))['path']);
$src_val0 = $path['dirname'] . '/';
$src_val1 = $path['filename'];
$src_val2 = strtolower($path['extension']);
?>
<a href=' <?php echo get_permalink($post).'#'.$id_val ?> '>
<img src='<?php echo $src_val0 . $src_val1 . '-300x200.' . $src_val2 ?> '>
</a>
<?php
}
}
wp_cache_delete( $post->ID, 'posts' );
wp_cache_delete( $post->ID, 'post_meta' );
}
echo '</div>';
wp_die();
}
Die zur Darstellung der Bilder benötigten CSS-Angaben habe ich in der Datei styles.css meines Themes hinterlegt. Ein besserer Stil wäre es sicherlich, im Plugin-Ordner eine separate CSS-Datei mit den benötigten Angaben zu hinterlegen und diese über die Aktion 'wp_enqueue_scripts' im PHP-Code zu registrieren. Ein Beispiel dafür finden Sie bei MasterBlogster.
Der Plugin-Ordner, der die PHP- und Javascript-Dateien enthält, muss nun in eine zip-Datei verpackt werden. Diese zip-Datei lässt sich bei WordPress im Plugins-Bereich hochladen und aktivieren.
WordPress Codex "Ajax in Plugins" --> Anleitung zum Einsatz von Ajax bei der Plugin-Entwicklung
Den ersten Teil dieses Beitrages habe ich bereits 2016 geschrieben. Damals hatte ich ein kleines Wordpress-Plugin entwickelt, mit dem ich ausführbare Javascript-Codeboxen in meine Wordpress-Seiten einbinden kann. Die Codeboxen hatte ich als einfache Textareas umgesetzt. Vor kurzem wollte ich die Textareas etwas komfortabler gestalten, nämlich mit Syntaxhighlighting, Zeilennummerierung und automa...
An der Hochschule Zittau/Görlitz führen wir am Fachbereich Informatik in regelmäßigen Abständen auch Weiterbildungen für Erwachsene durch, z.B. in den Bereichen der Programmierung oder Webentwicklung. Die Weiterbildungen finden jeweils an einem einzigen Tag s...
Mit Animationen in Javascript Canvas habe ich mich in den letzten Monaten schon mehrfach beschäftigt. Erst vor Kurzem bin ich dabei auf den Bereich der "Transformationen" in der Canvas-Bibliothek aufmerksam geworden. Dazu gehören u.a. die Funktionen save()rest...
Programmieren macht mir Spaß, weil ich damit den Computer dazu bringen kann, interessante Probleme zu lösen. Besonders spannend sind Probleme, die sich nicht einfach durch eine mathematische Gleichung lösen lassen. Stattdessen muss der Computer in mehreren Schri...