【Cocoonカスタマイズ】SNSシェアボタンショートコードを追加する方法

はじめに
問題点
課題
対策
さいごに

はじめに

以下の記事では、「SNSシェアボタン」をショートコード化する方法を紹介しています。

[Cocoon] 「SNSシェア」ボタンをショートコードで表示できるようにした

記事内で、以下のショートコードを入力することで、好きな位置にSNSシェアボタンを出せるようにしたいと思います。できたコード（functions.php）はこちら。/** CocoonのSNSシェアボタン...

しかし、この記事で紹介されている方法では、テンプレートの読み込み処理やパラメータの設定が最適ではありません。

そこで今回は、これらの処理を適切に修正し、ショートコードを改善します。

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

問題点

/** CocoonのSNSシェアボタンを表示するショートコード 2024-02-18 */
add_shortcode('sns_share_buttons', 'wrap_get_template_sns_share');
if (!function_exists('sns_share_buttons')):
function wrap_get_template_sns_share($atts) {
  set_query_var('option', SS_BOTTOM);
  ob_start();
  get_template_part('tmp/sns-share-buttons');
  $content = ob_get_clean();

  if (has_filter("cocoon_part_before__{$slug}")) {
    do_action("cocoon_part_before__{$slug}");
  }

  // 書き換え
  if (has_filter("cocoon_part__{$slug}")) {
    $content = apply_filters("cocoon_part__{$slug}" ,$content);
  }

  if (has_filter("cocoon_part_after__{$slug}")) {
    do_action("cocoon_part_after__{$slug}");
  }
  return $content;
}
endif;

テンプレートの読み込みが適切でない
Cocoonには独自のテンプレートフックcocoon_template_part()が提供されているため、get_template_part()は使用しません。
また、フックが既に用意されているため、記述は不要です。

Arkhe風の神フックが新登場！機能追加でサイトを強化する方法

「Cocoonのテンプレート読み込みフックを使う方法」を解説。Cocoon 2.6.8で追加されたテンプレート読み込み機能を活用し、パラメータやテンプレートの書き換え、読み込み前後に処理を追加する方法や、独自のテンプレート読み込み関数を作る仕組みを分かりやすく紹介します。

パラメータを個別で渡す必要がない
set_query_var()を使用してパラメータをテンプレート関数に渡します。
テンプレートとパラメータを組み合わせるには、get_template_part_with_option()関数を使用します。

課題

Cocoon設定→SNSシェアには、以下の2つの設定があります。

トップシェアボタン（SS_TOP）
ボトムシェアボタン（SS_BOTTOM）

どちらの設定を使用するかが課題です。
今回は、モバイルシェアボタン（SS_MOBILE）を使用して、Cocoonの設定に関係なく全てのSNSシェアボタンを表示します。

対策

以下に修正後のコードを示します。

add_shortcode('sns_share_buttons', function () {
  ob_start();

  // SNSシェアボタンのテンプレートを取得
  get_template_part_with_option('tmp/sns-share-buttons', SS_MOBILE);

  return ob_get_clean();
});

さいごに

テンプレート関数が改善され、新たなフックによりテンプレート操作が容易になりました。
これにより、カスタマイズの幅が大きく広がります。

テンプレートフックの使い方がよくないね。
もう少し頑張りましょう（笑）