cssやjsの呼び出し方

今回は</head>の直前に記述しました。

<?php
    function add_css_js() {
      wp_deregister_script('jquery');
      wp_enqueue_style('stylecss', get_template_directory_uri() .'/assets/css/styles.min.css');
      wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css');
      wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js');
      wp_enqueue_script('mainjs', get_template_directory_uri() . '/assets/js/main.js');
    }
    add_action('wp_enqueue_scripts', 'add_css_js');
  ?>

青線の部分は好きに名付けて下さい。

cssを読み込むときはwp_enqueue_style()関数を、jsを読み込むときはwp_enqueue_script()関数を使います。

上記のコードを簡単に説明すると、
wp_deregister_script('jquery');はデフォルトのjQueryを削除します。


wp_enqueue_style('stylecss', get_template_directory_uri() .'/assets/css/styles.min.css');はstyle.min.cssをstylecssと名付けて読み込みます。

wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css');などCDNを直接読み込みたい場合はget_template_directory_uri()は使わずに、上記のように直接書きます。

誤りなどございましたらご指摘いただけると幸いです。

参考サイト

テーマにスタイルシート(cssファイル)を正しい方法で読み込む

テーマにJavaScript(jsファイル)を正しい方法で読み込む

コメント

タイトルとURLをコピーしました