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

2015年8月5日カテゴリー : WordPress コメント : 0

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

20150805_1

一番簡単な設置方法

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

Twitterボタン | About

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

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

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

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

20150805_5

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

20150805_6

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

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

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

20150805_7

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

Icons DB – free custom icons

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

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

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

https://twitter.com/intent/follow?screen_name=○○○

1	https://twitter.com/intent/follow?screen_name=○○○

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

https://twitter.com/intent/follow?screen_name=naokix03199

1	https://twitter.com/intent/follow?screen_name=naokix03199

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

<a href="https://twitter.com/intent/follow?screen_name=○○○" target="_blank">
    （Twitter アイコンの img タグ）
</a>

（Twitter アイコンの img タグ）

</a>

RSS ボタンを設置する

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

　当ブログの RSS の URL は、

https://naokixtechnology.net/feed

1	https://naokixtechnology.net/feed

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

<a href="https://naokixtechnology.net/feed" target="_blank">
    （RSS アイコンの img タグ）
</a>

（RSS アイコンの img タグ）

</a>

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

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

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

feedly. your news. delivered.

20150805_9

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

20150805_10

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

20150805_11

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

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

20150805_12

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

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

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fnaokixtechnology.net%2Ffeed'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-square-volume_2x.png' alt='follow us in feedly' width='28' height='28'></a>

1	<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fnaokixtechnology.net%2Ffeed' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-square-volume_2x.png' alt='follow us in feedly' width='28' height='28'></a>

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

メールボタンを設置する

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

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

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

<div class="follow">
<ul>
    <li>（Twitter の画像＆リンク）</li>
    <li>（RSS の画像＆リンク）</li>
    <li>（feedly の画像＆リンク）</li>
    <li>（メールの画像＆リンク）</li>
</ul>
</div>

<ul>

<li>（Twitter の画像＆リンク）</li>

<li>（feedly の画像＆リンク）</li>

<li>（メールの画像＆リンク）</li>

</ul>

</div>

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

<!-- sidebar -->
<div id="sidebar">
<DIV class="follow" id="follow">
<UL>
    <LI>
        <a href="https://twitter.com/intent/follow?screen_name=naokix03199" target="_blank">
            <img src="https://naokixtechnology.net/wordpress/wp-content/uploads/2015/08/twitter-.png" alt="twitter" width="48" height="48" class="alignnone size-full wp-image-601" />
        </a>
    </LI>
    <LI>
        <a href="https://naokixtechnology.net/feed" target="_blank">
            <img src="https://naokixtechnology.net/wordpress/wp-content/uploads/2015/08/rss.png" alt="rss" width="48" height="48" class="alignnone size-full wp-image-600" />
        </a>
    </LI>
    <LI>
        <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fnaokixtechnology.net%2Ffeed'  target='blank'>
            <img src="https://naokixtechnology.net/wordpress/wp-content/uploads/2015/08/feedly.png" alt="feedly" width="48" height="48" class="alignnone size-full wp-image-598" />
        </a>
    </LI>
    <LI>
        <a href="https://naokixtechnology.net/mail">
            <img src="https://naokixtechnology.net/wordpress/wp-content/uploads/2015/08/mail.png" alt="mail" width="48" height="48" class="alignnone size-full wp-image-599" />
        </a>
    </LI>
</UL>
</DIV>

<?php if (is_active_sidebar('sidebar-1')) : 
    dynamic_sidebar('sidebar-1');
else: ?>
    <div class="widget">
        <h2>No Widget</h2>
        <p>ウィジットは設定されていません。</p>
    </div>
<?php
endif;
?>    
</div>
<!-- /sidebar -->

<UL>

<LI>

</a>

</LI>

<LI>

</a>

</LI>

<LI>

</a>

</LI>

<LI>

</a>

</LI>

</UL>

</DIV>

<?php if (is_active_sidebar('sidebar-1')) :

dynamic_sidebar('sidebar-1');

else: ?>

<h2>No Widget</h2>

<p>ウィジットは設定されていません。</p>

</div>

<?php

endif;

</div>

この段階で表示すると、

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

CSS のカスタマイズ

.follow li {
    float: left;
    list-style: none;
    margin-right: 5px;
}

.follow li {

float: left;

list-style: none;

margin-right: 5px;

}

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

.follow {
    margin-bottom: 10px;
}

.follow {

margin-bottom: 10px;

}

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

20150805_15