ホームページ >バックエンド開発 >PHPチュートリアル >パフォーマンスを向上させるために WordPress で CSS および JS スクリプトをエンキューする
パフォーマンスを向上させるために WordPress で CSS および JS スクリプトをエンキューする
- WBOYオリジナル
- 2024-08-22 06:34:39328ブラウズ
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 サイトの他の関連記事を参照してください。