バニラjsだから<head>内に書くものじゃない。
仕様について
swiper.jsはjQueryに依存しないスライド。
こんな感じで書く。
<html>
<head>
⋮
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<body>
<div class="swiper">
⋮
</div>
⋮
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper');
</script>
</body>
</html>つまり、jsは<body>下部に記述するということ。
wpの方は、header.phpとかpage.phpとかに直書きする方法もあるけど、汎用性的な考えで言えばどうなのという面がある。
functions.phpでcssやjsを挿入する手段があるので、それでどのページに出力させるかを割り振るのが現時点で個人的にスマートだと考える。
これらに即した内容。
やっていく
functions.phpで完結させる。
add_action('wp_enqueue_scripts', 'add_headFiles');
function add_headFiles() {
if(is_front_page()||is_home()): //該当ページを指定して条件分岐
wp_enqueue_style('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css', array());
wp_enqueue_script('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), '', true);
wp_enqueue_script('swiper_setting', get_template_directory_uri() .'/js/swiper_setting.js', array('swiper'), '', true);
endif;
}swiper.jsの設定用jsを作ること。
ページ内にベタ打ちしてもいいっちゃいいんだけど、外部ファイルで読ませたほうが修正箇所が明確になって良い。
script.jsとかの名前でサイト内を網羅したjsファイルを読ませることは珍しくないけど、それは大体jQueryが関わってるので別に分けておくのがスマートかなと思う。swiper.jsを読ませない場合に無駄な文字列になるしね、大したボリュームじゃないけどね。
wp_enqueue_script()の引数に2点、以下のポイントがある。
設定用jsのarray()にswiper.jsの識別名を入れることで、それが依存先として宣言される。
例えば、jQueryを扱う場合は先にライブラリを読ませないと発火しない。
それと同様で、swiper.jsも調整用jsが先だと動かない。
「これのあとに出力する」を明確に示せるので、記述の並びが前後しても出力順に影響しないというわけ。
trueを入れるとページ末尾（wp_footer()の位置）に出力する指示になる。
jsをあとから読ませることでページの読み込みを高速化とかいうハックもあったりするから覚えておいて損はない。ただ、jQueryとかでよくある、<head>に記述する前提（どこに書いても動くけど）から考えなしに反れるのは、いざ何かあったときにめんどくさいので、明確な理由でもない限りはやたらめったら使うものでもない。
コメント