プラグインなしで自動キーワードリンク機能を実装する方法

公開日:2024(令和6)年11月12日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPressで作成したサイトに限らず、サイト内にリンクを張っていくことは、見ている人に有用な情報を案内するためだけでなく、検索エンジンへページ同士の繋がりを知らせてどんなサイトなのかを正しく認知してもらうのに非常に有効な方法だといえるでしょう。

ただ、毎回同じ単語に同じページへのリンクを手動で張る作業はとにかく面倒だし、忘れてしまうこともありますよね?

そこで今回は、予め「キーワード」と「リンクURL」を設定しておき、そのキーワードが投稿や固定ページの本文内にあったら自動でリンクURLへのリンクへ置き換えるという機能をプラグインなしで作ってみようと思います。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

自動リンク置き換え機能の基礎となるコード

いきなり結論となってしまいそうですが、自動でリンクさせるキーワードが予め決まっていて、コード上でメンテナンスをするという前提であれば、以下のコードで簡単に実装できます。

自身のサイトで有効化しているテーマのfunctions.phpへ追加してみてください。

function pwcn_replace_keywords_with_links($content) {
    // キーワードとリンクの配列
    $links = array(
        'キーワード1' => 'https://example.com/link1',
        'キーワード2' => 'https://example.com/link2',
        'キーワード3' => 'https://example.com/link3',
    );

    // 各キーワードをリンクに置き換える
    foreach ($links as $keyword => $url) {
        $content = str_replace($keyword, '<a href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer">' . esc_html($keyword) . '</a>', $content);
    }

    return $content;
}

// フィルターを追加してコンテンツを置き換える
add_filter('the_content', 'pwcn_replace_keywords_with_links');

追加したら、投稿の新規作成を行い、「キーワード1」という文字列が含まれた文章を適当に作成して、下書き保存、プレビュー表示をしてみてください。

ね、簡単にキーワードに対する自動リンク機能を作ることができました。

このコードでは、キーワードである「キーワード1」に対してリンクURL「https://example.com/link1」を割り当て、本文の中にキーワードが存在すればリンクURLを付加したリンクタグに置き換えるということをしています。

必要な分だけキーワードとリンクURLのセットを増やしていけばいくつでも追加できます。

まあこのコードで事足りるケースが多いとは思いますが、今回はWordPressらしく?このコードを応用して、以下のような機能を持った動作をさせるためのコードを紹介していきます。

  • 管理画面上で、キーワードとリンクURLを持つコンテンツを作成・編集できるようにする
  • キーワードに合致する文字列が本文内にあればリンクに置き換える
  • キーワードとリンクのセットに重複がないかをチェックする(誤動作防止)
  • 個別の投稿・固定ページで、自動リンクを機能させるかどうかのスイッチを設ける(自動リンクの必要がないページでは動作させないようにする)

...と簡単に書いていますが、結構な量のコードになるので、簡単に設置したい方は上記のコードを使った方がいいかも知れません。

QA Analytics QA Analytics

管理画面上で管理できる機能を追加した、自動リンク機能の実装例

本当に結構大変なので、キーワードとリンクURLがそれほど多くなく、メンテナンスはテーマエディターなどでコード編集して済ませればよいという方は、前項のコードで実装することをおすすめします。

もう一度書きますが、自動リンクの基本コードに以下の機能を追加したものを作成していきます。

  1. 管理画面上で、キーワードとリンクURLを持つコンテンツを作成・編集できるようにする
  2. キーワードに合致する文字列が本文内にあればリンクに置き換える
  3. キーワードとリンクのセットに重複がないかをチェックする(誤動作防止)
  4. 個別の投稿・固定ページで、自動リンクを機能させるかどうかのスイッチを設ける(自動リンクの必要がないページでは動作させないようにする)

基本的には上記の1と2を実装すれば、管理画面上でキーワードとリンクの管理ができ、本文内の合致した文字列をリンクに置き換えることができます。

3と4は機能を制御・管理しやすくための機能ですから必要であれば追加するという感じでいいでしょう。

では順番に進めていきましょう。

管理画面上で、キーワードとリンクURLを持つコンテンツを作成・編集できるようにする

WordPressで何かの集まりを作るのに重宝するのがカスタム投稿タイプです。

ここでは自動リンク用の「キーワード」と「リンク先URL」を普通の投稿などのように追加・編集・削除できるようにするためのカスタム投稿タイプを作ります。

まずは以下のコードを有効化しているテーマのfunctions.phpへ追加します。

/*** 自動リンク集用のカスタム投稿タイプを作る ***/
function pwcn_add_auto_link_post_type() {
	$posttype_name = __('リンク集','');

	register_post_type( 'pwcn_auto_link_pt',
		array(
			'labels' => array(
				'name' => $posttype_name,
				'singular_name' => $posttype_name,
			),
			'public' => true, // 編集は可能にする
			'has_archive' => false,
			'supports' => array('title', 'custom-fields'), // 'editor'を削除
			'menu_icon' => 'dashicons-link',
			'rewrite' => array('slug' => 'pwcn-link-collection'),
			'exclude_from_search' => true,
			'show_in_menu' => true,
		)
	);
}
add_action('init', 'pwcn_add_auto_link_post_type');

これで管理画面をリロードすると、メニューに「リンク集」という項目が追加され、クリックすると投稿や固定ページの一覧と似たような画面が表示されるはずです。

ただ、新規作成をクリックしても、表示されるのは「タイトル」の入力項目だけでリンクURLを入れる場所がありませんから、以下のコードで入力欄を作ります。

/*** リンク先URLを入力するメタボックスを追加し、保存する ***/
/* メタボックスの追加 */
function pwcn_add_auto_link_url_meta_box() {
	$meta_box_title = __('リンク先URL','hima-art-utility');

	add_meta_box(
		'haup_auto_link_url_meta_box', // メタボックスのID
		$meta_box_title, // メタボックスのタイトル
		'pwcn_auto_link_url_meta_box_callback', // 表示する関数
		'pwcn_auto_link_pt', // カスタム投稿タイプ名
		'normal', // 表示位置
		'high' // 優先度
	);
}
add_action('add_meta_boxes', 'pwcn_add_auto_link_url_meta_box');

/* メタボックスの内容コールバック */
function pwcn_auto_link_url_meta_box_callback($post) {
	// 現在の値を取得
		$link_url = get_post_meta($post->ID, 'pwcn-autolink-url', true);

	// Nonceを生成
		wp_nonce_field('pwcn_auto_link_url_nonce_action', 'pwcn_auto_link_url_nonce');

	$label_title = __('リンク先URL:','');
?>
<label for="link_url"><?php esc_html_e( $label_title ); ?></label>
<input type="text" id="pwcn-autolink-url" name="pwcn-autolink-url" value="<?php echo esc_attr($link_url); ?>" style="width: 100%;" required />
<?php
}


/* メタボックスの値を保存 */
function pwcn_save_auto_link_url_meta_box($post_id) {
	// 自動保存の場合は何もしない
		if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
			return;
		}

	// 権限の確認
		if (!current_user_can('edit_post', $post_id)) {
			return;
		}

	// Nonceの検証
		if (!isset($_POST['pwcn_auto_link_url_nonce']) || !wp_verify_nonce($_POST['pwcn_auto_link_url_nonce'], 'pwcn_auto_link_url_nonce_action')) {
			return;
		}

	// メタボックスの値を保存
	if (isset($_POST['pwcn-autolink-url'])) {
		$link_url = sanitize_text_field($_POST['pwcn-autolink-url']);
        
		// 入力が空の場合はエラーメッセージを表示
			$message = __('リンク先URLは必須です。','');

		if (empty($link_url)) {
			// エラーメッセージを設定
				set_transient('pwcn-auto-link_url_error', $message, 30); // 30秒間表示
				return;
		}

		update_post_meta($post_id, 'pwcn-autolink-url', $link_url);
	}
}
add_action('save_post', 'pwcn_save_auto_link_url_meta_box');


/* エラーメッセージを表示 */
function pwcn_display_auto_link_url_error() {
	if ($error_message = get_transient('pwcn-auto-link_url_error')) {
		echo '<div class="notice notice-error is-dismissible"><p>' . esc_html($error_message) . '</p></div>';

		delete_transient('pwcn-auto-link_url_error');
	}
}
add_action('admin_notices', 'pwcn_display_auto_link_url_error');

一気に長いコードを書きましたが、これで「pwcn-autolink-url」というリンクURLを保存するためのカスタムフィールド入力用のフォームを用意し、フォームに入力した値を保存する仕組みを作ります。

同時にnonce検証を使って、このカスタム投稿タイプのそのフォーム以外から入力されたものは無効にするようにしているのでセキュリティ的にも問題ないと思います。

さらに、リンクURLの設定を必須にするため、入力欄に入力なく保存しようとすると、フォーム項目へのアラートと、編集画面上部へのアラートを表示させるようにもしています。

ここまでのコードを追加したら、改めて「リンク集」メニューから新規作成をクリックして、タイトルに「キーワード」となる文字列を、リンクURLに遷移先URLを入力して、いくつかのパターンを登録していきましょう。

後から編集や削除が自由にできるので、テスト的に「あいうえお」をサイトのトップページへ遷移するようにするなどとしておけばいいでしょう

以上でキーワードリンク用のカスタム投稿タイプの作成は終了です。が、この投稿タイプは管理画面から編集ができる環境のみ必要で、訪問者からは見えないようにしておかなければなりませんから、以下のコードで直接ページが表示されないようにしておきましょう。

/* 投稿タイプへの直接アクセスを404ページへリダイレクト */
function pwcn_redirect_auto_link_post_type() {
	if (is_singular('pwcn_auto_link_pt')) {
		// URLがアクセスされた場合に404ページを表示
		if (!is_admin()) { // 管理画面以外の場合
			global $wp_query;
			$wp_query->set_404();
			status_header(404);
			nocache_headers();
			include(get_404_template());
			exit;
		}
	}
}
add_action('template_redirect', 'pwcn_redirect_auto_link_post_type');

/* 投稿タイプをnoindexにする */
function pwcn_noindex_auto_link_post_type() {
	if (is_singular('pwcn_auto_link_pt')) {
		echo '<meta name="robots" content="noindex, nofollow" />' . "\n";
	}
}
add_action('wp_head', 'pwcn_noindex_auto_link_post_type');

これで自動リンク用のコンテンツへ直接アクセスした場合は「404」ページが表示され、noindexタグを付加することで検索エンジンから無視されるようになります。

キーワードとリンクURL登録用のカスタム投稿タイプができたら、いよいよ本文内の合致するキーワードをリンクURLへのリンクに置き換える機能を追加します。

/*** 自動でリンクを設定 ***/
function pwcn_auto_link_keywords($content) {
	// チェックボックスがオンの場合のみリンクを設定
		//if (is_single() || is_page()) {
			//$post_id = get_the_ID();
			//$disable_link = get_post_meta($post_id, 'pwcn-disableauto-keyword-link', true);
        
			//if (!isset( $disable_link ) || $disable_link === '') {
				//return $content; // チェックが入っていない場合はそのまま返す
			//}
		//}

	// リンク集からキーワードとURLを取得
		$args = array(
			'post_type' => 'pwcn_auto_link_pt',
			'posts_per_page' => -1,
		);

		$link_query = new WP_Query($args);
			if ($link_query->have_posts()) {
				while ($link_query->have_posts()) {
					$link_query->the_post();
					$keyword = get_the_title();
					$url = get_post_meta(get_the_ID(), 'pwcn-autolink-url', true);
            
					// 本文内のキーワードをリンクに置き換える
					$content = str_replace($keyword, '<a href="' . esc_url($url) . '">' . esc_html($keyword) . '</a>', $content);
				}

				wp_reset_postdata();
			}

	return $content;
}
add_filter('the_content', 'pwcn_auto_link_keywords');

途中に//で無効にしている行が何行かありますが、これについては後程解説します。

このコードはページ冒頭で紹介した基本コードの「キーワード」と「リンクURL」がセットになっている部分を、前項で作成したカスタム投稿タイプで登録されているものから検索してリンクに置き換えるようにしたものです。結構複雑なコードですが、これで基本的に投稿や固定ページで自動リンクが機能するようになります。

キーワードとリンクのセットに重複がないかをチェックする(誤動作防止)

前項まででキーワードとリンクURLのセットの作成と自動リンクの機能が実装できましたが、キーワードとリンクURLのセットはいくつでも作れるものの、キーワードが重複していても登録できてしまい、誤動作を起こすことがあります。

そこで、チェック機能として、このカスタム投稿タイプの一覧上で重複しているキーワード(タイトル)があれば「重複してますよ!」と表示するような機能を付加することで、メンテナンス性が向上すると思います(できれば編集画面上でチェックして公開できないようにしたかったのですが、どうしてもうまくいかなかったので一覧上にアラートを出す形にしました)。

以下のコードを追加します。

/*** 管理画面をタイトルの昇順で常に並び替えて表示 ***/
function pwcn_set_auto_link_admin_page_order($query) {
	// 管理画面でのみ実行
		if (is_admin() && $query->is_post_type_archive( 'pwcn_auto_link_pt' )) {
			// タイトルの昇順でソート
			$query->set('orderby', 'title');
			$query->set('order', 'ASC');
		}
}
add_action('pre_get_posts', 'pwcn_set_auto_link_admin_page_order');

/*** 管理画面の列に重複とリンクURLを表示 ***/
/* 新しい列を追加 */
function pwcn_auto_link_add_admin_custom_columns($columns) {
	$duplicate_title = __('タイトルの重複','');
	$link_url_title = __('リンクURL','');

	$columns['pwcn_auto_lin_url_duplicate_title'] = esc_html( $duplicate_title );
	$columns['pwcn_auto_link_url_column'] = esc_html( $link_url_title ); // カスタムフィールド用の列を追加

	return $columns;
}
add_filter('manage_edit-pwcn_auto_link_pt_columns', 'pwcn_auto_link_add_admin_custom_columns');

/* 列に内容を表示 */
function pwcn_display_custom_columns($column, $post_id) {
	// タイトル重複の列
	if ($column === 'pwcn_auto_lin_url_duplicate_title') {
		$title = get_the_title($post_id);

		// 同じタイトルを持つ投稿を取得
		$args = array(
			'post_type' => 'pwcn_auto_link_pt',
			'post_status' => 'publish',
			'posts_per_page' => -1,
			'post__not_in' => array($post_id) // 現在の投稿を除外
		);

		$query = new WP_Query($args);
        
		$duplicated_message = __('タイトル(キーワード)が重複しています','');
		$duplicated_message_b = __('自動リンク動作に不具合が出る可能性があります','');

		$has_duplicate = false;

		// クエリの結果をループしてタイトルをチェック
		if ($query->have_posts()) {
			while ($query->have_posts()) {
				$query->the_post();
				$other_title = get_the_title();

				// タイトルを直接比較
				if ($title === $other_title) {
					$has_duplicate = true;
					break;
				}
			}

			wp_reset_postdata(); // クエリのリセット

		}

		if ($has_duplicate) {
			$output = '';
			$output .= esc_html($duplicated_message);
			$output .= '<br>';
			$output .= '<span style="color:red;">';
			$output .= esc_html($duplicated_message_b);
			$output .= '</span>';

			echo $output;
		} else {
			echo '';
		}
	}

	// link_urlの表示
	if ($column === 'pwcn_auto_link_url_column') {
		$link_url = get_post_meta($post_id, 'pwcn-autolink-url', true); // link_urlの値を取得

		echo '<a href="' . esc_url($link_url) . '" target="_blank">' . esc_html($link_url) . '</a>'; // 値を表示
	}
}
add_action('manage_pwcn_auto_link_pt_posts_custom_column', 'pwcn_display_custom_columns', 10, 2);

/* 管理画面上のスタイル */
function pwcn_admin_auto_link_column_style_init(){
?>
<style>
body.edit-php #pwcn_auto_lin_url_duplicate_title {width:20%;}
body.edit-php #pwcn_auto_link_url_column {width:20%;}
</style>
<?php
}
add_action('admin_head','pwcn_admin_auto_link_column_style_init');

これまた長いコードですが、管理上あった方が便利だと思うので追加することをおすすめします。

個別の投稿・固定ページで、自動リンクを機能させるかどうかのスイッチを設ける(自動リンクの必要がないページでは動作させないようにする)

既に手動で内部リンクを施していて、今回制作したカスタム投稿タイプで設定する自動リンクが効いては困るケースもあると思います。

そこで最後に、投稿や固定ページの編集画面に、自動リンク機能を使うかどうかのスイッチを設けて、機能の制御をするコードを追加します(サイトをインストールしたてでこれからコンテンツを作成していくようなサイトでは不要かも知れません)。

以下のコードを追加します。

/*** 編集画面に「自動リンクを無効にする」チェックボックスを表示し、値を保存 ***/
/* メタボックスの追加 */
function pwcn_add_disable_keyword_auto_link_meta_box() {
	add_meta_box(
		'pwcn_disable_auto_keyword_link_meta_box', // メタボックスのID
		'キーワードリンクの自動設定', // メタボックスのタイトル
		'pwcn_disable_keyword_auto_link_meta_box_callback', // 表示する関数
		'post', // 通常の投稿タイプ
		'side', // 表示位置
		'high' // 優先度
	);
    
	add_meta_box(
		'pwcn_disable_auto_keyword_link_meta_box', // メタボックスのID
		'キーワードリンクの自動設定', // メタボックスのタイトル
		'pwcn_disable_keyword_auto_link_meta_box_callback', // 表示する関数
		'page', // 固定ページ
		'side', // 表示位置
		'high' // 優先度
	);
}
add_action('add_meta_boxes', 'pwcn_add_disable_keyword_auto_link_meta_box');


/* メタボックスの表示コールバック */
function pwcn_disable_keyword_auto_link_meta_box_callback($post) {
	// 現在の値を取得
		$disable_link = get_post_meta($post->ID, 'pwcn-disableauto-keyword-link', true);

	// Nonceを生成
		wp_nonce_field('pwcn_disable_keyword_auto_link_nonce_action', 'pwcn_disable_keyword_auto_link_nonce');

	$title = __('キーワードリンクの自動設定を有効にする','');
?>
<label for="pwcn-disableauto-keyword-link">
<input type="checkbox" id="pwcn-disableauto-keyword-link" name="pwcn-disableauto-keyword-link" value="1" <?php checked($disable_link, '1'); ?> />

<?php esc_html_e( $title ); ?>
</label>
<?php
}

/* メタボックスの値を保存 */
function pwcn_save_disable_keyword_auto_link_meta_box($post_id) {
	// 自動保存の場合は何もしない
		if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
			return;
		}

	// 権限の確認
		if (!current_user_can('edit_post', $post_id)) {
			return;
		}

	// Nonceの検証
		if (!isset($_POST['pwcn_disable_keyword_auto_link_nonce']) || !wp_verify_nonce($_POST['pwcn_disable_keyword_auto_link_nonce'], 'pwcn_disable_keyword_auto_link_nonce_action')) {
			return;
		}

	// メタボックスの値を保存
	if (isset($_POST['pwcn-disableauto-keyword-link'])) {
		update_post_meta($post_id, 'pwcn-disableauto-keyword-link', '1');
	} else {
		delete_post_meta($post_id, 'pwcn-disableauto-keyword-link');
	}
}
add_action('save_post', 'pwcn_save_disable_keyword_auto_link_meta_box');

そしてリンクに置き換えるコードでコメントアウトしている以下の部分のコメント(//)を外します。

	// チェックボックスがオフの場合のみリンクを設定
		//if (is_single() || is_page()) {
			//$post_id = get_the_ID();
			//$disable_link = get_post_meta($post_id, 'pwcn-disableauto-keyword-link', true);
        
			//if ($disable_link === '1') {
				//return $content; // チェックが入っている場合はそのまま返す
			//}
		//}

これで、投稿や固定ページの編集画面右サイドバーに「キーワードリンクの自動設定を有効にする」というチェック項目が表示され、チェックを入れれば自動リンクが機能するという形にできます。

以上、投稿や固定ページの本文内でキーワードに自動でリンクを張る機能の紹介でした。

実装後はどんなことをしているコードなのか必ず検証してくださいね。

本ページのコードは、本サイトで配布している以下のプラグインのバージョン5.2以降で実装している機能のコードを自由に使えるように書き換えたものであり、ひょっとするとコード中に誤りがあってきちんと動作しないことがあるかも知れませんがご容赦願います。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
リストを横並び表示して枠線を付けた時に項目同士の線が太くなるのを防ぐ方法