WordPressにスタイルとスクリプトをロードする条件付きタグ
コアポイント
- WordPressは、条件付きロードスタイルシートとスクリプトをサポートして、これらのファイルが必要な場合にのみロードされることを確認し、それによりユーザー向けの不要なデータのダウンロードを削減し、削減します。
- スタイリングとスクリプトは、WordPress.orgコーディング標準で推奨されるベストプラクティスに従ってロードする必要があります。
- WordPressは、それぞれカスタムスタイルシートとJavaScriptファイルを含めるために使用されている
wp_enqueue_styleおよびwp_enqueue_script関数を提供します。これらの関数により、WordPressが必要なすべてのスタイルシートとスクリプトを見つけて、正しい順序でダウンロードすることを保証します。 - WordPressは、特定の条件下で適用するコードを決定するために、
if...elseステートメントと組み合わせて使用できる条件付きタグを提供します。これらのタグを使用して、特定のスタイルシートとスクリプトがWebサイトの特定のページにアクセスしたときにのみダウンロードされるようにすることができます。
この記事は、Sitegroundとのコラボレーションで作成されたシリーズの一部です。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。
WordPressサイトは、特定のページまたは限られた条件下でのみ特定のStyleSheetsまたはJavaScriptファイルを使用する必要がある場合、サイト上のすべての場所をこれらのファイルをロードする必要はありません。
この記事では、Webサイトがそれらを必要とする場合にのみ、CSSスタイルとスクリプトをロードする方法についてガイドします。このようにして、あなたのウェブサイトはより速くロードされ、追加のファイルを含むページにアクセスしないユーザーは、ブラウザに不要なデータをダウンロードする必要はありません。
なぜワードプレスにスタイルとスクリプトを追加する必要があるのですか？
WordPress開発にアンチパターンがある場合、HTMLドキュメントの>および<link>タグを追加して、StyleSheetファイルとJavaScriptファイルを個別にロードして、実行されます。 <script></script>
これは、テーマまたはプラグインの著者が、特定のインストールのために実行されるスタイルとスクリプト、またはこれらのリソースが必要な順序を事前に考えていないことを意味します。たとえば、jqueryライブラリを例にとってみましょう。 WordPress自体は、このライブラリを使用してAJAXリクエストやその他のタスクを処理できます。また、複数のプラグインやアクティブテーマでも使用できます。
プラグインとテーマの著者が、対応するタグをHTMLドキュメントに直接追加することで必要なスタイルシートとスクリプトを含める場合、これにより競合、リソースが複数回ロードされる、および/または誤った読み込み順序につながる可能性があります。
これが、WordPress.orgエンコーディング標準で推奨されるベストプラクティスに従って、常にスタイルとスクリプトをロードする必要がある理由です。すべてを調和して機能させるためには、標準のWordPressメソッドを使用してスクリプトとスタイルシートをロードするテーマとプラグインが重要です。これにより、ウェブサイトが効率的なままであり、非互換性の問題はありません。CSSとJavaScriptを含む - テーママニュアル
およびwp_enqueue_stylewp_enqueue_scriptの使用方法
テーマにカスタムスタイルシートを含める基本的な関数は次のとおりです。
最初の2つのパラメーターのみが必要です。他のパラメーターはオプションです。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
$handleスタイルシートが存在するURLを表します。$srcパラメーターは、このスタイルシートが適切に動作する別のスタイルシートに依存するかどうかを指定します。$depsスタイルシートのバージョン番号を決定します。$verは、すべて、画面、印刷など、スタイルシートに適用されるメディアタイプを表します。-
たとえば、
$mediaPortfolio.cssという名前のStyleSheetをWordPress Webサイトに追加するコードは次のようになる場合があります。
を使用する必要があります
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
または
の一部を配置するかどうかに基づいてTRUEまたはfalse値を設定する最後のパラメーターを除いて、wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)
wp_enqueue_styleポートフォリオをウェブサイトに追加すると仮定します。コードは次のようになります。
<script>
このコードは、WordPress：<head>に指示されています
<body>
WordPressは、ポートフォリオをロードする前にjQueryをダウンロードする必要があります。それ以外の場合は、後者は適切に機能しません（jQueryは、デフォルトで既にWordPressにバンドルされているため、jqueryをインポートする必要はありません）。
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
WordPressでは、このファイルをHTMLドキュメントの
セクションに追加する必要があります。- 複数のスタイルシートまたはスクリプトファイルを含める必要がある場合があります。その場合、すべての呼び出しを1つの関数に
- および にラップし、この関数を適切なWordPressアクションフックアップにフックアップします。
-
<body>これは例です。 WordPressテーマを開発している場合は、functions.phpファイルに追加できます。
WordPressが必要なすべてのスタイルシートとスクリプトを見つけて、正しい順序でダウンロードすることを保証できます。 wp_enqueue_style()
wp_enqueue_script()
function mytheme_styles_scripts() {
// 主样式表，style.css
wp_enqueue_style( 'style', get_stylesheet_uri() );
// 作品集部分的样式表
// (与网站的其余部分不同)
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
// 作品集部分的 JS
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
}
// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );さあ、さらに一歩進んで、WordPressにPORTFOLIO.CSSとPORTFOLIO.JSの両方が含まれていることを確認しましょう。
wordpress条件付きタグ
WordPressは、特定の条件下で適用するコードを簡単に選択するために、通常のif...elseステートメントと組み合わせて使用される条件付きタグを提供します。
Webサイトのホームページや他のコードでのみコードを実行する場合は、次のようなものを書きます。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
WordPressは多数の条件付きタグを提供し、テーママニュアルの条件付きタグセクションで完全なリストを表示できます。
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
条件付きタグを使用して、WordPressがPORTFOLIO.CSSおよびPORTFOLIO.JSをダウンロードすることを確認できます。
これを行う方法を確認しましょう。
ユーザーページID条件付きタグを使用して、ユーザーがWebサイトでポートフォリオページIDを使用しているかどうかを確認できます。
ページIDを理解するには、次のことを実行します
WordPress Webサイトの管理パネルにログインします。
- ページをクリックして、Webサイト上のすべてのページのリストにアクセスします。
- 興味のあるページのタイトルをクリックして、編集者に開きます。
- ページがエディターで開いているようになりました。ブラウザのアドレスバーのURLを確認してください。 post =プラス番号のようなものが表示されます。この番号はページIDです。
-
ページIDがわかったので、条件付きタグを使用して、以下に示すように、以前にテーマのスタイルシートとスクリプトを含んでいたコードを変更できます。
ページIDがわかったので、条件付きタグを使用して、以下に示すように、以前にテーマのスタイルシートとスクリプトを含んでいたコードを変更できます。
ページタイトルを使用
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)
ページの条件付きラベルは、ページタイトルにも適用されます。ポートフォリオページにタイトル「My Portfolio」がある場合、コードは次のようになるかもしれません（条件セクションを簡潔に追加しました）：
ページエイリアスを使用
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
ページエイリアスを使用して条件付きタグを使用できます。これは、ページのユーザーフレンドリーなURLです。以下は、実際のアプリケーションでどのように見えますか：
結論
function mytheme_styles_scripts() {
// 主样式表，style.css
wp_enqueue_style( 'style', get_stylesheet_uri() );
// 作品集部分的样式表
// (与网站的其余部分不同)
wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
// 作品集部分的 JS
wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
}
// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );ただし、たとえば、適切な条件下では、ページまたはテーマエリアのデザインはWebサイトの他の部分とは異なります。スタイルシートとスクリプトの選択的ロードは、WordPressのベストプラクティスに従い、訪問者のブラウザのみが表示されることを保証します。必要なコンテンツに必要なデータの量。
WordPressサイトにカスタムスクリプトとスタイルをどのように含めますか？下のコメントボックスをクリックして共有します。
WordPressの条件付きタグと読み込みスタイルとスクリプトに関する
FAQ（FAQ） WordPressの条件付きタグは何ですか？それらはどのように機能しますか？
WordPressの条件付きタグは、ページが満たす条件に基づいて特定のページに表示されるコンテンツを変更するためにテーマファイルで使用されるPHP関数です。それらは、特定の関数を実行する前に特定の条件が満たされるかどうかを判断するために使用されます。たとえば、条件付きタグを使用して、特定のサイドバーを表示する前にページが単一の投稿であるかどうかを確認できます。WordPressにスタイルとスクリプトをロードするために条件付きタグを使用する方法は？
条件付きタグを使用してWordPressにスタイルとスクリプトをロードするには、テーマのfunctions.phpファイルにスクリプトとスタイルを追加する必要があります。条件付きタグを使用して、
および
関数を使用できます。たとえば、ホームページにスクリプトのみをロードする場合は、条件付きタグを使用できます。 wp_enqueue_script
wp_enqueue_styleWordPressの一般的な条件付きタグは何ですか？ is_home()
、
、、is_single()、is_page()、is_home()、is_front_page()、is_category()などが含まれます。各タグは、ページが単一の投稿、特定のページ、ホームページ、ホームページ、カテゴリページ、タグページ、または著者ページであるかどうかなど、特定の基準をチェックします。 is_tag()
is_author()WordPressで条件付きコードスニペットを作成する方法は？
WordPressで条件付きコードスニペットを作成するには、php
ステートメントで条件付きタグを使用する必要があります。ステートメントのコードは、条件が満たされたときにのみ実行されます。たとえば、ホームページにのみコードスニペットを表示するには、ifステートメントでif条件付きタグを使用できます。 if
is_home()なぜ私のスタイルはWordPressにロードされていないのですか？
あなたのスタイルがWordPressでロードされていない場合、それはいくつかの理由が原因である可能性があります。最も一般的な理由は、スタイルファイルがfunctions.phpファイルに正しく登録されていないことです。
関数を正しく使用していることを確認してください。また、ファイルパスと依存関係が正しいことを確認してください。条件付きタグを使用する場合は、条件が満たされていることを確認してください。
wp_enqueue_styleWordPressで条件付きCSSを正しい方法でロードするにはどうすればよいですか？
WordPressに条件付きCSSをロードするには、
関数を使用してテーマのfunctions.phpファイルにCSSファイルを登録する必要があります。 [条件]タブを使用して、CSSファイルをロードする条件を指定できます。たとえば、CSSファイルをホームページにのみロードするには、条件付きタグを使用できます。 wp_enqueue_style
WordPressで複数の条件付きタグを使用できますか？
はい、WordPressで複数の条件付きタグを使用できます。 （&&）や（||）などの論理演算子を使用してそれらを結合できます。たとえば、ページが単一の投稿であり、ホームページではないかどうかを確認するには、is_single()>条件タグを使用できます。 !is_home()
WordPressのさまざまなページのさまざまなスタイルをロードするには、テーマのfunctions.phpファイルで条件付きタグを使用できます。各スタイルについて、
関数を使用して、特定のページの条件付きタグを確認します。たとえば、ホームページの特定のスタイルをロードし、単一の投稿に別のスタイルをロードするには、wp_enqueue_styleおよびis_home()条件付きタグを使用できます。 is_single()
wordpressの
の違いは何ですか？ is_home()
is_front_page()WordPressの
条件付きタグは、ホームページが表示されているかどうかをチェックしますが、条件付きタグはホームページが表示されているかどうかを確認します。最新の投稿を表示するためにホームページを設定した場合、両方のタグがtrueを返します。ただし、静的ページをホームページとして設定している場合、is_home()はこのページでtrueを返し、is_front_page()は投稿ページとして設定されているページに対してtrueを返します。 is_front_page()
is_home() WordPressのループ以外で条件付きタグを使用できますか？
はい、WordPressでループ以外の条件付きタグを使用できます。ただし、一部の条件付きタグ（
やなど）は、ループの前に使用した場合、予想どおりに機能しない場合があります。これは、WordPressがループが開始された後のクエリの詳細のみを知っているためです。したがって、一般に、ループが開始される以降にこれらの条件付きラベルを使用することをお勧めします。 is_single()
以上がWordPressにスタイルとスクリプトをロードする条件付きタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1666
14
1425
52
1325
25
1273
29
1252
24
パーソナライズされた結果のためにWordPressでユーザー情報をログインする方法
Apr 19, 2025 pm 11:57 PM
最近、ユーザーがお気に入りの投稿をパーソナライズされたライブラリに保存できるようにすることで、ユーザー向けのパーソナライズされたエクスペリエンスを作成する方法を示しました。一部の場所で名前を使用することで、パーソナライズされた結果を別のレベルに引き上げることができます（つまり、ウェルカム画面）。幸いなことに、WordPressにより、ユーザーのログインに関する情報を簡単に入手できます。この記事では、現在ログインしているユーザーに関連する情報を取得する方法を紹介します。 get_currentuserinfo（）を使用します。 関数。これは、テーマ（ヘッダー、フッター、サイドバー、ページテンプレートなど）のどこでも使用できます。それが機能するためには、ユーザーをログインする必要があります。したがって、使用する必要があります
WordPressの記事リストを調整する方法
Apr 20, 2025 am 10:48 AM
WordPressの記事リストを調整するには4つの方法があります。テーマオプションを使用し、プラグイン（投稿タイプの注文、WP投稿リスト、ボックスのものなど）を使用し、コード（functions.phpファイルに設定を追加）を使用するか、WordPressデータベースを直接変更します。
WordPressブログを始める方法：初心者向けのステップバイステップガイド
Apr 17, 2025 am 08:25 AM
ブログは、人々が自分の意見、意見、意見をオンラインで表現するための理想的なプラットフォームです。多くの初心者は自分のウェブサイトを構築することに熱心ですが、技術的な障壁やコストの問題を心配することをためらっています。ただし、プラットフォームが初心者の能力とニーズを満たすために進化し続けるにつれて、今まで以上に容易になり始めています。 この記事では、テーマの選択からプラグインの使用まで、セキュリティとパフォーマンスを向上させ、独自のWebサイトを簡単に作成できるように、WordPressブログを構築する方法を段階的に導きます。 ブログのトピックと方向を選択してください ドメイン名を購入したり、ホストを登録する前に、カバーする予定のトピックを特定することをお勧めします。個人的なウェブサイトは、旅行、料理、製品のレビュー、音楽、またはあなたの興味を引き起こす趣味を中心に展開できます。あなたが本当に興味を持っている領域に焦点を当てることは継続的な執筆を奨励することができます
親カテゴリのアーカイブページに子カテゴリを表示する方法
Apr 19, 2025 pm 11:54 PM
親カテゴリアーカイブページに子カテゴリを表示する方法を知りたいですか？分類アーカイブページをカスタマイズするときは、訪問者にとってより便利にするためにこれを行う必要がある場合があります。この記事では、親カテゴリアーカイブページに子カテゴリを簡単に表示する方法を示します。サブカテゴリが親カテゴリアーカイブページに表示されるのはなぜですか？親カテゴリアーカイブページにすべての子カテゴリを表示することにより、訪問者にとってより一般的で便利になります。たとえば、本に関するWordPressのブログを実行し、「テーマ」と呼ばれる分類法を持っている場合、「小説」、「ノンフィクション」などのサブ課題を追加して、読者ができるようにすることができます。
WordPressの有効期限後の日付で投稿を並べ替える方法
Apr 19, 2025 pm 11:48 PM
過去には、拡張後のプラグインを使用してWordPressの投稿を期限切れにする方法を共有してきました。さて、Activity List Webサイトを作成するとき、このプラグインは非常に便利であることがわかりました。期限切れのアクティビティリストを簡単に削除できます。第二に、このプラグインのおかげで、有効期限後の日付までに投稿を並べ替えることも非常に簡単です。この記事では、WordPressの有効期限後の日付で投稿を並べ替える方法を紹介します。プラグインの変更を反映してカスタムフィールド名を変更するためのコードを更新しました。コメントで私たちに知らせてくれたTajimに感謝します。特定のプロジェクトでは、イベントをカスタムポストタイプとして使用します。今
WordPressホスト用のWebサイトを構築する方法
Apr 20, 2025 am 11:12 AM
WordPressホストを使用してWebサイトを構築するには、次のようにする必要があります。信頼できるホスティングプロバイダーを選択します。ドメイン名を購入します。 WordPressホスティングアカウントを設定します。トピックを選択します。ページと記事を追加します。プラグインをインストールします。ウェブサイトをカスタマイズします。あなたのウェブサイトを公開します。
IFTTT（およびその他）でWordPressとソーシャルメディアを自動化する方法
Apr 18, 2025 am 11:27 AM
WordPress Webサイトやソーシャルメディアアカウントを自動化する方法をお探しですか？ 自動化を使用すると、WordPressのブログ投稿やFacebook、Twitter、LinkedIn、Instagramなどで自動的に共有できます。 この記事では、IFTTT、Zapier、およびUncanny Automatorを使用してWordPressとソーシャルメディアを簡単に自動化する方法を紹介します。 WordPressとソーシャルメディアを自動化する理由 WordPreを自動化します
WordPressでクエリカウントとページの読み込み時間を表示する方法
Apr 19, 2025 pm 11:51 PM
ユーザーの1人が、フッターにクエリの数とページの読み込み時間を表示する方法を他のWebサイトに尋ねました。これをウェブサイトのフッターでよく見ることがよくあり、「1.248秒で64クエリ」のようなものを表示する場合があります。この記事では、WordPressにクエリの数とページの読み込み時間を表示する方法を紹介します。テーマファイル（たとえば、footer.php）で好きな場所に次のコードを貼り付けます。クエリエシン
