WordPress: Eigene Cursor im Blog verwenden

Mittels CSS hat man die Möglichkeit den Mauscursor auf einer Seite anzupassen. Nicht nur das man definieren kann, ob über einem Button die Hand erscheinen und somit auf ein anklickbares Element hinweisen soll, sondern auch komplett eigene Cursorthemes.

Natürlich funktioniert dies auch unter WordPress und damit man nicht direkt in das CSS des Themes oder ein anderes CSS von WordPress eingreifen muss, erstellt man dafür ein kleines Plugin. Dies geht in diesem Fall wirklich einfacher als es klingen mag.

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://blog.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ß

Über H.-Peter Pfeufer

Ich bin Webentwickler/ -programmierer aus Leidenschaft, WordPressbegeistert und ab und an auch mal ein netter Mensch.
Vor allen schreibe ich über alles was mit den Themen Webentwicklung/ -programmierung und WordPress zu tun hat. Nebenher auch mal einige Gedanken zu allgemeineren Themen.

Zeige alle Beiträge von H.-Peter Pfeufer →

7 Antworten auf WordPress: Eigene Cursor im Blog verwenden

Bheim sagt:
26. Dezember 2010 um 21:48
Ich hätte eine kleine Frage (bin absoluter CSS Anfänger ^^). Welchen Code müsste man einfügen, damit man einen “move” Cursor zu erhalten ?
Antworten
Bheim sagt:
26. Dezember 2010 um 21:49
erhält meinte ich naturlich ^^
Antworten
H.-Peter Pfeufer sagt:
26. Dezember 2010 um 21:53
Du hast Dir diese Frage schon selbst beantwortet.
1
cursor: move;
Ansonsten hilft auch etwas Google mit dem Suchbegriff “css cursor“. Hier der erste Treffer -> CSS4you
Grüße
Antworten
bheim sagt:
10. Januar 2011 um 09:29
Ich habs nach 30 Sekunden selbst gemerkt , trotzdem Danke…
Antworten
Whity sagt:
23. Dezember 2011 um 05:15
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 ??
Antworten
- H.-Peter Pfeufer sagt:
  23. Dezember 2011 um 08:16
  Was ist Artisteer?
  Egal, worauf man natürlich hier achten muss ist, dass sich die Deklarationen nicht gegenseitig überschreiben im CSS. Womit ein Theme “gemacht” ist, spielt dabei keine Rolle, so lange man ein sauberes CSS hat.
  Antworten
Alexandra sagt:
11. März 2012 um 22:25
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?
Antworten