Cocoonデフォルトのウィジェット機能まとめ

ウィジェット

2018.03.072024.12.13

この記事は約3分で読めます。

Cocoonでは、デフォルトでいくつかのウィジェットが用意してあります。

以下では五十音順に、デフォルトウィジェット機能を簡単に説明します。

目次

CTAボックス

Cocoonでは、ウィジェットを用いて以下のようなコールトゥーアクションを設定します。

設定画面はこちら。

設定方法はこちら。

CTA（コールトゥアクション）ボックスを作成する方法

Call To Actionは日本語で言えば「行動喚起」。ウェブサイトで、訪問者に訪れて欲しいページに誘導するためのボタンつきボックスです。

Facebookバルーン

Facebookバルーンウィジェットは、以下のような感じのウィジェットです。

Facebookページへの「いいね！」を促すためのウィジェットです。

設定画面はこんな感じ。

Facebookボックス

Facebookボックスは、以下のような、Facebookページへのいいねを促すためのウィジェットです。

設定画面はこんな感じ。

PC用テキスト

PC用テキストウィジェットは、PC（834pxより大きな端末）のみで表示するテキストウィジェットです。

PC用広告

PC用広告ウィジェットは、PC（834pxより大きな端末）のみで表示する広告ウィジェットです。

広告ウィジェットを利用する利点としては、テーマ側で広告を表示にすると「広告ウィジェット」自体も非表示になります。

SNSフォローボタン

SNSフォローボタンウィジェットは、フォローボタンを表示したいウィジェットエリアに表示することができます。

設定画面はこんな感じ。

プロフィール

プロフィールウィジェットは、WordPress側で設定されているプロフィールを表示するためのウィジェットです。

設定画面はこんな感じ。

このプロフィールボックスは、ショートコードで本文中に挿入することも可能です。

プロフィールボックスを表示するショートコードの利用方法

ショートコードを用いてプロフィールボックスを記事本文中に表示する方法です。

モバイル用テキスト

モバイルのみで表示されるテキストウィジェットです。834px以下で表示されます。

モバイル用広告

モバイルのみで表示される広告ウィジェットです。834px以下で表示されます。

広告ウィジェットを利用する利点としては、テーマ側で広告を表示にすると「広告ウィジェット」自体も非表示になります。

ランキング

商品・サービスのランキング表示をするためのウィジェットです。

設定画面はこんな感じ。

利用方法はこちら。

商品・サービスランキングを作成して配置する方法

商品やサービスなどの独自ランキングを作成してウィジェットで配置する方法の紹介です。ランキング機能の使い方。

また、このランキングは、ショートコードを用いて本文中に表示することも可能です。

ランキングをショートコードで本文中に挿入する方法

商品ランキングをショートコードで本文中に挿入する方法です。ランキングはウィジェットでも表示できますが、本文中の自由な箇所に表示させる場合は、ショートコードです。

人気記事

人気記事リストをサムネイルつきで表示するウィジェットです。

カテゴリ別の人気記事も表示することが可能です。

設定画面はこんな感じ。

この人気記事ウィジェットリストは、ショートコードを利用して本文中に挿入することも可能です。

人気記事一覧を表示するショートコードの利用方法

人気記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

新着記事

新着記事リストをサムネイルつきで表示するウィジェットです。

設定画面はこんな感じ。

この新着記事ウィジェットリストは、ショートコードを利用して本文中に挿入することも可能です。

新着記事一覧を表示するショートコードの利用方法

新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

最近のコメント

最近投稿されたコメントを表示するウィジェットです。

設定画面はこんな感じ。

まとめ

現時点のCocoonでは、これだけのデフォルトウィジェットを利用することができます。

ウィジェットタイトルの先頭に、！を入れるとタイトルが表示されなくなるという裏機能もあります。

ウィジェットタイトル入力欄先頭に！を挿入すると公開ページでウィジェットタイトルが表示されない仕様になっています

ウィジェットタイトルを手軽に非表示にする方法の紹介です。ウィジェットタイトルの利便性を損なわず利用できる方法です。

また個々のウィジェットは、それぞれ「表示設定」ボタンから表示条件を変更することが出来るようになっています。

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

個々のウィジェットを「表示させたい場所」のみに表示させる表示設定機能の紹介です。表示設定機能を利用することで、表示条件を制御できます。

わいひら

わいひら

出したいところに出したいウィジェットを表示できます。

タイトルと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);