とあるプログラマーの覚書

WordPress編:長いページで下にスクロールしても、サイドバーが見切れずに固定で表示させたい

今回もWordPressに関するトピックになります。

今回実現したいと思った事は、記事タイトルにある通りです。
サイドバーというのは、そのブログのカテゴリーの一覧だったり、広告だったりを表示させるスペースとして利用しますよね。
ブログ記事が長い場合、記事を読み進める為に画面を下にスクロールしていくと、サイドバーが途中で終わってしまって、サイドバー部が余白になってしまいます。

実現したいのは、一例ですが、以下のサイトのような感じ。
COOKPAD
ハム速
例えばクックパッドなら、ページを下にスクロールさせても、右サイドバー部が固定されてます。
ハム速は、いわゆる2chまとめサイトで、コンテンツがとても長いです。ず~っと下にスクロールさせていくと、左右のサイドバーの最後に位置するAdsense広告が表示されたままの状態となります。

実現に向けて、ネットで情報を収集していると、こういうサイドメニューは、「エレベーターメニュー」とか「フローティングメニュー」とか呼ばれるみたいです。

WordPressのサイドバーで、上のサイトと同じような事を実現する方法をネットで調べてみたのですが、一般的な技術情報はありましたが、「WordPressで」という条件でのピンポイントの情報がありませんでした。

いくつかのサイトの情報から、「jQuery」で実現可能との事で、色々と試行錯誤してみました。
意外に苦戦しましたが、とりあえず実現させる事が出来たので、その方法を記載したいと思います。


1.スクロールイベントの実装

まず、画面がスクロールされたときに処理される関数を実装します。
お使いのテーマによるかもしれませんが、ブログ全ページの共通ヘッダ部となる「header.php」を編集します。
WordPressの管理画面から、メニューの「外観」⇒「テーマ編集」を選択し、画面右側のファイルの一覧から「ヘッダー」リンクをクリックすると、編集が出来ます。
使っているテーマによるかと思いますが、ヘッダーのPHPには以下のコードが記述されていると思います。


<?php wp_head(); ?>


これから追加する関数は、上のコードより下部に記述します。(上に記述しても動作するかもしれませんが、jQueryライブラリのインポートの記述は、上記のコードで出力されるので。)

で、実際に記述するコードは以下のような感じです。


<script type=’text/javascript’>
 jQuery(document).ready(function(){
 var o = jQuery(“#sidemenubar”);
 var offset = o.offset();
 var topPadding = 30;

 jQuery(window).scroll(function() {
  if (jQuery(window).scrollTop() > offset.top) {
    o.stop().animate({
      marginTop: jQuery(window).scrollTop() – offset.top + topPadding
    });
  } else {
    o.stop().animate({
      marginTop: 0
    });
  };
 });
});
</script>


上記のコードは、下記サイトの情報を参考にしました。
スクロールについてくるフローティングメニュー
上のサイトのコードをほぼそのまま利用していますが、ちょっとだけ改変しています。
WordPress編:jQueryの$関数を使ったときの「オブジェクトを指定してください」エラーの対策
自分のブログの記事ですが、WordPressだと、jQueryの「$」が使えない事があるみたいなので、「$」の記述を「jQuery」に書き換えてます。
あと、このスクリプトは、ページが読み込まれたら実行開始させたい関数なので、
「jQuery(document).ready(function(){」で括ってます。

ちなみに、サンプルコード内の以下の部分ですが、
var o = jQuery(“#sidemenubar”);
「#sidemenubar」の名前は、適宜変えて下さい。この名前は、スクロール時に固定させたい要素(divタグのid属性)を指定します。


2.サイドメニューの設定

次は、サイドメニューの設定です。
WordPressのサイドメニューは、管理画面から「外観」⇒「ウィジェット」で設定します。
スクロール時に固定させたいウィジェットは、Wordpress標準のウィジェット「テキスト」を使いました。
固定したいウィジェットを、サイドバーの一番下に配置して、テキストの内容は以下のような感じにします。


<div id=”sidemenubar”>
 ~スクロールさせたい内容(テキスト、HTMLタグ等)~
</div>


もし複数のウィジェットや、テキスト以外のウィジェットを固定したい場合は、そのウィジェットの前後に、テキストのウィジェットを配置して、上側のテキストウィジェットにはdivの開始タグを、下側のテキストウィジェットにdivタグの閉じタグを入れてやればOKです。(※使っているテーマによっては、上手く動作しない可能性はあると思います。)

以上で設定完了です。

ちなみに、この記事のやり方だと、スクロールさせた後、サイドバーの部分がスライドして移動するような感じになります。(このブログのサイドバーのような感じです。)
クックパッドやハム速の場合は、スクロールさせてもサイドバーの部分が完全に固定されてピクリとも動かないような状態となっています。
本当は、これらのサイトのようにしたかったんですが…。
CSSを上手く使ってやれば実現できそうなのですが、このブログの場合は、どうも他の要素のスタイル定義との兼ね合いで簡単にはいかなかったので、とりあえずはこのままにしておこうかなと思います。

今回は以上です。


スポンサーリンク

URL :
TRACKBACK URL :

Comments & Trackbacks

  • Comments ( 2 )
  • Trackbacks ( 0 )
  1. 記事を読ませて頂き、素人ですがトライしてみましたがスクロールしてくれませんでした。。

    どこかから特別なjsファイルを保存するとかありますか?
    よろしくお願いします。

    • コメント有難う御座います。
      特に特別な事をした記憶は無いですねぇ。
      なぜスクロールされないのか?という問題点をもう少しはっきりとさせた方がよいと思います。
      例えば、javascriptのalert()とか仕込んで、走らせたい処理のところがコールされているか見てみるとか、他のブラウザで試してみるとか。

Leave a Reply

*
*
* (公開されません)

*

Return Top