网站侧边栏添加动态日历小工具

前言:

这款是仿 CoreNext 主题侧边的一个日历小工具,每日自动显示当前日期,代码不多,具体看效果吧

当然此代码侧边栏小工具不局限于子比主题,其他主题相似的位置也可以使用,代码并没有为了子比做强制适配,而是通用适配

图片[1] 网站侧边栏添加动态日历小工具 久久鱼塘

小工具代码添加路径:外观—小工具—自定义 HTML

<link rel="stylesheet" href="/wp-content/themes/zibll/mizhi_ui/calendar/mizhi_calendar.css" type="text/css">
        <div class="mizhi-next-calendar blue">
            <div class="calendar-header">
                <div class="calendar-title">
                    日历
                </div>
                <div class="calendar-header-right">
                    <div class="calendar-month-week">
                        <div id="currentMonth"></div>
                        <div id="currentDayOfWeek"></div>
                    </div>
                    <div class="calendar-current-day" id="currentDay"></div>
                    <img class="img-calendar-header-1" src="/wp-content/themes/zibll/mizhi_ui/calendar/calendar-header-1.svg">
                    <img class="img-calendar-header-2" src="/wp-content/themes/zibll/mizhi_ui/calendar/calendar-header-2.svg">
                    <img class="img-calendar-header-3" src="/wp-content/themes/zibll/mizhi_ui/calendar/calendar-header-3.svg">
                </div>
            </div>
            <div class="calendar-main">
                <div class="calendar-body-header">
                    <ul>
                        <li>一</li>
                        <li>二</li>
                        <li>三</li>
                        <li>四</li>
                        <li>五</li>
                        <li>六</li>
                        <li>日</li>
                    </ul>
                    <ul id="calendarDates"></ul>
                </div>
            </div>
        </div>
<script type="text/javascript" src="/wp-content/themes/zibll/mizhi_ui/calendar/mizhi_calendar.js"></script>

 

THE END
喜欢就支持一下吧
点赞10 分享