WordPressのサイドバーにTwitterのフォローボタンを設置してみた

 当ブログのサイドバーに Twitter のフォローボタンを設置しました。そのときに調べたことをまとめたいと思います。プラグインは使わないので、WordPress の速度的に優しい仕上がりとなっております。Twitter のアカウントは前もって取得しておいてください。一緒に feedly のフォローボタンも設置したいと思います。

20150805_1

一番簡単な設置方法

 一番簡単なのは公式サイトの HTML をサイドバーウィジェットの「テキスト」に貼り付ける方法です。まずは公式サイトにいきまして、

Twitterボタン | About

ラジオボタンの「フォローする」にチェックを入れます。

20150805_2

自分の Twitter アカウントを入力し、「言語設定」を「日本語」にし、赤枠の部分の HTML をコピーしておいてください。

20150805_3

 WordPress の管理画面で「外観」→「ウィジェット」に移動します。ウィジェットの「テキスト」をドラッグ&ドロップでサイドバーに登録し、

20150805_4

先ほど Twitter の公式ページでコピーした HTML をペーストし、「保存」ボタンを押してください。

20150805_5

サイドバーにお馴染みの Twitter のフォローボタンが表示されます。

20150805_6

Twitterのフォローボタンのカスタマイズ

 「WordPress のテーマとの整合性を保ちたい」とか、「もっとかわいいアイコンを使いたい」となった場合、独自のフォローボタンを設置することができます。そんなに難しくないです。

 まずは、無料で使える Twitter アイコンを探してダウンロードしておき、それを WordPress 管理画面の「メディア」からアップロードしておきます。

20150805_7

Google などで「twitter アイコン 無料」などで検索するとたくさんでてきますので、お好きなものをご利用ください。オシャレなアイコンがそろっているサイトもたくさんあるので、いろいろ探してみてください。

Icons DB – free custom icons

 投稿の新規追加画面に移動してください。「メディアを追加」ボタンで WordPress にアップロードした Twitter アイコンの画像タグを挿入します。

20150805_8

img タグをコピーしたら保存せず閉じて構いません。

 次に、フォローボタン用のリンクを作成します。

「○○○」の部分には Twitter のユーザー名をいれます。@から後ろの部分です。例えば、当ブログの場合、アカウントが「@naokix03199」なので、

となります。この URL を a タグにし、先ほどの img タグを囲んでやればよいです。

RSS ボタンを設置する

 Twitter のフォローボタンだけだとなんだか寂しそうなので、RSS のボタンも設置してみました。メニューにも RSS があるので、あまり意味はないと思いますが。Twitter のフォローボタン同様、RSS 用のアイコンを前もって WordPress にアップロードしておいてください。

 当ブログの RSS の URL は、

なので、このアドレスで a タグを作り、用意した画像を img タグにして a タグで囲むだけです。

新しいウィンドウ・タブで開く設定にしてあります。ページ離脱者が減って、SEO 的にも良いらしいですよ。

feedly のフォローボタンを設置する

 勢いに乗って、feedly のフォローボタンも設置します。まずは公式ページの「Feedly button」ページへ移動してください。

feedly. your news. delivered.

20150805_9

Step.1で好きなボタンデザインを決めます。

20150805_10

当ブログでは、角の丸いボタンを使いました。

20150805_11

Step.3のこの部分で目的のアイコンが選択されているか、確認してください。

 次に、自分のブログのフィード(RSS)のURLを入力します。

20150805_12

貼り付けた後にエンターキーを押すと、

20150805_13

feedly をフォローするための HTML が出力されるので、これをメモ帳などにコピーしておきます。当ブログのフィードから出力されたものがこちら。

「width」と「height」をお好みの大きさに調整してください。当ブログでは 48 X 48 ピクセルにしております。

メールボタンを設置する

 RSS ボタンとほとんど同じなので、説明を省略。

sidebar.php をカスタマイズする

 sidebar.php をカスタマイズします。

ul と li を使って各アイコン画像をリスト表示にしています。お使いのテーマによって違うと思いますが、当ブログではウィジェットを表示するソースの前に記述しました。一応、sidebar.php の全文を晒しておきます。参考になりますかね?

この段階で表示すると、

20150805_14

当然こうなりますので、ここからスタイルシートをカスタマイズしていきたいと思います。

CSS のカスタマイズ

「float: left;」で左から順番に並べて、「list-style: none;」で ●(黒丸)を消しています。

下の検索窓との距離が近いので、margin-bottom を設定したのですが、動作していません。これは、以前のエントリー「WordPressのテーマ自作初心者がメニューを設置してみる | Naokix.net」でも述べましたが、float によって親要素の高さが出ないために起こるものです。Google Chrome の「要素を検証」でも、親要素の高さが無いことが確認できます。

20150805_15

解決策は簡単です。

float を設定している li の親要素 ul に「overflow: hidden;」を設定するだけです。

20150805_16

これで margin-bottom の設定が反映されるようになります。

最後に

 アイコン画像を用意し、画像にリンクを貼ってあげれば、Twitter のフォローボタンをカスタマイズすることは、それ程難しいものではありません。テーマの雰囲気にあった画像でカスタマイズしてみてください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP