サイトマップ

赤ちゃんに絵本はまだ早い?
絵本を、もっと身近に。
無料の絵本で気軽に読み聞かせ。

ワードプレス高速化対策!SNSシェアボタンを自作ボタンで設置する方法

ちびこママです!
icon-twitter Chibiko_mama

ブログのPVを増やすために、SNSのシェアボタンは欠かせませんよね。あなたのブログのシェアボタン、何を使っていますか?

公式ボタンを埋め込んでる?テーマ固有のもの?それともプラグイン?

公式ボタンやプラグインを利用すると、実は読み込みに時間がかかることがあるんです。ページの表示速度って割と重要視されていて、あまりに遅いとユーザーの離脱に繋がるだけでなく、Googleから検索順位を下げられてしまう可能性があるんです!

そんなの困りますよね!(><)

そこで今回は、自作のSNSシェアボタンを設置する方法をシェアしたいと思います。コピペで使えるコードをご紹介しますので、ぜひサイト作りにお役立てくださいね♪

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

まずはじめに、今回設置するシェアボタンの完成形はこんな見た目になります。(テーマによって若干差は出るかと思います)

以前は当サイトでも、このような自作ボタンを設置しておりました。現在はテーマを変更した都合により、自作ボタンは設置していません。ご承知おきください。

 

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

記事を読み終えて、良い記事だったな~と思った時に、ちょうどシェアボタンがあって、しかも押しやすいサイズだったら、ポチッておこうかな?と思いませんか?(笑)SNSボタンが標準装備されているテーマでは、たいてい記事下にボタンがありますよね。

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

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

※テーマによってテンプレートは異なるので、お使いのテーマをご確認ください。

 

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

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

子テーマの作り方は、テーマによってやり方が違うと思いますが、当サイトが使用しているSelaの場合は、以下の記事で作り方の解説をしています。 icon-hand-o-down

WordPressテーマSelaの子テーマを作る手順
当サイトはレンタルサーバーのロリポップを契約し、ワードプレスの「Sela」というテーマを使用して作成しています。 Selaの情報が少ないため、カスタマイズの備忘録として記事にしておきたいと思います。今回はSelaの子テーマを作る手順に...

※当サイトは現在、Cocoonというテーマに変更しております。

 

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

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

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

 

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

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

WordPressでTwitter、Facebook、はてブなどのオリジナルソーシャルシェアボタンを実装するコード│OZPAの表4

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

 

 icon-code ツイッター、Facebook、Google+、はてブ、LINE、Pocket用コード

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

<div class="snsShareArea">

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

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

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

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

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

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

※シェア数のカウントは、わたしのサイトでは必要ないと思い、カウントに関する記述は削除しています。

 

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=your_ID&tw_p=tweetbutton&related=your_ID” target=”_blank”>
Twitter&nbsp;</a>

当サイトのツイッターアカウントは、「あかえほ@akaeho_library」です。この場合、赤字の部分を「akaeho_library」に書き換えます。

 

 icon-lightbulb-o ツイッターで短縮URLをシェアしたい場合

URLに日本語が含まれる場合、SNSでシェアする時には英数記号に変換されて、やたら長いURLになってしまうことがありますよね。

こういうURLは、短縮したい・・・

Jetpackというプラグインを使用している場合、短縮URLを取得できるオプションがあります。ツイッターでのシェア用URLに、Jetpackの短縮URLを使うことができます。

短縮URLを使う場合のツイッター用コードは、以下のように書いてください。

<!-- 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=your_ID&tw_p=tweetbutton&related=your_ID" target="_blank">
 Twitter&nbsp;</a>

※Jetpackの短縮URL機能をオンにしておいてください。

 

 icon-code コードを追記した場所

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

あくまで、テーマSelaの場合なのですが、次のコードの上に追記しました。

<?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(); } ?>

 

 icon-code ツイッター、Facebook、tumblr、Google+、pinterest、Pocket用コード

英語サイトを運営している方は、はてブやラインよりもtumblrやPinterestの方が相性が良い場合もあるかもしれません。

お好みでこちらのコードもどうぞ。

<div class="snsShareArea">

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

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

<!-- tumblr -->
<a class="btn--tumblr" href="http://www.tumblr.com/share/link?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>">
tumblr.&nbsp;</a>

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

<!-- pinterest -->
<a class="btn--pinterest" href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>">
pinterest&nbsp;</a>

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

 

子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;
}
.btn--tumblr{
 background: #36465d;
}
.btn--pinterest{
 background: #c60120;
}

 

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

 

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

すべての投稿記事下にシェアボタンを表示させることはできましたね。でも中には、記事中の任意の場所にもシェアボタンを表示させたい方もいると思います。

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

 

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

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

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

 

このファイルに記載する内容は、

ツイッター、Facebook、Google+、はてブ、LINE、Pocket用のコード

または

ツイッター、Facebook、tumblr、Google+、pinterest、Pocket用コード

です。お好きな方をお好みでコピペしてください。

 

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」で呼び出すためのコードです。

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

 

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

ショートコードを使って投稿本文中の好きなところにテンプレート(~.php)を挿入する方法。│趣深い.com

 

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

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

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

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

まとめ

投稿記事下と、任意の場所に自作のSNSボタンを設置する方法をご紹介しました。

icon-lightbulb-o 3行でまとめるよ!

 icon-check 全ての記事下に表示させたい場合は、single.phpにボタン実装用のコードを追記する

 icon-check cssでボタンの見た目を整える

 icon-check 記事中の任意の表示させたい場合はショートコードを利用する。sns.php作ってボタン実装用のコードを書き、functions.phpにsns.phpを呼び出すためのコードを追記する

 

見た目はとてもシンプルなボタンですが、CSSに詳しい方は、ぜひオリジナルデザインのボタンを作ってみてください♪

カスタマイズが苦手な方は、事前に必ずバックアップなどを取ってから作業に入ってくださいね!

最後までお読みいただきまして、ありがとうございました。