WordPress個別サポート

BizVektorでサイドバーを固定する方法を紹介します。

「サイドバーの固定」とは、本文が長いページで画面を下にスクロールしても、サイドバーは固定表示される仕組みです。ビジネスサイトなどで「申し込みはこちら」ボタンを表示し続けたいときに役立ちます。

画面をスクロールしても申し込みボタンは消えない

長いページで画面を下にスクロールしても申し込みボタンは消えない

こうしたサイドバーの固定に役立つのがStandard Widget Extensionsプラグインです。「プラグイン」‐「新規追加」メニューからプラグインをインストール、有効化して、「設定」‐「Standard WE」メニューから設定します。

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

Standard Widget Extensionsプラグインの機能

執筆時点でStandard Widget Extensionsプラグインの機能は3つです。

  • Sticky Sidebar --- 画面スクロール時にサイドバーを固定します。
  • Accordion Widgets --- サイドバーウィジェットの項目を開閉式にします。
  • Quick Switchback --- サイドバー固定と連動した機能で、上にスクロールするときにサイドバー全体を見せます。

サイドバーを固定するにはSticky Sidebarを有効にします。このとき、Quick Switchbackを有効にすると画面を上にスクロールしたときにサイドバーが固定されずにスクロールされます。

上にスクロールしたときにも申し込みボタンを右下などに固定しておきたい場合はQuick Switchbackを無効にしておきます(デフォルト)。

今回はサイドバーを固定するSticky Sidebarに焦点を当てます。

インストール直後のStandard Widget Extensions

「設定」‐「Standard WE」メニューでStandard Widget Extensionsプラグインの設定画面を開きます。インストール直後の設定は次のようになっています。

インストール直後のStandard Widget Extensionsの設定メニュー

インストール直後のStandard Widget Extensionsの設定メニュー

上記の設定はTwenty Fourteenなどのテーマではそのまま使え、Sticky Sidebar(サイドバー固定)が有効になりますが、BizVektorではコンテンツエリア(メインカラムのID)やサイドバーに割り当てられたIDやclass名が違うので設定の変更が必要です。

BizVektorでサイドバーを固定するための設定

BizVektorでは本文が表示されるコンテンツエリア(メインカラム)には「content」、サイドバーには「sideTower」というIDが付いています。また、サイドバーに含まれる個別のウィジェットは「sideWidget」というclass名になっています。

BizVektorの各パーツの名前

BizVektorの各パーツの名前

これに従って設定画面の3つの項目を次のように変更します。

BizVektorでサイドバーを固定するための設定

BizVektorでサイドバーを固定するための設定

  • メインカラムのID --- content
  • サイドバーのID --- sideTower
  • ウィジェットのクラス名 --- sideWidget

また、サイドバー固定機能を使うために「Sticky Sidebar 機能を有効にする」を「有効」にする必要があります。その他の「Quick Switchback モードを有効にする」や「Accordion Widgets 機能を有効にする」の設定は任意です。わかりづらければ共に「無効」で大丈夫です。

これで、サイドバーが固定されます。

画面がスクロールしても固定されるサイドバー

画面を下にスクロールしてもサイドバーは固定される

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート