【Simplicity】Facebook「いいね!」ウィジェットのデザイン変更

このブログでは無料WordPressテーマ「Simplicity」を使っています。私にとって、このテーマの魅力は、ブログカード表示に対応していることです。

WordPress標準でもブログカード表示ができるようになっているはずなのですが、他のテーマを使うとブログカードがうまく表示できない場合があるからです。

WordPressダッシュボード上で記事を作成しないと、URLを記事に挿入してもブログカード化がなされない場合があるという記事を読んだことがありますが・・・

現在、WordPressの無料テーマとしては、「STINGER8」や「WpTHK」「Luxeritas」なども注目されています。しかし、様々な設定を簡単にできるという点では、「Simplicity」がまだ優れているように思えます。しばらくは「Simplicity」を使うことになりそうです。

今回は、そんな「Simplicity」のカスタマイズに取り組んだので、そのことを記事にしておきます。

スポンサーリンク

Facebook「いいね!」ボックスのデザイン変更

最初に取り組んだのは、全体をフラットなデザインにすることです。作業を重ねていく中で、「Simplicity」導入前に使っていた「STINGER」と同じような感じになっていることに気づきましたが、自分の好みなので仕方がありません。

次に取り組んだのが、Facebook「いいね!」ボックスのデザイン変更です。今回のカスタマイズ作業の中心です。

皆さんもご存知のように、「Simplicity」では、ウィジェットでFacebook「いいね!」ボックスを表示することが簡単にできるようになっています。でも、天邪鬼の私は、プラグインを使ってFacebook「いいね!」ボックスを設置していました。

使っていたプラグインは、VA Social Buzzです。

VA Social Buzz
各記事の一番最後に、あなたがおすすめする任意の Facebook ページへの "いいね ! " ボタン、Facebook や Twitter へのシェアボタンを表示します。
各記事の一番最後に、あなたがおすすめする任意の Facebook ページへのいいねボタン、Facebook へのシェアボタン、Twitter へのツイートボタン、Twitter のフォローボタンを表示します。

このプラグインは、FacebookやTwitterだけなく、Push7 ボタンも表示できます。また、Google Analytics でクリック数を計測することできるスグレモノであることが、使い始めた理由でした。

ところが、使っているうちに、Push7 ボタン表示の黄色が気になってきたのです。この色がPush7カラーなので仕方ないのですが、このプラグインを使ってしまうと、Facebook「いいね!」ボックスの真ん中に黄色の帯が入ったような感じなります。

このボックスでPush7ボタンの表示だけをしないように設定できればいいのですが、有料オプションを購入する必要があったので、別の方法を考えることにしました。

検索してみると、VA Social Buzzの代わりになるようなプラグインもありました。

この記事が気に入ったらいいね
各個別記事のおわりに、Facebook ページヘのいいねのおすすめをします。
スポンサーリンク

single.phpではなくsingle-page.phpコードを追加

そこで、single.phpにコードを追加して表示してみることにしました。以前にも取り組んだことがあるのですが、具体的な方法はすっかり忘れていました。

SimplicityでFacebookページの「いいね!」ボックスを設置する方法 | 部長ナビのページ
こんにちは。部長ナビ(@nabi_1080)です 【関連】部長のFacebook本アカウント(友達限定投稿) Facebookページの「いいね!」は、SNS拡散が必要なWordPressにおいて非常に重要な意味を持つと思っております SimplicityにはデフォルトでFacebookページの「いいね!」のボックスがあ...

検索すると、この記事を見つけました。記事にあるように、single.phpを子テーマに移動し、紹介れているコードをsingle.phpに貼り付ければ、作業完了のはずでした・・・

作業を始めてから、single.phpのコードを確認しても、

という記述は見つけることができないことに気づきました。「Simplicity」コード構成が変更になったためです。紹介されているコードは、single-page.phpに貼り付けることになります。場所は、

の下ということになります。

この作業の結果、無事にFacebook「いいね!」ボックスを表示することができました。もちろん、style.cssの記述追加も必要です。

スポンサーリンク

「Simplicity」のウィジェット機能を使う

なんとかコード追加でFacebook「いいね!」ボックスを表示することができました。このボックスとのバランスを考えながらFacebookとTwitterのシェアボタンの設定をしようと考えたのですが、「Simplicity」の機能を使った方が簡単ではないかと考えました。

そこで、「Simplicity」のFacebook「いいね!」ボックスを表示するウィジェットのデザインを変更して使うことに取り組みました。ウィジェットのデザインを変更すると言っても、ボックスの四隅の丸みを無くした程度です。そのために、style.cssに次のコードを追加しました。

SNSのシェアとフォローボタンも「Simplicity」の標準機能を使って表示することにしました。表示位置についても悩みましたが、Simplicity」は簡単に位置を変更することができます。

先にも書きましたが、しばらくはWordPressテーマ「Simplicity」を使っていくつもりです。WordPressテーマ「Simplicity」は、これからWordPressへの移行を検討している方にもオススメしたい無料テーマです。