ショートコードを使用してウィジェットを直接表示する方法

はじめに
現状のブロック表示
完成イメージ
使用方法
実装手順
- 補足
さいごに

はじめに

Cocoon 2.8.0での見直しにより、ブロックがウィジェットと同様の独自カスタマイズを廃止し、WordPress標準の仕様に戻されました。
このため、以下のブロックではウィジェットと表示が異なります。

そこで対策として、ブロックを使わずに、独自のショートコードを使用して、ウィジェットを表示させます。

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

現状のブロック表示

アーカイブ

カテゴリー

タグクラウド

完成イメージ

アーカイブ

カテゴリー

タグクラウド

使用方法

以下にショートコードを示します。

[my_widget name="ウィジェット名" options='{"オプション名":値,...}']

オプション

ウィジェット名	オプション	説明	値
WP_Widget_Archives	dropdown	ドロップダウンで表示	0=非表示 / 1=表示
WP_Widget_Archives	count	投稿数を表示	0=非表示 / 1=表示
WP_Widget_Categories	dropdown	ドロップダウンで表示	0=非表示 / 1=表示
	count	投稿数を表示	0=非表示 / 1=表示
	hierarchical	階層を表示	0=非表示 / 1=表示
WP_Widget_Tag_Cloud	count	投稿数を表示	0=非表示 / 1=表示

実装手順

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

add_shortcode('my_widget', function ($atts) {
  $atts = shortcode_atts([
    'name'    => '',
    'options' => '',
  ], $atts);

  if (empty($atts['name'])) {
    return '';
  }

  // 引数をデコード
  $instance = !empty($atts['options']) ? json_decode($atts['options'], true) : [];

  // タイトルを出力しない
  $instance['title'] = '!';

  ob_start();
  the_widget($atts['name'], $instance);
  $output = ob_get_clean();

  // Cocoon独自の特定ウィジェットに応じた処理
  switch ($atts['name']) {
    case 'WP_Widget_Categories':
    case 'WP_Widget_Archives':
      $output = remove_post_count_parentheses($output, $instance);
      break;

    case 'WP_Widget_Tag_Cloud':
      $instance['show_count'] = isset($instance['count']) && $instance['count'] ? true : false;
      $output = wp_tag_cloud_custom($output, $instance);
      break;
  }

  return $output;
});

補足

今回、直接ウィジェットを呼び出すため、以下のようにショートコード用のウィジェットエリアを新たに設ける必要はありません。

最新のコメントのウィジェットをショートコードで呼び出す方法

以下の方法で、ウィジェットを直接呼び出すことができます。

[my_widget name="RecentCommentsWidgetItem"]

さいごに

今回紹介した方法を使えば、ショートコードを使用してウィジェットを表示することができます。
ウィジェット名とオプションをショートコードの引数として指定することで、カスタマイズされたウィジェットを記事やページに簡単に埋め込むことが可能です。