wordpress+子比主题输出本月度或本周热门文章实例

使用方法：放到子比主题里的index.php即可，做的是hook，jquery查找class名然后放到某个元素之前，子比主题默认引用了jquery的js文件，其他主题需要修改代码才能用

效果

php

注意：
1、热门文章用到了文章的自定义字段，子比主题有，其他主题需要借助插件才能实现

<!-热门文章-->
<div class="hq-hook">

<div class="hdp-content">
<div class="hdp-slider">
    <div class="hdp-slides">
        <!-- 使用 PHP 循环输出最新文章 -->
        <?php
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 6,
        );
        $latest_posts = new WP_Query($args);
        if ($latest_posts->have_posts()) :
            while ($latest_posts->have_posts()) : $latest_posts->the_post(); ?>
                <div class="hdp-slide">
                    <?php if (has_post_thumbnail()) : ?>
                        <div class="hdp-image">
                            <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail('medium'); ?>
                            </a>
                        </div>
                    <?php endif; ?>
                    <p class="hdp-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>

                </div>
            <?php endwhile;
        endif;
        wp_reset_postdata();
        ?>
    </div>
    <div class="hdp-indicators">
        <!-- 序号小标 -->
        <?php for ($i = 0; $i < 6; $i++) : ?>
            <span class="hdp-indicator" data-index="<?php echo $i; ?>"><?php echo $i + 1; ?></span>
        <?php endfor; ?>
    </div>
</div>
</div>

<div class="hq-tabs">

    <ul class="hq-tab-list">
        <li class="hq-tab active" data-type="weekly">本周热门</li>
        <li class="hq-tab" data-type="monthly">本月热门</li>
        <li class="hq-tab" data-type="daily">今日热门</li>
    </ul>
    <div class="hq-tab-content">
        <div class="hq-tab-item active" data-type="weekly">
            <!-- 本周热门文章 -->

         <?php   
 function display_top_posts_last_week($number_of_posts = 6) {
    // 获取今天和7天前的日期
    $today = current_time('Y-m-d H:i:s');
    $last_week = date('Y-m-d H:i:s', strtotime('-7 days'));

    // 定义查询参数
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $number_of_posts,
        'date_query'     => array(
            array(
                'after'     => $last_week,
                'before'    => $today,
                'inclusive' => true,
            ),
        ),
        'meta_key'       => 'views', // 使用自定义字段 'views'
        'orderby'        => 'meta_value_num',
        'order'          => 'DESC',
    );

    // 创建查询
    $query = new WP_Query($args);

       // 输出结果
    if ($query->have_posts()) {
        //echo '<div class="hq-article">';
        $index = 1; // 初始化编号
        while ($query->have_posts()) {
            $query->the_post();

            // 添加带背景颜色的小标
            echo '<div class="hq-article">';
            echo '<span class="hq-post-number" style="">' . $index . '</span>';

            echo '<a class="hq-a-text" href="' . get_permalink() . '">' . get_the_title() . '</a>';
            //echo ' - ' . get_the_date(); // 显示发布日期
            //echo ' (' . get_post_meta(get_the_ID(), 'views', true) . ' views)'; // 显示浏览量
           echo '</div>';
            $index++; // 增加编号
        }
        //echo '</div>';
    }else {
        echo '更新中，敬请期待~';
    }

    // 重置查询
    wp_reset_postdata();
}

// 在适当位置调用这个函数，例如在模板文件中
display_top_posts_last_week();
?>

            <!--文章demo-->
            <!--<div class="hq-article">文章 1</div>-->
            <!--<div class="hq-article">文章 2</div>-->
            <!--<div class="hq-article">文章 3</div>-->
            <!--文章demo-->

        </div>
        <!--本周热门结束-->

        <div class="hq-tab-item" data-type="monthly">
            <!-- 本月热门文章 -->
            <?php 
            function display_top_posts_this_month($number_of_posts = 6) {
    // 获取今天的日期和本月的开始日期
    $today = current_time('Y-m-d H:i:s');
    $first_day_of_month = date('Y-m-01 H:i:s'); // 本月的第一天

    // 定义查询参数
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $number_of_posts,
        'date_query'     => array(
            array(
                'after'     => $first_day_of_month,
                'before'    => $today,
                'inclusive' => true,
            ),
        ),
        'meta_key'       => 'views', // 使用自定义字段 'views'
        'orderby'        => 'meta_value_num',
        'order'          => 'DESC',
    );

    // 创建查询
    $query = new WP_Query($args);

    // 输出结果
    if ($query->have_posts()) {
        $index = 1; // 初始化编号
        while ($query->have_posts()) {
            $query->the_post();

            // 添加带背景颜色的小标
            echo '<div class="hq-article">';
            echo '<span class="hq-post-number">' . $index . '</span>';
            echo '<a class="hq-a-text" href="' . get_permalink() . '">' . get_the_title() . '</a>';
            echo '</div>';
            $index++; // 增加编号
        }
    }else {
        echo '更新中，敬请期待~';
    }

    // 重置查询
    wp_reset_postdata();
}

// 在适当位置调用这个函数，例如在模板文件中
display_top_posts_this_month();
            ?>
        </div>

        <div class="hq-tab-item" data-type="daily">
            <!-- 今日热门文章 -->
            <?php
function display_top_posts_today($number_of_posts = 6) {
    // 获取今天的日期
    $today = current_time('Y-m-d H:i:s');
    $start_of_today = date('Y-m-d H:i:s', strtotime('today'));

    // 定义查询参数
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $number_of_posts,
        'date_query'     => array(
            array(
                'after'     => $start_of_today,
                'before'    => $today,
                'inclusive' => true,
            ),
        ),
        'meta_key'       => 'views', // 使用自定义字段 'views'
        'orderby'        => 'meta_value_num',
        'order'          => 'DESC',
    );

    // 创建查询
    $query = new WP_Query($args);

    // 输出结果
    if ($query->have_posts()) {
        $index = 1; // 初始化编号
        while ($query->have_posts()) {
            $query->the_post();

            // 添加带背景颜色的小标
            echo '<div class="hq-article">';
            echo '<span class="hq-post-number">' . $index . '</span>';
            echo '<a class="hq-a-text" href="' . get_permalink() . '">' . get_the_title() . '</a>';
            echo '</div>';
            $index++; // 增加编号
        }
    }
    else {
        echo '更新中，敬请期待~';
    }

    // 重置查询
    wp_reset_postdata();
}

// 在适当位置调用这个函数，例如在模板文件中
display_top_posts_today();
?>
        </div>
    </div>
</div>

</div>

css

<style>
.hq-hook{
    display: none;
}
.hq-tabs {

    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
}

.hq-tab-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hq-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    background-color: #f5f5f5;
    transition: background-color 0.3s;
}

.hq-tab:hover {
    background-color: #e0e0e0;
}

.hq-tab.active {
    background-color: #ffffff;
    border-bottom: 2px solid #007bff;
}

.hq-tab-content {
    padding: 10px;
}

.hq-tab-item {
    display: none;
}

.hq-tab-item.active {
    display: block;
}

.hq-article {
    margin: 5px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.hq-post-number{
   background-color: #fb8038;
    color: #fff;
    padding: 3px 6px; border-radius: 3px; margin-right: 5px;
}
.hq-a-text{
    font-weight: bold;
    color: unset;
}

/*幻灯片开始*/
.hdp-content{
     border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
}
.hdp-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hdp-slides {
    display: flex;
    transition: transform 0.5s ease;
    width: calc(100% * 6); /* 6个幻灯片 */
}

.hdp-slide {
    width: calc(100% / 6); /* 每个幻灯片宽度均分 */
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
    text-align: center;
}
.hdp-title{
    font-size: 10px;
    text-align: left !important;
    font-weight: bold;
}

.hdp-image {
    margin-bottom: 10px;
}

.hdp-image img {
    max-width: 100%;
    height: 150px;
}

.hdp-indicators {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;
}

.hdp-indicator {
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    padding: 5px 10px;
    background: #ddd;
    border-radius: 5px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.hdp-indicator:hover {
    background: #bbb;
    transform: scale(1.1); /* 鼠标悬停时放大 */
}

.hdp-indicator.active {
    background: #007bff; /* 活动小标的背景色 */
    color: white; /* 活动小标的字体颜色 */
    transform: scale(1.2); /* 活动小标放大 */
}
</style>

jquery+javascript

<script>
jQuery(document).ready(function($) {
    // 选项卡切换
    $('.hq-tab').click(function() {
        var type = $(this).data('type');

        $('.hq-tab').removeClass('active');
        $(this).addClass('active');

        $('.hq-tab-item').removeClass('active');
        $('.hq-tab-item[data-type="' + type + '"]').addClass('active');
    });

    // 插入选项卡到找到的第二个指定元素之前
    var tabsHtml = $('.hq-hook'); // 获取选项卡的 HTML
    //$('.zib-widget.widget_media_image').eq(2).before(tabsHtml); // 插入到第3个找到的元素之前

    // 检查设备类型并插入内容
if ($(window).width() <= 768) { // 假设768px以下为手机
    // 检查是否已插入过，以避免重复插入

     // 在第三个找到的元素之前插入
    $('.zib-widget.widget_media_image').eq(1).after(tabsHtml);
    // 移除 display: none 状态
    tabsHtml.css('display', 'block');

} else {
    // 在第三个找到的元素之前插入
    $('.zib-widget.widget_media_image').eq(2).before(tabsHtml);
    // 移除 display: none 状态
    tabsHtml.css('display', 'block');
}
});

let currentIndex = 0;
const slides = document.querySelectorAll('.hdp-slide');
const indicators = document.querySelectorAll('.hdp-indicator');

function showSlide(index) {
    const slidesContainer = document.querySelector('.hdp-slides');
    slidesContainer.style.transform = `translateX(-${index * (100 / slides.length)}%)`;
    indicators.forEach(indicator => indicator.classList.remove('active'));
    indicators[index].classList.add('active');
}

function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
}

indicators.forEach(indicator => {
    indicator.addEventListener('click', () => {
        currentIndex = parseInt(indicator.getAttribute('data-index'), 10);
        showSlide(currentIndex);
    });
});

// 每3秒自动切换
setInterval(nextSlide, 3000);
</script>