ワードプレス高速化!SNSシェアボタンを自作ボタンで実装した備忘録

当サイトで使用しているテーマSelaには、SNSシェアボタンがありません。

Selaを使うためにはJetpackというプラグインが必要で、JetpackにはオプションでSNSボタンを追加することができます。なので当初はJetpackのSNSボタンを使っていました。

でも、もう少し目立つボタンにしたかったんですよね。プラグインや公式ボタンを使う手もありますが、読み込みに時間がかかるという情報がちらほら。

そこで、サイトの高速化も兼ねて自作のSNSボタンの実装にチャレンジしてみました!


 


全ての投稿記事下にSNSボタンを表示する方法

SNSシェアボタンを一番使うのって、おそらく記事を最後まで読んだ時ですよね。

記事を読み終えて、良い記事だったな~と思った時に、ちょうどシェアボタンがあって、しかも押しやすい大きさだったら、ポチッとしておこうかな?となりませんか?(笑)

実際、SNSボタンが標準装備されているテーマでは、たいてい記事下に配置されています。

一般的に、投稿記事のテンプレートはsingle.phpです。テーマSelaでもそうです。

なので、single.phpにボタンを実装するためのコードを追記することで、すべての投稿記事下にSNSシェアボタンを表示させることができます。

 

個別記事single.phpの子テーマを作る

まず、ワードプレスで何らかのテーマを使用し、カスタマイズをする場合、「子テーマ」と言うものを作成することが望ましいです。

子テーマというのは、要はテーマのコピーなのですが、もし親テーマが更新になった場合でも、子テーマでカスタマイズした内容が優先となります。

子テーマを作っていない状態でカスタマイズをすると、親テーマの更新時にせっかくのカスタマイズが上書きされてしまうので、必ず子テーマを作るようにしましょう。

今回初めて子テーマを作る方は、style.cssとsingle.phpのコピーを作成してください。

 

子single.phpにSNSボタンを実装するためのコードを追記する

☞自作ボタンを実装するにあたって、参考にさせていただいたサイトはこちら。

こちらのサイトで公開されているコードを元に、自分のサイトに合うように修正しました。

子single.phpに追加したコードは以下の通りです。

<div class="snsShareArea">

<!-- Twitter -->
 <a class="btn--twitter" href="http://twitter.com/share?url=<?php echo wp_get_shortlink($post_id);?>&text=<?php echo get_the_title(); ?>&via=akaeho_library&tw_p=tweetbutton&related=akaeho_library" target="_blank">
 Twitter&nbsp;</a>

<!-- Facebook -->
 <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank" class="btn--facebook">
 Facebook&nbsp;</a>

<!-- Google+ -->
 <a class="btn--google" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">
 Google+&nbsp;</a>

<!-- B! Hatena -->
 <a class="btn--hatena" target="_blank" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank">
 B! Hatena&nbsp;</a>

<!-- Line -->
 <a class="btn--line" href="http://line.naver.jp/R/msg/text/?url=<?php the_permalink(); ?>" target="_blank">
 LINE&nbsp;</a>

<!-- Pocket -->
 <a class="btn--pocket" href="http://getpocket.com/edit?url=<?php the_permalink();?>&title=<?php echo get_the_title;?>" target="blank">
 Pocket&nbsp;</a>
</div>

teitter、Facebook、Google+、はてブ、LINE、Pocketの6つです。

シェア数のカウントは要らないかな、と思ったので、カウントに関する記述は削除しています。

 

icon-exclamation-triangle ツイッターのコードに関する注意事項

以下の赤の太字でハイライトした部分を、ご自身のツイッターのID(@以下)に書き換えてください。

<!– Twitter  –>
<a class=”btn–twitter” href=”http://twitter.com/share?url=<?php echo wp_get_shortlink($post_id);?>&text=<?php echo get_the_title(); ?>&via=akaeho_library&tw_p=tweetbutton&related=akaeho_library” target=”_blank”>
Twitter&nbsp;</a>

また、Jetpackで短縮URLを取得できるオプションがあるのですが、ツイッターでのシェア用URLはこの短縮URLを取得する設定にしてあります。Jetpackの短縮URL機能をオンにしておいてください。

 

コードを追記した場所ですが、私はコメント欄の上に表示するようにしました。(私のサイトではコメント欄は閉じているので分かりにくいですが・・・)

<?php // If comments are open or we have at least one comment, load up the comment template if ( comments_open() || ‘0’ != get_comments_number() ) { comments_template(); } ?>

という記載の上に追記しました。

 

子style.cssにSNSボタンを装飾するためのコードを追記する

子single.phpに先ほどのコードを追記しただけだと、ただのテキストリンクのような表示となり、ボタンの形状にはなっていません。

今度は子style.cssにボタンを装飾するためのコードを追記し、見た目を整えます。以下のコードを、子style.cssの一番下にコピペしてください。

/* Share button */

.snsShareArea:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.snsShareArea a{
  box-sizing: border-box;
  display: block;
  float: left;
  width: 31.3%;
  margin: 1%;
  padding: .7em 0;
  border-radius: 3px;
  color: white;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}
.btn--twitter{
  background: #55acee;
}
.btn--facebook{
  background: #3b5998;
}
.btn--google{
  background: #dd4b39;
}
.btn--line{
  background: #54bc4d;
}
.btn--hatena{
  background: #008FDE;
}
.btn--pocket{
  background: #ee4056;
}

これで、当サイトで使っているSNSボタンのような表示になると思います。(テーマによって見栄えは少し変わると思います。)

 

記事中の任意の位置にSNSボタンを表示する方法

すべての投稿記事下にシェアボタンを表示させることはできましたね。

でも中には、記事中の任意の場所にもシェアボタンを表示させたい方もいると思います。

私も、ブログ記事のリード文の後にSNSボタンを表示させています。これは先ほどの方法とは違い、ショートコードでシェアボタンを呼び出すようにしています。

 

子テーマのフォルダ内に新たにsns.phpを作成する

まずは、ショートコードで呼び出すファイル「sns.php」を作成します。

子テーマを作った際、「child」というフォルダを作成しました。この「child」フォルダ内に、「sns.php」という名前でファイルを新規作成します。

このファイルに記載する内容は、 子single.phpにSNSボタンを実装するためのコードを追記するで書いたコードと同じでOK。コピペしてください。

 

functions.phpにSNSボタンを呼び出すためのショートコードを指定する

ロリポップ!ユーザー専用ページにログインし、「WEBツール」→「ロリポップ!FTP」に接続します。

あなたのサイトの公開フォルダ名を選択(当サイトの場合はakaeho)→wp-content→themes→selaの中にfunctions.phpがあります。

「functions.php」を開き、以下のコードを追記します。テーマSelaの場合、一番下に書き加える形で大丈夫です。

function sns_original() {
 ob_start(); 
 get_template_part('sns');
 return ob_get_clean();
}
add_shortcode('sns', 'sns_original');

先ほど作ったsns.phpを、ショートコード「sns」で呼び出すためのコードです。

※functions.phpは大変重要なファイルです。記述ミスがあると最悪サイトが表示できなくなります。変更を加える前に必ずバックアップを取るなどの対策をしてください。

☞参考サイトはこちら。とても分かりやすく解説されているので、ご覧になってください。

 

記事中の任意の位置にショートコードを書く

sns.phpの作成とfunctions.phpへの追記が無事に完了したら、あとはシェアボタンを表示させたい場所にショートコードを書くだけです!

ショートコードの書き方はシンプルです。[sns]と書いてください。

※[]は半角に直してください。

まとめ

色々なサイトを参考し、テーマSelaで自作シェアボタンを実装する手順をまとめました。

3行でまとめ!
  • 全ての記事下に表示させたい場合は、single.phpにボタン実装用のコードを追記する
  • cssでボタンの見た目を整える
  • 記事中の任意の表示させたい場合はショートコードを利用する。sns.php作ってボタン実装用のコードを書き、functions.phpにsns.phpを呼び出すためのコードを追記する

 

Selaをお使いの方で、見やすいSNSボタンを記事下や記事中の任意の場所に表示させたい、と言う方はチャレンジしてみてください。

ただし、テンプレートをいじったり、functions.phpという超重要ファイルに変更を加えたりする必要があるので、必ずバックアップなどを取るようにしてから作業に入ってくださいね!

icon-clock-o 2017-11-29 icon-rotate-left  icon-user ちびこママ