【WordPress】記事ごとに個別のアフィリエイト広告を表示させる方法【プラグイン不要】

Wordpress

2018.12.30

ある特定の記事にのみアフィリエイト広告を表示させたい場合に、テーマファイルにソースコードを追加するだけで、プラグイン不要で実現できる方法をご紹介します。

みなさんこんにちは！
筋肉カメレオンです。

すべての記事に一括でアフィリエイト広告を表示させる方法は、使用中のテーマの機能やプラグイン等でよくありますが、特定の記事だけに表示させたい時ってありますよね。

その場合、エディタの「ビジュアルモード」を普段使用されている方は、「テキストモード」に切り替えてソースコードを貼り付け、また「ビジュアルモード」に戻って記事を編集する、ということを繰り返していると思います。

「テキストモード」を使用されている方は、コンテンツ部分と広告部分が混在しているので、可読性が落ちてしまいます。

そこで、よくある記事の前後にアフィリエイト広告を表示させるための機能拡張方法をご紹介します。（Gutenbergにも対応しています！）
※テーマファイルの「functions.php」を編集するので、必ず子テーマを使用してください。

【簡単】Wordpressで子テーマを作る基本の方法【必要なのは2ファイルだけ】

Wordpressでテーマを選択する前に、必ず子テーマを作ってそちらを有効化することをおすすめします。まずは子テーマ作成の基本をご紹介します。みなさんこんにちは！筋肉カメレオンです。 Wordpressのテーマを選ぶ際に、子テ... [続きを読む]

全体のソースコード
個別に解説
さいごに

全体のソースコード

最初に全体のソースコードを掲載しておきます。
こちらを functions.php にコピペするだけでも大丈夫です。

// ---------------------
//
// ページ単体広告機能
//
add_action('admin_menu', 'custom_ad_hooks');
add_action('save_post', 'save_custom_ad');
add_filter('the_content','show_content');

// 記事編集画面に独自エリア追加
function custom_ad_hooks() {
  // 投稿記事
  add_meta_box('custom_ad', 'ページ単体広告（コンテンツ前後に追加されます）', 'custom_ad_input', 'post', 'normal', 'high');
  // 固定ページ
  add_meta_box('custom_ad', 'ページ単体広告（コンテンツ前後に追加されます）', 'custom_ad_input', 'page', 'normal', 'high');
}

// カスタムフィールド入力フォーム表示
function custom_ad_input() {
  global $post;
  echo '<input id="custom_ad_name" name="custom_ad_name" type="hidden" value="'.wp_create_nonce('custom-ad').'" />';
  echo '<textarea id="custom_ad" style="width: 100%;" cols="30" name="custom_ad" rows="10">'.get_post_meta($post->ID,'_custom_ad',true).'</textarea>';
}

// 登録処理
function save_custom_ad($post_id) {
  if (!wp_verify_nonce($_POST['custom_ad_name'], 'custom-ad')) return $post_id;
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
  $custom_ad = $_POST['custom_ad'];
  update_post_meta($post_id, '_custom_ad', $custom_ad);
}

// 記事前後に広告追加
function show_content($content) {
  global $post;
  if(is_single() || is_page()){
    $ad = get_post_meta($post->ID,'_custom_ad',true);
    $content = $ad . $content . $ad;
  }
  return $content;
}

// ---------------------

個別に解説

フック処理の追加

アクションフックとフィルターフックを追加します。
「admin_menu」・・・管理画面上に処理追加
「save_post」・・・記事保存時に処理追加
「the_content」・・・記事本文表示時に処理追加


add_action('admin_menu', 'custom_ad_hooks');
add_action('save_post', 'save_custom_ad');
add_filter('the_content','show_content');

第二引数でユーザー定義関数を指定するので、「function」で独自の関数を作成します。

記事編集画面に独自エリア追加

独自のカスタムフィールドエリアを用意します。


function custom_ad_hooks() {
  // 投稿記事
  add_meta_box('custom_ad', 'ページ単体広告（コンテンツ前後に追加されます）', 'custom_ad_input', 'post', 'normal', 'high');
  // 固定ページ
  add_meta_box('custom_ad', 'ページ単体広告（コンテンツ前後に追加されます）', 'custom_ad_input', 'page', 'normal', 'high');
}

カスタムフィールド入力フォーム表示

アフィリエイト広告を入力するカスタムフィールドを追加します。
名称と内容をセットで用意します。


function custom_ad_input() {
  global $post;
  echo '<input id="custom_ad_name" name="custom_ad_name" type="hidden" value="'.wp_create_nonce('custom-ad').'" />';
  echo '<textarea id="custom_ad" style="width: 100%;" cols="30" name="custom_ad" rows="10">'.get_post_meta($post->ID,'_custom_ad',true).'</textarea>';
}

登録処理

記事登録時にカスタムフィールドの内容も保存させます。


function save_custom_ad($post_id) {
  if (!wp_verify_nonce($_POST['custom_ad_name'], 'custom-ad')) return $post_id;
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
  $custom_ad = $_POST['custom_ad'];
  update_post_meta($post_id, '_custom_ad', $custom_ad);
}

記事前後に広告追加

記事を表示する際に、その前後に入力したアフィリエイト広告を表示させます。


function show_content($content) {
  global $post;
  if(is_single() || is_page()){
    $ad = get_post_meta($post->ID,'_custom_ad',true);
    $content = $ad . $content . $ad;
  }
  return $content;
}