WordPressダッシュボードのサイドバーにjquery-nicescrollを適用する

harada 37views 更新:2016年5月9日

jquery-nicescrollの基本的な利用方法は以前の記事を参考にしてください。
http://hacknote.jp/archives/3015/

1. functions.phpなどでjquery.nicescroll.min.jsを読み込む。

テーマディレクトリ以下で読み込んだ場合。

$dir = get_stylesheet_directory_uri();
wp_enqueue_script('nicescroll', $dir . '/common/js/jquery.nicescroll.min.js', array('jquery'));

2. 指定要素(サイドブロックの#adminmenuwrap)にjquery-nicescrollを適用。

$("#adminmenuwrap").niceScroll({
        cursorcolor:"#ccc", //スクロールバーの色を変更
        horizrailenabled:false //横スクロールを無効
});

3. CSSを調整。

#wpwrap {
  overflow-y: hidden;
}
#adminmenuwrap {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません