最近良く見かける、スクロールするとサイドバーがついて来る「追尾機能」を付けるプラグイン。Yahoo知恵袋なんかも追尾形式のサイドバーです。
メインコンテンツが長く、サイドバーが短いと横の空間がぽっかり間延びしてしまいますが、コンテンツの長さに合わせてサイドバーが動いてくれますので、ギュッと引き締まった感が出せます。
記事を読み終えたユーザの目の止まる位置にサイドバーが表示されるので、そこからサイドバーのコンテンツをクリックしてくれる可能性が上がります。
ただし、ユーザにとってはしつこく感じるので必ずしも良い印象を与えるとは限りません。また、広告などはASPによって規約上禁止されているところもありますので注意する必要があります。
特長
- デフォルトで日本語化
- 第二サイドバーも設定可能
- 追尾機能に加え、サイドバーの開閉機能も付いている
この追尾プラグインはテーマによってはうまく機能してくれないことが多く、どれを使うかというのも、自分の使っているテーマとの相性で決めたほうが良いかもしれません。
もしこの「Standard Widget Extensions」が上手く動作するのなら、日本語化されているということもありお勧めです。
第二サイドバーや開閉機能は必要な人もいるかもしれませんが、まぁおまけです。基本は追尾機能が目的であり、その機能自体は他のプラグインでも同じです。
インストールと使い方
WordPressの管理画面から、「プラグイン」＞「新規追加」＞「検索」で【Standard Widget Extensions】を検索してプラグインをインストールします。
管理画面＞「設定」に「Standard WE」の項目が追加されていますので、そこから設定が行えます。
基本設定
デフォルトでは詳細設定できる箇所が隠れているので、「詳細を表示する」をクリックすると出てきます。
機能は「Sticky Sidebar（追尾）」と「Accordion Widgets （開閉）」の2つに分かれています。
| 項目 | 説明 |
|---|---|
| メインカラムのID | メインカラムのCSSiDを入力 |
| サイドバーのID | サイドバーのCSSiDを入力 |
| ウィジェットのクラス名 | ウィジェットのCSSクラス名を入力 |
Sticky Sidebarを使うのに、最初に画面上部の「メインカラムの ID」「サイドバーの ID」「ウィジェットのクラス名」を指定します。
「Twenty Eleven」や「Twenty Twelve」の場合はデフォルトで値が入っています。「Twenty Thirteen」「Twenty Fourteen」の場合も作者公式のページに記載されています。
Standard Widget Extensions の WordPress デフォルトテーマ用設定
他の設定方法なども全てここを見れば書いてあるんですが…
「Standard Widget Extensions」では「メインカラムのID」と「サイドバーの ID」2つの要素の高さとマージンを用いて計算しているそうです。ここは、各テーマごとに設定が異なります。
Twenty Twelveの場合
メインカラムのID
<div id="main" class="wrapper"> <div id="primary" class="site-content"> <div id="content" role="main">
コンテンツのメインカラムのIDは「primary」を使用。
サイドバーの ID
<div id="secondary" class="widget-area" role="complementary">
サイドバーのIDは「secondary」を使用。
Accordion Widgetsの設定
| 項目 | 説明 |
|---|---|
| Accordion Widgets 機能を有効にする | 開閉機能の有効化 |
| 見出しのアイコン | サイドバー見出しのアイコンを設定可能 |
| デフォルトCSSを生成する | 自動生成されるCSSの使用を選択 |
| 同時に一つのウィジェットだけ伸ばす | 有効の場合、一つのウィジェットを伸ばすと他が縮むようになる |
| 伸縮時間 (ms) | 伸縮時のアニメーション時間 |
| 見出し用セレクター | 伸縮動作をさせるためにクリックする要素を指定（デフォルトはh3） |
| 次のID を持つウィジェットエリアのみで有効 (省略可、カンマ区切り) | 伸縮を行うウィジェットを細かく指定 |
| カスタムウィジェットセレクター | 同上 |
基本は有効化するだけで機能します。後は、見出しの設定くらい。
うまくカスタマイズすれば特定のウィジェットのみ閉じるようなこともできます。
Sticky Sidebarの設定
| 項目 | 説明 |
|---|---|
| Sticky Sidebar 機能を有効にする | 追尾機能の有効化 |
| Quick Switchback モードを有効にする | 逆方向にスクロールし始めたときに、止まっていたサイドバーがすぐにスクロールし始めるようになる |
| 再計算タイマー (単位:秒、0=無効) | コンテンツサイズの再計算時間を指定 |
| フッターを無視 (無限スクロール時) | フッターを無視してスクロール |
| 幅のパーセント指定 (CSS と合わせる。固定は 0) | ブラウザのリサイズ時もサイドバー幅が可変する |
| 次の幅以下で無効化 | 指定された幅以下で無効化 |
| 第二サイドバーのID | 第二サイドバーのCSSID |
| 第二サイドバー幅のパーセント指定 | 第二サイドバーの幅指定 |
| 第二サイドバーを次の幅以下で無効化 | 第二サイドバーの有効幅指定 |
これも、基本的には有効化するだけで機能します。サイトが固定幅なら、たぶん大抵のテーマで問題なく動作するかと。うまく動作しない場合はIDの指定が間違っている可能性も。
レスポンシブデザインの場合は相性があるようです。Twenty Twelveでは「幅のパーセント指定」をすると、ウィジェットが動くところでサイドバーの横幅が不自然に大きくなりうまくいきませんでした。
0にすると大丈夫なのですが、サイドバーの幅がウィジェットが動くところのサイズで固定になるため、一度サイドバーをスクロールした後にブラウザの幅を縮めていくと、予定より早い段階でサイドバーが落ちてしまいます。
Twenty Twelveだとサイドバーは右にフロートしているので、下にスクロールすると固定幅のサイドバーが右に寄っている、ちょっとなさけない光景に。
また、スマホサイズだとサイドバーは100%にしたいのですが、これも固定幅なので右側がスカスカとやっぱり悩ましいことに。
まぁ、この変はカスタマイズすればなんとかなるかもしれません。
調べてみると、どうも閲覧中にブラウザの幅を変えていくことはあまり想定していないようです。不自然なデザインに妥協するか、追尾機能を諦めるかで葛藤している方もいました。
機能の説明はとりあえず書きましたが、公式サイトに詳しい説明があります。
Standard Widget Extensions [日本語公式]
あとがき
「Accordion Widgets」は数年前に同種のプラグインを探したことがあったので、最初に見た時に「おっ」と思いました。その時は、結局自分で作るのもめんどうだったので諦めましたが…
でも、今は必要ないOrz 開閉式のバーはコンテンツが多い時に有用ですが、最近のサイト作りの流行はダラッと長いメニューを作ることもないので。
むしろ、長さが足りなくてスクロールさせるためにこの追尾プラグインを利用するくらいです。別に閉じたサイドバーを追尾させてもいいんですが、所見で中が見れないのはクリック率を下げるような気はします。
追尾機能については、レスポンシブデザインで使いたかったので他のプラグインを利用することにしました。やはり、個人的には機種によって数種のデザインを切り替えるよりも、可変にこだわりたい。
利用したのは【Q2W3 Fixed Widget】です。
サイドバースクロールプラグインの追加【Q2W3 Fixed Widget】
後のバージョンアップで問題なく使えるようになってたら戻ってこようかと思います。