パフォーマンスを向上させるために WordPress で CSS および JS スクリプトをエンキューする-PHPチュートリアル-php.cn

パフォーマンスを向上させるために WordPress で CSS および JS スクリプトをエンキューする

WBOY

リリース： 2024-08-22 06:34:39

オリジナル

302 人が閲覧しました

Enqueue CSS and JS Scripts in WordPress for Better Performance

WordPress はオープンソースソフトウェアです。ユーザーは自由にインストール、変更、配布できます。ソースコードは誰でもアクセスできるため、何百万人もの WordPress の専門家や開発者がツールや拡張機能を作成し、一般に共有できます。

CSS ファイルと JS ファイルを wordpress プロジェクトにエンキューする方法を見てみましょう。

ほとんどの新人開発者は次のことを好みます

「header.php」内

<head>
    <title><?php echo get_bloginfo(); ?></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/custom.css" rel="stylesheet" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</head>

ログイン後にコピー

「footer.php」内

<footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</footer>

ログイン後にコピー

しかし、これは Wordpress プロジェクト内で CSS および JS ファイルをキューに入れる適切な方法ではありません。これをドッキングするには、まず「functions.php」ファイルに移動し、次のようにファイルをキューに追加します。シグマのトリックを見てみましょう…

ステップ 1:functions.php

function my_theme_enqueue_styles_scripts() {
    // Enqueue CSS files
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css');
    wp_enqueue_style('aos-css', 'https://unpkg.com/aos@2.3.1/dist/aos.css');
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/custom.css');

    // Enqueue default Jquery in wordpress.
    wp_enqueue_script('jquery');

    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), null, true);
    wp_enqueue_script('font-awesome-js', get_template_directory_uri() . '/assets/js/font-awesome-all.min.js', array(), null, true);
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles_scripts');

ログイン後にコピー

注: Wordpress は、非圧縮バージョンの jquery を提供します。したがって、必要な js ファイル内でその jquery を使用するだけです。そのためには、単に “wp_eneueue_script” 内で array('jquery') パラメータを渡すだけです。覚えておくべきことの 1 つは、JQuery には非圧縮と圧縮の 2 つのメジャーバージョンがあるということです。非圧縮バージョンでは、AJAX は正しく動作しません。

ステップ 2: 「header.php」内
ここで、wp_head(); を使用する必要があります。

タグの下の関数。

<head>
    <title><?php echo get_bloginfo(); ?></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>

ログイン後にコピー

ステップ 3: 「footer.php」内
ここで、wp_footer(); を使用する必要があります。
タグの下にあります。

<?php wp_footer(); ?>
</body>

ログイン後にコピー

WordPress テーマに wp_head() と wp_footer() を含めることは重要です。これらの関数は、WordPress、テーマ、プラグインに必要な必須のスクリプト、スタイル、メタデータを自動的に挿入し、適切な機能、互換性、パフォーマンスを保証します。 wp_head() は、SEO のセクション内に必要な要素を追加します。一方、wp_footer() には、重要ではない JavaScript を延期するスクリプトが最後に含まれており、ページの読み込み速度が向上します。これらの関数は、プラグインの統合や動的なテーマのカスタマイズ、分析コードやトラッキングコードの適切な配置に不可欠です。

以上がパフォーマンスを向上させるために WordPress で CSS および JS スクリプトをエンキューするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。