このページでは WordPress プラグイン Standard Widget Extensions の各種オプション項目について説明しています。 説明の順序が設定画面の順序と異なりますが、ご了承ください。
WordPress 標準テーマ (TwentyFourteen, TwentyThirteen, …) 用の設定についてはこちらをご覧ください。
本当はもう少し見やすい公式ページを作りたいのですが、プラグイン自体のメンテナンスとサポートで手一杯でそこまでは手が回っていません…。
1. 基本
「詳細オプションを表示」
初めて使う方が戸惑わないように最初は必要最低限のオプションのみ表示しています。 以下に示す各種設定のうちのいくつかは最初隠れているので「詳細オプションを表示」を押して全ての項目を表示してください。
「Accordion Widgets 機能を有効にする」／「Sticky Sidebar 機能を有効にする」
Standard Widget Extensions は現在 Accordion Widget (ウィジェット伸縮) と Sticky Sidebar (サイドバースクロール停止) の 2つの機能を持っています。 どちらか 1つの機能を使いたいときはこれらのうち不要なものを「無効」としてください。
「メインカラムの ID」／「サイドバーの ID」／「ウィジェットのクラス名」
これらのパラメータで基本要素を指定します。 Sticky Sidebar 機能ではメインカラム ID とサイドバー ID を用います。 フッターが来たときにスクロールを再開する動作はこれら 2つの要素の高さとマージンを用いて計算しています。 動きをスムーズにするために以下の点に気をつけてください。
- サイドバーが止まったときの上下位置はサイドバー要素の margin-top、margin-bottom で決まります。
- メインカラム要素の margin-top、margin-bottom はサイドバー要素の対応する値と同じにしておいてください。
- メインカラム要素とサイドバー要素の padding-top、padding-bottom は 0 にしてください。
Accordion Widgets 機能ではサイドバー ID とウィジェットクラス名を使用します。 デフォルトはこれらを使って伸縮する要素が決定されますが、後で説明するように他のオプションを用いることでサイドバーの中の特定のウィジェットエリアのみ伸縮したり、サイドバー以外の要素を伸縮したりすることもできます。
「可読性のある .js ファイルを使用」
通常 Standard Widget Extensions は圧縮した .js ファイルを用います。デバッグ時など圧縮前の .js ファイルをインクルードしたいときは有効にします。
2. Accordion Widgets
「見出し用セレクター」
伸縮動作をさせるためにクリックする要素を指定します。 ウィジェットクラス内の要素である必要があります。 デフォルトは「h3」です。 この要素をクリックするとその次の要素が slideDown/slideUp します。
「次の ID を持つウィジェットエリアのみで有効」／「カスタムウィジェットセレクター」
これらは伸縮を行うウィジェットを細かく指定するためのオプションです。 まず、基本動作ですが、
「サイドバーの ID」 = 「sidebar」 「ウィジェットのクラス名」 = 「widget」
とすると、
#sidebar .widget
が伸縮対象のウィジェットとなります。ここで、
「次の ID を持つウィジェットエリアのみで有効」 = 「area1, area2」
とするとサイドバーの ID は使用せず、
#area1 .widget, #area2 .widget
が伸縮対象となります。
カスタムウィジェットセレクターはこのセレクターを直接入力してしまうためのオプションです。 これを入力すると規定のセレクターはキャンセルされ、この欄に入力したセレクターのみが有効となります。
例えば、
#sidebar .widget
とか
#area1 .widget,#area2 .widget
のように入れれば先の説明と同様の動作になります。
「見出しのアイコン」
開閉ボタン用アイコンを指定します。 URL で指定する場合は「http://」か「https://」で始まらなければなりません。
「デフォルト CSS を生成する」
開閉ボタンを指定したときはデフォルトで以下のような CSS を生成しています。 (これは一例で指定された各パラメータによってセレクターが変化します)
#secondary .widget h3
{
zoom: 1; /* for IE7 to display background-image */
padding-left: 20px;
margin-left: -20px;
}
#secondary
{
overflow: visible;
}
この動作が邪魔なときは無効にしてください。 なお、カスタムウィジェットセレクターを用いたときは生成されないので必要に応じて自分でスタイルを指定してください。
「同時に一つのウィジェットだけ伸ばす」
これを有効にすると、一つのウィジェットを開けたら (ページ全体の) 他が閉まる動作をします。
「伸縮時間」
ウィジェット伸縮時のアニメーション時間をミリ秒単位で指定します
3. Sticky Sidebar
「Quick Switchback Mode」
バージョン 1.1 より登場した Sticky Sidebar の新しい動作で、これを有効にすると逆方向にスクロールし始めたときに、止まっていたサイドバーがすぐにスクロールし始めるようになります。 サイドバーの底部を強調するよりも全体的に見せたいときに有効な動作です。 本文とサイドバーが長めのサイトにお勧めです。
「再計算タイマー」
Standard Widget Extensions の初期化終了から指定秒数後にコンテンツサイズの再計算を行います。 このオプションを指定することで、他ライブラリの終了を見計らって再計算を実行することができます。 例えば「3」に指定すれば、初期化処理の終了から 3秒後に swe.resizeHander() が呼び出されます。
「0」を指定すると無効化されます。
「フッターを無視」
「フッターが来たら再度スクロールし始める動作」を無効化するオプションです。 後で説明するように各要素のサイズが変わったときのコールバック関数も用意しましたが、無限スクロールなページではこのオプションを有効にするのがお手軽だと思います。
「幅のパーセント指定」
もし、あなたのテーマがレスポンシブ Web デザインでサイドバーの幅が CSS ファイル内で「%」指定されているとき、そのパーセント値をここに入れてください。 するとブラウザのリサイズ時も期待通りのサイドバー幅となります。
CSS の設定を読み取るのは思いのほか難しいので、ちょっとダサいのですが値を入力していただく仕様としました。
「次の幅以下で無効化」
レスポンシブ Web デザインを採用したテーマだと小さくなったときにサイドバーの位置が変化することが多いと思います。 そんなとき、ここで指定された幅以下で Standard Widget Extension の Sticky Sidebar 機能を無効化することができます。 どんなときも無効にしたくない場合は 0 を入れておいてください。
「The ‘float’ attribute Check Mode」
float 属性が left または right のときだけ Sticky Sidebar 効果を有効にします。 幅を入力をしなくても簡単にレスポンシブ Web デザインに対応できます。
第二サイドバー関連
Standard Widget Extensions 1.4 より 2つめのサイドバーを指定できるようになりました。 ID の他、「幅のパーセント指定」、「次の幅以下で無効化」を設定することができます。
4. その他
サイドバーやメインカラムのサイズが変わったら
他のスクリプトの実行によりサイドバーやメインカラムの高さがページロード後に変わることは良くあると思います。 そんなときは swe.resizeHandler() を呼んでいただけるともろもろを再計算して恥ずかしくないように振舞います。
swe.resizeHandler();
ちゃんとしたライブラリならば動作終了時のハンドラーを登録できると思うのでそこに swe.resizeHandler() を登録してみてください。
GitHub
Standard Widget Extensions のソースは WordPress.org の SVN リポジトリの他に GitHub でも公開されています。