ワードプレスにブログ記事のSNSシェアボタンを自作で設置【コピペで簡単】

2019.05.04 / 更新日：2019.06.10

困ってる人

ブログの記事をSNSにシェアするボタンを作りたいんだけど
プラグインを使うと表示が遅くなったりするんだよなぁ
何か簡単に出来る方法ってないかなぁ？

こんにちは、よろと申します。

という事で今回は、こちらのブログでも使用中のプラグインなしで作るシェアボタンについて。

今回は「HTML」と「CSS」だけのパターンではなく「sns.php」を使うパターンを紹介。

今回作るのは、

Twitter

Facebook

Line

はてなブックマーク

の４つのシェアボタン

PCで見た場合

タブレットで見た場合

スマートフォンで見た場合

という事でまずは「sns.php」に書く内容から。

ワードプレスにブログ記事のSNSシェアボタンを自作で設置【sns.php】

今回は「share」というクラス名の中にシェアボタンを入れてみました。

// sns.php

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>

<div class="share">
  <ul>
    <!--Twitter-->
    <li class="button twitter">
      <a href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&t=<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする">ツイート</a>
    </li>
    <!--Facebook-->
    <li class="button facebook">
      <a href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする">Facebook</a>
    </li>
    <!--Pocket-->
    <li class="button line">
      <a href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="LINEでシェアする">LINE</a>
    </li>
    <!--はてなブックマーク-->
    <li class="button hatena">
      <a href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する">はてブ！</a>
    </li>
  </ul>
</div>

// sns.php

<?php

$url_encode=urlencode(get_permalink());

$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');

<ul>

<a href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&t=<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする">ツイート</a>

</li>

<a href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする">Facebook</a>

</li>

<a href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="LINEでシェアする">LINE</a>

</li>

<a href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する">はてブ！</a>

</li>

</ul>

</div>

ブログ記事のシェアボタンを自作で設置【CSS：デザイン部分】

// CSS部分

.share {
	text-align: center;
	margin: 20px 0px 30px 0px;
}

.share li {
	padding: 10px 0px;
	border-radius: 5px;
}

.button {
	display: inline-block; /* ここで横並び */
	width: 24%; /* ボタン間の空白を作るためにmarginが入っているので25%だとボタンが端で折り返してしまう */
	margin-bottom: 5px;
}

.button a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 1px;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	transform: translateY(3px);
	margin-bottom: 8px;
	border-bottom: none;
}

.twitter {
	background-color: #55acee;
	border-bottom: 3px solid #008fde;
}

.facebook {
	background-color: #315096;
	border-bottom: 3px solid #2c4373;
}

.line {
	background-color: #00c300;
	border-bottom: 3px solid #009d00;
}

.hatena {
	background-color: #008fde;
	border-bottom: 3px solid #16679e;
}

// CSS部分

.share {

text-align: center;

margin: 20px 0px 30px 0px;

}

.share li {

padding: 10px 0px;

border-radius: 5px;

}

.button {

display: inline-block; /* ここで横並び */

width: 24%; /* ボタン間の空白を作るためにmarginが入っているので25%だとボタンが端で折り返してしまう */

margin-bottom: 5px;

}

.button a {

display: block;

width: 100%;

height: 100%;

color: #fff;

font-size: 14px;

font-weight: bold;

text-decoration: none;

letter-spacing: 1px;

}

.button:hover {

opacity: 0.8;

}

.button:active {

transform: translateY(3px);

margin-bottom: 8px;

border-bottom: none;

}

.twitter {

background-color: #55acee;

border-bottom: 3px solid #008fde;

}

.facebook {

background-color: #315096;

border-bottom: 3px solid #2c4373;

}

.line {

background-color: #00c300;

border-bottom: 3px solid #009d00;

}

.hatena {

background-color: #008fde;

border-bottom: 3px solid #16679e;

}

ワードプレスにブログ記事のSNSシェアボタンを自作で設置【HTML部分】

HTMLファイル内の、実際に表示させたい場所にこのタグを貼り付ける

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

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

そうする事によって「sns.php」内に書かれた内容が、HTML側で表示されるようになる。

もしも「sns.php」の事なんかよく分からないから使いたくないという事でしたら、

上のタグやPHPを使わずに、それぞれのシェアする為の記述を、直接HTML内に書き込むだけ。

タブレットとスマートフォンで見る時は、見た目の面や使いやすさの事も考えて、ボタンの並びを縦並びにした方がいいかも。

今の横並びから、縦方向並び変える場合は「CSS」ファイルの、

.buttonの「width」を、

タブレットの場合は :49%; → これで２列になる
スマートフォンの場合は :100%;にすればOK → これで縦１列になる

ボタンのデザイン部分を変えたい場合は、CSSを直接編集するか、

文字やアイコンなどを追加したい場合「Font Awesome」のサービスなんかが割と便利かも。

終わり

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール