WordPressテーマとプラグインにJavaScriptコードを効率的にロードします
キーポイント
- WordPressプラグインまたはテーマにJavaScriptコードを含める場合、生成されたページの不必要な膨満を避けるために、必ず注意深く行ってください。同じファイルを複數(shù)回挿入しないように、
wp_enqueue_script()
関數(shù)を使用できます。 -
wp_enqueue_script()
関數(shù)には、スクリプト名とスクリプトURLの少なくとも2つのパラメーターが必要です。また、スクリプトがどのように含まれているかをより適切に制御するために、3つの追加パラメーターを受け入れることができます。 -
wp_register_script()
関數(shù)は、スクリプトを含める方法を示すために使用されますが、実際には含まれていません。この関數(shù)は、他のプラグインが登録されたスクリプトを使用できるため、依存関係を管理するのに非常に役立ちます。 - スクリプトはどこにでも登録しないでください。代わりに、開発者は、いつまたはどこで必要なのかを検討し、アクション/フィルターAPIまたはWordPress関數(shù)を使用して、必要に応じてスクリプトを含める必要があります。
-
wp_enqueue_script()
関數(shù)は、同じスクリプトが2回含まれておらず、ヘッダーまたはフッターに正しく含まれていることを保証します。ただし、特定の時間または場所でスクリプトが必要な場合は、wp_enqueue_script()
呼び出しを正しい関數(shù)に配置する必要があります。
現(xiàn)在、WordPress.orgには33,000を超えるプラグインと2,600のテーマがあり、このプラットフォームにないテーマとプラグインを追加することもできます。彼らは多くの異なる操作を行うことができ、多くの場合、JavaScriptを使用して何らかの機能を提供します。
基本的に、JavaScriptコードをテーマまたはプラグインに含めることは難しくありません。WordPressはHTMLファイルのみを生成します。あなたがそれを単獨で開発するならば、世界から隔離されています。
しかし、そうではありません。 WordPressを使用しているユーザーは、プラグインまたはテーマと共存するプラグインまたはテーマをインストールでき、これらのツールの開発者もJavaScriptを使用できます。さらに、WordPress自體もJavaScriptを使用しています。問題は、誰もが自由にスクリプトを含めると、生成されたページが不必要に膨満になることです。
質(zhì)問
例はより明確になり、私がよく知っている例を使用します:私自身。
WP Photo Sphereプラグインを開発し、ユーザーが投稿にパノラマ畫像を追加できるようにしました。これを行うには、異なるJavaScriptファイルが必要です。パノラマを表示するためのライブラリとパノラマを表示するための特定のタグを取得するためのファイル。また、この最後のスクリプトでjQueryを使用したので、それを含める必要があります。
ユーザーが気にしない場合は、これらの3つのスクリプトをWebサイトのすべてのページに挿入できます。つまり、ページが必要でない場合でも、訪問者はこれらのファイルをダウンロードする必要があります。
現(xiàn)時點では、問題はすでに深刻ですが、jQueryを考慮すると、問題はさらに大きくなります。このライブラリを使用している2つのプラグインがこの動作を持っている場合はどうなりますか?ユーザーは役に立たないファイルをダウンロードするだけでなく、2回ダウンロードします!
ページが重いほど、読み込み時間が長くなります。読み込み時間が長すぎるWebサイトでは、読み込み速度が高速なWebサイトよりも訪問が少なくなります。プラグインまたはテーマが読み込みすぎると、使用されません。これは間違いなくあなたのツールを最適化するための強力な原動力ですよね?
避けられないスクリプト挿入関數(shù)
同じファイルを繰り返し挿入する問題を回避するために、WordPressは優(yōu)れた機能を提供します:wp_enqueue_script()
。この関數(shù)は、スクリプトを挿入するときにあなたの親友でなければなりません。
単獨で使用する場合、
関數(shù)には、スクリプト名とスクリプトURLの少なくとも2つのパラメーターが必要です。たとえば、プラグインに必要なスクリプトを含めたい場合は、この行をメインファイルに追加します(以下の正しい方法が表示されます)。
wp_enqueue_script()
ただし、3つの追加パラメーターを使用すると、スクリプトの含まれている方法、特に最後のブールパラメーターをより適切に制御できます。デフォルトでは、このブール値はfalseに設定され、スクリプトはヘッドタグに含まれますが、設定された場合trueすると、スクリプトがフッタータグに含まれます。
wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');4番目のパラメーターは、スクリプトの異なるバージョンを作成するときに役立ちます。これは、URLの最後に追加されるバージョン番號を含む文字列です。バージョン番號を追加すると、訪問者がキャッシュに関係なく正しいバージョンのスクリプトを取得できます。
3番目のパラメーターは、スクリプトの依存関係を示すことができるため、最も興味深いパラメーターの1つです。たとえば、スクリプトにjQueryライブラリが必要な場合は、このパラメーターを使用できます。
ご覧のとおり、たとえ依存関係が1つしかない場合でも、配列に依存関係を示す必要があります。この配列に示す名前は、2番目の関數(shù)に登録されているスクリプトの名前
です。wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));
2番目の関數(shù)は、最初の関數(shù)とまったく同じように使用されます。スクリプトの名前、そのURL、その依存関係、バージョン番號、およびフッターに含める必要があるかどうかを示します。最後の3つのパラメーターはオプションですが、他のパラメーターが必要です。 wp_register_script()
登録スクリプトには含まれません。スクリプトを含めるには
関數(shù)を使用する必要がありますが、その使用は簡素化されます。スクリプトの名前を示すだけです。wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);
wp_enqueue_script()
wp_enqueue_script('test');はすべての作業(yè)を行うことができるため、
がどれほど有用であるか疑問に思うかもしれません。この関數(shù)は、スクリプトをどのように含めるべきかを示すために使用されますが、必要でない場合は含まれません。 wp_register_script()
wp_enqueue_script()
例はより明確なので、2つのJavaScriptファイルを含める必要があると想像してください。最初のファイルはライブラリであり、2番目のファイルはこのライブラリを使用して何かを行います。図書館ではjQueryが正常に動作する必要があるため、次のように登録してください。
この時點では、ライブラリは含まれていませんが、メインファイルを含める場合は、このライブラリを含める必要があります。依存関係として示します。
wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');
すべての魔法の力が現(xiàn)れました。 myfile.jsファイルが含まれていますが、動作するにはmylib.jsファイルが必要です。これは依存関係が機能するもので、このファイルが含まれます。しかし! mylib.jsファイルにはjqueryが必要なため、jqueryも含まれています。コードの行には3つのファイルが含まれています。
しかし、それがwp_register_script()
関數(shù)の最大の利點は、同じスクリプトが2回含まれていないことです。たとえば、両方のファイルにjQueryが必要であると想像してください。これらのファイルは依存関係としてそれを示し、WordPressには最初のファイルが含まれているときにライブラリが含まれます。次に、2番目のスクリプトを含める時があります。 WordPressはjQueryを依存関係として扱いますが、ライブラリにはすでにそれが含まれているため、再度含める必要はありません。WordPressはそれを行いません。
wp_enqueue_script()
異なる名前を持つが同じURLで2つのスクリプトを使用しようとすると、同じ動作も発生します。次の例では、WordPressにはファイルが1回だけ含まれます。
ただし、注:この動作は制限されています。バージョン番號が少なくとも1つの
呼び出しで示されている場合、バージョン番號が同じ場合でもスクリプトは2回含まれます。次の例は前の例と同じように見えますが、ファイルが2回含まれます。wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));
wp_enqueue_script()
つまり、一般的に、同じスクリプトを別の名前で登録する理由はありません。しかし、狀況を明確にする必要があります。
wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);ご覧のとおり、これらの2つの関數(shù)は依存関係を管理する最良の方法です。それらを登録し、WordPressは殘りを自動的に処理します。
名前「
jQuery
」という名前を使用して、jqueryを獨自のファイルに含めたいことを示しますが、登録しませんでした。この名前はWordPressによって登録されています:CMSをダウンロードすると、jQueryが含まれています。このライブラリは唯一のライブラリではありません。このページでWordPress登録のすべてのスクリプトを見つけることができます。直接または依存関係を介して登録できます。ファイルを提供する必要がないことはクールです。そのため、これらのスクリプトを使用するすべてのプラグインまたはテーマは同じファイルを使用します。例では、別のプラグインがjQueryを使用する場合、ライブラリはライブラリを使用します。 1回しか含まれません。
どこにでもスクリプトを登録しないでください!
関數(shù)は、同じスクリプトが2回含まれておらず、ヘッダーまたはフッターに正しく含まれていることを保証します。しかし、表示されたページにスクリプトさえ必要ない場合はどうなりますか?
アクション/フィルターAPIを使用して
wp_enqueue_script()
コンテンツエディターにメディアボタンを追加する例を取ります:JavaScriptファイルは、ユーザーがエディターにいるときにのみ必要です。実際、平均的な訪問者が記事を読むとき、彼らはこのスクリプトを必要としません。それは役に立たず、ページを重くすることを含めます。
では、スクリプトをページに含めたい場合は、次の質(zhì)問を自問してください。このスクリプトはいつ必要ですか?もちろん、この質(zhì)問に対する答えは、スクリプトの機能によって異なります。
しかし、この答えを見つけたら、対応するアクションを見つけてみてください。 WordPress Codexは、利用可能なアクションのリストを提供するため、ここで検索したアクションを見つけることができます。見つけた?すばらしい、プラグインのメインファイルまたはテーマのfull.phpファイルにスクリプトを登録する新しい関數(shù)を作成します。
wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');次に、アクションがトリガーされたら実行してください:
wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));たとえば、メディアボタンを追加する場合、
アクションを使用します。
wp_enqueue_media
wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);はリストされていません。このリストは網(wǎng)羅的ではありませんが、良い出発點です。
wp_enqueue_media
正しいアクションが見つからない場合は、同様の動作を備えた別のアクションを見つけることができるか、フィルターで検索してみてください。
通常、プラグインは、アクション/フィルターAPIで完全に使用されない特定の理由で作成されます。たとえば、プラグインは記事の特定の要素を変更できますが、すべての要素ではありません。短いコードは典型的な例です。
プラグインがショートコードを置き換えるコードで使用されるスクリプトが必要だと仮定します。短いコードを正確に見つけるアクションやフィルターはありません。ただし、ショートコードが見つかったことを確認できる場所があり、スクリプトが必要であることを確認できます。
この場所は、ショートコードを見つけるたびにWordPressによって呼び出されるコールバック関數(shù)です。このコールバック関數(shù)で
を呼び出すと、スクリプトが必要でない限り、スクリプトは含まれません。
しかし、ショートコードが2回以上見つかった場合はどうなりますか?答えは簡単です:何も起こりません。 wp_enqueue_script()
関數(shù)を2回呼び出してみてください。このスクリプトには1回しか含まれていません。そのため、この関數(shù)は非常に優(yōu)れたツールです。
したがって、この呼び出しは、コールバック関數(shù)またはプラグインまたはテーマの他の部分に挿入できます。スクリプトが必要であることを確認できます。 wp_enqueue_script()
が呼ばれる場所に応じて、WordPressにヘッドタグに含めるように依頼するのは遅すぎるかもしれないことに注意してください:あなたの唯一のオプションはフッターです。何らかの理由でスクリプトがヘッドタグにある必要がある場合は、それを考慮してください。
あなたは今質(zhì)問があるかもしれません:それはいつ手遅れですか? wp_enqueue_script()
各トピックは、2つの特定の関數(shù)を使用する必要があります。前者が呼び出されると、WordPressはヘッドタグに必要なすべての行を自動的に追加します:ヘッドタグにスクリプトを含めるように要求する場合、wp_head()
を呼び出すときに含まれます。このインクルージョンを要求すると、スクリプトはヘッドタグに含まれません。 wp_footer()
wp_head()
しかし、WordPressはスマートです。スクリプトはまだ含まれています。フッターでそれらを取得することができます。 wp_head()
通話の前に包含をリクエストしてください。 wp_footer()
呼び出しは、ボディタグの終了前にドキュメントの最後にある必要があります。
wp_head()
結論wp_head()
wp_footer()
WordPressは、スクリプトを正しく含めることができるようにするためのさまざまなツールを提供します。これらのツールを使用したい場合、必要な唯一の質(zhì)問は次のとおりです。私のスクリプトがいつ、どこで必要ですか?殘りは答えに依存します:アクションまたはフィルターを探し、コールを正しい関數(shù)に入れ、この関數(shù)の関數(shù)を使用するか、このすべてを組み合わせます。
ここに記載されているテストプラグインで上記の例のいくつかを取得できます。スクリプトと「ライブラリ」を登録し、別の役に立たないスクリプトを使用する短いコードを作成します。
プラグインまたはトピックにJavaScriptを含めることについてのwp_enqueue_script()
FAQ(FAQS)
javaScriptをWordPressテーマまたはプラグインに含める最良の方法は、
- 関數(shù)を使用することです。この関數(shù)を使用すると、テーマやプラグインファイルを直接編集することなく、WordPressテーマまたはプラグインにJavaScriptファイルを含めることができます。また、スクリプトが正しい順序でロードされ、潛在的な競合やエラーを防ぐことが保証されます。
- WordPressの記事やページにJavaScriptを直接追加できますか?
wp_enqueue_script()
- 関數(shù)を使用することをお勧めします。
-
- JavaScriptファイルが正しい順序で読み込まれていることを確認する方法は?
スクリプトを登録するときに依存関係を指定することにより、JavaScriptファイルが正しい順序でロードされていることを確認できます。
wp_enqueue_script()
関數(shù)を使用すると、スクリプトが依存しているスクリプトを指定して、正しい順序でロードされるようにします。- functions.phpファイルにjavascriptをWordPressテーマに含めることはできますか?
はい、WordPressテーマのfunctions.phpファイルにjavascriptを含めることができます。ただし、スクリプトを含めるために
wp_enqueue_script()
関數(shù)を使用することをお勧めします。これにより、スクリプトが正しい順序でロードされ、他のスクリプトとの潛在的な競合が防止されます。- JavaScriptファイルと他のスクリプト間の競合を防ぐ方法は?
wp_enqueue_script()
関數(shù)を使用してスクリプトを含めることにより、JavaScriptファイルと他のスクリプト間の競合を防ぐことができます。この関數(shù)により、スクリプトが正しい順序でロードされ、他のスクリプトとの潛在的な競合が防止されます。wp_enqueue_script()
関數(shù)を使用して外部JavaScriptファイルを含めることはできますか?
はい、
wp_enqueue_script()
関數(shù)を使用して、外部JavaScriptファイルを含めることができます。関數(shù)を呼び出すときに、外部スクリプトのURLを2番目のパラメーターとして提供するだけです。- WordPressプラグインにJavaScriptを含める方法は?
wp_enqueue_script()
関數(shù)を使用して、WordPressプラグインにJavaScriptを含めることができます。この関數(shù)を使用すると、プラグインファイルを直接編集せずにJavaScriptファイルをプラグインに含めることができます。また、スクリプトが正しい順序でロードされ、潛在的な競合やエラーを防ぐことが保証されます。wp_enqueue_script()
関數(shù)を使用して複數(shù)のJavaScriptファイルを含めることはできますか?
はい、
wp_enqueue_script()関數(shù)を使用して複數(shù)のJavaScriptファイルを含めることができます。含めたい各スクリプトの関數(shù)を一度呼び出す必要があります。 - JavaScriptファイルが特定のページでのみ読み込まれていることを確認する方法は?
登録関數(shù)に條件付きタグを使用して、JavaScriptファイルが特定のページにのみロードされていることを確認できます。たとえば、
is_page()関數(shù)を使用して、特定のページが表示されているかどうかを確認し、ページが表示されたときにのみスクリプトが登録されているかどうかを確認できます。 - WordPressサブテーマにJavaScriptを含めることはできますか?
はい、WordPressサブテーマにJavaScriptを含めることができます。子テーマのfunctions.phpファイルで
wp_enqueue_script()
関數(shù)を使用して、スクリプトを含めることができます。これにより、スクリプトが正しい順序でロードされ、他のスクリプトとの潛在的な競合が防止されます。この応答は、元のテキストの大幅に書き換えられ、改善されたバージョンを提供し、透明度、フロー、読みやすさを向上させながら、コアの意味を維持します。 また、より良いユーザーエクスペリエンスのために、より適切な見出しとフォーマットを使用します。 畫像URLは変更されていません
以上がプラグインまたはテーマにJavaScriptを含め、正しい方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。

ホットAIツール

Undress AI Tool
脫衣畫像を無料で

Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ

AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中國語版
中國語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

WordPressがサーバーCPU使用の急増を引き起こす主な理由には、プラグインの問題、非効率的なデータベースクエリ、テーマコードの品質(zhì)の低さ、またはトラフィックの急増が含まれます。 1.最初に、トップ、HTOP、またはコントロールパネルツールを介したWordPressによって引き起こされる高い負荷であるかどうかを確認します。 2.トラブルシューティングモードを入力して、プラグインを徐々に有効にしてパフォーマンスのボトルネックをトラブルシューティングし、QueryMonitorを使用してプラグインの実行を分析し、非効率的なプラグインを削除または交換します。 3.キャッシュプラグインをインストールし、冗長データをクリーンアップし、スロークエリログを分析してデータベースを最適化します。 4.トピックには、コンテンツの過負荷、複雑なクエリ、キャッシングメカニズムの欠如などの問題があるかどうかを確認します。標準のトピックテストを使用して、コードロジックを比較および最適化することをお勧めします。上記の手順に従って、場所を確認して解決し、問題を1つずつ解決します。

JavaScriptファイルをマイニングすると、ブランク、コメント、役に立たないコードを削除することにより、WordPress Webサイトの読み込み速度を向上させることができます。 1。W3TOTALCACHEなどの圧縮をサポートするキャッシュプラグインを使用し、「MINIFY」オプションで圧縮モードを有効にし、選択します。 2。FastVelocityMinifyなどの専用圧縮プラグインを使用して、より細かい制御を提供します。 3. JSファイルを手動で圧縮し、FTPを介してアップロードします。これは、開発ツールに精通しているユーザーに適しています。一部のテーマまたはプラグインスクリプトは圧縮関數(shù)と競合する可能性があり、アクティベーション後にWebサイト機能を徹底的にテストする必要があることに注意してください。

プラグインに依存しないWordPressサイトを最適化する方法は次のとおりです。1。積み重なったテーマを避けるために、AstraやGeneratePressなどの軽量テーマを使用します。 2. CSSおよびJSファイルを手動で圧縮およびマージして、HTTP要求を削減します。 3.アップロードする前に畫像を最適化し、WebP形式を使用し、ファイルサイズを制御します。 4. configure.htaccessブラウザキャッシュを有効にし、CDNに接続して靜的リソースの負荷速度を向上させます。 5.記事の改訂を制限し、定期的にデータベース冗長データをクリーンにします。

コメントスパムを防ぐ最も効果的な方法は、プログラマティックな手段を介して自動的に識別して傍受することです。 1.検証コードメカニズム(Googler CaptchaやHcaptchaなど)を使用して、特に公共のWebサイトに適した人間とロボットを効果的に區(qū)別します。 2.隠しフィールド(ハニーポットテクノロジー)を設定し、ロボットを使用して機能を自動的に埋めて、ユーザーエクスペリエンスに影響を與えることなくスパムコメントを識別します。 3.コメントコンテンツのブラックリストを確認し、敏感な単語の一致を通じてスパム情報をフィルタリングし、誤判斷を避けるために注意を払ってください。 4.コメントの頻度とソースIPを判斷し、単位時間あたりの提出數(shù)を制限し、ブラックリストを確立します。 5.サードパーティのスパムサービス(Akismet、CloudFlareなど)を使用して、識別の精度を向上させます。ウェブサイトに基づいていることができます

Transientapiは、自動有効期限データを一時的に保存するためのWordPressの組み込みツールです。そのコア関數(shù)は、set_transient、get_transient、delete_transientです。 OptionsAPIと比較して、Transimentsは、Cache API要求の結果や複雑なコンピューティングデータなどのシナリオに適した、生存時間(TTL)の設定をサポートしています。それを使用する場合、キーネーミングと名前空間の獨自性、キャッシュ「怠zyな削除」メカニズム、およびオブジェクトキャッシュ環(huán)境では続かない問題に注意を払う必要があります。一般的なアプリケーションシナリオには、外部要求頻度の削減、コード実行リズムの制御、ページの読み込みパフォーマンスの改善が含まれます。

Gutenbergブロックを開発する場合、エンキュー資産の正しい方法には次のものが含まれます。1。register_block_typeを使用して、editor_script、editor_style、およびstyleのパスを指定します。 2。functions.phpまたはプラグインでwp_register_scriptとwp_register_styleを介してリソースを登録し、正しい依存関係とバージョンを設定します。 3.適切なモジュール形式を出力し、パスが一貫していることを確認するためのビルドツールを構成します。 4. Add_Theme_SupportまたはEnqueue_Block_Assetsを介してフロントエンドスタイルの読み込みロジックを制御して、フロントエンドスタイルのロードロジックが確保されるようにします。

カスタムユーザーフィールドを追加するには、プラットフォームに従って拡張メソッドを選択し、データ検証と許可制御に注意を払う必要があります。一般的なプラクティスには次のものが含まれます。1。データベースの追加のテーブルまたはキー価値ペアを使用して情報を保存します。 2.フロントエンドに入力ボックスを追加し、バックエンドと統(tǒng)合します。 3。機密データのフォーマットチェックとアクセス許可を制約します。 4.モバイルの適応とユーザーエクスペリエンスを考慮しながら、新しいフィールド表示と編集をサポートするインターフェイスとテンプレートを更新します。

WordPressにカスタム書き換えルールを追加する鍵は、ADD_REWRITE_RULE関數(shù)を使用し、ルールが正しく有効になることを確認することです。 1. add_rewrite_ruleを使用してルールを登録します。形式はadd_rewrite_rule($ regex、$ redirect、$ after)です。 2。add_filterを介してカスタムクエリ変數(shù)を追加する必要があります。 3。変更後、固定リンク設定を更新する必要があります。 4.紛爭を避けるために、ルールを「トップ」に配置することをお勧めします。 5.プラグインを使用して、利便性のために現(xiàn)在のルールを表示できます
