WordPressのページや投稿にJavaScriptを追加すると、機能性とユーザーエンゲージメントを向上させることができます。しかし、WordPressではデフォルトでコンテンツに直接JavaScriptを挿入することはできません。
この制限は、特にインタラクティブな機能やトラッキングスクリプトでサイトをカスタマイズしたい場合には、フラストレーションの原因となる可能性があることを理解しています。
幸いなことに、WordPress サイトに JavaScript を追加する簡単な方法があります。特定のページや投稿、あるいはウェブサイト全体に適用できます。さらに、WPCode のようなコードスニペットプラグインを使用すると、すべてが簡単になります。WPBeginner ではそのようにしています。
この記事では、WordPressのページや投稿にJavaScriptを実装するための2つの簡単な方法を説明します。
JavaScriptとは何ですか？
JavaScriptは、サーバーではなくユーザーのブラウザで実行されるプログラミング言語です。このクライアントサイドプログラミングにより、開発者はウェブサイトを遅くすることなく、多くのクールなことを行うことができます。
動画プレーヤーを埋め込んだり、計算ツールを追加したり、その他のサードパーティサービスを利用したりする場合、WordPressウェブサイトにJavaScriptコードスニペットをコピー＆ペーストするように求められることがよくあります。
一般的なJavaScriptコードスニペットは次のようになります。
<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!>
<script type="text/javascript" src="/path/to/some-script.js"></script>
ただし、投稿やページにJavaScriptコードスニペットを追加すると、保存しようとしたときにWordPressによって削除されます。
これを踏まえて、ウェブサイトを壊すことなく、WordPressのページや投稿に簡単にJavaScriptを追加する方法を説明します。下のクイックリンクを使用して、使用したい方法に直接ジャンプできます。
- 方法1. WPCode を使用して WordPress サイトのどこにでも JavaScript を追加する (推奨)
- 方法2.コードを使用してWordPressにJavaScriptコードを手動で追加する（上級者向け）
- ボーナスヒント: その他のカスタムスニペットガイド
さあ、始めましょう！
方法1. WPCode を使用して WordPress サイトのどこにでも JavaScript を追加する (推奨)
プラグインやツールによっては、正しく機能するためにJavaScriptコードスニペットをウェブサイトにコピー＆ペーストする必要がある場合があります。
通常、これらのスクリプトはWordPressブログのヘッダーまたはフッターセクションに配置されるため、コードはすべてのページビューで読み込まれます。
例えば、Google Analyticsをインストールする際、ウェブサイトの訪問者を追跡できるように、コードはウェブサイトのすべてのページで実行する必要があります。
コードを header.php または footer.php ファイルに手動で追加できますが、テーマを更新または変更するとこれらの変更は上書きされます。
そのため、WordPressサイト全体でJavaScriptをどこにでも追加するには、WPCodeの使用をお勧めします。
WPCode は WordPress で利用可能な最も強力なコードスニペットプラグインです。サイトのあらゆる領域にカスタムコードを簡単に追加でき、何よりも無料です。
まず、無料の WPCode プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、Code Snippets » Headers & Footerに移動する必要があります。
ここには、「ヘッダー」、「本文」、「フッター」という3つの別々のフィールドが表示されます。
これで、これらのボックスのいずれかにJavaScriptコードを追加し、「保存」ボタンをクリックするだけで、WPCodeがウェブサイトのすべてのページに自動的に追加したコードを読み込みます。
投稿やページ内など、サイトの他の場所にもコードスニペットを追加できます。
これを行うには、コードスニペット » + スニペットを追加 に移動し、「独自に作成」をクリックするだけです。
次に、画面に表示されるオプションのリストからコードタイプとして「JavaScriptスニペット」を選択します。
コードの目的を覚えておくのに役立つタイトルを追加できる「カスタムスニペットを作成」ページが表示されます。
その後、コードを「コードプレビュー」ボックスに貼り付けます。
次に、「挿入」セクションまでスクロールします。
次に、ドロップダウンメニューからコードの「場所」を選択するだけです。「ページ、投稿、カスタム投稿タイプ」を見つけて、コードをページまたは投稿のどこに表示したいかを選択します。
WPCodeにスニペットを段落の前または後に挿入させることを選択した場合、そのスニペットが表示される特定の段落を選択できます。
例えば、「挿入番号」フィールドに1を入力すると、コードスニペットは最初の段落の前または後に表示されます。2番目の段落の場合は2を使用します。
その後、画面上部にあるトグルをクリックして「アクティブ」に切り替え、その横にある「スニペットを保存」ボタンをクリックするだけです。
コードスニペットをサイト上で公開するには、これだけで十分です！
方法2.コードを使用してWordPressにJavaScriptコードを手動で追加する（上級者向け）
注意: 以下の方法は初心者およびウェブサイト所有者向けです。WordPress テーマまたはプラグイン開発を学習している場合は、プロジェクトに JavaScript とスタイルシートを正しくエンキュー する必要があります。
この方法では、WordPressのファイルにコードを追加する必要があります。以前にこれを実行したことがない場合は、WordPressにコードをコピー＆ペーストする方法に関するガイドをご覧ください。
まず、WordPressサイトのヘッダーにコードを追加する方法を説明します。以下のコードをコピーして、functions.phpに追加する必要があります。
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
コードを使用して特定のWordPress投稿にJavaScriptを追加する
JavaScriptを単一のWordPress投稿にのみ追加したい場合は、コードに条件付きロジックを追加する必要があります。
まず、以下のコードスニペットを見てみましょう。
function wpb_hook_javascript() {
if (is_single ('5')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
上記のコードは、投稿IDが「5」と一致する場合にのみJavaScriptを実行します。「5」をご自身の投稿IDに置き換えてください。
投稿IDを見つけるには、JavaScriptを実行したい投稿を開くだけです。その後、ページのURLで投稿IDを見つけることができます。
コードを使用して特定のWordPressページにJavaScriptを追加する
特定の WordPress ページにのみ JavaScript を追加したい場合は、上記のようにコードに条件付きロジックを追加する必要があります。
次の例をご覧ください。
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
上記のコードは、ページ ID が '10' の場合にのみ JavaScript を実行します。'10' をご自身のページ ID に置き換えてください。
上記と同じ方法でページIDを見つけることができます。JavaScriptを実行したいページを開き、URLに表示されるページIDをメモしてください。
コードを使用して特定のWordPress投稿またはページにJavaScriptを追加する方法（フッターのコード内）
JavaScript をサイトのヘッダーではなくフッターで実行したい場合は、以下のコードスニペットをウェブサイトに追加できます。
function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
このコードスニペットは、wp_head の代わりに wp_footer にフックします。また、上記の例のように、条件付きタグを追加して特定の投稿やページに JavaScript を追加することもできます。
ボーナスヒント: その他のカスタムスニペットガイド
WordPressのページや投稿に簡単にJavaScriptを追加する方法を学んだところで、さらにサイトの機能を拡張するためのカスタムコードスニペットをいくつか見ていきましょう！
WordPressにjQuery FAQアコーディオンを追加する
jQueryは便利なJavaScriptライブラリで、サイトにインタラクティブな機能を追加します。
WordPressでjQueryのFAQアコーディオンを使用すると、コンテンツを整理しやすくなります。質問と回答が折りたたみ可能な形式で表示されるため、訪問者は長いテキストをスクロールせずに情報を簡単に見つけることができます。
しかし、それだけではありません。
FAQ アコーディオンは、検索エンジンが好む方法でコンテンツを構造化することにより、検索エンジンのランキングを向上させることができます。WPBeginner では、jQuery FAQ アコーディオンが一般的な質問に対処し、より多くの訪問者を引き付け、SEO を改善するのに役立つこともわかりました。
WordPressでjQuery FAQアコーディオンを追加する方法については、こちらの記事をご覧ください。WordPressでjQuery FAQアコーディオンを追加する方法。
WordPressにiFrameコードを埋め込む
iFrame（インラインフレーム）を使用すると、ファイルを自分でホストすることなく、動画やその他のコンテンツをウェブサイトに埋め込むことができます。これにより、帯域幅とストレージスペースが節約され、動画を直接WordPressにアップロードするよりも優れた選択肢となります。動画を直接WordPressにアップロードすることは、そもそも行うべきではありません。WordPressに動画を直接アップロードする。
iFrameを使用すると、外部ソースからコンテンツを取得するため、サイトの速度とパフォーマンスを向上させることもできます。
詳細については、WordPress で iframe コードを簡単に埋め込む方法 に関するガイドをご覧ください。
WordPressでカスタム投稿タイプごとに個別のRSSフィードを作成する
WordPressでは、映画レビュー、商品、お客様の声など、特定のコンテンツニーズに合わせてカスタマイズされたカスタム投稿タイプを作成できます。この機能は、サイトの整理を改善し、ユーザーエクスペリエンスを向上させるのに役立ちます。
各カスタム投稿タイプにRSSフィードを設定できることに注意してください。これにより、訪問者は専門化されたフィードを受け取ることができ、コンテンツとのよりパーソナライズされたエンゲージメントが可能になります。
WordPressでカスタム投稿タイプごとに個別のRSSフィードを作成する方法については、こちらのガイドをご覧ください。
より多くのカスタムスニペットのアイデアについては、専門家が選んだ初心者向けの最も役立つWordPressコードスニペットをご覧ください。
この記事で、WordPressのページや投稿に簡単にJavaScriptを追加する方法を学べたことを願っています。また、WordPressでJavaScriptやスタイルを適切に追加する方法に関するガイドや、WordPressのfunctions.phpファイルで非常に役立つトリックの専門家による厳選リストもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Mesht
最初の方法（Wpcode）で、1つのページにのみスクリプトを追加できますか？
WPBeginnerサポート
You can use the first method to add it to multiple pages not just one
管理者
デニス・ムトミ
私は多くのクライアントサイトを管理しており、WPCodeは私にとって頼りになるツールとなっています。クライアントのウェブサイトにトラッキングスクリプトやカスタム機能を追加する必要がある場合、非常に信頼できます。
コードを追加する際に必ず行うべきことは、WPCodeを使用する前に必ずサイトをバックアップすることです。私は常にステージング環境で全てをテストします。信じてください、これでどれだけ多くの頭痛の種を回避できたことか！特にスクリプトがテーマの機能と競合する場合など。
そして、最良の部分は、何か問題が発生した場合でも、問題のあるコードスニペットを無効にするだけで済むことです。とても簡単です！
イジー・ヴァネック
WPCodeは、すでに完了していた私のウェブサイト全体をこのように救ってくれました。しかし、最終的にモバイルデバイスでメニューの動作が非常に悪いことが判明しました。JavaScriptの形で解決策を見つけましたが、どこにどのようにウェブサイトに挿入すればよいかわかりませんでした。これは私のすべての作業を節約し、モバイルデバイスでメニューを閉じる問題も解決しました。
WPBeginnerサポート
プラグインがお役に立てて嬉しいです！
管理者
wing
なぜ最も簡単な方法、つまり WordPress の「カスタム HTML」ブロックを直接使用して、投稿またはページに JavaScript コードを挿入しないのか不思議です。試してテストしました。問題ありません。非常に非常に非常に簡単な方法です。
WPBeginnerサポート
特定のコードによりますが、このガイドで紹介している方法は、ほとんどのJavaScriptがヘッドセクションで実行されることを望むため、コードをヘッドセクションに追加する方法です。
管理者
Rejane
アクティブな子テーマを使用しており、「ヘッダーとフッターの挿入」プラグインを使用して、メールマーケティングサービス用のJavaScriptコードを追加しました。うまくいきました！しかし、残念ながら、このサービスとのアカウントをキャンセルする必要があり、JavaScriptコードを削除したいと思います。子テーマを使用している場合、どのようにすればよいですか？簡単な方法や別のプラグインはありますか？
WPBeginnerサポート
You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site
管理者
Paul Liles
3点ドットメニューがどこにも見つかりません。助けてください。
WPBeginnerサポート
編集ページの先頭にあるはずです。クラシックエディターを使用している場合は、[画面オプション]の下にあります。
管理者
Eleni
スクリーンオプションタブにカスタムフィールドオプションが表示されません。自己ホスト型ウェブサイトを使用しており、Code Embedプラグインをインストールして有効化しています。
WPBeginnerサポート
ブロックエディターを使用している場合、設定は設定エリアに移動しました。
管理者
アシュリー
このサイトは素晴らしいです!!! 必要なものを、可能な限り簡単な方法で見つけることができたのは、これで3回連続です。ありがとうございます!!
WPBeginnerサポート
Glad our guides were helpful
管理者
Dude
こんにちは、WPbeginnersの皆さん！2番目の方法はうまくいきました。ただ、質問があります。別の目的で別のjsコードを追加したい場合、コードはどのように開始すればよいですか？コードの後に何を追加してもグレーアウトしてしまうからです。どうすればよいかわかりません。別のページで同じことをしたいのです。何かアイデアがあれば教えてください。
WPBeginnerサポート
使用しているコードによって大きく異なりますが、コードが
/scriptタグの前に来るようにする必要があります。管理者
Jonathan
ありがとうございます。この記事は非常に役立ちました。functions.phpオプションを使用しました。うまく機能しました。
WPBeginnerサポート
Glad our guide was helpful
管理者
エリーズ
うまくいきました。本当にありがとうございました！
WPBeginnerサポート
You’re welcome
管理者
Martin
方法 3 に関する質問:
値を入力して「カスタムフィールドを追加」をクリックした後、ウェブサイトのフロントエンドにコードを表示するにはどうすればよいですか？
ショートコードウィジェットまたはページのテキストエディターを使用して「{{CODEmyjscode}}」を挿入する必要がありますか？
WPBeginnerサポート
現時点では、テキストエディタまたはコードエディタを使用したいでしょう。
管理者
Bret Bernhoft
WordPressを使い始めた頃、JavaScriptは私にとって不可能に思えました。しかし、今日では毎日その言語を書いており、しばしばWordPressと組み合わせて使用しています。
この旅を始めたばかりの頃、JavaScriptを書くのがどれほど簡単だったかがもっとはっきりわかっていたらよかったのにと思います。ツールとヒントをありがとうございます。試してみます。
WPBeginnerサポート
Glad we could share some easy methods for adding JavaScript to your site!
管理者
ibrahim
うまくいきました。とても助かりました。ありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
ケイト
カスタム JavaScript を投稿に追加しようとしましたが、何も起こりません。メソッド 3 の指示に正確に従いましたが、ページをプレビューすると、JavaScript が配置されるはずの場所が空白になっています。何か原因はありますか？
WPBeginnerサポート
その問題の最も一般的な理由と解決方法については、プラグインのFAQを確認することをお勧めします。
管理者
サミュエル
新しいWordPressブロックシステムでは、これはどのように機能しますか？
ページに埋め込もうとしていますが、プレビューでは{{code1}}と表示されるだけです。
WPBeginnerサポート
プラグインのサイトでの使用方法によって異なります。FAQセクションに最新の情報があります。
管理者
Akash
この情報ありがとうございます。本当に素晴らしい、役立つ投稿です。
WPBeginnerサポート
You’re welcome, glad our article was helpful
管理者
Alex
こんにちは、素晴らしいガイドです！問題は、「カスタムフィールド」が画面オプションの下にないことです…なぜだかわかりますか？
WPBeginnerサポート
あなたのサイトはWordPress.comにありますか？
管理者
ジェームズ
こんにちは。プログラマーにツールを作成してもらい、JavaScriptで完成しました。これまでWeeblyを使用していましたが、Weeblyはヘルプのリクエストに反応しなくなり、何百ものブログがそれを証言しています。そのため、Weeblyの代替案を探しています。WordPressは2MBのJavaScriptツールを処理できますか？
ありがとう、
WPBeginnerサポート
そのようなツールが使用できるかどうかは、ウェブサイトのプラットフォームではなく、ホスティングによって決まります。また、ツールの設定方法によって、ツールを転送できるかどうかが決まります。
管理者
Matt
スクリプトを単一のページに、ただしボディではなくヘッドに追加する必要がある場合はどうなりますか？Googleコンバージョンピクセルをフォーム送信完了ページにのみ追加しようとしています。
WPBeginnerサポート
You would want to take a look at the section of the article called: Adding JavaScript to a Specific WordPress Post or Page Using Code
管理者
quy
まるで魔法のように機能します。本当にありがとうございます
WPBeginnerサポート
You’re welcome, glad our article could help
管理者
Manjeet Chhillar
この非常に役立つ投稿をありがとうございます。
私の質問は次のとおりです。複数の投稿に「方法2」を実装するにはどうすればよいですか？すべての投稿の投稿IDをカンマで区切って追加する必要がありますか？
WPBeginnerサポート
はい、この方法では、カンマをシングルクォートの外側に配置し、新しいクォートセットで開始する必要があります。
管理者
Deborah
WordPressユーザーが投稿やページにJavaScriptを追加できる3つの方法を共有していただきありがとうございます。リポジトリのInsert Headers and Footersプラグインページで読んだところ、このプラグインはスクリプトを追加するためにエンキューメソッドを使用していません。これはWordPressでスクリプトを追加するための推奨される方法です。
私の誤解ですか？それとも、Insert Headers and Footersはスクリプトを追加するためにエンキューを使用していますか？エンキューを使用していない場合、プラグインがエンキューを使用するように更新されるのはいつかご存知ですか？
WPBeginnerサポート
現在、プラグインは追加されたスクリプトをエンキューしていません。これは、当社のプラグインで追加されたすべてのものがエンキューを望むわけではない可能性があるためです。追加されたコードをエンキューしたい場合は、別の方法を使用することをお勧めします。
管理者
デイブ G
いいですね、ありがとうございます。ちょうど必要な投稿IDが16でした。「`if (is_single (’16’)) { “`」
未来から来たのですか？
WPBeginnerサポート
Not yet at least
管理者
ゴル・アルジュン
この投稿は非常に参考になります。ありがとうございます。カスタマイズは可能です
WPBeginnerサポート
You’re welcome
管理者
Thomas
ブログのすべての投稿にスクリプトを追加する必要があります。個々の投稿にはプラグインがあります。問題は、投稿が数千もあり、すべての投稿にスクリプトを追加する必要があることです。何か提案はありますか？よろしくお願いします。
WPBeginnerサポート
ヘッダーとフッターの挿入オプションは、同じコードを使用しているすべての投稿とページにコードを配置します。
管理者
Thomas
早速のご返信ありがとうございます。
スクリプトは投稿のみで実行したいと考えています。すべてのページで実行したくはありません。
WPBeginnerサポート
投稿にのみ追加されるウィジェットがある場合は、ウィジェットにコードを追加してみてください。
Ann
Headers and Footersスクリプトを使用してみましたが、jQueryが正しく機能していないようです。
WPBeginnerサポート
サイトに追加する特定のコードによって、機能しない可能性のある理由が異なります。コードを提供した人に、コード自体が機能しているか確認することをお勧めします。
管理者
Andrew Golay
ヘッダー/フッタープラグインを修正するか、この記事を変更してください。ありがとうございます。
WPBeginnerサポート
当社のプラグインは現在テストで動作していますが、必ずもう一度確認します。
管理者
lynn
ありがとうございます!! とても参考になりました。
WPBeginnerサポート
Glad it was helpful
管理者
レムコ
この素晴らしい投稿をありがとうございます！
この方法（JSON-LD）で、WooCommerceのページに構造化データを実装することは可能でしょうか？
WPBeginnerサポート
おそらく可能ですが、現在使用している SEO プラグインがある場合は、そのプラグインに確認して、プラグインがすでにそれを行っているかどうかを確認する必要があります。
管理者
graham
一般化しつつあるニーズに対する、よりよく知られた選択肢をうまくまとめたものです。しかし、多くの WordPress ユーザーはプログラマーではなく（そしてなりたくもない）です。「プログラミング不要」という約束の WordPress を使用しているのはそのためです。
別の可能性として、JavaScript の代わりにカスタムスクリプトを使用し、それをページに直接埋め込む方法があります。どのコンポーネントにも配置できますが、私は . を推奨します。
あとは、スクリプトをコンパイルして実行できるものがあれば十分です。これを行うプラグインを見つけるのは難しいです。私自身の検索では、まだ何も見つかっていません。しかし、私自身がJavaScriptプログラマーなので、自分で作成し、EasyCoderとしてライブラリに配置することができました。スクリプトは英語に似ており、SQLと同じくらいの複雑さで、Webページでコンテンツやインタラクティビティを管理するために一般的に必要とされるほとんどのことができます。EasyCoderは完全にプラグイン可能なので、他のプログラマーも自分でモジュールを追加できます。