こんにちは！だちたまです。
WordPressでは、SNSのシェアボタンをプラグイン使って設置することができますが、自分の好みのデザインに出会う確率は低いです。
それに、プラグインを使っているとブログ表示が重くなってしまう場合があります。
そこで、今回はSNSのシェアボタンを、プラグインなしでカスタマイズしてみました。
今回作成したのは、「Twitter」「Facebook」「はてなブックマーク」「Google+」「Pocket」のシェアボタンです。作成方法について書いていきたいと思います。
- カスタマイズは自己責任でお願いします。
- CSSのカスタマイズは子テーマを用意すると良いです。
- カスタマイズ前にはバックアップをおすすめします。
- コードを記入しても、環境によってうまく反映されない場合があるかもしれませんが、ご了承ください。
- 「Google+」は2019年4 月にサービスが終了していますので、「Google+」のシェアボタンを自作するコードを削除しました。一部写真が古いままですが、ご了承ください。
Contents
SNSシェア用のリンク先URLの考え方
基礎知識として、各SNSのシェア用のリンク先は以下のURLとなっています。
これらを使ってソースコードを作成していきます。
- Twitter
https://twitter.com/intent/tweet?text=【投稿エリアに初期表示したい文字】&url=【シェアする記事のURL】 - FaceBook
https://www.facebook.com/sharer.php?src=bm&u=【シェアする記事のURL】&t=【投稿エリアに初期表示したい文字】 - はてなブックマーク
https://b.hatena.ne.jp/add?mode=confirm&url=【シェアする記事のURL】&title=【シェアする記事のタイトル】 - Pocket
https://getpocket.com/edit?url=【シェアする記事のURL】
SNSシェアボタンを設定したファイルを作成する
では、上記のURLを使いつつ、シェアボタンを設定したphpファイルを作成していきましょう。
ファイル名は何でも良いですが、私の場合は便宜上「sns-share.php」としました。
ファイルの内容は以下のとおりです。コピペでOKですよ♪
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="button-area"> <div class="button-area-title">この記事をシェアする</div> <ul> <!--Twitter--> <li class="twitter"> <a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterで共有"> <i class="fa fa-twitter"></i> </a> </li> <!--FaceBook--> <li class="facebook"> <a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(get_the_title()); ?>" target="_blank" title="Facebookで共有"> <i class="fa fa-facebook"></i> </a> </li> <!--はてなブックマーク--> <li class="hatena"> <a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(get_the_title()); ?>" target="_blank" title="はてなブックマークに追加"> <i class="fa fa-hatena"></i> </a> </li> <!--Poket--> <li class="pocket"> <a href="https://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="pocketで共有"> <i class="fa fa-get-pocket"></i> </a> </li> </ul> </div> |
なお、各SNSのアイコンの表示には、「FontAwesome」のWebフォントを使用しています。
ただし、はてなブックマークだけFontAwesomeのWebフォントが用意されていないので、自作しています。これについては後述しますね。
導入の仕方は、以下のリンクから「Font Awesome 4 Menusの使い方」の【１】をご覧ください。
インストールして「有効化」しておくと、記事中にショートコードを入力するだけで「FontAwesome」のWebフォントを表示できるようになります。
SNSシェアボタンを設定したファイルを配置する
作成した「sns-share.php」ファイルを以下のフォルダに格納します。あらかじめ子テーマを作成しておくと良いです。
sns-shar.phpの格納フォルダ
public_html/wp-content/themes/子テーマ
シェアボタンを表示する
それでは、作成した「sns-share.php」を記事に呼び出すことで、シェアボタンを表示してみましょう。
表示したい場所に以下のコードを追加すると、シェアボタンを表示することができます。
|
1 |
get_template_part( 'sns-share' ); |
私の場合は、ブログ記事を書き終わった後にシェアボタンを表示することにしました。
私のカスタマイズした時のテーマは「Twenty Seventeen」でしたが、このテーマでは「content.php」内にコードを追加することで、上手く表示されました。
content.phpの格納フォルダ
public_html/wp-content/themes/子テーマ/template-parts/post
なお、コードを追加した場所は以下の場所です。
ここまでで、ブログ記事に以下の様にシェアボタンの原型が表示されるようになりました。
画像を見るとはてなブックマークのみ表示されていませんが、ここからCSSデザインすることで表示されるようになりますので、ご安心ください。
では、ボタンのデザインを整えていきましょう。
「Google+」は2019年4 月にサービスが終了していますので、「Google+」のシェアボタンを自作するコードを削除しました。一部写真が古いままですが、ご了承ください。
SNSシェアボタンをデザインする
デザインの修正は、「style.css」を修正していきます。以下のコードを追加してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
/* はてなブックマークアイコン作成 */ .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold } /* シェアボタンを表示する箇所位置調整 */ .button-area { text-align: center; margin-bottom:2em; } /* タイトル表示設定 */ .button-area-title { text-align: center; padding:1em; } /* SNSシェアボタンの共通設定 */ .button-area li a { font-size: 16px; padding: 8px; display: block; text-align: center; text-decoration: none; color: #fff; border-radius: 4px; /* 丸み調整 */ box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); /* シャドー作成 */ } /* SNSごとの背景色 */ .twitter a { background-color: #55acee; } .facebook a{ background-color: #3b5998; } .hatena a{ background-color: #008fde; } .pocket a{ background-color: #ea5a6c; } /* リスト「・」の削除 */ .button-area ul { margin: 0; padding: 0; list-style: none; } /* ボタンの幅と余白を設定 */ .button-area li { float: left; width: 24%; margin: 0 0.5%; } .button-area ul:after { display: block; clear: both; content: ''; } /* ボタンにカーソルを合わせた時の表示設定 */ .button-area li a:hover { -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); box-shadow: none; } |
- １行目から６行目で「はてなブックマーク」のアイコンを自作しています。公式のアイコンに近いフォントを太字にして使用しています。
- 20行目から30行目では、シェアボタンの共通の表示設定を行っています。少し丸みを持たせて、影を表示するようにしました。
- 53行目から58行目では、ボタンの表示幅と余白を設定しています。レスポンシブデザインにしており、ブラウザの幅を狭くするとボタンの幅も狭くなるようになっています。
- 67行目から72行目では、カーソルをシェアボタンに重ねた時、ボタンを押すような動作にしました。
【WordPress】SNSシェアボタンの完成
これまでの対応で、このようにブログ記事にSNSのシェアボタンを表示することができました。
SNSのシェアボタンを作ってみたい方は参考にしてみてくださいね。
