14 Shares

WordPressサイドバーウィジェットに「この記事で紹介している商品」を表示する方法

記事別サイドバー広告

記事ページのサイドバーに「この記事で紹介している商品」を表示する方法をご紹介します。

WordPress のサイドバーは、基本的に全ページ同じものが表示されます。そのため、レビュー記事でダイエット商品を紹介しているにも関わらず、サイドバーにはアイスクリームの広告が表示されている、なんていうこともあるかもしれません。

できれば、「記事 A では商品 A を」「記事 B では商品 B を」としたいですよね。そこで、投稿画面からサイドバーに表示する広告を変更できるようカスタマイズしてみましょう。

最終形はこのような感じになります。

商品 A を紹介しているページ
商品 B を紹介しているページ

カスタマイズ概要

ページごとにサイドバーの内容を変える方法はいくつかあります。

最初に「Widget Logic」などのプラグインを使って条件分岐する方法を思い浮かべるかもしれません。

今回やりたい「記事ごとに紹介する商品を出しわける」カスタマイズも、Widget Logic を使ってできないことはありません。ただ、記事数・商品数によっては、ウィジェット管理画面がどえらいことになってしまいます。

WirdPressウィジェット

商品広告(ウィジェット)が増えると管理しきれなくなる

そこで、以下のようなカスタマイズをしてみます。

  • サイドバーの広告は記事ごとに変更する(広告が不要な記事は非表示)
  • 広告は投稿画面から変更できるようにする
  • ショートコード化して、サイドバー以外でも使えるようにする

WordPress のカスタムフィールドを使って、フィールドの内容をショートコードにしてしまえば OK ですね。

プラグインを使って設定していくので、テーマを変えてもそのまま使えます。以下の順で解説していきます。

  1. Advanced Custom Fields で広告入力欄を作る
  2. Code Snippets でショートコード化する
  3. ショートコードをウィジェットに入れる
  4. (おまけ)広告を追尾させる

Advanced Custom Fieldsで専用の入力欄を作る

それでは、投稿画面に専用の入力欄(カスタムフィールド)を作っていくところから始めましょう。

Advanced Custom Fields」を使います。

インストール・有効化

プラグイン新規追加画面で「Advanced Custom Fields」と検索し、そのままインストール・有効化してください。

Advanced Custom Fields インストールと有効化

カスタムフィールド作成

有効化後、管理画面サイドバーに「カスタムフィールド」という項目が追加されるので、そこから「新規追加」に入ります。

カスタムフィールド 新規追加

新規追加画面に移ったら、タイトルを入力します。ここでは「サイドバー広告ボックス」としましたが、自分のわかりやすいもので OK です。

フィールドグループ タイトル入力

次に、「+ フィールドを追加」ボタンをクリック。

「フィールドを追加」ボタン

「フィールドラベル」「フィールド名」を入力します。

こちらも好きな名前で大丈夫ですが、フィールド名は半角英字を使ってください。のちほど別の部分でこのフィールド名を使います。

フィールドラベル サイドバー広告ボックス
フィールド名 nfx_aff_box

フィールドラベルとフィールド名を入力

その下の「フィールドタイプ」はデフォルトが「テキスト」になっていますが、これを「Wysiwyg エディタ」に変更します。

フィールドタイプを「Wysiwygエディタ」に変更

設定はこれだけ。あとはデフォルトのままでかまいません。

下部にある「位置」「Settings」もそのままで大丈夫です。

こんな感じで設定が完了したら、右側の「公開」ボタンをクリックしましょう。

ACF設定完了・公開

投稿画面に入力欄が追加されているか確認

Advanced Custom Fields の設定が完了すると、投稿画面下部に専用の入力欄が表示されます。

投稿画面下の専用入力欄

もし表示されていない場合は、上部の「表示オプション」をクリックして「サイドバー広告ボックス」にチェックを入れてください。

表示オプション

次はこの「サイドバー広告ボックス」に入力したものを、サイドバーに表示する作業を行います。

なお、サンプルサイトは Classic Editor を使っていますが、Gutenberg を使っている場合も専用入力欄は従来のエディタと同じ仕様になります。

カスタムフィールドの出力をショートコード化する

専用入力欄の内容は PHP で呼び出せばよいのですが、ウィジェットで PHP コードは使えないのでショートコード化します。

※ウィジェットで PHP コードを使えるようにするプラグインもありますが、セキュリティ面で危ないので非推奨

(A)functions.phpに書く場合

カスタマイズに慣れているのであれば、以下のコードを functions.php にコピペするだけで OK です。

2 行目の nfx_aff_box は Advanced Custom Fields で設定したフィールド名です。別の名前に変更している場合は、その名前を使ってください。

これで、以下のショートコードを入れた部分に広告が表示されるようになります。

(B)Code Snippetsを使う場合

カスタマイズに慣れていない or テーマを変えても使い続けたい場合は、「Code Snippets」などのプラグインを使うとよいでしょう。

使い方は以下の記事をご覧ください。

 WordPressのfunctions.phpを簡単に管理できるプラグイン「Code Snippets」

コードは、前述の functions.php に入れるものと同じです。

こんな感じになっていれば OK です。

Code Snippets 入力例

ウィジェットにショートコードを入れておく

ここまできたら、あとは広告を表示したい場所にショートコードを入れておくだけです。

サイドバーのウィジェットエリアなどに「カスタム HTML」ウィジェットを追加し、ショートコードだけ入れておいてください。タイトルは不要です。

カスタムHTMLウィジェットにショートコードを入力

投稿画面で広告を入れてみる

では、投稿画面に入って実際に広告を入れてみましょう。

記事別広告入力例

ASP から発行されたアフィリエイトリンクや、カエレバで生成したリンクなど、本文中に広告を入れるのと同じやり方で OK です。

ウィジェットのタイトルは未入力なので、「この記事で紹介している商品はこちら」など入れておくとよいでしょう。

このようにサイドバーに表示されたら完了です!

記事別広告表示サンプル

フォントの色や大きさなどは、エディタで自由に調整してください。

広告を追尾させたい場合

PC 閲覧時に、広告を追尾させる(スクロールしてもついてくる)こともできます。

テーマによっては追尾専用のウィジェットエリアがありますから、そこにショートコードを入れたウィジェットを配置すれば OK です。

テーマに追尾機能がない場合は、プラグイン「Q2W3 Fixed Widget for WordPress」を入れれば簡単です。

プラグイン新規追加画面で「Q2W3 Fixed Widget」を検索して、インストール・有効化します。

Q2W3 Fixed Widget for WordPress インストール

有効化したらウィジェット管理画面に入り、ショートコードの入っているウィジェットを開いて「Fixed Widget」にチェックを入れて保存しましょう。

Fixed Widget にチェックを入れる

これだけで広告を入れてあるウィジェットが追尾してくれます。

追尾広告サンプル

実際の表示はこちら。

商品 A を紹介しているページ
商品 B を紹介しているページ

広告が表示されないときの対処法

手順通りに進めても広告が表示されない(ショートコードがそのまま表示されてしまう)場合、いくつかの原因が考えられます。

ショートコードがむきだし

フィールド名などが間違っている

サンプルで紹介しているフィールド名を任意のものに変更している場合、functions.php(Code Snippets)に入れるコードもそのフィールド名に合わせてください。

同様に、ショートコード名などを変更したときも、入力ミスがないか確認しましょう。

余分な空白などが入っている

コードを貼り付けるタイミングなどで、前後に全角スペース等が入っていると正しく認識されません(エラーが起きます)。

フィールド名なども、全角の英数字が使われていないか確認しましょう。

また、ウィジェットに入れるショートコードのカッコ([])は半角でなければ動きません。

同じ名前のショートコードがある

すでに同じ名前のショートコードが定義されていると、広告が表示されません。

ショートコード名を変更して対応してください。

ウィジェット内でショートコードを使えるようになっていない

テーマによって、ウィジェット内でショートコードが使えるよう設定されていないことがあります。

以下のコードを functions.php または Code Snippets などに入れてください。

Code Snippetsでの入力例

Code Snippetsでの入力例

まとめ:使い道はいろいろ!

ショートコード化しているので、ウィジェットだけではなく本文中の好きな場所に入れることもできます。商品のリンクが変わったら一括変更できるので便利ですよ。

テンプレートファイルに埋め込んで、タイトルの前後や記事下に表示されるようにしておくのもよいかなと思います。

アフィリエイトリンクだけではなく、有料 note や自社商品へのリンクにしておいたり、関連記事として内部リンクを表示させておくのもよいでしょう。

アイデア次第でいろいろ考えられるので、効果的な使い方を模索してみてください。

カスタムフィールドはかなり便利な機能なので、使いこなしてライバルに差をつけましょう!

 記事下の関連記事はAdvanced Custom Fieldsで検索・表示するのがおすすめ!

それでは、また。