WordPress

WordPressのテーマTwenty Fourteenを使っている場合の「Tweet, Like, Google +1 and Share」プラグインについて

WordPressのデフォルトテーマの１つに「Twenty Fourteen」があります。
当ブログでも使っているテーマなのですが、このテーマを使っている際にTwitterやFacebookなどのソーシャルボタンを簡単に設置できるプラグイン「Tweet, Like, Google +1 and Share」を使う際に注意する点があります。
» WordPress › Tweet, Like, Google +1 and Share « WordPress Plugins

※執筆時点でのバージョンは、WordPressがv3.8、プラグインがv1.7.4です

スマホで崩れる

このプラグインの設定で「Size of Icons」というものがあるのですが、この設定を「Small」にすると以下のような表示になります。

■PCサイト表示（Mac+GoogleChrome）
cap20140122

■スマホサイト表示（iPhone5s+Safari）
cap20140122_2

見ていただければわかると思いますが、スマホ表示の場合にボタンの表示が崩れています。
「見た目もだけどクリックしにくそう・・・」と思います。

解決方法

この対応策として一番簡単なのは上記の設定の際に、「Large」を選ぶだけ！
結果的にすごく単純な解決方法になってしまうのですが、シンプルイズベストだと思います！！

■PCサイト表示（Mac+GoogleChrome）
cap20140122_3

■スマホサイト表示（iPhone5s+Safari）
cap20140122_4

自分でCSSを調整すれば解決する部分もあるかもしれませんが、パパっと設置したいという方は上記の対応をすると簡単です。

上記以外にも・・・

他にも「Vertical Scrolling sidebar」というスクロールしてもついてくるソーシャルボタンを付けれる機能がこのプラグインにはあります。
しかし、Twenty Fourteenと一緒に使うときれいに表示されないことがあります。
cap20140122_5
この画像のようにヘッダーの下に潜り込んだり、いいねボタンの右側が少し切れて表示されます。

変更箇所

※下記内容の変更をされる場合は自己責任で行って下さい。

スクロールするとヘッダーの下に潜り込む

「Margin Top」を60（デフォルト20）に変更

Facebookの「いいね」ボタンの右側が少し切れて表示される

※プラグイン本体を変更することになりますので、注意して作業をしてください。
変更前にバックアップを取っておくと安心です。

  1. 「プラグイン⇒インストール済みプラグイン」と進みプラグインの一覧ページを表示
  2. Tweet, Like, Google +1 and Shareの「編集」をクリック
  3. 以下のように変更する（変更箇所は2箇所）

【変更箇所１】
■変更前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function social4i_css() {
echo "<!-- This site is powered by Tweet, Like, Plusone and Share Plugin - http://techxt.com/tweet-like-google-1-and-share-plugin-wordpress/ -->\n";
s4_fb_share_thumb();
if (get_option('s4dmob', false )==true && social4i_check_mobile())return;
wp_enqueue_script('jquery');
echo '<style type="text/css">div.socialicons{float:left;display:block;margin-right: 10px;line-height: 1;}div.socialiconsv{line-height: 1;}div.socialicons p{margin-bottom: 0px !important;margin-top: 0px !important;padding-bottom: 0px !important;padding-top: 0px !important;}div.social4iv{background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #aaa;border-radius: 3px 3px 3px 3px;box-shadow: 3px 3px 3px #DDDDDD;padding: 3px;position: fixed;text-align: center;top: 55px;width: 68px;display:none;}div.socialiconsv{padding-bottom: 5px;}</style>'."\n";
if(get_option('s4optimize',true)==true&&get_option( 's4scripthead', 'head' ) == "head" )
echo s4load_script();
$ccss=get_option('s4ccss','');
$cjscript=get_option('s4cjscript','');
if(trim($cjscript!=''))echo $cjscript;
if(trim($ccss!=''))echo '<style type="text/css">'.$ccss.'</style>';
 
}

■変更後

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function social4i_css() {
echo "<!-- This site is powered by Tweet, Like, Plusone and Share Plugin - http://techxt.com/tweet-like-google-1-and-share-plugin-wordpress/ -->\n";
s4_fb_share_thumb();
if (get_option('s4dmob', false )==true && social4i_check_mobile())return;
wp_enqueue_script('jquery');
echo '<style type="text/css">div.socialicons{float:left;display:block;margin-right: 10px;line-height: 1;}div.socialiconsv{line-height: 1;}div.socialicons p{margin-bottom: 0px !important;margin-top: 0px !important;padding-bottom: 0px !important;padding-top: 0px !important;}div.social4iv{background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #aaa;border-radius: 3px 3px 3px 3px;box-shadow: 3px 3px 3px #DDDDDD;padding: 3px;position: fixed;text-align: center;top: 55px;width: 69px;display:none;}div.socialiconsv{padding-bottom: 5px;}</style>'."\n";
if(get_option('s4optimize',true)==true&&get_option( 's4scripthead', 'head' ) == "head" )
echo s4load_script();
$ccss=get_option('s4ccss','');
$cjscript=get_option('s4cjscript','');
if(trim($cjscript!=''))echo $cjscript;
if(trim($ccss!=''))echo '<style type="text/css">'.$ccss.'</style>';
 
}

【変更箇所２】
■変更前

1
$btnarrver[2]='<div class="socialiconsv s4fblikev" ><iframe src="//www.facebook.com/plugins/like.php?href='.$plink.'&amp;send=false&amp;layout=box_count&amp;width=49&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=65" style="border:none; overflow:hidden; width:49px; height:65px;"></iframe></div>';

■変更後

1
$btnarrver[2]='<div class="socialiconsv s4fblikev" ><iframe src="//www.facebook.com/plugins/like.php?href='.$plink.'&amp;send=false&amp;layout=box_count&amp;width=69&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=65" style="border:none; overflow:hidden; width:69px; height:65px;"></iframe></div>';

変更内容としては、
・ソーシャルボタンのdivのcssを出力する部分でdiv.social4ivの幅を58pxから59pxに変更
・いいねボタンの部分の幅を49pxから69pxに変更
となります。数字の変更以外は行っていません。

【変更箇所１】は出力されるcssを変更しているので、style.cssに

1
div.social4iv{width:69px !important;}

を追記する方法でも対応可能だと思います。
プラグインの設定ページで「Insert Custom CSS」という欄があるので、そこに入力してもいけるかもしれません（未検証）

以上の変更を行うと崩れること無く表示されるようになります。

終わりに

ソーシャルボタンの設置は今や常識とも言えるものですので、手軽に導入できるプラグインは非常にありがたいです。
他にもこのプラグインではいろいろな設定ができますので、興味がある方はゼヒ調べて自分なりのカスタマイズをしてみて下さい。

関連リンク

このプラグインにはてなブックマークのボタンを追加する方法は以下のブログ記事がわかりやすかったです。
» [Web’Notes] ソーシャルボタンを設置するWordPressプラグイン「Tweet, Like, Google +1 and Share」