WordPressでIntersection Observerが動かない時にチェックする箇所

WordPressテーマ作成

WordPressはjQueryを自動で読み込むため、スクロールに連動したアニメーションやコントロールの挙動を操作するのは、jQueryのinviewプラグインを使うのが主流かもしれません。実際に経験してきたリニューアル案件の現場でも、jQueryを使用しているのなら追加機能やページにもjQueryベースで検討します。

そのため、WordPressにわざわざIntersection Observer APIを導入するケースなんてありえないかもしれません。PVも需要も0の記事になるかも。

それでも、このブログのトップページに実験的にIntersection Observerを導入しようとしたところ、監視対象の要素が取得できないことに悩んでしまったので、その解決策をメモしておきます。どこかの誰かの役に立てれば!

WordPressでJavaScriptファイルを読み込む方法

WordPressでJavaScriptやCSSファイルなどを読み込むのは、functions.phpファイルです。ファイル読み込み関数が用意されているため、それを使用するだけ。

JavaScriptファイルはwp_enqueue_script、スタイルシートファイルはwp_enqueue_styleです。

function add_scripts() {
    // jsファイルを読み込むサンプルコード
    wp_enqueue_script('main-js', get_template_directory_uri() .'/js/main.js', array(), '1.1.0', true);

    // スタイルシートファイルを読み込むサンプルコード
    wp_enqueue_style('style', get_stylesheet_uri(), array());
}
add_action('wp_enqueue_scripts', 'add_scripts');

読み込むファイル命令をまとめた関数を作成し、wp_enqueue_scripts(JavaScriptやCSSがエンキューされた)タイミングで実行させます。

>>>JavaScriptがWordPressアップデートでエラーになった時の解決方法【アクションフックまとめ】

wp_enqueue_scriptに設定するパラメーターは次の通り。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
$handleスクリプトを判断するためのハンドル名(必須)
$srcファイルパス
$depsスクリプトが依存するハンドル名を配列で指定。
指定しておくと前に読み込まれる。
$verバージョン指定。キャッシュ管理で使用。
デフォルトはfalseで現WordPressバージョン番号を追加する。
$in_footer読み込み位置の指定。
デフォルトはfalseでhead閉じタグ前。trueにするとbody閉じタグ前で読み込まれる。

Intersection Observer実行ファイルはbody閉じタグ前で

JSファイルの読み込み位置をデフォルトのhead閉じタグ前にしていると、Intersection Observerで監視対象の要素をquerySelectorAllで正しく取得できていないことが原因でした。

$in_footerをtrueにすると、監視対象の要素を取得し、ターゲットが表示されるタイミングで動作するようになりました。

WordPressを使用しない場合でも、Intersection Observerが動かなくて悩まれているなら、JSファイルの読み込み場所やタイミングをチェックしてみてください。LP作成時では、defer属性で動いています。

Related Posts