根据一天中的时间更改 wordpress 登录页面图像

Question

I've searched the internet for information on how to make the image of the login page to the admin panel in wordpress change depending on the time, but nothing works in my functions.php file. I am showing you the code I used. My guess is that I have done the wrong combination of java script and css in the php file. I ask you guys how I could make the code to make it work.

Additionally, I am wondering how to make the page use the local time of the person who is browsing the page, so that, for example, when someone is in New York, he can see the day background when it is daytime there, and someone from Moscow can have the day background and the night background in his own time.

When everything works, I will of course apply it to the main page.

Thank you for any help ;)

    <script type="text/JavaScript">
    var date = new Date();
    var hours = date.getHours();

    var sunset_img= "/images/2.png";

    var night_img = "/images/1.png";


    if((hours > 18)&&(hours < 6)){
    document.getElementById('feature_img').setAttribute('src', night_img);
    }
    else{
    document.getElementById('feature_img').setAttribute('src', sunset_img);
    }
    </script>
    <?php

    function my_login_logo() { ?>
    <style type="text/css">
        body.login
        {
        background-image: url(<?php echo get_stylesheet_directory_uri(); ?>feature_img);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size:cover;
        }
}
    
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Answer 1

You can skip the image definition in the script and instead set a body class. From there you can set an image in the CSS that corresponds to the class. JavaScript is run in the browser so inherently it will be local time for the user.

Using similar formatting you can do something like this, but using login_head since you are not enqueuing scripts:

<?php    
function my_login_logo() {
?>
    <script type="text/JavaScript">
        var date = new Date();
        var hours = date.getHours();
    
        if ((hours >= 18) || (hours <= 6)) {
            document.body.classList.add("background-image-night");
        }
        else {
            document.body.classList.add("background-image-sunset");
        }
    </script>
    <style type="text/css">
        body.login {
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
        }

        body.login.background-image-night {
            background-image: url('<?php echo get_theme_file_uri('/images/night.jpg'); ?>');
        }

        body.login.background-image-sunset {
            background-image: url('<?php echo get_theme_file_uri('/images/sunset.jpg'); ?>');
        }
    </style>
<?php
}
add_action( 'login_head', 'my_login_logo' );

As I commented on your question you should prob put the code above in discrete files and enqueue them instead of outputting raw script and style tags. Like so...

<?php
add_action( 'login_enqueue_scripts', function () {
    wp_enqueue_style( 'login-styles', get_theme_file_uri('styles/login-styles.css'), [], false );
    wp_enqueue_script( 'login-scripts', get_theme_file_uri('scripts/login-scripts.js'), [], false, true );
} );
?>

The above uses an anonymous function because we are only doing this once anyway and because we can in later versions of PHP.