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

記事内で、以下のショートコードを入力することで、好きな位置にSNSシェアボタンを出せるようにしたいと思います¹。


      ＼記事が役に立ったらシェアしてね／
  
  
          X
    
    
    
    
          Facebook
    
          はてブ
    
    
          LINE
    
    
          LinkedIn
    
          コピー

できたコード（functions.php）はこちら。

/** 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の下部のSNSフォローボタンをもともと使っているので、「SS_BOTTOM」をoptionに入れています。
ここは、サイトによって変えた方がいいかも。

1. contents.phpを見てみる

Cocoonテーマの「contents.php」を見ると、SNSシェアボタンはこのように表示しています。

        <?php //SNSトップシェアボタンの表示
        if (is_sns_top_share_buttons_visible() &&
          (
            //投稿ページトップシェアボタンの表示
            (is_single() && is_sns_single_top_share_buttons_visible()) ||
            //固定するページトップシェアボタンの表示
            (is_page() && is_sns_page_top_share_buttons_visible())
          )
        ){
          get_template_part_with_option('tmp/sns-share-buttons', SS_TOP);
        } ?>

（参考）

cocoon/tmp/content.php at 789f7a88c8c6558b10de7c9540687fa49b649569 · xserver-inc/cocoon

目次に戻る

2. get_template_part_with_optionの中身

「get_template_part_with_option(‘tmp/sns-share-buttons’, SS_TOP)」を使えば、シェアボタンは出てきそうですね。
ただし、このコードは文字列を取得するのではなく出力しているので、文字列を取りに行きます。

（参考）

//オプション付きのテンプレート呼び出し
if ( !function_exists( 'get_template_part_with_option' ) ):
function get_template_part_with_option($slug, $option = null){
  //$option変数をテンプレートファイルに渡す
  set_query_var('option', $option);
  //広告テンプレートの呼び出し
  cocoon_template_part($slug);
}
endif;

目次に戻る

2-1. set_query_var はWP関数

要は、set_query_var で、定数 SS_TOP（SNSシェア・上部表示）を与えてから、cocoon_template_part を呼び出しているみたいです。

set_query_varは、WP関数です²。
WP関数の set_query_var() は、メインクエリquery_posts()の検索条件を変更する関数です。
主要なキーには ‘option’はなく、まさに「オプション」として作業変数を記憶しているようです。

目次に戻る

3. cocoon_template_partを見てみる

なので、処理の本体は cocoon_template_part。

ただし、これは基本的にはWP関数の get_template_part を読んでいます。

function cocoon_template_part($slug){
  ob_start();
  get_template_part($slug);
  $content = ob_get_clean();

投稿の個別ページを読み込みたい場合に、そのテンプレートのファイル名が「single.php」の場合は、「get_template_part( ’single’ );」となります。

（参考）

目次に戻る

3-1. つまり、get_template_part をラップする

ここでの $slug に与えているパラメータは「’tmp/sns-share-buttons’」です。

ということは、get_template_partをラップして、ob_get_contentsの返り値を返せばよいことになります。

/** 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;

（参考）

[WordPress ] get_template_partをショートコード化して投稿の編集画面から呼べるようにしたい

目次に戻る

3-2. 表示されないのは条件フラグのせい

ところが、これだけでは表示されません。
これは、テンプレートファイル（’tmp/sns-share-buttons’）内で、表示条件のチェックをしているからです。

冒頭部分がこちら。
「<?php if ( is_sns_share_buttons_visible($option) ): ?>」が該当箇所。

if ( !defined( 'ABSPATH' ) ) exit; ?>
<?php if ( is_sns_share_buttons_visible($option) ): ?>
<div class="sns-share<?php echo esc_attr(get_additional_sns_share_button_classes($option)); ?>">
  <?php if ( get_sns_bottom_share_message() && $option == SS_BOTTOM ): //シェアボタン用のメッセージを取得?>
    <div class="sns-share-message"><?php echo get_sns_bottom_share_message(); ?></div>
  <?php endif; ?>

目次に戻る

3-3. is_sns_share_buttons_visibleの定義

なので、is_sns_share_buttons_visible($option) を成立させる必要があります。

定義箇所は、

function is_sns_share_buttons_visible($option){
  $res = (is_sns_bottom_share_buttons_visible() && $option == SS_BOTTOM) ||
         (is_sns_top_share_buttons_visible() && $option == SS_TOP) ||
         ($option == SS_MOBILE);
  return apply_filters('is_sns_share_buttons_visible', $res, $option);
}

（参考）

cocoon/lib/sns-share.php at 789f7a88c8c6558b10de7c9540687fa49b649569 · xserver-inc/cocoon

「is_sns_top_share_buttons_visible()」では、テーマのオプション値を見ています。

function is_sns_top_share_buttons_visible(){
  return get_theme_option(OP_SNS_TOP_SHARE_BUTTONS_VISIBLE, 1);
}

このサイトでは、「トップシェアボタンを表示」がオフなので、テンプレートを呼び出しても表示されないのです。

目次に戻る

4. ちょっとした妥協と出来上がり

テーマのオプション値を一時的に変更するのも大変。
なので、$optionにSS_BOTTOMやSS_MOBILEを入れることを検討します。

はじめ SS_MOBILEを試しましたが、表示されるシェアボタンが多すぎました。
結局、ボトムシェアボタン設定を流用することにしました。

/** 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;