ウィジェットの表示を制御する方法

ウィジェット
この記事は約3分で読めます。

Cocoonでは、ウィジェットごとに「どのような条件で表示するか?」を設定することができます。

デフォルト状態で個々のウィジェット下部に「表示設定」ボタンが表示されます。

ウィジェット下部の「表示設定」ボタン

ここで設定することにより、ウィジェット表示をある程度思い通りに設定することが可能です。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

ウィジェットの表示設定

表示設定の詳細は以下のようになっています。

ウィジェットの表示

「ウィジェットの表示」項目は、そのを設定する条件で、「ウィジェットを表示するかしないか」を選択します。

カテゴリー

カテゴリーは、チェックを入れたカテゴリーの「表示/非表示」を切り替えます。

ページ

ページは、チェックを入れたページ種別の「表示/非表示」を切り替えます。

ページ設定の「アーカイブ一覧」項目は、年月日アーカイブページのみならず全てのアーカイブページを含みます。以下のアーカイブ一ページ全てで表示設定が有効になります。
  • カテゴリーアーカイブページ
    例: /category/news/
  • タグアーカイブページ
    例: /tag/technology/
  • 投稿者アーカイブページ
    例: /author/admin/
  • カスタム投稿タイプのアーカイブページ
    例: /movies/(カスタム投稿タイプが movies の場合)
  • 年月日アーカイブページ(年別、月別、日別)
    例: /2024/, /2024/06/, /2024/06/07/

投稿者

投稿者は、チェックを入れた投稿者の「表示/非表示」を切り替えます。

投稿

投稿は、表示を切り替える投稿IDをカンマ区切りで挿入します。

固定ページ

固定ページは、表示を切り替える投稿ID(固定ページID)をカンマ区切りで挿入します。

タグ

タグは、表示を切り替えるタグIDをカンマ区切りで挿入します。

その他

その他には、「カスタム投稿タイプ」設定用のタブもあります。カスタム投稿については、プラグインやカスタマイズが必要になり、テーマの範疇を超えるため説明は割愛します。

まとめ

Cocoonのこれらの機能を利用すれば、個別のウィジェットを「表示させたい場所のみ」に表示させることが可能かと思います。

ウィジェットは、意味のない場所に表示させても効果は薄いかと思います。

なので、Cocoonウィジェットで言えば以下のようなウィジェットで、上手に表示を切り替えることをおすすめします。

  • (商品)ランキングウィジェット
  • CTA(Call to Action)ウィジェット
  • 各種広告ウィジェット

これらのウィジェットを、コンバージョン率の高いページのみに表示させるなんて使い方も良いかもしれません。

注意点

以下の不具合は改善されました。

既知の不具合として、Jetpackプラグインがインストールされている場合は、「表示設定」ボタンが動作しないようです。

JetpackプラグインのJetpackウィジェット

これは、JetpackプラグインのJavaScriptの競合問題なので、ちょっと原因は分かりませんでした。

Jetpackを利用している場合は、「Jetpackのウィジェット表示制御」機能を利用することをおすすめします。

Jetpackのウィジェット表示制御機能

ウィジェット下部にある「公開状態」と書かれたボタンから設定できます。

タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);