Ajax im Dashboard

WordPress bietet wirklich viele Möglichkeiten die Themes anzupassen und um Funktionen mittels Plugins zu erweitern. Im Admin Menü ist jedoch fast alles statisch und bei den grundlegenden Funktionen ist es oftmals schwer und fast unmöglich Anpassungen vorzunehmen.

[ad#co-1]

Dieser Artikel soll vorallen als Denkanstoß für die Erstellung von Adminplugins oder internen Erweiterungen der Funktionalität dienen.
In meinem Beispiel Plugin werde ich eine Ajaxfunktion erstellen mit der man innerhalb des Artikel Titels nach bisherigen Artikeln suchen kann. Gerade bei vielen Artikeln, Artikelserien oder mehreren Autoren kann diese Funktion äußerst hilfreich sein um keine doppelten oder ähnliches Posts zu erzeugen.

Sicherlich haben sich schon viele eine Live Suche im Dashboard von WordPress gewünscht, das hier vorgestellt sollte jedoch nur als Grundlage für ein solches Plugin gesehen werden.
Einen guten Einstieg um AJAX in Plugins nutzen zu können findet man im WordPress Codex.
Nun benötigen wir nur noch ein einfaches Javascript, dass eine Live Suche ermöglicht. Bei meiner Recherche habe ich das jQuery Live Search Plugin von Andreas Lagerkvist gefunden. Dieses Plugin kann eine URL mit einem Query aus jedem beliebigen Inputfeld aufrufen und stellt das Ergebnis dar.

Unser Plugin wp_admin_ajax besteht im groben aus der Klasse WPAdminAjax und den Funktionen ajax_post_search, post_search_callback und ajax_post_search_footer.

<?
/**
Plugin Name: WordPress Admin Ajax
Plugin URI: http://gefruckelt.de/
Version: 1.0
Description: Ajax Suche in der Titel Zeile
Author: Jens Altmann
Author URI: http://gefruckelt.de
*/
if ( !defined( ‚WP_ADMIN_URL‘ ) )
define( ‚WP_ADMIN_URL‘, get_option( ’siteurl‘ ) . ‚/wp-admin‘ );
if ( !defined( ‚WP_CONTENT_URL‘ ) )
define( ‚WP_CONTENT_URL‘, get_option( ’siteurl‘ ) . ‚/wp-content‘ );
if ( !defined( ‚WP_PLUGIN_URL‘ ) )
define( ‚WP_PLUGIN_URL‘, WP_CONTENT_URL. ‚/plugins‘ );
if ( !defined( ‚WP_CONTENT_DIR‘ ) )
define( ‚WP_CONTENT_DIR‘, ABSPATH . ‚wp-content‘ );
if ( !defined( ‚WP_PLUGIN_DIR‘ ) )
define( ‚WP_PLUGIN_DIR‘, WP_CONTENT_DIR . ‚/plugins‘ );
define( ‚WP_ADMIN_AJAX_URL‘, WP_PLUGIN_URL.‚/wp_admin_ajax‘ );
define( ‚WP_ADMIN_AJAX_PATH‘, WP_PLUGIN_DIR.‚/wp_admin_ajax‘ );
define( ‚WP_ADMIN_AJAX_PLUGIN_PATH‘, WP_ADMIN_AJAX_PATH.‚/plugins‘ );
if (!class_exists("WPAdminAjax"))
{
class WPAdminAjax
{
function WPAdminAjax()
{
$this->addActions();
}
function addActions()
{
add_action(‚admin_head‘, array($this, ‚ajax_post_search‘));
add_action(‚wp_ajax_post_search‘, array($this, ‚post_search_callback‘));
add_action(‚admin_footer‘, array($this, ‚ajax_post_search_footer‘));
}
function ajax_post_search_footer()
{
echo ‚<script type="text/javascript">jQuery(\‘input[name="post_title"]\‘).liveSearch({url: \‘‚.WP_ADMIN_URL.‚/admin-ajax.php?action=post_search&query=\‘});</script>‘;
}
function ajax_post_search()
{
echo ‚<script type="text/javascript" src="‘.WP_ADMIN_AJAX_URL.‚/jquery.liveSearch.js‘.‚"></script>‘;
echo ‚<link rel="stylesheet" href="‘.WP_ADMIN_AJAX_URL.‚/jquery.liveSearch.css‘.‚" type="text/css" />‘;
}
function post_search_callback()
{
global $wpdb; // this is how you get access to the database
$query = $_GET[‚query‘];
$posts = get_posts(array(‚post_type‘ => ‚post‘, ’numberposts‘ => 1000, ‚post_status‘ => ‚publish, pending, draft, future‘, ‚orderby‘ => ‚post_title‘));
$cnt = count($posts);
echo ‚<ul>‘;
for ($i = 0 ; $i < $cnt ; $i++)
{
if (stripos($posts[$i]->post_title, $query) === FALSE)
continue;
echo ‚<li>‘;
echo ‚<a href="‘.WP_ADMIN_URL.‚/post.php?post=‘.$posts[$i]->ID.‚&action=edit">‘.$posts[$i]->post_title.‚</a>‘;
echo ‚</li>‘;
}
echo ‚</ul>‘;
die(); // this is required to return a proper result
}
}
}
$wp_admin_ajax = NULL;
if (class_exists("WPAdminAjax"))
{
$wp_admin_ajax = new WPAdminAjax();
}
?>

In der Funktion ajax_post_search wird der Head Bereich im Dashboard durch die Javascript und CSS Klasse des jQuery Live Search Plugins erweitert.
In der post_search_callback erstellen wir eine Callback Funktion, die mit dem Aufruf der admin-ajax.php durch das AJAX Script ausgeführt wird. Diese lädt einfach 1000 Artikel vom Typ ‚post‘ und prüft danach ob der Query im Titel der einzelnen Artikel enthalten ist. Falls dies der Fall ist werden die entsprechenden Artikel in einer Liste aufgenommen und entsprechend verlinkt. Ich weise an dieser Stelle nochmal darauf hin, dass die Logik inperformant ist!
Die ajax_post_search_footer sorgt dafür, dass das Eingabefeld um die AJAX Funktionalität erweitert wird. Wird müssen dem Plugin lediglich die URL der Suchseite mitgeben.

Um das Script selbst zu testen müsst ihr einen Ordner namens wp_admin_ajax erstellen, den oben stehenden Code als wp_admin_ajax.php speichern und die Dateien des jQuery Plugins in den Ordner kopieren. Nun könnt ihr den Ordner in euer WordPress Plugin Verzeichnis hochladen und aktivieren.

Und so sieht das Ergebnis aus :

wp_admin_ajax Vorschau

Jens Altmann

Jens Altmann bloggt auf gefruckelt.de regelmäßig über alle Themen, die ihn interessieren. Neben seiner Tätigkeit als Softwarearchitekt studiert er Wirtschaftsinformatik an der Uni Potsdam.

Weitere Informationen über Jens Altmann