SNSでの拡散力は、ブログを運営していく上で無視できません。SNSでユーザーにシェアしてもらうことで、新しいユーザーを獲得できる機会も大きく増やすことができます。
WordPressの中の記事やサイドバーにSNSボタンを設置して、ユーザーがSNSでシェアしやすいような導線作りをしておくことは必須と言っても過言ではないでしょう。
今回は、WordPrssの記事の中やサイドバーにプラグインなしでSNSボタンを設置する方法をご紹介します。
各SNSへのリンクをまとめたsns.phpを作成する
まずはクリックやタップすることで、各SNSで簡単にシェアできるリンクをまとめたテンプレートをテーマ内に作成しましょう。
手軽に呼び出すことができるように、『sns.php』というテンプレートをWordPressテーマ内に新たに作成します。
※ウィジェット以外に設置する場合は、SNSボタンを追加したいテンプレートに直接記述しても問題ありません。
今回は、『facebook』『twitter』『Google+』『はてなブックマーク』の4つのSNS共有ボタンを設置します。sns.phpまたはsnsボタンを追加する箇所に下記のソースコードを追加してください。
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
<div class="share">
<ul>
<!--Facebookボタン-->
<li class="facebook">
<a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fa fa-facebook"></i><span> facebook</span>
</a>
</li>
<!--ツイートボタン-->
<li class="tweet">
<a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fa fa-twitter"></i><span> tweet</span>
</a>
</li>
<!--Google+ボタン-->
<li class="googleplus">
<a href="//plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
<i class="fa fa-google-plus"></i><span> Google+</span>
</a>
</li>
<!--はてなボタン-->
<li class="hatena">
<a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena"></i><span> はてブ</span>
</a>
</li>
</ul>
</div>
個別に設定が必要なコードなどは特に入っていないので、そのままコピーしてsns.phpに貼り付けても問題ありません。
上記のソースコードでSNS共有ボタンとして、FontAwesomeのWebアイコン(<i class="fa fa-アイコンコード"></i>) + 共有先のSNS名(<span>SNS名</span>)で表示されるようになります。
※アイコンを表示しているFontAwesomeを使用する設定をしていない場合は、Webアイコンを利用するための設定を行なってください。
sns.phpを作成しただけでは、サイト内にはボタンが表示されませんのでサイト内にsns.phpを出力するための設定を追加していきましょう。
記事の中にSNSボタンを出力する
記事の中にSNSボタンを出力するためには、single.phpのボタンを設置したい箇所にsns.phpを呼び出すためのコードを追加します。
single.phpに記述<?php get_template_part( 'sns' ); ?>上記のsns.phpを呼び出すためのコードを記述することで、自分の好きな位置にSNSボタンを追加することができます。
SNSボタンのデザインを整える
各SNSへのリンクが出力されたら、レスポンシブデザインに対応したボタンになるようにCSSでデザインを整えていきましょう。
下記にデモCSSを載せておきますので、自分好みにカスタムして使用してください。
style.cssに記述※@mediaを使用してCSSをレスポンシブデザインにCSSを調整する場合は、headタグでviewportの設定を行なってください
.fa-hatena:before {
font-family: Verdana;
font-weight: bold;
content: 'B!';
}
.share {
margin-top: 40px;
margin-bottom: 40px;
}
.share ul {
margin: 0;
padding: 0;
list-style: none;
}
.share ul:after {
display: block;
clear: both;
content: '';
}
.share li {
float: left;
width: 25%;
margin: 0;
margin-top: 15px;
}
.share li a {
font-size: 14px;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
color: #fff;
}
.share li a:hover {
opacity: .8;
}
.share li a:visited {
color: #fff;
}
.tweet a {
background-color: #55acee;
}
.facebook a {
background-color: #315096;
}
.googleplus a {
background-color: #dd4b39;
}
.hatena a {
background-color: #008fde;
}
@media(max-width: 599px) {
.share li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 3px;
}
.share li i {
font-size: 1.3em;
padding-top: 3px;
}
.share li span {
display: none;
}
}はてなブックマークのロゴは、FontAwesomeの中にアイコン設定されていないので似ているフォントで代用しアイコンをCSSで作成しています。
スマホ表示のときは、ボタンの表示スペースが狭くなるため『display: none;』でSNS名を非表示にし、アイコンのみ表示されるようにしています。
上記のCSSを反映すると、下の画像のようなデザインで表示されます。
PC用表示
スマートフォン用表示
デザインの作成が完了したら、記事の中へのSNSボタンのは設置完了です。
ウィジェットにSNSボタンを追加する
記事へのSNSボタンが完成したら、WordPressのウィジェット機能でSNSボタンが設置できるように、新しくSNS用のウィジェットを作成しましょう。
ウィジェットにSNSボタンの機能を追加するために、functions.phpでウィジェット用の関数を定義します。
functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。
class SNS extends WP_Widget {
/*コンストラクタ*/
function __construct() {
parent::__construct(
'sns_widget',
'SNSボタン',
array( 'description' => 'SNSボタンを追加' )
);
}
/*ウィジェット追加画面でのカスタマイズ欄の追加*/
function form($instance) {
if(empty($instance['title'])) {
$instance['title'] = '';
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
name="<?php echo $this->get_field_name('title'); ?>"
value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<?php
}
/*カスタマイズ欄の入力内容が変更された場合の処理*/
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
return $instance;
}
/*ウィジェットのに出力される要素の設定*/
function widget($args, $instance) {
extract($args);
echo $before_widget;
if(!empty($instance['title'])) {
$title = apply_filters('widget_title', $instance['title'] );
}
if (!empty($title)) {
echo $before_title . $title . $after_title;
} else {
echo '';
}
?>
<div class="sns-widget">
<?php get_template_part( 'sns' ); ?>
</div>
<?php echo $after_widget;
}
}
register_widget('SNS');上記のコードでは、ウィジェット管理画面でタイトルを記入した場合は『<h4>』でタイトルが出力され、無記入の場合は何も表示しないように設定しています。
※sns.phpを作成していない場合は、『<?php get_template_part( 'sns' ); ?>』の部分を削除し、直接ソースコードを記述してください。
上記の記述が完了したら、WordPressの管理画面のウィジェット設定画面に、SNSウィジェットが追加されるのでサイドバーなどに追加しましょう。
ウィジェットを有効化すると、サイドバーにウィジェットが追加されます。
SNSボタンウィジェットのデザインを整える
ウィジェットエリアにSNSボタンが表示されたら、サイドバー用デザインを整えます。サイドバー用のSNSボタンのデザインは、スマホ用のデザインを流用すると簡単に調整できます。
先程記述した、SNS用のCSSの下に追加してください。
style.cssに記述.sns-widget .share {
margin: 0;
}
.sns-widget .share li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 3px;
}
.sns-widget .share li i {
font-size: 1.3em;
padding-top: 3px;
}
.sns-widget .share li span {
display: none;
}CSSを反映するとの画像のように、サイドバーウィジェットにSNSボタンのデザインが反映されます。
設置が終わったら、各ボタンをクリックして動作確認を行ってみてください。SNSボタンをクリックしたときに、自動で新しいウィンドウが開きいてSNSの共有画面が出力されれば問題ありません。
※WordPressがローカル環境の場合は、エラーで確認できません！必ず本番環境で行ってください!!以上でSNSボタンの設置は完了です。SNSでの共有は、サイトを多くの人に見てもらうためには必須なので、この機会にWordPressにSNSボタンを設置してみてくださいね！