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ß
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 ?
erhält meinte ich naturlich ^^
Du hast Dir diese Frage schon selbst beantwortet.
Ansonsten hilft auch etwas Google mit dem Suchbegriff “css cursor“. Hier der erste Treffer -> CSS4you
Grüße
Ich habs nach 30 Sekunden selbst gemerkt
, trotzdem Danke…
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 ??
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.