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

2022/3/27(日) 2024/3/20(水) きむおば

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

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閉じタグ前で読み込まれる。