Simplicityに投稿の2つめのH2の上にウィジェットエリアを追加する方法

このブログはテーマSimplicityの子テーマで作っています。ウィジェットエリアに1つめのH2の上に表示するための「投稿本文中」があるのですが、その1つ下の2つめのH2の上にウィジェット表示をしたいと思いました。
以前トップページだけに表示するウィジェットを作ったときのコードと、検索したページからの情報で作ることができましたのでその方法について書きます。

2つめのH2タグの手前に表示されるウィジェットを作りたい

Simplicityには投稿に指定できるウィジェットエリアが複数作られています。

その中に投稿本文中:投稿の最初のH2タグの手前に表示されるというウィジェットエリアがあります。自分が作っているWEBサイトの宣伝を入れたいと思ったのですが、最初のH2タグの上のウィジェットエリア「投稿本文中」は既に使っているし、もう少し記事の中に入ってからバナーを表示したいと思ったので「2つめのH2タグの手前に表示されるウィジェットエリア」を作りたいと思いました。

表示される位置的には投稿本文中投稿本文下の間の位置となります。ウィジェットエリアの名前は投稿本文中の下(2つめのH2の上)とします。

「投稿本文中の下(2つめのH2の上)」ウィジェットエリアの追加

「投稿本文中の下(2つめのH2の上)」という名前のウィジェットエリアを追加します。

以前書いた

トップページの投稿一覧の上に「あいさつ」のような文章を表示させたくて、前回はtwentyfourteenのトップページ用にウィジェットエ...

この記事や、Simplicityでウィジェットエリアを指定しているコード(lib\widget-areas.php)を参考にして、以下のコードを子テーマのfunctions.phpに追加します。

このコードを入れると、ダッシュボード 外観>ウィジェット

このように、今追加した「投稿本文中の下(2つめのH2の上)」が表示されるようになります。ここにウィジェットが追加できるようになっています。

投稿本文中の下(2つめのH2の上)に追加したウィジェットを投稿で表示できるようにコードを追加します。先ほどと同じく子テーマのfunctions.phpに追加します。以下のコードになります。

このコードは Simplicityのlib\widget-areas.phpに書いてあったコードと、寝ログさんの 本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法 この記事を参考にさせていただきました。

注意:AMPについては導入していませんので確認していません。

これでコーディングは終わりました。

「投稿本文中の下(2つめのH2の上)」ウィジェットエリアを使ってみる

ダッシュボード 外観>ウィジェット をクリック。投稿本文中の下(2つめのH2の上)ウィジェットエリアが表示されているので、ここにウィジェットを入れてみます。

カスタムHTMLをクリックして、投稿本文中の下(2つめのH2の上)をクリックし、ウィジェットを追加をクリック

追加したいHTMLコード(バナーを表示して他サイトへリンクするコード)を入力して保存をクリック。

これで投稿本文中の下(2つめのH2の上)へウィジェットの追加が終わりました。

このWEBサイトの記事を見てみると、

このように2つめのH2の上にカスタムHTMLで追加したコードによって、バナーが表示されるようになりました。ウィジェットエリアに追加したので、別の記事を見ても

こんな感じにバナーが表示されています。

お知らせ:レバテックフリーランスに「ゆうそうとITブログ」の記事を掲載していただきました!

レバテックフリーランスさんのWEBサイトで、「ゆうそうとITブログ」の記事を掲載していただきました!

Gmailの便利機能6選!仕事の効率化に役立てよう

以下のような形でご紹介していただき、ありがとうございました(^^)/

紹介された記事はこちらになります

プログラムを作っていてたくさんの人にメールを送るというテストをしないといけない場合があります。実際のお客さんのメールアドレスを使ってテス...

レバテックフリーランスさんのはフリーランスのエンジニアのための案件サイトで、今回のようにフリーランスのための情報もたくさん掲載されているようです。興味のある方はじっくり見られると良いかと思います!



兎本美佳

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

シェアする

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

フォローする

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

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

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

トップへ戻る