レスポンシブ対応のスクロール追尾式サイドバーが実装できる「Standard Widget Extensions」

最近色々なブログやサイトで実装されているスクロールしても付いてくるサイドバーを自分のブログでも実装したい！と思い、調べていたところ素晴らしいWordpressプラグインがありましたのでご紹介します。

実装が簡単でレスポンシブ対応だなんて…まさに自分の求めていたWordpressプラグインです！

実装方法

WordPress管理画面より「Standard Widget Extensions」を検索するか、
WordPress › Standard Widget Extensions « WordPress Pluginsよりプラグインをインストール後、FTPでアップロードします。

インストールが完了したらプラグインを有効にし、『設定』→『Standard WE』でStandard Widget Extensionsの設定を変更します。

基本的に「メインカラムの ID」「サイドバーの ID」「ウィジェットのクラス名」を入力し、Sticky Sidebarの「Sticky Sidebar 機能を有効にする」を有効にするだけで実装することが出来ます！

「メインカラムのID」はメインカラムとサイドバーを囲っているIDを入力します。私のブログだと「contents」に該当します。

「サイドバーの ID」には固定させたい部分のIDを入れます。私の場合、人気記事を固定したいので「wpp-3」と入力しました。サイドバー全体を固定したい場合はサイドバーのIDを入力します。

「ウィジェットのクラス名」はデフォルトの「.widget」のままにしました。

Sticky Sidebarの「Sticky Sidebar 機能を有効にする」を有効にするにし、「次の幅以下で無効化」では指定したウィンドウサイズ以下にすると、追尾を無効化することが出来ます。

私のブログではウィンドウサイズが768px以下になると1カラムのレイアウトになるようになっているので、「768」と入力しました。

この値は自分のブログに合わせて適宜変更してください。

アコーディオンも実装できる

他にもAccordion Widgetsで簡単にアコーディオンも実装することが出来ます。自分のブログはサイドバーの部分を既にアコーディオンを実装しているので使用していません。

参考サイト

以下のサイトを参考にして実装しました。

Standard Widget Extensions [日本語公式] | Hetarena.com
公式ページです。

スクロールに付いてくるサイドバーを実装する「Standard WE」が美しい･･･ | 指先ノート

ブログのサイドバーがスクロールについてくるプラグイン Standard Widget Extensionsを入れてみた！ | STYLE-EASY

最後に

まさに自分の求めていたプラグインの作者様に感謝いたします。ちなみに日本人の方らしいです。検索してみると既にたくさんの方が利用しているようです。

長い記事などを書いたときに、サイドバーの部分に空きスペースが出来てしまうのが気になっていましたが、こちらを導入することによって離脱率の低下を防ぐことが出来そうです。

これからもカスタマイズをして読みやすいブログにしていく予定です。