カスタムJSや高度な設定を使ってテーマやプラグインで変更できない箇所の文章を変更したい場合の方法について【WordPress/JavaScript】

2024年7月13日

本記事では、WordPressでプラグインやテーマのショートコードでコンテンツを出力する際にどうしても文章を変更したい際に使える、カスタムJSや高度な設定の/body直前に追加すると実装できるコードについて紹介していきます。

特定の文章をJavaScriptコードを使って変更する方法

以下のコードを
・特定の1ページのみに反映させる場合は、投稿ページ・固定ページ下部のカスタムJSに追加
・全てのページに反映させたい場合は、外観⇒高度な設定⇒/bodyタグの直前にコードを追加

document.addEventListener("DOMContentLoaded", function() {
  var changeMsg = document.querySelector("※変更したいクラスやID要素を選択してください");
  if (changeMsg) {
    changeMsg.textContent = "※お好きなメッセージに書き換えてください。";
  }
});

上記のコードのうち、以下の２ヶ所はそれぞれお好みの形に変更して使用してください。

※変更したいクラスやID要素を選択してください
※お好きなメッセージに書き換えてください。

コードの解説

document.addEventListener("DOMContentLoaded", function() { ... });
- documentオブジェクトは、現在のウェブページを表します。
- addEventListenerメソッドを使って、”DOMContentLoaded”イベントをリッスンします。
- “DOMContentLoaded”イベントは、HTMLドキュメントの構造が完全に読み込まれたときに発生します（スタイルシートや画像などのリソースが完全に読み込まれる前）。
- イベントが発生すると、指定されたコールバック関数が実行されます。
var changeMsg = document.querySelector("※変更したいクラスやID要素を選択してください");
- querySelectorメソッドは、指定したCSSセレクタに一致する最初の要素をドキュメントから返します。
- この場合、”※変更したいクラスやID要素を選択してください”は実際のCSSセレクタで置き換える必要があります。例えば、#example-idや.example-classなど。
- 変数 changeMsg にその要素が格納されます。
if (changeMsg) { ... }
- if文を使って、changeMsgがnullでない（つまり、指定したセレクタに一致する要素が存在する）かどうかをチェックします。
changeMsg.textContent = "※お好きなメッセージに書き換えてください。";
- textContentプロパティを使って、changeMsg要素のテキスト内容を変更します。
- 新しいテキストとして”※お好きなメッセージに書き換えてください。”が設定されます。

まとめると、このコードは、ウェブページのDOMが完全に読み込まれた後に、特定の要素のテキスト内容を変更するためのものです。実際の運用では、querySelectorの部分に実際のCSSセレクタを指定する必要があります。