キーワードに関連ページや外部リンクを自動付与する方法

記事内の特定キーワードに自動で関連ページや外部リンクを付与する方法を紹介します。投稿記事を手動で編集する手間を減らし、内部リンクの最適化や外部リンクへの誘導に便利です。

1 実装のポイント

• キーワードとリンクURLを配列で設定
• 記事本文に自動でリンクを挿入
• 既存リンク内には適用しないように工夫
• 簡単なカスタムCSSでリンク装飾も可能

2 functions.php にコードを追加

//-------------------------------------------
// 記事本文の特定キーワードに自動リンクを付与
//-------------------------------------------
function auto_link_keywords($content) {
    $links = array(
        'WordPress' => 'https://wordpress.org/',
        'PHP'       => 'https://www.php.net/',
        'テーマ'    => 'https://ja.wordpress.org/themes/'
    );

    foreach ($links as $keyword => $url) {
        // 単純置換（既存リンク内は非対応）
        $content = str_replace(
            $keyword,
            '<a href="' . esc_url($url) . '" target="_blank" class="auto-link">' . $keyword . '</a>',
            $content
        );
    }

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

    

3 汎用CSS

/* -----------------------------
 * 自動リンク装飾
 * ----------------------------- */

/* 通常時のリンクスタイル */
.auto-link {
    color: #0073aa;         /* 青系のリンク色 */
    text-decoration: underline;  /* 下線表示 */
}

/* ホバー時のリンクスタイル */
.auto-link:hover {
    color: #005177;         /* 濃いめの青に変更 */
    text-decoration: none;  /* 下線を消す */
}
    

4 テーマ別サンプルCSS

4.1 Lightning用

/* -----------------------------
 * Lightning用 自動リンク装飾
 * ----------------------------- */

/* 通常時のリンクスタイル */
.auto-link {
    color: #ff9800;       /* オレンジ系のリンク色 */
    font-weight: bold;    /* 太字で強調 */
}

/* ホバー時のリンクスタイル */
.auto-link:hover {
    color: #e65100;       /* 濃いオレンジに変化 */
}
    

4.2 Cocoon用

/* -----------------------------
 * Cocoon用 自動リンク装飾
 * ----------------------------- */

/* 通常時のリンクスタイル */
.auto-link {
    color: #90caf9;                     /* 薄いブルー系の文字色 */
    border-bottom: 1px dashed #42a5f5; /* 下線は破線でブルー系 */
}

/* ホバー時のリンクスタイル */
.auto-link:hover {
    color: #1e88e5;                     /* 濃いブルーに変化 */
    border-bottom: 1px solid #1e88e5;   /* 下線も濃いブルーの実線に変化 */
}
    

5 代用プラグイン

手動管理せず自動でリンクを付与する場合、「Auto Post Link」などのプラグインを使う方法もあります。

6 まとめ

• 特定キーワードに自動でリンクを付与可能
• 内部SEOや外部リンク誘導に便利
• CSSで装飾して目立たせることもできる
• 安全に実装するならDOMベースの処理がおすすめ