【WordPress】アフィリを登録してプルダウンからワンクリック挿入！functions.php版とプラグイン版

ブログを書いていると、「この記事には楽天トラベルのリンク」「こっちはAmazonのPC」「この記事はDMMブックス」みたいに、記事に合わせてアフィリエイト広告を入れたくなりますよね。

でも毎回ASPの管理画面を開いて、広告コードをコピーして、記事に貼って……というのは地味に面倒です。しかも、広告コードを記事に直接貼ってしまうと、あとでリンクを差し替えたくなったときに全部の記事を修正しないといけません。

そこで今回は、よく使うアフィリを5個登録しておき、記事の編集画面のプルダウンから選ぶだけでワンクリック挿入できる仕組みを作りました。記事にはショートコードが入るだけなので、広告コードを差し替えたいときも登録画面を1か所直すだけで全記事に反映されます。

今回は「functions.phpに貼るだけ版」と「プラグイン版」の両方を紹介します。好きな方を選んで使ってください。

完成イメージ

できあがるものはシンプルで、次の3つです。

プルダウンで「1. 楽天トラベル」を選ぶと、カーソルの位置に [affi id=”1″] が入ります。ビジュアルタブでもコード（テキスト）タブでも使えます。

この仕組みのメリット

広告コードを記事に直接貼る方法と比べると、こんな違いがあります。

特に「あとから広告を差し替えられる」のが大きいです。キャンペーン用のリンクに変えたい、提携が終わったので別の広告にしたい、というときに本当に楽になります。

functions.php版とプラグイン版、どっちがいい？

中身の動きは同じです。違いは「どこにコードを置くか」だけなので、自分の運用に合う方を選んでください。

なお、functions.php版とプラグイン版を同時に使うのはNGです。メニューやプルダウンが2つずつ出てしまうので、どちらか一方だけにしてください。どちらも登録データの保存先は同じにしてあるので、あとから乗り換えても登録内容はそのまま引き継げます。

対応している環境

functions.php版の作り方

手順1. functions.phpをバックアップする

まずは念のためバックアップです。functions.phpは1文字間違えるだけでサイトが真っ白になることがあります。FTPやサーバーのファイルマネージャーで、今のfunctions.phpをパソコンに保存しておきましょう。

また、貼り付けるのは子テーマのfunctions.phpにしてください。親テーマに貼ると、テーマを更新したときに消えてしまいます。

手順2. コードを貼り付ける

子テーマのfunctions.phpの一番下に、次のコードをまるごと貼り付けて保存します。

// アフィリ登録の設定画面を追加（設定のアフィリ登録）
add_action('admin_menu', 'hiro_affi_menu');
function hiro_affi_menu() {
    add_options_page('アフィリ登録', 'アフィリ登録', 'manage_options', 'hiro-affi', 'hiro_affi_page');
}
function hiro_affi_page() {
    if (isset($_POST['hiro_affi_nonce']) && wp_verify_nonce($_POST['hiro_affi_nonce'], 'hiro_affi_save') && current_user_can('manage_options')) {
        $items = array();
        for ($i = 1; $i <= 5; $i++) {
            $items[$i] = array(
                'name' => sanitize_text_field(wp_unslash($_POST['affi_name'][$i] ?? '')),
                'code' => wp_unslash($_POST['affi_code'][$i] ?? ''),
            );
        }
        update_option('hiro_affi_items', $items);
        echo '<div class="updated"><p>保存しました</p></div>';
    }
    $items = get_option('hiro_affi_items', array());
    echo '<div class="wrap"><h1>アフィリ登録</h1><form method="post">';
    wp_nonce_field('hiro_affi_save', 'hiro_affi_nonce');
    echo '<table class="form-table">';
    for ($i = 1; $i <= 5; $i++) {
        $name = $items[$i]['name'] ?? '';
        $code = $items[$i]['code'] ?? '';
        echo '<tr><th>No.' . $i . '</th><td>';
        echo '<input type="text" name="affi_name[' . $i . ']" value="' . esc_attr($name) . '" placeholder="名前" style="width:300px;"><br>';
        echo '<textarea name="affi_code[' . $i . ']" rows="4" style="width:100%;margin-top:6px;" placeholder="広告コードを貼る">' . esc_textarea($code) . '</textarea>';
        echo '</td></tr>';
    }
    echo '</table>';
    submit_button('変更を保存');
    echo '</form></div>';
}

// ショートコードで登録したアフィリを表示
add_action('init', 'hiro_affi_register');
function hiro_affi_register() {
    add_shortcode('affi', 'hiro_affi_shortcode');
}
function hiro_affi_shortcode($atts) {
    $atts  = shortcode_atts(array('id' => ''), $atts);
    $id    = intval($atts['id']);
    $items = get_option('hiro_affi_items', array());
    if (empty($items[$id]['code'])) return '';
    return '<div class="affi-box">' . $items[$id]['code'] . '</div>';
}

// クラシックエディタに「アフィリ挿入」プルダウンを追加
add_action('media_buttons', 'hiro_affi_media_button');
function hiro_affi_media_button($editor_id) {
    if ($editor_id !== 'content') return;
    $items = get_option('hiro_affi_items', array());
    echo '<select style="margin-left:4px;vertical-align:top;" onchange="if(this.value){window.send_to_editor(\'[affi id=&quot;\'+this.value+\'&quot;]\');this.selectedIndex=0;}">';
    echo '<option value="">アフィリ挿入</option>';
    foreach ($items as $i => $item) {
        if (!empty($item['name'])) {
            echo '<option value="' . esc_attr($i) . '">' . esc_html($i . '. ' . $item['name']) . '</option>';
        }
    }
    echo '</select>';
}

保存したら、管理画面がいつも通り表示されるか確認しておきましょう。もし真っ白になったら、手順1でバックアップしたfunctions.phpをFTPで戻せば元通りになります。

手順3. アフィリを登録する

管理画面の「設定」に「アフィリ登録」というメニューが増えています。開くと No.1 から No.5 までの登録枠が並んでいます。

入力したら「変更を保存」をクリックします。名前が空の枠はプルダウンに表示されない仕様なので、使う枠には必ず名前を入れてください。

手順4. 記事に挿入する

投稿の編集画面を開くと、「メディアを追加」ボタンの横に「アフィリ挿入」のプルダウンが出ています。

1. 本文の広告を入れたい位置にカーソルを置く
2. 「アフィリ挿入」のプルダウンから使いたいアフィリを選ぶ
3. カーソル位置に [affi id=”1″] のようなショートコードが入る
4. プレビューで広告が表示されるか確認する

選んだあとプルダウンは自動で「アフィリ挿入」に戻るので、続けて別のアフィリを入れることもできます。

コードの解説

コードは大きく3つのブロックに分かれています。どこで何をしているかが分かると、カスタマイズもしやすくなります。

ブロック1. 設定画面

add_options_page で「設定」の中に「アフィリ登録」メニューを追加しています。保存ボタンが押されたら、5枠分の名前と広告コードをまとめて hiro_affi_items という名前でデータベースに保存します。

広告コードにはscriptタグなどが含まれることもあるので、広告コード欄はあえて中身を加工せずにそのまま保存しています。そのかわり、保存できるのは管理者だけに制限しています。

ブロック2. ショートコード

add_shortcode で affi というショートコードを登録しています。[affi id=”2″] と書かれていたら、2番目に登録した広告コードを取り出して表示します。

広告は class=”affi-box” のdivで囲んで出力しているので、あとからCSSで余白や中央寄せなどの見た目を調整できます。登録されていない番号を指定した場合は、何も表示しません。

ブロック3. エディタのプルダウン

media_buttons というフックを使って、「メディアを追加」ボタンの横にプルダウンを置いています。選ばれたら、WordPressにもともとある send_to_editor という仕組みでカーソル位置にショートコードを入れています。

この方法なら、ビジュアルタブ・コードタブのどちらでも挿入できて、別のJavaScriptファイルを用意する必要もありません。

プラグイン版の作り方

続いてプラグイン版です。テーマを変えても使い続けたい人や、複数サイトで使い回したい人はこちらがおすすめです。

手順1. プラグインファイルを作る

メモ帳やテキストエディタで新しいファイルを作り、次のコードを貼り付けます。文字コードは「UTF-8」で保存してください。ファイル名は hiro-affi-inserter.php にします。

<?php
/*
Plugin Name: Hiro Affi Inserter
Description: アフィリを登録して、クラシックエディタのプルダウンからショートコードで挿入できるプラグイン
Version: 1.0
Author: Hiro
*/

if (!defined('ABSPATH')) exit;

// 登録できるアフィリの数
define('HIRO_AFFIP_MAX', 5);

// 設定画面をメニューに追加（設定のアフィリ登録）
add_action('admin_menu', 'hiro_affip_menu');
function hiro_affip_menu() {
    add_options_page('アフィリ登録', 'アフィリ登録', 'manage_options', 'hiro-affi', 'hiro_affip_page');
}
function hiro_affip_page() {
    if (isset($_POST['hiro_affi_nonce']) && wp_verify_nonce($_POST['hiro_affi_nonce'], 'hiro_affi_save') && current_user_can('manage_options')) {
        $items = array();
        for ($i = 1; $i <= HIRO_AFFIP_MAX; $i++) {
            $items[$i] = array(
                'name' => sanitize_text_field(wp_unslash($_POST['affi_name'][$i] ?? '')),
                'code' => wp_unslash($_POST['affi_code'][$i] ?? ''),
            );
        }
        update_option('hiro_affi_items', $items);
        echo '<div class="updated"><p>保存しました</p></div>';
    }
    $items = get_option('hiro_affi_items', array());
    echo '<div class="wrap"><h1>アフィリ登録</h1><form method="post">';
    wp_nonce_field('hiro_affi_save', 'hiro_affi_nonce');
    echo '<table class="form-table">';
    for ($i = 1; $i <= HIRO_AFFIP_MAX; $i++) {
        $name = $items[$i]['name'] ?? '';
        $code = $items[$i]['code'] ?? '';
        echo '<tr><th>No.' . $i . '</th><td>';
        echo '<input type="text" name="affi_name[' . $i . ']" value="' . esc_attr($name) . '" placeholder="名前" style="width:300px;"><br>';
        echo '<textarea name="affi_code[' . $i . ']" rows="4" style="width:100%;margin-top:6px;" placeholder="広告コードを貼る">' . esc_textarea($code) . '</textarea>';
        echo '<p style="color:#666;margin:4px 0 0;">ショートコード：<code>[affi id=&quot;' . $i . '&quot;]</code></p>';
        echo '</td></tr>';
    }
    echo '</table>';
    submit_button('変更を保存');
    echo '</form></div>';
}

// プラグイン一覧に「設定」リンクを追加
add_filter('plugin_action_links_' . plugin_basename(__FILE__), 'hiro_affip_links');
function hiro_affip_links($links) {
    array_unshift($links, '<a href="' . esc_url(admin_url('options-general.php?page=hiro-affi')) . '">設定</a>');
    return $links;
}

// ショートコードで登録したアフィリを表示
add_action('init', 'hiro_affip_register');
function hiro_affip_register() {
    add_shortcode('affi', 'hiro_affip_shortcode');
}
function hiro_affip_shortcode($atts) {
    $atts  = shortcode_atts(array('id' => ''), $atts);
    $id    = intval($atts['id']);
    $items = get_option('hiro_affi_items', array());
    if (empty($items[$id]['code'])) return '';
    return '<div class="affi-box">' . $items[$id]['code'] . '</div>';
}

// クラシックエディタに「アフィリ挿入」プルダウンを追加
add_action('media_buttons', 'hiro_affip_media_button');
function hiro_affip_media_button($editor_id) {
    if ($editor_id !== 'content') return;
    $items = get_option('hiro_affi_items', array());
    echo '<select style="margin-left:4px;vertical-align:top;" onchange="if(this.value){window.send_to_editor(\'[affi id=&quot;\'+this.value+\'&quot;]\');this.selectedIndex=0;}">';
    echo '<option value="">アフィリ挿入</option>';
    foreach ($items as $i => $item) {
        if (!empty($item['name'])) {
            echo '<option value="' . esc_attr($i) . '">' . esc_html($i . '. ' . $item['name']) . '</option>';
        }
    }
    echo '</select>';
}

// プラグイン削除時に登録データも消す
register_uninstall_hook(__FILE__, 'hiro_affip_uninstall');
function hiro_affip_uninstall() {
    delete_option('hiro_affi_items');
}

プラグイン版で追加した機能

基本の動きはfunctions.php版と同じですが、プラグインとして使いやすいように少しだけ機能を足しています。

ひとつ注意点として、「停止」ではデータは残りますが、「削除」すると登録内容も消えます。一時的に止めたいだけなら「停止」にしておきましょう。

手順2. サーバーにアップロードする

アップロード方法は2通りあります。やりやすい方でOKです。

手順3. 有効化する

「プラグイン」の一覧に「Hiro Affi Inserter」が表示されるので、「有効化」をクリックします。有効化すると「設定」のリンクも出るので、そこから登録画面へ進めます。

あとの使い方は、functions.php版の手順3・手順4とまったく同じです。

functions.php版から乗り換える場合は、先にfunctions.phpのコードを消してからプラグインを有効化してください。登録データは同じ場所に保存しているので、登録し直す必要はありません。

カスタマイズのヒント

登録できる数を増やしたい

functions.php版は、コードの中に2か所ある「$i <= 5」の 5 を好きな数字に変えればOKです。プラグイン版は define(‘HIRO_AFFIP_MAX’, 5); の 5 を変えるだけで済みます。

広告を中央寄せにしたい

ショートコードの出力部分の <div class=”affi-box”> を <div class=”affi-box” style=”text-align:center;margin:20px 0;”> に変えると、広告が中央寄せになり上下に余白がつきます。

同じ広告を記事の途中と最後に入れたい

同じショートコードを何回入れても大丈夫です。プルダウンで同じアフィリを2回選べば、それぞれの位置に広告が表示されます。

うまくいかないときは

まとめ

今回は、よく使うアフィリを登録しておいて、クラシックエディタのプルダウンからワンクリックで挿入できる仕組みを紹介しました。

広告の貼り付けは毎回のことなので、ちょっとした手間が減るだけでも記事作成がかなり快適になります。特に「あとから広告を一括で差し替えられる」のは、運営を続けるほど効いてきます。クラシックエディタで記事を書いている方は、ぜひ試してみてください。