絵本一覧 サイトマップ

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

2017.11.29

ブログのシェアボタン、何を使っていますか？

  • 各SNSの公式ボタン
  • テーマの機能
  • プラグイン

いろんな設置方法がありますね。

公式ボタンやプラグインは、読み込みに時間がかかる場合があります。

ページの表示速度は重要です。あまりに遅いと、ユーザーの離脱に繋がるだけでなく、Googleから検索順位を下げられてしまう可能性が！

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

【2019年3月31日記事修正】以前はGoogle+ボタンを付けていましたが、個人向けGoogle+ページの廃止に伴い、Pinterestボタンに差し替え記事を修正しました。

―　スポンサーリンク　―
―　スポンサーリンク　―

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

今回、設置するシェアボタンの完成形はこちら。

B! Hatena LINE Pocket Pinterest

当サイトでも、記事下にこちらの自作ボタンを設置しています。

※テーマによって若干差は出ると思います。

 

SNSシェアボタンを一番使うのは、おそらく記事を最後まで読んだとき。

記事を読み終えて、良い記事だったな～と思ったときに、ちょうどシェアボタンがあり、押しやすいサイズだったら、つい押したくなりませんか？＾＾

SNSボタンが標準装備されているテーマでは、たいてい記事下にボタンがありますよね。

 

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

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

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

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

ワードプレスでカスタマイズをする場合、「子テーマ」を使います。

子テーマは、簡単にいえば、テーマのファイルのコピー。

親テーマが更新しても、子テーマでカスタマイズした内容が優先されます。

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

「子テーマ」について、こちらの記事でも解説しています

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

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

こちらのサイトを参考に、自分のサイトに合うよう修正しました。

WordPressでTwitter、Facebook、はてブなどのオリジナルソーシャルシェアボタンを実装するコード
WordPressで運営している当ブログの、記事直下にあるTwitter、Facebook、はてブなどのソーシャルシェアボタンをオリジナルデザインに実装しました。コードも紹介しています。
ozpa-h4.com

Twitter・Facebook・はてブ・LINE・Pocket・Pinterest用コード

子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" target="_blank">
Twitter </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 </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 </a>

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

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

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

</div>

※シェア数の表示は、私のサイトでは不要だったため、カウントに関する記述を削除しています。

 

Twitterのコードに関する注意事項

赤字の部分を、ご自身のTwitterのID（＠以下）に書き換えてください。

<!– Twitter / akaeho_library –>
<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” target=”_blank”> Twitter </a>

当サイトのTwitterアカウントは、「あかえほ@akaeho_library」です。

この場合、赤字の部分を「akaeho_library」に書き換えます。



Twitterで短縮URLをシェアしたい場合

URLに日本語があると、Twitterでシェアした際、日本語部分が英数記号に変換されます。

以下のように、やたら長いURLになってしまいます。

https://www.akaeho.net/%E3%81%97%E3%82%8D%E3%83%BB%E3%81%8F%E3%82%8D%E3%83%BB%E3%81%82%E3%81%8B/

Jetpackというプラグインを入れていれば、短縮URLを取得できる機能があります。

WP.me 短縮 URL
短縮 URL (ショートリンク) を使えば、投稿や固定ページへの短いリンクを簡単に取得できます。
jetpack.com

シェア用URLに、Jetpackの短縮URLを使えます。

Twitter用コードは、以下のように書きます。

<!-- 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 </a>
コードを追記した場所

以前は、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(); } ?>

※現在はCocoonというテーマを使用しています。Cocoonには独自のSNSボタンあり。

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

今のままだと、テキストリンクのような見た目となり、ボタンの形状にはなりません。

今度は、子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--line{
  background: #54bc4d;
}
.btn--hatena{
  background: #008FDE;
}
.btn--pocket{
  background: #ee4056;
}
.btn--pinterest{
 background: #c60120;
}

これで、ボタンの形になりました！

シンプルなボタンなので、CSSに詳しい方は、お好みのボタンを作ってみてください♪

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

今度は任意の場所に、ショートコードで、SNSボタンを表示させる方法です。

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

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

子テーマを作った際、「child」というフォルダを作成しました。

「child」フォルダ内に、「sns.php」という名前でファイルを新規作成します。

 

このファイルに記載する内容は、上でご紹介したTwitter・Facebook・はてブ・LINE・Pocket・Pinterest用のコードです。

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

「functions.php」を開き、コードを追記します。

functions.phpの子テーマがある場合は、子テーマを使ってください。

自分で子テーマを作る場合、functions.phpの子テーマはうまく機能しない可能性があり、要注意です。

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

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

WordPress｜functions.phpがある場所はどこ？
WordPressのfunctions.phpがある場所がどこなのかをWordPress管理画面とFTPソフトを使った場合の2通りについてそれぞれ解説します。
takalog.jp
ショートコードを使って投稿本文中の好きなところにテンプレート(～.php)を挿入する方法。
omomukibukai.com
functions.phpは大変重要なファイルです。記述ミスがあると、サイトが表示できなくなります。変更を加える前に、必ずバックアップを取るなどの対策をしてください。

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

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

ショートコードの書き方はシンプル。［sns］と書いてください。

※［］は半角に直してください。

最後に

今回の記事は、ある程度、phpやcssをいじれる向けの記事となりました。

説明も最低限にしているため、この記事を読んで操作に不安がある方は、なるべくテーマ既存のSNSボタンやプラグインを利用してください。

よく分からないまま作業をしてしまうと、最悪の場合、サイトを壊してしまいます。

  • 全ての記事下に表示させるなら、子single.phpにボタン実装用コードを追記
  • css（子テーマのスタイルシート）でボタンの見た目を調整
  • 記事中の任意の表示させたい場合は、ショートコードを利用。sns.php作りボタン実装用のコードをコピペ、functions.phpにsns.phpを呼び出すためのコードを追記する

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

タイトルとURLをコピーしました