【Cocoonカスタマイズ】通知エリア用のウィジェットエリアを追加し自由にメッセージを表示する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

通知メッセージにはHTMLタグ、ショートコードを入力できません。

そこで、通知エリア用に新しいウィジェットを作成し、「カスタムHTML」ウィジェットを利用することで、自由にメッセージを表示できるようにします。

また、ウィジェットの設定を通じて、通知メッセージの表示を柔軟に変更できるようになります。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

ラベル
Cocoon設定

表1に示す項目を設定します。

Cocoon設定
設定大項目項目設定値
通知通知表設定通知エリアの表示オン

設定	大項目	項目	設定値
通知	通知表設定	通知エリアの表示	オン

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

// ウィジェットエリアを追加
add_action('widgets_init', function () {
  register_sidebar([
    'name'          => '通知エリア',
    'id'            => 'add-notice-contents',
    'description'   => '通知エリアに通知メッセージを表示するウィジェットです。',
    'before_widget' => '',
    'after_widget'  => '',
  ]);
});


// Cocoon設定（通知）の通知メッセージを変更
add_filter('get_notice_area_message', function ($msg) {
  global $_THEME_OPTIONS;

  // ウィジェットがない場合
  if (is_admin() || !is_active_sidebar('add-notice-contents')) {
    return $msg;
  }

  // Cocoon設定の通知エリアURLを無効
  $_THEME_OPTIONS['notice_area_url'] = '';

  // ウィジェットを通知メッセージに設定
  ob_start();
  dynamic_sidebar('add-notice-contents');

  return ob_get_clean();
}, 99);

ラベル
「カスタムHTML」ウィジェット例
以下のようにcampaignショートコードを使い、特定の期間に通知メッセージを表示することも可能です。
```
[campaign from="2024-12-24 08:00:00" to="2024-12-25 20:00:00"]<a href="URL">通知メッセージ</a>[/campaign]
```

さいごに

今回紹介した方法を使えば、「カスタムHTML」ウィジェットを活用して、通知エリアに自由にメッセージを表示できます。
また、ショートコードや表示期間の設定も簡単に行えます。
フックに直接コードを書いて条件分岐させるよりも汎用的に利用できます。