【Gush2】サイドバーにSNSアイコンを追加 ①画像を作る にて
事前のご注意やアイコン画像についてご確認いただいたら、
次はいよいよPHPファイルを書き換えてボタンを設置していきます。
SNSアイコン追加方法
SNSアイコンの記述があるファイルを確認する
私はテーマ『Gush2』をお借りしているので、サイドバー上部のSNSアイコンの記述が
サイドバー (sidebar.php)ファイルに書かれています。
テーマによっては sns.php だったりするかもしれません。
WordPressの編集画面の『外観』⇒『テーマの編集』から sidebar.php を開きます。
sidebar.php を開く
元からある4つのSNSアイコンの記述がこれ。
[su_box title=”SNSアイコン・元の状態” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<!–アイコン–>
<div class=”side-sns”>
<!– thnx! http://www.iconsdb.com/ –>
<ul>
<li><a href=”https://twitter.com/” target=”_blank”><i class=”fa fa-twitter”></i>
</a></li>
<li><a href=”https://www.facebook.com/” target=”_blank”><i class=”fa fa-facebook”></i>
</a></li>
<li><a href=”https://www.google.com/” target=”_blank”><i class=”fa fa-google-plus”></i>
</a></li>
<li><a href=”<?php echo home_url();?>/feed/” target=”_blank”><i class=”fa fa-rss”></i>
</a></li>
</ul>
</div>[/su_box]
ちなみにサイドバー内の新着記事の配置などもここで変更することができます。
記述を追加する
先ほど作ったアイコン画像や動作の記述を追加していきます。
※これはこのブログ用の記述になっているので、
画像やSNSのURLは書き換えていただく必要があります。
[su_box title=”SNSボタンの追加” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<!–ポケットボタン用のURLとタイトル取得PHP–>
<?php
$url_encode=urlencode(get_permalink());//記事のURL取得
$title=wp_title( ”, false, ‘right’ ).’｜’.get_bloginfo(‘name’);//記事タイトル取得
$title_encode=urlencode($title);//記事タイトルをエンコード
?>
<!–アイコン–>
<div class=”side-sns”>
<!– thnx! http://www.iconsdb.com/ –>
<ul>
<!– ツイッター –>
<li><a href=”https://twitter.com/share” data-via=”pc_nsystem” data-lang=”ja” data-count=”none” target=”_blank”><i class=”fa fa-twitter”></i></a></li>
<!– フェイスブック –>
<li><a href=”https://www.facebook.com/pcpier.nsystem” target=”_blank”><i class=”fa fa-facebook”></i></a></li>
<!– グーグル+1 –>
<li><a href=”https://plus.google.com/+Pc-pier/” target=”_blank”><i class=”fa fa-google-plus”></i></a></li>
<!– RSS –>
<li><a href=”<?php echo home_url();?>/feed/” target=”_blank”><i class=”fa fa-rss”></i></a></li>
<!– yahooブックマーク –>
<li><a href=”javascript:void window.open(‘http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=’+encodeURIComponent(document.title)+’&u=’+encodeURIComponent(location.href)+’&ei=UTF-8′,’_blank’,’width=550,height=480,left=100,top=50,scrollbars=1,resizable=1′,0);” title=”この記事をYahoo!ブックマークに追加”><img src=”http://pc-pier.com/image/icon1/yahoobotton6.png” alt=”Yahoo!ブックマーク” style=”border:none;”></a></li>
<!– はてなブックマーク –>
<li><a href=”http://b.hatena.ne.jp/entry/https://pc-pier.com/blog/” class=”hatena-bookmark-button” data-hatena-bookmark-title=”PC修理のエヌシステムBLOG” data-hatena-bookmark-layout=”simple” title=”この記事をはてなブックマークに追加” target=”_blank”><img src=”http://pc-pier.com/image/icon1/hatenabotton7.png” alt=”このエントリーをはてなブックマークに追加” style=”border: none;”></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script></li>
<!– ポケット –>
<li><a href=”http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>” target=”_blank” title=”この記事をポケットに追加”><img src=”http://pc-pier.com/image/icon1/pocketbotton.png” style=”border:none;”>
<?php if(function_exists(‘scc_get_share_pocket’)) echo (scc_get_share_pocket()==0)?”:scc_get_share_pocket(); ?>
</a></li>
</ul>
</div>[/su_box]
各SNSごとの記述の解説
上で記述した内容の中で、変更が必要な箇所などをご説明します。
Twitterボタン
data-via=”○○”
ここにはご自分のTwitterのアカウント名を入れてください。
＠マークは不要です。
これを記述すると、記事について呟いてもらう時にアカウント名も表示されます。
アカウント名は入れてもらわなくてもいいや、という方はこの項目自体を削除してください。
Facebookボタン
https://www.facebook.com/○○
URLの末尾に自分のFacebookアカウントを入れてください。
Google+1 ボタン
https://plus.google.com/u/0/b/○○/
末尾にGoogle+のID番号かユーザー名を記述してください。
例えば私の場合は番号なら 『 108300832343634235845 』 、ユーザー名なら 『 +Pc-pier 』 となります。
ユーザー名を使ったカスタムURLを取得するにはいくつかの条件を満たしている必要があります。
詳しくはGoogle 『 Google+ プロフィールのカスタム URL を取得する 』 をご覧ください。
RSSフィードボタン
RSSフィードのボタンについては特に記述を変更する必要は無いかと思います。
RSSの表示件数や抜粋についての設定は、WordPress編集画面の【 設定 】⇒【 表示設定 】から変更できます。
表示させる件数はお好みで。
全文表示にしていると、わざわざサイトに行かなくても良いや、と思われてしまうかもしれないので
サイトに足を運んでもらえるように 『 抜粋のみを表示 』 を選択しておきましょう。
Yahoo!ブックマーク
img src=”画像のURL”
アイコン用に作った画像のURLに書き換えてください。
はてなブックマーク
http://b.hatena.ne.jp/entry/http://ブログのURL
data-hatena-bookmark-title=”ブログタイトル”
ご自分のブログのURLとタイトルに書き換えてください。
ちなみに個別記事の登録ボタンにしたい場合はPocketボタンの記述を参考に書き換えてください。
img src=”アイコン画像のURL”
アイコン用に作った画像のURLに書き換えてください。
Pocketボタン
img src=”画像のURL”
アイコン用に作った画像のURLに書き換えてください。
私はPocketボタンのURLを個別記事を登録してもらえるように書き換えていますが、
このように書き換えればトップページを登録してもらうことができます。
[su_note]<a href=”http://getpocket.com/edit?url=ブログTOPのURL&title=ブログのタイトル”>[/su_note]
各SNSの特徴
ここで設置しているSNSアイコン、それぞれのSNSの特徴や設置する意味についてご説明します。
記事を見てくれた誰かが『この記事おもしろいよー』と呟くと
またそれを見た誰かが記事を読みに来てくれるかもしれません。
別に訪問者が増えなくてもいい、ひっそりやっていたい、という方には不要ですが、
大体のブログ運営者さんは訪問者さんがいっぱい来てくれた方がうれしいと思うので
是非Twitterボタンは設置しておきましょう。
SNS関連のアイコンは出来るだけ減らしてシンプルにしたいという方も、
Twitterボタンだけは置いておいた方が良いかと思います。
Facebookで記事をシェアしてもらうためのボタンです。
サイドバーのボタンはシェアで、メイン下部のボタンははいいね！ボタンです。
シェアといいね！は違うものなので注意が必要。
『いいね！』は普通のブログにおける拍手ボタン的もので、その記事に対してのお褒めの合図のようなものです。
それに対して『シェア』は 「 この記事オススメだよー！ 」 とシェアしたひとが
自分のFacebookに投稿するものです。
シェアしたひとのタイムラインに投稿として残りますし、更に繋がっている人たちが
そのシェア投稿を見て記事を見に来てくれるかもしれません。
Facebookは日本ではちょっと下火になりつつありますが、
活用していらっしゃる方も多いので設置しておくに越したことはないでしょう。
Google+1
Google+1も普通のブログにおける拍手のようなものですが、
決定的に違うところは『Google+1の数をGoogleさんが検索アルゴリズムに加味する』という点です。
Googleでキーワード検索された時に、自分のブログが引っかかって尚且つ上位に表示されるといいなあ、と
考えている場合は、SEO対策の一環としても設置しておくことをオススメします。
Facebookのいいね！と同じく、ただ押してもらっただけでも嬉しいですしね。
RSS
サイトやブログにあるRSSボタンは、正確にはRSSフィードを購読するボタンです。
購読、とは言っても勿論無料です。
RSSとは、そのサイト（ページ）のタイトル、更新日、本文内容の要約などのMetaデータのことです。
例えばこの記事なら、タイトルは『【Gush2】 サイドバーにSNSアイコンを追加 』で
内容の要約は『 WordPressでサイドバー内にお好みの画像でSNSアイコンを追加する方法をご説明しています。PHPファイルの記述や各SNSボタンの役割などもご紹介。』といった感じになっています。
RSSフィードとは、RSSデータを提供すること。
このボタンを押すと、RSSフィードを登録してブックマークの中で確認できるようになります。
つまり、訪問者のひとがいちいちブログに足を運ばなくても、更新情報をささっと確認できるようになります。
試しにこのブログを登録してみるとこんな感じ。
私がRSSの設定とプラグインの設定で【 5件まで表示、内容の要約は省く 】状態にしているので、
それに合わせた表示になっていますね。
更新を楽しみにしているサイトがある方は、是非このRSSボタンを押して更新情報を活用してくださいね。
逆にブログ運営側からすれば、こうして更新情報をチェックして
記事を見に来てくださる方がいるというのはとても有り難いことです。
リピーターの方に対する使い勝手を良くするために設定しておくといいボタンです。
Yahoo!ブックマーク
Yahoo!が提供している無料サービスのひとつで、Yahoo! JAPAN IDを持っていれば使えます。
通常は自分のブラウザ（Internet Explorer、Firefox、Chrome、Safariなど）に登録して
パソコンの中に保存されているブックマーク（お気に入りサイト）を、
Web上（Yahoo!サーバー内）に保存するものです。
Web上のブックマークを使うメリットとしては、万が一にパソコンやスマホが壊れてしまっても
ブックマークのデータがWeb上に残っているというのが大きいと思います。
Yahoo! JAPAN ID さえ覚えていれば、また新しい機器ですぐにブックマークを開くことができます。
さらに、どの機器であっても同じYahoo! JAPAN ID でログインすれば同じように使えるので、
「 お気に入り登録したのは家のパソコンか・・・スマホでまたイチから探さないと 」
「 仕事とプライベートのパソコンのどっちにブックマークしたか分からない 」 というような
不便を感じることなくブックマークを開くことがきます。
デメリットとしては、きちんとIDとパスワードを管理していないと
誰かにブックマークのデータを見られてしまうかも、ということでしょうか。
あとは万が一にセキュリティを突破されるとブックマークデータが盗まれたりとか。
これはクラウドサービスを使う際に共通の注意点なので
Googleが提供するクラウド形態のサービスをご覧ください。
また、Yahoo!ブックマークの登録数が増えると、Yahoo!検索の結果に加味されるとか。
残念ながら私はそこまでたくさんのブックマークをいただいたことがないので
どのくらい反映されるものか分からないのですが (*´・ω・；ゞ
少しでもブックマークしていただけるような役立つ記事を書きたいものですね。
はてなブックマーク
上のYahoo!ブックマークと同じく、Web上でお気に入りサイトを登録できる無料サービスです。
しかしYahoo!ブックマークと異なるのが、ブックマークの公開・非公開を選択することができる点です。
自分用のブックマークとして使うも良し、情報を共有してお気に入りサイトを紹介するも良し、
ということでYahoo!ブックマークよりも使用者が多いため、
出来るだけSNSボタンの設置を少なくしたい方はYahoo!ブックマークボタンを省いて、
はてなブックマークのみ設置するのも良いと思います。
たくさんブックマークされている人気の記事を見ることもできるので、
面白い記事を探すアンテナサイトとしても役立つと思います。
Pocket（ポケット）
Pocketとは、Googleが提供している 『 気になる記事を後で読む 』 ための無料サービスです。
Googleアカウントを持っていればそのままログインして使えますし、
Googleアカウントを登録していなくても、メールアドレス登録で使用することができます。
Pocket公式ページ
iPhone用アプリ
Android用アプリ
PocketはWebブックマークとは異なり、ページのデータをダウンロード保存しているので
ネット接続が切れている（電波が無い）状態でも読むことができますし、
もしその大元のページが削除されてしまっても保存されたページは残ります。
Evernote（エバーノート）の簡易版のようなサービスですね。
・今は時間が無いからとりあえず登録しておいて後でゆっくり読む
・登録しておいたページを病院や銀行の待ち時間、移動中の時間にスマホ、iPadで読む
・スマホでは見づらいページを登録しておいてパソコンで改めて見る
といったように様々な使い方ができます。
Pocketボタンを押してもらうと、ログインもしくは新規登録画面になり、
既にログイン中の方はそのままページ登録が行われます。
