投稿本文下ウィジェットエリアを追加するカスタマイズ

Photo by Erin Simmons on Unsplash

最近よく使うテーマにLightningがあります。Lightningを使っている方から「投稿本文の一番下に毎回同じ文言を入れたい」というお話を聞きました。このブログで使っているSimplicityというテーマには投稿本文下ウィジェットエリアがあるのですが、Simplicity以外のテーマだとあまり見かけない気がしました。投稿本文下ウィジェットエリアは便利なので、カスタマイズして追加してみました。

投稿本文下ウィジェットエリアとは?

投稿本文下ウィジェットエリアとは 投稿の下に表示されるウィジェットエリア です。

テーマSimplicityのウィジェットを見ると

このように投稿に関するウィジェットエリアがたくさんあります。アフィリエイトをする方にSimplicityを使ってる方が多いのもこのウィジェットエリアの多さをみるとうなずけます。

Lightningのウィジェットエリアを見てみると

このように 投稿の下に表示するウィジェットエリア はなさそうです。他のテーマも見てみたのですが、見た中では投稿の下に表示するウィジェットエリアがあるテーマはみつかりませんでした。Simplicityにウィジェットがとても多いということのようです。

Lightningで投稿本文下ウィジェットエリアを追加してみる

ということでLightning投稿本文下のウィジェットエリアを追加してみようと思います。

追加して思ったのですが、この方法だとLightningだけでなくどのテーマでもウィジェットエリアが追加できそうです。ただ、ウィジェットエリアのhtmlやcssをテーマに合わせているのでそのあたりはちょっと工夫が必要かもです。この記事の下の方で他のテーマでも試してみました!

functions.phpをいじるので、もしこのブログを参考にされる方は以下の記事をご覧になり十分に注意をして行ってください。

このゆうそうとブログでは今まで自分が行ったいろいろなカスタマイズについて書いてきました。ブログはだいぶ前から書いているので「当時の環境と...

子テーマのfunctions.phpにウィジェットエリアを追加するコードを記述する

子テーマのfunctions.phpにウィジェットエリアを追加するコードを記述します。

このコードを追加しました。before_widgetafter_widgetはLightningでのウィジェットの記述に合わせてみました。

ダッシュボード 外観>ウィジェット を見るとこのように投稿本文下ウィジェットエリアが追加されていることがわかります。

投稿本文下ウィジェットを投稿の下に表示するコードを書く

ここで今まででしたら各テーマごとの投稿を表示するテンプレートにウィジェットエリアを表示するコードを書いていたのですが、今回試してみたところうまく表示されませんでした。

というのもLightningで推奨されているVkExUnitというプラグインを入れてSNSボタンなどを表示させていると、本文を表示させる部分の the_content に、SNSボタンなどの表示も入った状態で返ってきてしまうからです。LightningとVkExUnitの組み合わせだけでなく、このようになる可能性は他のテーマやプラグインなどの組み合わせの場合もあるような気がしました。

ということは the_content にウィジェットエリアで指定されたコンテンツを追加して、なおかつ他のデータよりも優先度を高く(投稿本文の直下)表示したい、と思います。その方法について検索をしてみたところ、

WordPress 記事の上下に ウィジェットエリア を追加する方法

こちらの記事を見つけました。優先度については方法を見つけていたのですが、the_contentに直接追加する方法がこちらに書いてありましたので参考にさせていただきました。

子テーマのfunctions.php

このコードを追加しました。add_filter でパラメータ 0 を追加して優先度を一番高くしてあります。他はほぼ参考にさせていただいたサイトの通りです。

これで表示する部分が完成しました。

投稿本文下ウィジェットエリアを使って表示してみる

追加した投稿本文下ウィジェットエリアを使ってみます。

ダッシュボード 外観>ウィジェット で

テキスト を選び、投稿本文下をクリックしてからウィジェットを追加をクリック

このように入力して保存をクリック

すると

こんな感じで投稿本文のすぐ下に投稿本文下ウィジェットエリアが表示されました。すべての投稿の下にこの投稿本文下ウィジェットエリアが表示されます。

他のテーマでも投稿本文下ウィジェットエリアを追加してみた

この方法であれば他のテーマでも同じようにウィジェットエリアが追加できそうだなと思いましたので、全く同じコードをSaitamaテーマ子テーマに追加して表示してみました。

できました!

ということで、この投稿本文下ウィジェットエリアを追加するコードはSaitamaでも利用できるようです。おそらくこの方法であれば、だいたいのテーマでは利用できるのではないかなと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る