スクロールに合わせて追従するスティッキーサイドバーが実装できるテーマ
１ q2w3-fixed-widgetプラグインを使用した場合のサイドバーの表示
q2w3-fixed-widgetは細かい設定はありません。インストールしたらウィジェットを開いてスクロールに合わせて追従させたいウィジェットにチェックを入れるだけ、サイドバーにスティッキースクロールを実装することができます。
また、サイドバーだけでなくヘッダーウィジェットにもスティッキースクロールを実装することができます。
大変便利なプラグインなのですが、ウィジェットのサイドバーで設定するため、各投稿ページ、カテゴリー、アーカイブなどすべて共通のサイドバーになります。
ワードプレスの標準的なサイドバーの使い方と言えばその通りなのですが、サイトによってはカテゴリーやアーカイブごとにサイドバーの表示内容を変えて、訪問者の利便性を上げたり、訪問者へ効率的な宣伝をしたりすることができません。
２ カテゴリーやアーカイブごとにサイドバーの表示内容を変える方法
Themifyのテーマは、各投稿ページやカテゴリー、アーカイブごとにサイドバーに表示する内容を簡単に変えることができます。
まず、ダッシュボード ＞ Themifyテーマ ＞ Builder Layout Parts にサイドバーに表示させる内容を作成します。
Builder Layout Partsに作成した記事は、各投稿や固定ページに流用することができ、Builder Layout Partsの記事を修正したら流用先の各投稿ページや固定ページも同じように修正される特徴があります。
もちろんThemifyのプラグインなどすべて使用でき、通常の投稿ページと同じようにフロントエンドでドラッグ＆ドロップでサイドバーを作成できます。
上の写真のように、一目でわかるタイトル名とスラグで整理すると管理しやすくなります。
サイドバーに表示する原稿を作成したら、ダッシュボード ＞ Themifyテーマ ＞ Themify Settings ＞ Hook Content を開きます。
どのページのサイドバーなのか <!– –> で囲って識別しやすくします。<!– –>で囲わないと入力した文字がそのままサイドバーに表示されるので、必ず <!– –> で囲ってください。
Builder Layout Partsで作成した原稿のショートコードを貼り付けます。（idとslugの２種類のショートコードがありますが、どちらか１つでOK）
レイアウトのどの位置に表示させるか一覧から選びます。サイドバーの場合は、sidebar_before、sidebar_start、sidebar_end、sidebar_afterの四種類ありますが、サイドバーをスティッキースクロールにしたいのでsidebar_startかsidebar_endを選択します。
どの投稿やカテゴリーのサイドバーに表示させるかConditionから選びチェックを付けます。
最後にSAVEをクリックします。
この手順を繰り返して、すべての投稿や固定ページ、カテゴリー別投稿やアーカイブなどサイドバーに表示するBuilder Layout Partsを設定しています。あまりにもサイドバーの表示内容を細かく分けすぎると管理に手間がかかるので注意してください。
実際にWebページを開いて、サイドバーの文字やリンクボタンが小さすぎたり、写真などが重なって表示されたりしていないか確認してください。表示が適正でない場合は、Builder Layout Partsに戻り各モジュールのスタイリングでフォントやマージンなどを調節してください。
３ サイドバーがスティッキースクロールするように設定する
サイドバーのスティッキースクロールを設定する場所は大きく分けて２か所あります。
ダッシュボード ＞ Themifyテーマ ＞ Themify Settings ＞ Default Layouts の中で、アーカイブページ、投稿ページ、検索ページ、固定ページのサイドバーごとにサイドバーのスティッキースクロールを実装するか否かを設定することができます。（Enable Sticky Sidebarにチェックを入れると実装されます。）
もう一か所は、各投稿や固定ページをバックエンドで開き、Themify Custom Panel ＞ Post（Page）Option にあるSticky Sidebarで設定することができます。
各投稿のThemify Custom Panelで設定した項目は、全体の設定を行うThemify Settingsより優先されます。ですから、サイト全体でサイドバーのスティッキースクロールを有効にしておき、個別の投稿ページだけ無効にすることができます。
４ サイドバーのスティッキースクロールを実装する最大の利点とは？
パソコンやタブレットでここまで読んで頂いている方は既にお気付きでしょうが、サイドバーのスティッキースクロールを実装しています。
サイドバーのスティッキースクロールを実装していないと、記事が長くなるとサイドバーの部分が何も表示されなくなってしまいます。ページのスクロールに合わせてサイドバーもスクロールされるので、訪問者にアピールしたい項目を表示できることが理解頂けると思います。
しかし、最大の利点はそこではありません。
スマホでこの記事を読んでいる方はお気付きかもしれませんね。
下の写真は、アーカイブページのスクリーンショットです。
赤丸で囲ったタブをクリックすると右側からサイドバーがスライドインします。
通常、スマホなど表示幅の狭いディスプレイの場合は、サイドバーは投稿本文の下に表示されるようにレイアウトされます。すなわち、記事を最後まで読み終えるか、下までスクロールしない限りサイドバーは表示されません。
しかし、サイドバーにスティッキースクロールを実装することにより、本文を表示している位置に関係なくサイドバーを表示させることができるようになります。
これがサイドバーをスティッキースクロールを実装する最大の利点です。
（パソコンやタブレットでこの記事を読んでいる方は、表示幅を狭く変更して試してみてください。）
５ スクロールに合わせて追従するスティッキースクロールのサイドバーを実装できるテーマ
サードパーティーのプラグインを組み合わせれば、サイドバーにスティッキースクロールを実装したり、カテゴリーやアーカイブページのサイドバーの表示内容を変えることはできます。
しかし、サードパーティーのプラグインを使用すると、テーマとプラグイン又はプラグイン同士の競合により不具合が発生したり、ワードプレスのメジャーアップデートに対応しなくなったりして、正常に動作しなくなる恐れがあります。
その点、今回紹介したサイドバーの表示内容を変える方法とスティッキースクロールの実装は、Themifyのテーマ自体に組み込まれている機能なので競合は発生せず、安心して実装することができます。
Themifyは、用途やサイトの目的に合わせて40種類以上のテーマを取り扱っていますが、サイドバーにスティッキースクロール機能があるテーマは、現在のところ「Ultra」と「Shoppe」の２種類だけです。
UltraとShoppeは、ECサイトの作成によく使用されるテーマで、商品の検索用フィルターを常にサイドバーに表示しておくために実装された機能です。しかし、ECサイト以外のサイトでもデバイスに係らずサイドバーを表示したままにできる機能は利用価値が高いと思うので使い方を紹介しました。
Themifyは実際のWeb画面を見ながらサイト作成ができるビルダー系のテーマで、ドラッグ＆ドロップで記事を作成します。またテーマに組み込まれているサイト作成に必要な機能以外に、60種類以上のプラグインも作成しているのでThemifyのテーマとプラグインだけでサイト作成を完結することができます。
サイドバーの表示内容を作成したり、スティッキースクロールを実装したりする手順を紹介したとおり、様々な機能やサイト作成に必要なカスタマイズにHTMLタグやCSSによるコーディングを必要としないので初心者でも思い通りにサイト作成出来るテーマです。
Themifyのテーマやプラグインは有料ですが、無料で使用できるテーマやプラグインもあるので、気になる方は下の記事も読んで下さい。
Themifyのﾃｰﾏとﾌﾟﾗｸﾞｲﾝ
Themifyを無料で試す方法
料金プランと割り引き情報
この記事があなたのお役に立てたら幸いです。
またこの記事がお役に立てれたならhatena・Facebook・Twitterでシェアして頂けると励みになります。
