SNS にシェアするボタンを付けてみたよ。

はじめに

SNS にシェアするボタンを付けてみました。

これで、アクセス爆稼ぎです。

お金は稼げないけど・・・。

環境

カスタマイズしたのは、WordPress ＋ Twenty Nineteen です。
プラグインは10個以下党に現在所属しているので、自作となります。

今は9個で頑張っています。（常時使っているものの数ね）

参考サイト

毎度のことながら、他力本願で行かせていただきます。
今回は Plusers さんの記事を参考にしています。ありがとうございます。

実装方法

Plusers さんに書いてある通り。
流れ： PHP用意 → テンプレートへ PHP 呼び出しコードを追記 → CSS用意
レスポンシブにも対応していて、至れり尽くせり。

で、特に書くことも無いんですけど、ちょっとだけ手を入れた部分を紹介。

PHP部分

Font Awesome から持ってきているタグが、以前のバージョンのようなので、現状（Ver.5.71）に合わせて修正しました。

修正： <i class="fa fa-facebook"></i> → <i class="fab fa-facebook-f"></i>
修正： <i class="fa fa-twitter"></i> → <i class="fab fa-twitter"></i>
修正： <i class="fa fa-google-plus"></i> → <i class="fab fa-google-plus-g"></i>

Font Awesome で、はてなブログのアイコンが見付からなくて、右往左往していましたが、はてなブログは直接 “B!” という文字を CSS で書いてありました。恥ずかしい・・・。

テンプレートへ PHP コード追記

本来は single.php に書くようですが、私のスキルだとコメントの下に表示されちゃったので、content-single.php に書き込みました。位置は下記の通りで、フッターのところです。

<footer class="entry-footer">
	<?php twentynineteen_entry_footer(); ?>
	<?php get_template_part( 'sns' ); ?> ※ここに入れました。
</footer><!-- .entry-footer -->

CSS部分

CSS はお好みです。

私はボタンごとの距離を少し開けたかったのと、ブランドカラーが背景色になると強烈かなと思って、背景色は淡く、文字色にブランドカラーを載せました。また、うちのブログに合わせて、シャドウを少し。

.share li
 修正： width: 25%; → width 20%;
 追加： margin: 2px;

.share li a
 追加： background: #fff;
 追加： border-radius: 10px;
 追加： border: 1px solid #dcdcdc;
 追加： box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.25);

最後に

コードを丸ごと載せるのが楽なんですが、人のふんどしで相撲を取っているわけですから、自分が手を入れた部分や、ちょっと迷った部分を中心に紹介しました。

尚、カスタマイズする際にはバックアップを取りましょうね。
また、テーマは直接触らず、子テーマを用意しましょう。

ひとつ言い忘れていました。

私、SNS やっていないので、動作確認できません。

誰か代わりにやってください（笑）