JavaScriptでWordPressのtitleタグの内容を変更する方法タグの内容を変更する方法

Posted on by

この記事では、JavaScriptを使用してWordPressの<title>タグの内容を動的に変更する方法を紹介します。特定の条件下でタイトルを変更したい場合に役立つスクリプトの実装手順を説明します。

前提条件

  • WordPressサイトを運営していること
  • カスタムJavaScriptを追加するプラグインがインストールされていること（例：Simple Custom CSS and JS）

<title>タグの変更

以下のように、JavaScriptを使用して<title>タグの内容を変更します。

変更前のHTML例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>元のタイトル</title>
</head>
<body>
    <!-- ページ内容 -->
</body>
</html>

JavaScriptコード

以下のJavaScriptコードを用意します。このコードは、<title>タグの内容を新しいタイトルに変更します。

document.addEventListener('DOMContentLoaded', function() {
    // 新しいタイトル
    let newTitle = '新しいタイトル';

    // <title>タグの内容を変更
    document.title = newTitle;
});

実装手順

カスタムJavaScriptプラグインのインストール

  1. WordPressダッシュボードにログインします。
  2. プラグイン > 新規追加 から “Simple Custom CSS and JS” を検索し、インストールして有効化します。

カスタムJavaScriptコードの追加

  1. プラグイン > Custom CSS & JS > Add JS を選択します。
  2. タイトルに「Change Title Tag」と入力し、以下のコードを貼り付けます。
document.addEventListener('DOMContentLoaded', function() {
    // 新しいタイトル
    let newTitle = '新しいタイトル';

    // <title>タグの内容を変更
    document.title = newTitle;
});
  1. 公開ボタンをクリックして保存します。

動作確認

  1. ブラウザでサイトを開き、ページのタイトルが変更されていることを確認します。
  2. タイトルバーやタブに表示される内容が新しいタイトルになっていることを確認してください。

応用: 条件に応じたタイトル変更

特定の条件に応じてタイトルを変更したい場合は、条件分岐を追加します。

document.addEventListener('DOMContentLoaded', function() {
    // 条件に基づく新しいタイトル
    let newTitle;
    if (window.location.pathname === '/specific-page/') {
        newTitle = '特定のページのタイトル';
    } else {
        newTitle = 'デフォルトの新しいタイトル';
    }

    // <title>タグの内容を変更
    document.title = newTitle;
});

まとめ

JavaScriptを使うことで、WordPressの<title>タグの内容を動的に変更することができます。
これにより、SEOの最適化やユーザーエクスペリエンスの向上が期待できます。

ぜひ、この記事を参考にして、あなたのWordPressサイトにカスタムJavaScriptを追加し、
タイトルを動的に変更してみてください。