風の羅針盤 | Destination of winds.

【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法

time 2015/11/06  所要時間:約 3

【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法

このサイトでは、WordPressテーマ「マテリアル」を使用していますが、Facebookのいいねボタンや、Twitterのフォローボタンは右側のサイドバーに標準で搭載されています。

 

これだけでも充分高機能なのですが、せっかく記事の最後まで読んていただいても、その時にちょうど「いいねボタン」「フォローボタン」がサイドバーに表示されているとは限りません。

各記事の最後の部分にボタンが表示されていると、ボタンを押してくれる確率が高くなるかな?と思い調べてみました。

今回、こちらのサイトを参考にさせていただきました。

有名なまなしばさんのサイトです。月間50万PVという私から見たらマンモスサイトですね。
※まなしばさんにはページの引用を快く承諾いただきました。ありがとうございます!

 

single.phpにコードを記述していく

設置手順はほぼまなしばさんのサイトのままでオッケーです。

「マテリアル」では、すでにサイドバーに同様のボタンが実装されているので、bodyタグ直後のスクリプトの記述は不要です。

単一の投稿ページは「single.php」というファイルに記述するのですが、これは標準では子テーマの中に入っていません。

親テーマのファイルにそのまま記述しても構わないのですが、編集はできれば子テーマのほうに行ったほうがベターなので、「single.php」を子テーマにコピーすることから始めます。

手順は、以前の記事にありますので、以下のページを参照してください。

 

子テーマの中に「single.php」をコピーできたら、「外観」-「テーマの編集」と進み、「single.php」を選びます。

いいねボタン1

いいねボタン2

 

場所は、Adsenseのすぐ下の部分にコードを追記します。

色のついていない部分を挿入です。

あとは、「function.php」へのスマホ用の定義の記述と、「style.css」への定義の追加を行います。

「function.php」への記述が行われていないと、ページが最後まで表示されなくなってしまいますので、忘れずに行ってください。

 

さて、この状態でページを表示させてみると・・・

いいねボタン3

きれいに表示されました。

ところが、ここで問題が!!!

 

コメントボックスが途中で切れてしまう場合の対処法

ここでいいねボタンを押すと、ポップアップ画面が表示されるのですが、

いいねボタン4

なんとボックスの右半分が途切れてしまっています。

ここで困ってしまって、色々調べて見たのですが、どうやらメインカラムの外側にはみ出る部分はどうしても表示できませんでした。
※もしかしたら方法があるのかもしれないですけどね・・・

なので、ここは発想の転換で、ひらめきました。

左右を入れ替えればいいのでは??

そうだ、その手があるじゃないか!

いいねボタン5

このように「アイキャッチ画像」と「いいねボックス」を左右入れ替えれば自然です。

早速、「single.php」を下のように変更しました。

PCの部分だけ、サムネイル挿入のタグを後ろにずらしています。

その結果、

いいねボタン6

見事コメントボックスが切れずに表示されるようになりました。

素晴らしい!美しい!!

 

一手間加えるだけで雰囲気が変わるのもWordPressのいいところ

ちょっと一手間加えるだけで、全く雰囲気が異なるページが出来上がるのも、WordPressのいいところですね。

テーマを入れ替えたりするのは大変ですし、かと言ってテーマの雰囲気を壊すような大胆な改造もちょっと、、と思われている方、いかがでしょうか。

あ、せっかくなので、この記事の下にある「いいね」も良かったら押しておいていただけるとchaboの大いなるモチベーションになりますのでよろしくお願い致します!

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

コメント

  • […] 【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法 | 風の羅針盤 | Destination of winds. […]

    by 雑多ブログアクセスアップ戦略の仮説を5つ追加【2016年1月】 | こまろくNOTE €2016年1月30日 1:01 PM

  • […] 【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法http://www.omoide-soko.jp/apps/wordpress/wordpress/1063このサイトでは、WordPressテーマ「マテリアル」を使用して […]

    by 【保存版】「この記事が気に入ったらいいね!しよう」のプラグインの不具合解消方法【WordPress】 | Takuro's Blog €2016年5月12日 10:53 PM

  • 部長ナビさんより、single.phpへFacebookのいいねやfeedly、Push7へのボタンの設置を教えていただきました。
    作ったのはちゃぼPさんと聞いたので、この場でお礼させてください。ありがとうございました!

    by 河本拓郎 €2016年5月27日 12:34 PM

    • わざわざありがとうございます。
      是非ブログ、10万PV目指して頑張ってください!私もまだまだですが(笑)
      今後のご活躍お祈りしております!

      by chabo €2016年5月27日 1:08 PM

  • […] 【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法 | 風の羅針盤 | Destination of winds. このサイトでは、WordPressテーマ「マテリアル」を使用しています […]

    by フォロワー増加のために記事下(CTA)にSNSボタンを追加した検証結果 €2016年10月27日 12:07 PM

down

コメントする




*

この記事の関連カテゴリ

関連記事



スポンサーリンク