お問い合わせ

SWELLカスタマイズ|SNS Count Cacheのシェア数をシェアボタンに表示する

SNS Count CacheはSNSシェア数を取得し、キャッシュしてくれる優れもののプラグインです。

SNS Count Cacheは、テーマへ組み込みやすいように便利な関数が用意されています。

そのようなことから、一部の有料テーマ(Snow Monkeyなど)やCocoonのSNSシェアボタンには、SNS Count Cache導入サイトではプラグイン経由で取得してシェアボタンに表示してくれるテーマが多いです。

以前フォーラムで、SWELLでもSNS Count Cacheのシェア数を取得してシェアボタンに表示して欲しいという要望がありました。

プラグインの SNS Count Cache と連動して、シェア数・フォロー数を表示させることが出来るようになると非常に助かります。

snsシェアボタンに関して < ご要望

悲しいことに、他の人の賛同も得られず、放置されていました。

SWELLの場合、外部プラグインにあるような機能の追加要求があったときの行動パタンは、だいたい決まっています。

  • 簡単なものであればSWELLに取り入れる(Lazyload / スクリプト遅延読み込み / ブロックから構造化データ出力)
  • SWELL以外でも使えて需要がありそうならプラグインを作る(Hightlight Code Block / SEO SIMPLE PACK
  • 無視する

外部プラグインとの連携というのは選択肢は無いようです。

他のプラグインとの組み合わせで起こる問題に対処したくないというのもあると思いますが、SWELLユーザーはプラグインは悪であると勘違いしている人が多いのが気になります。

プラグインが増えると必ず発生するのは管理の手間です。

プラグインが20も30もあれば管理画面がごちゃごちゃしてきて作業効率は落ちますし、プラグインごとのアップデートの手間も増えてしまうからです。

プラグインを入れるとサイトが遅くなるとかいうのは、必ずしもそうではないというのが真実です。

この記事では、SWELLのシェアボタンにSNS Count Cacheのシェア数を表示するカスタマイズをご紹介します。

SNSフォロー数に関してもこの記事と同じ方法で同じようにカスタマイズすれば表示できますが、個人的に必要ないのでこの記事では取り上げません。

目次

SNS Count Cacheをインストール

SNS Count Cacheは公式プラグインなので、ダッシュボードから追加インストールします。

FacebookやTwitterのシェア数はプラグインを有効化しただけでは取得できません。

必要な場合は、プラグインの説明に従って登録してください。

SWELLのSNSシェアボタンはカスタマイズ可能?

シェアボタンを表示しているソースコードは、parts\single\share_btns.phpになります。

get_parts()で読み込まれているコードなので、子テーマにコピーすれば書き換え可能なので、カスタマイズできます。

SWELLの子テーマで書き換えるしか方法が無いので子テーマにコピーしてカスタマイズすることにします。

SWELLのSNSシェアボタンのカスタマイズ

修正内容

SNSシェアアイコンを表示している部分に、SNS Count Cacheのカウント数を取得して表示するようにコードを追加するだけです。

とてもシンプルです。

シェアボタンアイコンを表示している個所に、自前関数のsns_share_cnt($key)を出力する1行を追加しています。

<?php


			// 追加の属性があれば
			if ( isset( $data['attrs'] ) ) $btn_attrs .= ' ' . $data['attrs'];

			// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped
			?>
			<li class="c-shareBtns__item -<?=esc_attr( $key )?>">
				<a class="c-shareBtns__btn <?=esc_attr( $hov_class )?>" <?=$btn_attrs?>>
					<i class="snsicon c-shareBtns__icon icon-<?=esc_attr( $key )?>" role="presentation"></i>
					<span class="share_cnt"><?php echo sns_share_cnt($key) ? sns_share_cnt($key) : "";?></span>
				</a>
			</li>
子テーマのparts\single\share_btns.php全体のソース
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
/**
 * sns_btns
 */

$position    = $variable['position'];
$the_id      = get_the_ID();
$share_url   = get_permalink( $the_id );
$share_title = html_entity_decode( get_the_title( $the_id ) );

$SETTEING      = SWELL_Theme::get_setting();
$style         = $SETTEING['share_btn_style'];
$hashtags      = $SETTEING['share_hashtags'];
$via           = $SETTEING['share_via'];
$urlcopy_pos   = $SETTEING['urlcopy_btn_pos'];
$share_message = $SETTEING['share_message'];

$is_fix = '-fix' === $position;

$share_btns_class = $position . ' -style-' . $style;
$hov_class        = ( 'icon' === $style ) ? '' : 'hov-flash-up';

$share_btns = [
	'facebook' => [
		'check_key'   => 'show_share_btn_fb',
		'title'       => __( 'Facebookでシェア', 'swell' ),
		'href'        => 'https://www.facebook.com/sharer/sharer.php?u=' . urlencode( $share_url ),
		'window_size' => 'height=800,width=600',
	],
	'twitter' => [
		'check_key'   => 'show_share_btn_tw',
		'title'       => __( 'Twitterでシェア', 'swell' ),
		'href'        => 'https://twitter.com/share?',
		'window_size' => 'height=400,width=600',
		'querys'      => [
			'url'  => $share_url,
			'text' => $share_title,
		],
	],
	'hatebu' => [
		'check_key'   => 'show_share_btn_hatebu',
		'title'       => __( 'はてなブックマークに登録', 'swell' ),
		'href'        => '//b.hatena.ne.jp/add?mode=confirm&url=' . urlencode( $share_url ),
		'window_size' => 'height=600,width=1000',
	],
	'pocket' => [
		'check_key' => 'show_share_btn_pocket',
		'title'     => __( 'Pocketに保存', 'swell' ),
		'href'      => 'https://getpocket.com/edit?',
		'querys'    => [
			'url'   => $share_url,
			'title' => $share_title,
		],
	],
	'pinterest' => [
		'check_key' => 'show_share_btn_pin',
		'title'     => __( 'ピンを保存', 'swell' ),
		'href'      => 'https://jp.pinterest.com/pin/create/button/',
		'attrs'     => 'data-pin-do="buttonBookmark" data-pin-custom="true" data-pin-lang="ja"',
	],
	'line' => [
		'check_key' => 'show_share_btn_line',
		'title'     => __( 'LINEに送る', 'swell' ),
		'href'      => 'https://social-plugins.line.me/lineit/share?',
		'querys'    => [
			'url'   => $share_url,
			'text'  => $share_title,
		],
	],
];

if ( 'out' === $urlcopy_pos ) $share_btns_class .= ' has-big-copybtn';
?>
<div class="c-shareBtns <?=esc_attr( $share_btns_class )?>">
	<?php if ( '-bottom' === $position && $share_message ) : ?>
		<div class="c-shareBtns__message">
			<span class="__text">
				<?=esc_html( $share_message )?>
			</span>
		</div>
	<?php endif; ?>
	<ul class="c-shareBtns__list">
		<?php foreach ( $share_btns as $key => $data ) : ?>
		<?php
			if ( ! $SETTEING[ $data['check_key'] ] ) continue;
			
			
			if ( 'pinterest' === $key ) {
				SWELL_Theme::set_use( 'pinterest', true );
			}

			if ( isset( $data['querys'] ) ) :
				$querys = $data['querys'];

				// Twitterだけ追加設定あり
				if ( 'twitter' === $key ) :
					if ( $hashtags ) $querys['hashtags'] = $hashtags;
					if ( $via ) $querys['via']           = $via;
				endif;
				$href = $data['href'] . http_build_query( $querys, '', '&' );
			else :
				$href = $data['href'];
			endif;

			$btn_attrs  = 'href="' . esc_url( $href ) . '"';
			$btn_attrs .= ' title="' . $data['title'] . '"';

			// onclick
			if ( isset( $data['window_size'] ) ) :
				$window_size = $data['window_size'];

				$onclick = "javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,${window_size}');return false;";

				$btn_attrs .= ' onclick="' . $onclick . '"';
			endif;


			$btn_attrs .= ' target="_blank" role="button" tabindex="0"';

			// 追加の属性があれば
			if ( isset( $data['attrs'] ) ) $btn_attrs .= ' ' . $data['attrs'];

			// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped
			?>
			<li class="c-shareBtns__item -<?=esc_attr( $key )?>">
				<a class="c-shareBtns__btn <?=esc_attr( $hov_class )?>" <?=$btn_attrs?>>
					<i class="snsicon c-shareBtns__icon icon-<?=esc_attr( $key )?>" role="presentation"></i>
					<span class="share_cnt"><?php echo sns_share_cnt($key) ? sns_share_cnt($key) : "";?></span>
				</a>
			</li>
		<?php endforeach; ?>
		<?php // phpcs:enable WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		<?php if ( ( ! $is_fix && 'in' === $urlcopy_pos ) || ( $is_fix && 'none' !== $urlcopy_pos ) ) : ?>
			<?php SWELL_Theme::set_use( 'clipboard', true ); ?>
			<li class="c-shareBtns__item -copy">
				<button class="c-urlcopy c-plainBtn c-shareBtns__btn <?=esc_attr( $hov_class )?>" data-clipboard-text="<?=esc_url( $share_url )?>" title="<?=esc_attr__( 'URLをコピーする', 'swell' )?>">
					<span class="c-urlcopy__content">
						<i class="c-shareBtns__icon icon-clipboard-copy -to-copy"></i>
						<i class="c-shareBtns__icon icon-clipboard-copied -copied"></i>
					</span>
				</button>
				<div class="c-copyedPoppup"><?=esc_html__( 'URLをコピーしました!', 'swell' )?></div>
			</li>
		<?php endif; ?>
	</ul>

	<?php if ( ! $is_fix && 'out' === $urlcopy_pos ) : ?>
		<?php SWELL_Theme::set_use( 'clipboard', true ); ?>
		<div class="c-shareBtns__item -copy c-big-urlcopy">
			<button class="c-urlcopy c-plainBtn c-shareBtns__btn <?=esc_attr( $hov_class )?>" data-clipboard-text="<?=esc_url( $share_url )?>" title="<?=esc_attr__( 'URLをコピーする', 'swell' )?>">
				<span class="c-urlcopy__content">
					<span class="c-shareBtns__icon -to-copy">
						<i class="icon-clipboard-copy"></i>
						<span class="c-urlcopy__text"><?=esc_html__( 'URLをコピーする', 'swell' )?></span>
					</span>
					<span class="c-shareBtns__icon -copied">
						<i class="icon-clipboard-copied"></i>
						<span class="c-urlcopy__text"><?=esc_html__( 'URLをコピーしました!', 'swell' )?></span>
					</span>
				</span>
			</button>
		</div>
	<?php endif; ?>
</div>

sns_share_cnt()のソース

SNS Count Cacheは、カウント数を取得するための関数が用意されています。

  • scc_get_share_twitter()
  • scc_get_share_facebook()
  • scc_get_share_gplus()
  • scc_get_share_pocket()
  • scc_get_share_pinterest()
  • scc_get_share_linkedin()
  • scc_get_share_hatebu()
  • scc_get_share_total()

sns_share_cnt($key)ではSWELLでサポートされていない、Google+とLinkedinをのぞいてSNSシェア数を返すようにしています。

$keyは、SNS名です。

SNS Count Cacheがインストールされていない場合やシェア数が0の場合は、シェア数を表示しません。

function sns_share_cnt($key){
	if('facebook' === $key){
		if(function_exists('scc_get_share_facebook')) return scc_get_share_facebook();

	}elseif('twitter' === $key){
		if(function_exists('scc_get_share_twitter')) return scc_get_share_twitter();
		
	}elseif('hatebu' === $key){
		if(function_exists('scc_get_share_hatebu')) return scc_get_share_hatebu();
		
	}elseif('pocket' === $key){
		if(function_exists('scc_get_share_pocket')) return scc_get_share_pocket();

	}elseif('pintarest' === $key){
		if(function_exists('scc_share_delta_pinterest')) return scc_share_delta_pinterest();
	}
	return 0;
}

調整用のCSS

.c-shareBtns__btn{
	position:relative;
}
.c-shareBtns .share_cnt {
    position: absolute;
    right: calc(50% - 3em);
    bottom: 3px;
    font-size: 12px;
    line-height: 1;
}
.c-shareBtns.-fix
.share_cnt {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 12px;
    line-height: 1;
}

まとめ

SNS Count CacheのSWELLへの組み込みは自分の用途の範囲ではとても簡単にカスタマイズできました。

SWELLのコードが綺麗なことと、SWELL自体の性能の高さのおかげだと思います。

SNSシェアボタンのデザインによってはCSSでの調整が必要だと思います。

ただし、子テーマにテンプレートパーツをコピーするカスタマイズであるため、テーマアップデートでデザインが崩れた場合など定期的なアップデートは必要かもしれません。

今回の追加個所に、SWELL本体でdo_action()的なものを1行追加してくれてさえいれば、子テーマをいじる必要もないのですが・・・

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次