コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > CMS チュートリアル > ＆＃＆プレス > WordPressにスタイルとスクリプトをロードする条件付きタグ

WordPressにスタイルとスクリプトをロードする条件付きタグ

Christopher Nolan
リリース： 2025-02-10 08:40:39
オリジナル
661 人が閲覧しました

Conditional Tags to Load Styles and Scripts in WordPress

コアポイント

  • WordPressは、条件付きロードスタイルシートとスクリプトをサポートして、これらのファイルが必要な場合にのみロードされることを確認し、それによりユーザー向けの不要なデータのダウンロードを削減し、削減します。
  • スタイリングとスクリプトは、WordPress.orgコーディング標準で推奨されるベストプラクティスに従ってロードする必要があります。
  • WordPressは、それぞれカスタムスタイルシートとJavaScriptファイルを含めるために使用されているwp_enqueue_styleおよびwp_enqueue_script関数を提供します。これらの関数により、WordPressが必要なすべてのスタイルシートとスクリプトを見つけて、正しい順序でダウンロードすることを保証します。
  • WordPressは、特定の条件下で適用するコードを決定するために、if...elseステートメントと組み合わせて使用​​できる条件付きタグを提供します。これらのタグを使用して、特定のスタイルシートとスクリプトがWebサイトの特定のページにアクセスしたときにのみダウンロードされるようにすることができます。

Conditional Tags to Load Styles and Scripts in WordPress

この記事は、Sitegroundとのコラボレーションで作成されたシリーズの一部です。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

WordPressサイトは、特定のページまたは限られた条件下でのみ特定のStyleSheetsまたはJavaScriptファイルを使用する必要がある場合、サイト上のすべての場所をこれらのファイルをロードする必要はありません。

この記事では、Webサイトがそれらを必要とする場合にのみ、CSSスタイルとスクリプトをロードする方法についてガイドします。このようにして、あなたのウェブサイトはより速くロードされ、追加のファイルを含むページにアクセスしないユーザーは、ブラウザに不要なデータをダウンロードする必要はありません。

なぜワードプレスにスタイルとスクリプトを追加する必要があるのですか？

WordPress開発にアンチパターンがある場合、HTMLドキュメントの>および<link>タグを追加して、StyleSheetファイルとJavaScriptファイルを個別にロードして、実行されます。 <script></script>

WordPress Webサイトの実行には、ソフトウェア自体、多くのプラグイン、アクティブなテーマからStyleSheetsとJavaScriptコードを使用することが含まれます。

これは、テーマまたはプラグインの著者が、特定のインストールのために実行されるスタイルとスクリプト、またはこれらのリソースが必要な順序を事前に考えていないことを意味します。たとえば、jqueryライブラリを例にとってみましょう。 WordPress自体は、このライブラリを使用してAJAXリクエストやその他のタスクを処理できます。また、複数のプラグインやアクティブテーマでも使用できます。

プラグインとテーマの著者が、対応するタグをHTMLドキュメントに直接追加することで必要なスタイルシートとスクリプトを含める場合、これにより競合、リソースが複数回ロードされる、および/または誤った読み込み順序につながる可能性があります。

これが、WordPress.orgエンコーディング標準で推奨されるベストプラクティスに従って、常にスタイルとスクリプトをロードする必要がある理由です。
すべてを調和して機能させるためには、標準のWordPressメソッドを使用してスクリプトとスタイルシートをロードするテーマとプラグインが重要です。これにより、ウェブサイトが効率的なままであり、非互換性の問題はありません。

CSSとJavaScriptを含む - テーママニュアル

およびwp_enqueue_stylewp_enqueue_scriptの使用方法 テーマにカスタムスタイルシートを含める基本的な関数は次のとおりです。

最初の2つのパラメーターのみが必要です。他のパラメーターはオプションです。 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
ログイン後にコピー
ログイン後にコピー

パラメーターはStyleSheetの名前です。ファイルの目的に応じて、メイン、ポートフォリオなどに名前を付けることができます。 JavaScriptプラグインからStyleSheetを含める場合は、プラグインの名前を使用してください。
  • $handleスタイルシートが存在するURLを表します。
  • $srcパラメーターは、このスタイルシートが適切に動作する別のスタイルシートに依存するかどうかを指定します。
  • $depsスタイルシートのバージョン番号を決定します。
  • $verは、すべて、画面、印刷など、スタイルシートに適用されるメディアタイプを表します。
  • たとえば、$media Portfolio.cssという名前のStyleSheetをWordPress Webサイトに追加するコードは次のようになる場合があります。
javaScriptファイルを含めるには、

を使用する必要があります 

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>

アクティブなトピックディレクトリ内のJSサブフォルダーにあるポートフォリオファイルを使用する必要があります。

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のベストプラクティスに従います。ただし、WordPressは、Webサイト上のすべての場所からportfolio.cssとportfolio.jsの両方をダウンロードします。訪問者がポートフォリオページにアクセスしたことがない場合、これは残念ですが、発生する可能性があり、ブラウザは2つの不要なファイルをロードします。

さあ、さらに一歩進んで、WordPressにPORTFOLIO.CSSとPORTFOLIO.JSの両方が含まれていることを確認しましょう。

wordpress条件付きタグ

WordPressは、特定の条件下で適用するコードを簡単に選択するために、通常のif...elseステートメントと組み合わせて使用​​される条件付きタグを提供します。

たとえば、

Webサイトのホームページや他のコードでのみコードを実行する場合は、次のようなものを書きます。 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
ログイン後にコピー
ログイン後にコピー
代わりに、Webサイトのホームページの外側で特定のコードを実行する場合は、次のように書きます。

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サイト上のすべてのページのリストにアクセスします。
  • 興味のあるページのタイトルをクリックして、編集者に開きます。 Conditional Tags to Load Styles and Scripts in WordPress
  • ページがエディターで開いているようになりました。ブラウザのアドレスバーのURLを確認してください。 post =プラス番号のようなものが表示されます。この番号はページIDです。 Conditional Tags to Load Styles and Scripts in WordPress
  • Conditional Tags to Load Styles and Scripts in WordPress ページ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' );
ログイン後にコピー
ログイン後にコピー
この記事では、WordPress Webサイトに条件付き方法でStyleSheetsとスクリプトファイルを含める方法について説明します。場合によっては、余分なスタイルの数が少ないため、専用のスタイルシートを作成することはあまり意味がありません。これは、あなたのウェブサイトが不要になるかもしれないHTTPリクエストのみを生成します。

ただし、たとえば、適切な条件下では、ページまたはテーマエリアのデザインはWebサイトの他の部分とは異なります。スタイルシートとスクリプトの選択的ロードは、WordPressのベストプラクティスに従い、訪問者のブラウザのみが表示されることを保証します。必要なコンテンツに必要なデータの量。

WordPressサイトにカスタムスクリプトとスタイルをどのように含めますか？下のコメントボックスをクリックして共有します。

WordPressの条件付きタグと読み込みスタイルとスクリプトに関する

FAQ（FAQ） WordPressの条件付きタグは何ですか？それらはどのように機能しますか？

WordPressの条件付きタグは、ページが満たす条件に基づいて特定のページに表示されるコンテンツを変更するためにテーマファイルで使用されるPHP関数です。それらは、特定の関数を実行する前に特定の条件が満たされるかどうかを判断するために使用されます。たとえば、条件付きタグを使用して、特定のサイドバーを表示する前にページが単一の投稿であるかどうかを確認できます。

WordPressにスタイルとスクリプトをロードするために条件付きタグを使用する方法は？

条件付きタグを使用してWordPressにスタイルとスクリプトをロードするには、テーマのfunctions.phpファイルにスクリプトとスタイルを追加する必要があります。条件付きタグを使用して、

および

関数を使用できます。たとえば、ホームページにスクリプトのみをロードする場合は、

条件付きタグを使用できます。 wp_enqueue_script wp_enqueue_styleWordPressの一般的な条件付きタグは何ですか？ is_home()

WordPressの一般的に使用される条件タグには、

、

、

、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のさまざまなページにさまざまなスタイルをロードする方法は？

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 サイトの他の関連記事を参照してください。

前の記事：WordPressに対するBrotli圧縮の効果の測定 次の記事：WordPressサイトを新しいホスティングプロバイダーに移行する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート