STORK（ストーク）のSNSボタンに「LINEで送る」を追加したのでどうぞシェアしてください

このブログは「STORK（ストーク）」というWordPressの有料テーマを使って運営しています。

テーマのカスタマイズをしなくてもめちゃくちゃシンプルで見やすいのでに気に入ってるんですが、SNSボタンの「Google+ボタン」は使ってる人いない説があるので、ユーザー数の多いLINEの「LINEで送る」ボタンに変更することにしました。

ちなみにSNSボタンってこういうやつです。

STORKのSNSボタンを「LINEで送る」ボタンに変更する手順

1. LINEのアイコンフォントを用意する
2. 「Google+」ボタンと「LINEで送る」ボタンを入れ替える
3. CSSで調整する

こんな手順で変更していきます。

LINEのアイコンフォントを用意する

アイコンフォントで有名なFont Awesomeにいつの間にかLINEアイコンが追加されていたので、これを使わせていただきます。

line | line | Font Awesome

アイコンフォントの使い方はサルワカさんのこの記事が参考になります。
[box class=”pink_box” title=”参考”]【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう[/box]

「Google+」ボタンと「LINEに送る」ボタンを入れ替える

STORKのSNSボタンのコードが書かれているこの2つのファイルを編集していきます。

1. parts_sns_short.php：ページ上部のSNSボタン
2. parts_sns.php：ページ下部のSNSボタン

parts_sns_short.phpの25行目、parts_sns.phpの30行目にあるこのコードを

<li class="googleplus">
<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="GooglePlusで共有"><i class="fa fa-google-plus"></i><span class="text">Google+</span><span class="count"><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></span></a>
</li>

以下に書き換えます。

<li class="line">
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><i class="fab fa-line"></i><span class="text">送る</span></a>
</li>

[voice icon=”https://kazuhirooshibe.com/wp-content/uploads/2018/02/hazime-icon100.jpg” name=”はじめ” type=”r”]コピペでOK！[/voice]

CSSで調整

おなじみのラインカラーの緑色をボタンに設定します。

/* LINE */
.sns .line a {
    background:#25af00;
    box-shadow:0 3px 0 #219900;
}
.sns .line a:hover {
    background:#219900;
}

完成

PCでもスマホでもちゃんとページのURLがシェアできるようになっているので、実際にボタンを押してシェアしてみてください。

まとめ

無事に「LINEで送る」ボタンを追加する事ができました。

Google+は海外では今でも活発に使われていますが、日本では全くと言っていいほど話題にならないSNSなので「LINEに送る」ボタンでどんどんシェアしてこのブログのアクセス数が伸びるといいですね。

[kanren postid=”2442″]