2021.12.19|JavaScript

WordPress(ワードプレス)に丸いSNSシェアボタンを配置する方法

WordPress(ワードプレス)に丸いSNSシェアボタンの設置方法

最近のホームページを見るとTwitter、Facebook、LINE等のシェアボタンを設置しているサイトも増えてきています。それぞれのSNS公式のシェアボタンや外部サービスを利用するとJavaScriptを配置して読み込みをする為、ページの表示速度が遅くなる原因となります。

WordPress(ワードプレス)に丸いSNSシェアボタンを配置する方法を解説します。
※今回はアイコン画像を用いて設置する方法です。

SNSシェアボタンを配置する方法

1.htmlファイル内に記述

SNSシェアボタン用のScriptを記述します。
※head内でもファイル内でも記述する個所はどちらでも問題ありません。

htmlファイルにJavaScriptの記述
<script>
jQuery(function($){
	$('.socialBtn li a').click(function(){
	window.open(this.href,'popup','width=600,height=300');
	return false;
	});
});
</script>

2.テンプレートファイル内にコードを追加

WordPress(ワードプレス)の投稿のループ内の表示したい位置にコードを追加してください。
WordPress(ワードプレス)の場合は、テンプレート内の「content.php」や「single.php」のテンプレートファイル等に記述します。
動的にタイトルを表示するために「php the_title」を記述。
記事毎のURLを表示するために「php the_permalink」を記述。
※Twitter・Facebook・はてなブックマーク・Pocket・LINEボタンを設置出来ます。
※imgタグ部分にはアイコン画像を指定します。

Twitterツイートボタン
<a class="twitter icon-twitter" href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_twitter.png" alt="twitterアカウント"></a>
Facebookシェアボタン
<a class="facebook icon-facebook" href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_facebook.png" alt="facebookアカウント"></a>
はてなブックマークボタン
<a class="hatena icon-hatena" href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_hatena.png" alt="はたなブックアカウント"></a>
Pocketボタン
<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank" rel="nofollow"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_pocket.png" alt="pocket"></a>
LINEで送るボタン
<a class="line icon-line" href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="LINEでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_line.png" alt="LINEアカウント"></a>

まとめてSNSシェアボタンリストで配置

シェアボタンをまとめてリスト表示する方法を解説します。

phpファイルに追加
<ul class="socialBtn01">
<li><a class="twitter icon-twitter" href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_twitter.png" alt="twitterアカウント"></a></li>
<li><a class="facebook icon-facebook" href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_facebook.png" alt="facebookアカウント"></a></li>
<li><a class="hatena icon-hatena" href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_hatena.png" alt="はたなブックアカウント"></a></li>
<li><a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank" rel="nofollow"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_pocket.png" alt="pocket"></a></li>
<li><a class="line icon-line" href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="LINEでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_line.png" alt="LINEアカウント"></a></li>
</ul>
cssファイルに追加
ul.socialBtn01 {
	text-align:center;
	margin:3% 0 3% 0;
	padding:3% 0 2% 0;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
ul.socialBtn01 li{
	width:8%;
	text-align:center;
	margin:0 1% 0 1%;
	display:inline-block;
}
ul.socialBtn01 li img{
	width:100%;
	height:auto;
}
ul.socialBtn01 li a {
	display: block;
	text-decoration: none;
	text-align: center;
}
ul.socialBtn01 [class^="icon-"]:before,ul.socialBtn [class*=" icon-"]:before {
	margin-right: 5px;
}

まとめ

以上で設定完了となりますが、簡単に設定ができますね。
WordPress(ワードプレス)の場合は、SNSシェアボタンを自動で設置してくれるプラグインもありますが、プラグインを沢山入れることで表示速度やパフォーマンスが落ちるので出来る限りプラグインを使わず軽量化して配置することをおすすめ致します。 丸いシェアボタンを配置するとWebサイト全体が柔らかく感じるのでカワイイWebサイトやポップなWebサイトの場合は丸いシェアボタンがマッチしますね。