WordPressサイトにHTMLとCSSだけで手軽にSNSシェアリンクを設置する方法！

SNSシェアリンクをHTMLとCSSで自作して設置する

プラグインに頼らず、シンプルで軽量なSNSシェアボタンをつくっていきましょう。

リンクをまとめたsns.phpを作成する

WordPressで管理しやすくする為に、まずはリンクをまとめたテンプレートをテーマ内に作成しましょう。
インクルードタグなどで手軽に呼び出すことができるように、『sns.php』などという名前でテンプレートをWordPressテーマ内に新たに作成します。

sns.php

<div class="sns_box">
	<div class="sns-btnwrap">
		<a href="https://twitter.com/share?url=<? echo get_the_permalink(); ?>&text=<? echo get_the_title(); ?>" class="sns-btn sns-twitter">Twitter</a>
		<a href="http://www.facebook.com/share.php?u=<? echo get_the_permalink(); ?>" class="sns-btn sns-facebook">Facebook</a>
		<a href="http://getpocket.com/edit?url=<? echo get_the_permalink();?>&title=<? echo get_the_title(); ?>" class="sns-btn sns-pocket">Pocket</a>
		<a href="https://social-plugins.line.me/lineit/share?url=<? echo get_the_permalink(); ?>" class="sns-btn sns-line">LINE</a>
		<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<? echo get_the_permalink();?>&title=<? echo get_the_title(); ?>" class="sns-btn sns-hatebu">B!</a>
	</div>
</div>

今回は、Twitter、Facebook、Pocket、line、Hatenaのシェアボタンを表示していきたいと思います。
各記事の記事タイトル(<? echo get_the_title(); ?>)と記事URL(<? echo get_the_permalink(); ?>)をそれぞれ埋め込んでおり、
シェアされた時に表示されるようにしています。

記事の設置したい箇所にコードを追加する

single.phpなど投稿ページの中のシェアボタンを設置したい場所に下記のコードを記述してくだい。。

<?php get_template_part( 'sns' ); ?>

SNSシェアボタンのデザインを任意で整えていく

CSSはこちら

/* sns share */
.sns_box {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border: 1px solid #c5c3c3;
	padding: 30px 30px;
	margin: 15px 0 30px 0;
}
.sns-btnwrap {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
    justify-content: center;
	width: 100%;
}
.sns-btn {
    color: #FFF;
    width: 18%;
    text-align: center;
    padding: 1em 2em;
	margin: 0 1%;
}
.sns-btnwrap a:hover{
	opacity:0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.sns-twitter {background: #55acee;}
.sns-facebook {background: #3B5998;}
.sns-pocket {background: #ef3f56;}
.sns-line {background: #1dcd00;}
.sns-hatebu {background: #00a5de;}

デザインはお好みで編集し、おしゃれなシェアボタンにアレンジしてみてください。
以上でSNSシェアボタンの設置は完了です。
サイトを多くの人に見て貰うためには大事な部分なので、この機会にWordPressにSNSシェアボタンをぜひ設置してみてください！