menex.ru
← Все статьи

Разный текст и стиль в зависимости от времени суток

08.09.2023 • Теги: #css #jQuery #PHP #snippet #wordpress

На одном из сайтов необходимо было сделать, чтобы во время нерабочего времени писалось, что офис закрыт, а в рабочее отрыт. Для этого был написан небольшой сниппет, выкладываю его тут, там куски кода отвечающие за разные стили в разное время суток и разные надписи. А также кусок кода который умеет склонять в зависимости от количества. В данном случае это врямя: 1 час, 2 часа, . . . 5 часов.

// функция склонения
function num_decline( $number, $titles, $show_number = true ){

    if( is_string( $titles ) ){
        $titles = preg_split( '/, */', $titles );
    }

    // когда указано 2 элемента
    if( empty( $titles[2] ) ){
        $titles[2] = $titles[1];
    }

    $cases = [ 2, 0, 1, 1, 1, 2 ];

    $intnum = abs( (int) strip_tags( $number ) );

    $title_index = ( $intnum % 100 > 4 && $intnum % 100 < 20 )
        ? 2
        : $cases[ min( $intnum % 10, 5 ) ];

    return ( $show_number ? "$number " : '' ) . $titles[ $title_index ];
} 

// // это изменение стиля блоков в зависимости от времени суток
add_action( 'wp_footer', function () { 

    date_default_timezone_set('Asia/Vladivostok'); 
    // текущий час
    $time=date('H');

    // текущий день недели
    // День недели возвращается в виде числа (0=Воскресенье, 1=Понедельник и т.д.)
    $day = date("w", mktime(0,0,0,date("m"),date("d"),date("Y")));

    if ($day==0 || $day==6) {
        ?>
            <style>
                div#div_block-37-357 {
                    background: url(/wp-content/uploads/2023/08/night.webp);
                    background-color: #353535;
                    background-repeat:no-repeat;
                    background-size: 50px;
                    background-position: 99% 10px;
                    padding: 30px 70px 30px 30px;
                    color: #fff;
                    border-radius: 30px;
                }
            </style>
        <?php

    }
    else {

        if($time>=9 && $time<18) { 
            ?>
            <style>
                div#div_block-37-357 {
                    background: url(/wp-content/uploads/2023/08/sun.webp);
                    background-repeat:no-repeat;
                    background-size: 50px;
                    background-position: 100% 0px;
                    padding: 0 60px 0 0;
                }
            </style>
            <?php
        } 
        else {
            ?>
            <style>
                div#div_block-37-357 {
                    background: url(/wp-content/uploads/2023/08/night.webp);
                    background-color: #353535;
                    background-repeat:no-repeat;
                    background-size: 50px;
                    background-position: 99% 10px;
                    padding: 30px 70px 30px 30px;
                    color: #fff;
                    border-radius: 30px;
                }
            </style>
            <?php
        }
    }

});

// шорткод с текстом, что офис закрыт
add_shortcode( 'close-office', function () {

    date_default_timezone_set('Asia/Vladivostok');
        // текущий час
    $time=date('H');

    // текущий день недели
    // День недели возвращается в виде числа (0=Воскресенье, 1=Понедельник и т.д.)
    $day = date("w", mktime(0,0,0,date("m"),date("d"),date("Y")));

    if ($day==0 || $day==6) {

        $close_open = '<span>Закрыто</span>';
    }
    else {

        if($time>=9 && $time<18) { 
            $close_open = 'Открыто';
        } 
        else {

            if($time>9) {
                $ostatok_time = 24-$time+9;
            }
            else {
                $ostatok_time = 9-$time;
            }
            $close_open = '<span>Откроется через '.num_decline( $ostatok_time, 'час, часа, часов' ).'</span>';

        }
    }


    $timer=date("H:i");

    echo '<div class="close_time">'.$timer.'</div>'; 
    echo '<div class="close_mes">'.$close_open.'</div>';
} );

add_action( 'wp_footer', function () { 
    ?>
    <style>
                div.close_time {
                    font-size: 24px;
                    font-weight: 600;
                }
        div.close_mes {
            margin: 10px 30px 0 0;
            text-wrap: nowrap;
        }
        div.close_mes span {
            color:#ffaeae;
        }
            </style>
<?php

});