将营业时间直接纳入 WordPress 主题不仅可以为访问者提供重要信息,还可以通过动态突出显示当天实时开放/关闭的状态来增强用户参与度。在本文中,您将了解如何在 WordPress 主题中实现完全动态的营业时间功能。

第 1 步:定义营业时间

首先需要定义营业时间,本例中,我们将营业的小时数存储在数组中。

function get_business_hours() {
    return [
        'Monday'    => ['08:00', '17:00'],
        'Tuesday'   => ['08:00', '17:00'],
        'Wednesday' => ['08:00', '17:00'],
        'Thursday'  => ['08:00', '17:00'],
        'Friday'    => ['08:00', '17:00'],
        'Saturday'  => ['10:00', '14:00'],
        'Sunday'    => '休息',
    ];
}

将上面的代码放入主题的 functions.php 文件或自定义插件中。

第 2 步:显示营业时间

接下来,我们需要创建一个函数来显示营业时间。该函数检查当前日期和时间,以突出显示今天的时间以及商家当前是否营业。

function display_opening_hours() {
    $currentDay = date('l'); // 获取当前是周几
    $currentTime = date('H:i'); // 获取当前时间
    $hours = get_business_hours();

    foreach ($hours as $day => $times) {
        echo "<div";
        if ($day === $currentDay) {
            echo " style='font-weight:bold;'"; // 高亮当前日期
            if (is_array($times)) {
                [$open, $close] = $times;
                $isOpen = $currentTime >= $open && $currentTime <= $close;
                echo ">{$day}: {$open} - {$close}";
                echo $isOpen ? " <span style='color:green;'>营业中</span>" : " <span style='color:red;'>Closed</span>";
            } else {
                echo ">{$day}: 休息中";
            }
        } else {
            echo ">{$day}: ";
            echo is_array($times) ? "{$times[0]} - {$times[1]}" : "Closed";
        }
        echo "</div>";
    }
}

此函数迭代开放时间,检查当前日期是否与循环中的日期匹配,并应用样式来突出显示它。它还确定当前时间是否在今天的开放时间内以显示“开放”或“关闭”状态。

接下来我们还要添加一些样式以区别显示营业状态:

.open-status {
    font-weight: bold;
}
.open-status.open {
    color: green;
}
.open-status.closed {
    color: red;
}

第 3 步:将功能添加到您的主题

要将营业时间集成到您的网站中,请在相应的主题文件中调用 display_opening_hours()。例如,要将其添加到页脚,请编辑 footer.php,并将以下内容放置在您希望显示营业时间的位置:

<?php display_opening_hours(); ?>

实现效果: