Leider habe ich kein wirklich funktionierendes WordPress-Plugin gefunden, mit dem ich für ein Kundenprojekt die Scrollleisten dem vorhandenem Design anpassen konnte (ja, ich weiß: Scrollbalken gehören zum Browser-Design und sollten aus Usability-Gründen nicht angepasst werden, allerdings passen diese oft nicht zum CD des Kunden und sind meist ziemlich häßlich)

Hier also meine Anleitung um das Plugin „jQuery custom content scroller“ von http://manos.malihu.gr/ auch mit WordPress benutzen zu können:

Plugin Scrollbalken für WordPress

1. Dateien downloaden, entpacken und per FTP in die eigene WordPress-Installation schieben

  • Dateien jquery.mCustomScrollbar.concat.min.js und jquery.mCustomScrollbar.js  in den Ordner js Eures Themes (www.deinblog.de/wp-content/themes/deintheme/js)
  • Datei jquery.mCustomScrollbar.css  in den Ordner css Eures Themes (www.deinblog.de/wp-content/themes/deintheme/css)
  • Bild mCSB_buttons.png in den Ordner images Eures Themes (www.deinblog.de/wp-content/themes/deintheme/images)

Falls es diese Ordner noch nicht gibt, müsst Ihr sie anlegen.

2. In der functions.php (www.deinblog.de/wp-content/themes/deintheme/functions.php) Eures Themes ganz unten folgenden Code reinschreiben, um die Dateien korrekt aufzurufen

add_action( 'wp_print_scripts', 'add_my_scripts', 100 );
function add_my_scripts() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' ), false, null, true );
wp_enqueue_script( 'jquery' );
wp_register_script( 'eigenes-script', 'http://www.deinblog.de/wp-content/themes/deintheme/js/eigene-scrollbar.js');
wp_enqueue_script( 'eigenes-script' );
wp_register_script( 'own-scrollbar', 'http://www.deinblog.de/wp-content/themes/deintheme/js/jquery.mCustomScrollbar.concat.min.js');
wp_enqueue_script( 'own-scrollbar' );

} }
add_action('init', 'add_my_scripts');

add_action('wp_print_styles', 'add_my_styles', 100);
function add_my_styles() {
wp_register_style( 'eigene-css', 'http://www.deinblog.de/wp-content/themes/deintheme/css/jquery.mCustomScrollbar.css');
wp_enqueue_style( 'eigene-css' );
}
add_action('init', 'add_my_styles');

Jetzt Domain und Themename (rot) ersetzen, damit die Pfade korrekt sind.  Abspeichern und die functions.php per FTP überschreiben (vorher bitte eine Sicherungskopie erstellen!)

3. Jetzt müsst Ihr noch eine eigene kleine Javascript-Datei schreiben, mit der Ihr die Funktion aufruft und sagt welcher Container eine individuelle Scrollbar haben soll.

Texteditor, Dreamweaver, o.ä öffnen und den folgenden Code reinschreiben. In unserem Beispiel möchten wir, dass alle HTML-Elemente, die die Klasse .site-content article (rot)besitzen, mit einer individuellen Scrollbar versehen werden. Ihr müsst dies natürlich durch Eure eigenen vorhandenen Klassen ersetzen.

(function($){
    $(document).ready(function(){
      $(".site-content article").mCustomScrollbar();
    });
  })(jQuery);

Jetzt diese Datei als eigene-scrollbar.js abspeichern und per FTP in den Ordner js Eures Themes hochladen (www.deinblog.de/wp-content/themes/deintheme/js)

WICHTIG: Der Container, der gescrollt werden soll, muss die CSS-Eigenschaft overflow: auto; besitzen und der Inhalt muss natürlich größer sein als der Container selbst. Wenn Ihr wollt, könnt Ihr nun mit der hochgeladenen CSS Eure Scrollbalken noch weiter individuell anpassen. Mehr Anpassungsmöglichkeiten findet Ihr auf der Seite des Entwicklers: http://manos.malihu.gr/jquery-custom-content-scroller/

Getestet mit WordPress 3.5.1–de_DE