WordPressでインラインスクリプトを追加するための最も効果的な方法

公開: 2022-06-16

インラインスクリプトは、開発者の背筋を震わせる2つの簡単な言葉です。インラインスクリプトは、WordPressの投稿のテキストにJavaScript（JS）、CSS、およびHTMLを追加する簡単な方法です。それらは多くの目的に使用できますが、一般的な用途の1つは、新しいWordPress記事を公開するときにその場で変更を加えることです。必要ないと主張する人もいるかもしれませんが、そうすることで、Webサイトがスムーズかつ効率的に実行されるようになります。

ほとんどのWordPressユーザーが見落としていることの1つは、サイトのスクリプトを補足することです。インラインテキストを単一のページに実装する場合でも、Webサイト全体に実装する場合でも、WordPressを使用して実装する方法はたくさんあります。インラインスクリプトをWordPressWebサイトに追加することは、それを正しく行うための適切な方法を理解すれば、同じくらい簡単になります。このブログ投稿では、WordPressにインラインスクリプトを簡単に追加するための最も効果的な方法について説明します。詳細については、読み続けてください。

Wp_print_scripts経由で追加

WordPressのインラインテキストを追加する場合は、WordPressのwp_print_scriptsまたはadmin_print_scripts関数が答えです。 WordPress wp_print_scriptsは、ドキュメントの先頭にテキストタグを表示できます。これは通常、JSまたはCSSファイルを含めるときに行われます。このWordPress機能を使用すると、サイトをよりインタラクティブにしたり、新しい機能を追加したりできます。他のWordPress関数と同様に、Webサイトで使用する前に従うべきいくつかの簡単なルールがあります。

この関数は、WordPressプラグインオプションに基づいて3つの変数を確立し、admin_print_scriptsフックを使用してフロントエンド（ヘッドセクション）に出力します。インライン文字を管理領域に追加するには、wp_print_scriptsをadmin_print_scripts関数に置き換えて、1日呼び出すこともできます。

WordPressを最初にインストールすると、サイトに自動的に追加される多くのテキストが付属しています。これにより、サーバーの読み込み時間とCPU使用率が増加する可能性があります。これに対抗する1つの方法は、wp_print_scripts関数を使用することです。そのため、必要な場合または必要な場合にのみテキストをロードします。そうは言っても、wp_print_script関数を使用してWordPressの投稿にインライン文字を追加することの長所と短所を簡単に見てみましょう。

長所：

WordPressのページの「ヘッドセクション」にインラインテキストを追加するのはいつでも簡単です。
追加するコードには制限がありません。つまり、JS変数、関数、メソッド、条件、またはサイトに追加したいものを追加できます。

短所：

追加したコードを登録済みのスクリプトに関連付ける特定の方法はありません。
ほとんどの場合、さまざまな要因の出力コードは、出力コードの場所を制御するための実際の一貫した方法ではない可能性があります。ただし、<add_action>の下の<priority>パラメーターをいつでも利用して、追加したコードの場所を制御できます。

wp_add_inline_script（）関数を使用します

最近、WordPressは、WordPressの投稿にインラインJavaScriptを追加するために適用される新しい関数をリリースしました。ただし、この新しい統合は4.5 WordPressバージョン以降と互換性があり、他の利用可能なオプションと比較して、インラインテキストを追加するためのより優れた方法です。 wp_add_inline_script（）関数を定義しており、これで問題なく作業が完了することが期待されます。そこにいる最も経験豊富なWordPress開発者でさえ、この事実を確認することができます。

wp_add_inline_script（）関数は、WordPressページのコードを編集せずにサイトにインライン文字を追加する方法です。これにより、FTPアクセスやプラグインを使用せずに、リアルタイムで変更を加えることができます。この機能は、WordPressサイトをカスタマイズするために使用できる重要な統合の1つでもあります。この手順では、Webサイトのコード内にインラインテキストを追加できます。つまり、WebページのHTMLタグに直接追加されます。これにより、外部のJSファイルや他のWebサイトへのリンクを使用するよりもはるかに多くのカスタマイズが可能になります。

長所：

wp_add_inline_script（）関数は、WordPressブログにインライン文字を追加するための貴重な方法です。
これは、開発者がWordPressテーマやプラグインファイルを変更したり、header.phpテンプレートファイルを編集したりせずにJSコードを追加するための簡単で便利な方法です。
これは、GoogleAnalyticsコードなどのスクリプトを追加する場合に役立ちます。これにより、GoogleAnalyticsの機能や設定が更新されるたびにheader.phpファイルを編集する必要がなくなります。

短所：

wp_add_inline_script（）関数の唯一の欠点は、4.5WordPressバージョン以降でのみ使用できることです。

wp_localize_script（）関数を使用します

wp_localize_script（）関数は、WordPressWebサイトの個々のページにインライン文字を追加するのに役立つWordPressユーティリティです。イベントやプロモーションなど、サイトで迅速かつ一時的な機能が必要な場合に最適です。この関数は、可変数の引数を受け入れ、ドキュメントのヘッドに追加されたJS文字列のリストを出力します。これを行うと、たとえば、jQueryを使用していて、特定のページでのみスクリプトのコードが必要な場合に役立ちます。

Wp_localize_script（）は、JSファイルをエンキューし、変数を含む連想配列を定義する「shapeSpace_script」のID/ハンドルをファイルに与えます。最後に、これらのJS変数はwp_localize_script（）に渡され、登録されたshapeSpace_scriptにインラインで含まれます。その結果、shapeSpace.varlなどのJS変数を適用できるようになります。この関数は、言語の翻訳と国際化で使用するJS変数のローカライズ専用です。ただし、ほとんどのWordPress開発者は、サイトにインライン文字を追加する一般的な方法としてこれを使用しています。

長所：

Wp_localize_script（）は、既存の登録済みスクリプトとの「read：require」の関連付けを有効にします。これは、Webサイトのカスタムテキスト出力の相対的な場所を制御するための優れた一貫した方法を提供することを意味します。

短所：

唯一の欠点は、JS変数（ var ='value' ）しか追加できないことです。したがって、wp_localize_script（）を使用して、関数、条件、方程式などの他のインラインスクリプトを追加することはできません。

フォールバックを使用する

前述のように、wp_add_inline_script（）などの特定のメソッドは、4.5WordPressバージョン以降でのみ使用できます。ただし、すべてをまとめることで、使用しているWordPressのバージョンに関係なく、WordPressファイルにインライン文字を追加するフェイルプルーフの方法を作成できます。これを行う最も効果的な方法は、ヘッドセクション（フロントエンド）の投稿プラグインの3つの関数を使用することです。

最初に行うべき重要なことは、JSファイルをキューに入れ、次の関数を呼び出して、wp_add_inline_script（）関数を介してインライン行を追加することです。 3番目の機能は、4.5バージョンより古いものへのフォールバックです。これは間違いなくWordPress4.5と他の特徴的なバージョンで機能します。これが本当の魔法が起こる場所です。フォールバックメソッドを続行して、選択したWordPressバリアントで2.1などに戻って作業を完了することができます。

長所：

一度にロードするHTTPリクエストを追加せずに、Webサイトに複数のJSファイルを含めることができます。これは、Webサイト訪問者の読み込み時間を短縮できることを意味します。
1つのスクリプトが失敗した場合でも、同じフォールバック機能内の他のスクリプトは、相互に依存しているために異なるスレッドから非同期にロードされるため、引き続き機能します。

短所：

スクリプトが失敗すると、ユーザーにはコードの代わりに空のスペースが表示される場合があります。これはそれほど大したことではないように思えるかもしれませんが、WordPress開発者として注意することが重要です。

WordPressでのインラインスクリプトの追加に関する要約

自由に使用できる代替手法の制限により、wp_add_inline_script（）関数はWordPressインライン文字を追加するための優れたメソッドになります。これは今日最も効果的な解決策と考えられており、一般的な信念に反して、フォールバック手法を使用すれば、この機能はどのバージョンのWordPressでも利用できます。参考までに、WordPressコアにインラインスクリプトを追加する最も効果的な方法の簡単な要約を以下に示します。

wp_add_inline_script（）を使用すると、登録済みのスクリプトにJSコードを追加できます。
wp_print_scriptsまたはadmin_print_scriptsを使用すると、フロントエンドまたはヘッダーセクションに任意のコードをインストールできます。

wp_localize_script（）を使用すると、登録済みのスクリプトにJS変数を追加することもできます。
フォールバックを使用すると、WordPressのどのバージョンでも正確に機能する完全なテクニックを作成できます。

注： JavaScriptの代わりにインラインスタイル/ CSSを追加する場合、WordPressには、スクリプトの追加に使用されるものに似た一連の「スタイルの追加」関数が用意されています。たとえば、wp_print_stylesとwp_add_inline_stylesを確認してください。

結論

インラインスクリプトは、WordPressWebサイトに機能を追加するためのすばやく簡単な方法です。スクリプトをJavaScriptで作成することにより、追加のプラグインやコードを必要とせずに、ページ上で実行したいことをすべて実行するインラインスクリプトを作成できます。このチュートリアルでは、WordPressでインラインスクリプトを追加するための最も効果的な方法の概要を説明します。

WPサイトにスクリプトを追加した経験のあるWordPressエディターですか？仕事を早く終わらせたい初心者開発者には、どの方法をお勧めしますか？コメント欄をご利用いただき、ご意見・ご不明な点がございましたらお気軽にお問い合わせください。

著者の経歴：

アーサーはデジタルマーケティングのスペシャリストであり、ビジネスブロガーです。彼はさまざまなソーシャルメディアを通じて興味深いスタートアップを開発し、クライアントとの経験を共有してビジネスをより良く促進しています。アーサーは暇なときに日本語を勉強し、デジタルトランスフォーメーションのトレンドに関する記事を書いています。