[WordPress]管理者ログインしていないときだけ実行するJavaScriptを追加した（分離）

以前に、下にスクロールするとヘッダーメニューを半透明にするスクリプトを入れました。

[JavaScript]下にスクロールするとヘッダーメニューを半透明にするようにした

Xのタイムラインを見ていたら、画面のメニューバーの透過度が上下のスクロールに応じて変化していることに気づきました。少し下にスクロールすると半透明になり、少し上にスクロールすると元に戻っています。自分のサイトのヘッダーメニュー（mobile-header-menu-buttons）でも、このような処理をするように、JavaScriptを作りたいと思います。画面内の情報の表示範囲が増えるからです。javascript.jsとstyle.css機能ユーザーがページを下にスクロールす...

しかし、自分がログインしているときは不要なのでオフにすることにしました（画面録画するときに撮影範囲がわかりにくい）。

環境：WordPress, Cocoon, Cocoon子テーマ

いったん javascript.jsの以下のコードを削除して、管理者ログインしていないときに限定します。

/** 
 * 2024-07-04 管理者ログインしていないときのスクリプトを分けた
 * 下にスクロールするとヘッダーメニューを半透明にする
 * メニューをクリックしたときの反応
 * スクロール量が20px以上の場合にのみ透過度を変更
 */
(function() {
    let lastScrollPosition = 0;
    const headerMenu = document.querySelector('.mobile-header-menu-buttons');
    const scrollThreshold = 20; // スクロールしきい値（px）を設定

    window.addEventListener('scroll', function() {
        const scrollPosition = window.pageYOffset;
        
        if (Math.abs(scrollPosition - lastScrollPosition) >= scrollThreshold) {
            if (scrollPosition > lastScrollPosition) {
                // 下にスクロールした場合
                headerMenu.style.opacity = '0';
            } else {
                // 上にスクロールした場合
                headerMenu.style.opacity = '1';
            }
            lastScrollPosition = scrollPosition;
        }
    });

    function handleEvent(event) {
        headerMenu.style.opacity = '1';
    }

    headerMenu.addEventListener('touchstart', handleEvent);
    headerMenu.addEventListener('click', handleEvent);
})();

functions.phpで、ログインしていないときにだけ、コードを読み込むことにしています。

/** 2024-07-04 管理者ログインしていないとき用のスクリプトを分けた */
function enqueue_non_admin_script() {
    if (!is_user_logged_in()) {
        wp_enqueue_script('non-admin-script', get_stylesheet_directory_uri() . '/non-admin-script.js', array(), filemtime(get_stylesheet_directory() . '/non-admin-script.js'), true);
        
    } 
}
add_action('wp_enqueue_scripts', 'enqueue_non_admin_script');

子テーマの直下に「non-admin-script.js」を追加しました。

1. 念のためのセキュリティ

ただし、ファイルの存在確認、パスのサニタイズ、エラー処理が追加しました。

/** 2024-07-04 管理者ログインしていないとき用のスクリプトを分けた */
function enqueue_non_admin_script() {
    if (!is_user_logged_in()) {
        $script_path = get_stylesheet_directory() . '/non-admin-script.js';
        $script_url = get_stylesheet_directory_uri() . '/non-admin-script.js';

        // ファイルの存在確認
        if (file_exists($script_path)) {
            // パスのサニタイズ
            $script_url = esc_url($script_url);

            wp_enqueue_script(
                'non-admin-script', 
                $script_url, 
                array(), 
                filemtime($script_path), 
                true
            );
        } 
    } 
}
add_action('wp_enqueue_scripts', 'enqueue_non_admin_script');