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

WordPressのデフォルトテーマの1つに「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】
■変更前

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>';

}

■変更後

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>';

}

【変更箇所2】
■変更前

$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>';

■変更後

$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に変更
となります。数字の変更以外は行っていません。

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

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

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

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

終わりに

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

関連リンク

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

jquery-1.10.2.min.mapが404 Not Found

fuelphpを使っていて謎のエラーが出ていたのを解決したので同じ問題を持った人のために記事にします。

そのエラーはjquery-1.10.2.min.mapが404 Not Foundというエラーでした。
そんなファイルを読み込んだ覚えもないし。。。と思いjsを読み込んでいる部分をのぞいてもそれっぽいのがない!

jqueryがらみなのは間違いなさそうだったので/assets/js/jquery.jsを確認すると、一番はじめに次のようなコメントが書かれていました。

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.2.min.map
*/

ん〜ソースマップのURLが書かれてますね。。。

原因はこれなので、サクッと1行削除して

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
*/

とするとエラーは消えます。
もしjquery.jsの変更をしたくない場合は、jquery-1.10.2.min.mapをjquery.jsと同じフォルダに置いてあげるとOKです。

上記の例の場合は以下のリンク先のファイルを配置することでエラーが無くなりました。
» jquery-1.10.2.min.map

上記のようにソースマップを同じ場所に置くことで解消されますが、ソースマップに対応したブラウザだとソースマップのファイルを読み込むために1リクエスト余計なアクセスが増えることになります。
「1行消す」か「ソースマップを配置する」かはお好みに応じて対処してください。

補足

このソースマップのURLの記述はどうやらjQuery1.9から追加されたようです。
ソースマップについて詳しく知りたい方や、ソースマップ対応されていることでどんなメリットがあるかについては、以下のURLにわかりやすい説明があります。
» [てっく煮ブログ]jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話

ちなみに、現在ソースマップに対応しているブラウザはGoogleChromeのみのようです。
Firefoxも対応してきているようですが、まだ不十分のようです。
以下の記事にそのことが書かれてました。
» [terurouメモ] Firefox 23でSource Mapsが実装されたみたいだけど、まだちゃんと動いてない?

今回の私のケースはfuelphpでしたが少し古いwordpressを使っている場合にも同様のエラーが出るケースがあったようです。
» [設定やツールとか]WordPress 3.6でjquery-1.10.2.min.mapのエラー

WordPress 3.6だと、jquery-1.10.2.min.mapのエラーが出る。原因はWordPressで使っているjquery.jsのヘッダー記述の問題。
WordPress 3.6.1でこのバグが修正された。3.6.1以降を使っていればこの問題はおきない。

とのことです。

同様のエラーが出た人の参考になれば幸いです。