サイドバーのSNSフォローボタンをWordPressで実装!カスタマイズ手順まとめ

サイドバーのところにSNSのフォローボタンをまとめて置いている人いるじゃないですか。
ビヨーンって伸縮するボタン。
あれ、格好良いですよね。

元ネタは、はてなブログで実装されていた読者になるボタンやSNSフォローボタンのカスタムCSSです。
自分のブログにも導入しようと試してみましたが、Wordpressでは、はてなブログ特有のアイコン(フォント)を使用しているため、うまく動きません。

でもあの格好良いボタンを使いたい!

シュウ

そこでWordpress向けにカスタマイズしてみました。
最終ゴールとしてはサイドバーにこのボタンを設定できることを目標にします。

カスタマイズ

アイコンを使用できるようにする

細かい説明を書き出すと長くなるので詳細は割愛しますが、じょーじ氏のカスタマイズがWordpressで適用できないのは使っているフォントがはてなブログ用のモノだからです。
なので、Wordpressで使えるアイコンのセットを取り込む必要があります。
今回は、代表的なアイコンフォントである「FontAwesome」というフォントアイコンを使ってみましょう。

注意
テーマの中ですでに「FontAwesome」が取り込まれている場合、本対応は不要です。
本サイトでも使用しているハミングバードもテーマ内で導入済です。
使われているかわからないという方は以降の作業をやってみてうまくいかないときにやってみても良いでしょう。

まずこのコードをコピーして

header.php

コピーしたコードを<head>〜</head>の中に貼り付けます。
よく分からなければ<head>の直前に貼ればOKです。
これでアイコンフォントの使用準備は完了です。

Headタグがどこにあるかと言うとheader.phpの中にあります。
FTPでダウンロードして直接編集するか、
WordPress:[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php] から編集するようにしてください。

CSSの追加

style.cssに以下のコードを追加してください。

style.css

style.cssもFTPでダウンロードして直接編集するか、
WordPress:[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[style.css] から編集してください。

ウィジェットに追加

自分用にカスタマイズ

以下のコードを自分用にカスタマイズしてください。
「 」で囲んでいる部分を変更する必要があります。

ウィジェット

ちなみにボタンは3つか4つぐらいがちょうど良いので自分にとって不要なボタンは外してください。
また、このHTMLの並びがボタンの並びになるので変えたい人は順番を入れ替えてください。

ツイッターIDは『@』を除いたものを貼って下さい。
FacebookとFeedlyは該当するURLをそのまま貼り付けてください。
Instagramは
右上のこのボタンをクリックした後

Instagram001

URLのこの部分を参照してください。

instagram002.jpg

YouTubeのチャンネルIDは[概要]⇒[アカウント情報]⇒[氏名]⇒[詳細設定]をクリックすると表示されます。

ウィジェットに追加

カスタマイズが完了したコードを
[外観]⇒[ウィジェット]から追加します。
テキストを追加してその中にさきほどのカスタマイズしたコードを貼り付けてください。

追加した場所にSNSのフォローボタンが追加されました。

今日のまとめ

うまく設置できたでしょうか。
WordPressでは不要となる、はてなの読者登録ボタンを外した代わりに、InstagramのボタンとYouTubeのボタンを追加してみました。
せっかく色々なSNSがあるので活用していきたいですね。