Dafür erstellt man im Pluginverzeichnis folgende Struktur. Zur Erklärung und dem Inhalt komme ich später.

1
2
3
4
5
6
7
8
9
10
css-cursor
│   css-cursor.php

├───css
│   css-cursor-for-wordpress.css

└───img
    arrow.cur
    link.cur
    text.cur

Wie hier schon zu sehen ist, benötigt man wirklich nicht viel. Eine PHP-Datei, welche das Plugin und auch das CSS in WordPress einbindet und die Cursordateien. Letztere sollten im .cur-Format vorliegen, da dieses von fast allen Browsers unterstützt wird.

Inhalt der css-cursor.php:

Hier wird wirklich nur das Plugin in WordPress bekannt gemacht und das CSS eingebunden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/*
Plugin Name: CSS-Cursor for Wordpress
Plugin URI: http://ppfeufer.de/wordpress-eigene-cursor-im-blog-verwenden/
Description: Cursors für Wordpress.
Version: 1.0.0
Author: H.-Peter Pfeufer
Author URI: http://ppfeufer.de
License: Free
*/


define('CSSCURSOR_VERSION', '1.0.0');

$images_url = plugins_url(basename(dirname(__FILE__)) . '/img/');
$css_url = plugins_url(basename(dirname(__FILE__)) . '/css/css-cursor-for-wordpress.css');

/**
 * CSS in Wordpress einbinden
 */

wp_register_style('css-cursor-for-wordpress', $css_url, array(), CSSCURSOR_VERSION, 'screen');
wp_enqueue_style('css-cursor-for-wordpress');
?>

Inhalt der css-cursor-for-wordpress.css:

In diesem CSS werden die Cursor definiert.

1
2
3
4
5
6
7
8
9
10
11
html, body,input[type="checkbox"], input[type="radio"], select, option {
    cursor: url(../img/arrow.cur), default;
}

input[type="text"], textarea {
    cursor: url(../img/text.cur), text;
}

a, .button, .button-secondary, .submit input, input[type="button"], input[type="submit"] {
    cursor: url(../img/link.cur), pointer;
}

Die Cursordateien:

Für den Cursor sucht euch einfach aus dem Netz die für euch passenden Daten heraus. Google hilft da etwas, ansonsten auch DeviantArt.

Das war es auch schon. Das Ganze wird in eingangs genannter Struktur gespeichert und in der WordPressinstallation im Pluginverzeichnis abgelegt. Nun muss man das Plugin nur noch im Backend aktivieren.

Viel Spaß

7 Meinungen zu “WordPress: Eigene Cursor im Blog verwenden

  1. Erstmal vielen dank für deine Erklärung, wie ich das mit den eigenen Cursorn auf einer Website machen muss, aber leider habe ich festgestellt, das es leider nicht ganz so wie gewollt funktioniert.

    Denn leider wird bei mir nur der Pointer-Cursor auf der Website angezeigt und das leider auch nicht überall, kann das daran liegen das das Theme mit Artisteer erzeugt wurde ??

  2. Hallo, habe Dein PlugIn ausprobiert, klappt super!
    Wobei ich es anschließend doch über das CSS-File des Themes gelöst habe – ich brauche nämlich für einen ganz speziellen Link einen besonderen Cursor und bin mir noch nicht ganz sicher, wie ich das am Besten anstelle. Einfach cursor: url(‚dateiname.cur‘), pointer; mit in die Klasse .logo schmeißen klappt nicht und ich hab mir die Finger wund gesucht – hab nicht viel darüber gefunden, wie man verschiedene selbstgemachte Cursor Stadien jeweils einbindet und in der „Beschreibung“ einer Klasse noch einen Cursor angibt.

    Auf jeden Fall hatte ich erst bei näherem Anschauen Deiner CSS den „Klick“ Effekt und wusste, wie ich es zu regeln habe! Danke dafür!

    Zu meinem Problem: Hast Du vielleicht einen Tipp?

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>