[代码技巧] 子比主题二次元风格热门文章排行榜

<?php

Zib_CFSwidget::create('widget_rank', array(

    'title'       => 'top-热门排行榜',

    'zib_title'   => true,

    'zib_affix'   => true,

    'zib_show'    => true,

    'description' => '二次元风格热门文章排行榜',

    'fields'      => array(

        array('title' => '排行榜1名称', 'id' => 'hot_1', 'type' => 'text', 'default' => '建站资源'),

        array('title' => '排行榜1分类ID', 'id' => 'hot_1_cat', 'type' => 'text', 'default' => '1'),

        array('title' => '排行榜1显示个数', 'id' => 'hot_1_num', 'type' => 'text', 'default' => '5'),

        array('title' => '排行榜1跳转文字', 'id' => 'hot_1_link_text', 'type' => 'text', 'default' => '更多'),

        array('title' => '排行榜1跳转链接', 'id' => 'hot_1_link', 'type' => 'text', 'default' => '/hot'),



        array('title' => '排行榜2名称', 'id' => 'hot_2', 'type' => 'text', 'default' => '子比美化'),

        array('title' => '排行榜2分类ID', 'id' => 'hot_2_cat', 'type' => 'text', 'default' => '1'),

        array('title' => '排行榜2显示个数', 'id' => 'hot_2_num', 'type' => 'text', 'default' => '5'),

        array('title' => '排行榜2跳转文字', 'id' => 'hot_2_link_text', 'type' => 'text', 'default' => '更多'),

        array('title' => '排行榜2跳转链接', 'id' => 'hot_2_link', 'type' => 'text', 'default' => '/hot'),



        array('title' => '排行榜3名称', 'id' => 'hot_3', 'type' => 'text', 'default' => '软件基地'),

        array('title' => '排行榜3分类ID', 'id' => 'hot_3_cat', 'type' => 'text', 'default' => '1'),

        array('title' => '排行榜3显示个数', 'id' => 'hot_3_num', 'type' => 'text', 'default' => '5'),

        array('title' => '排行榜3跳转文字', 'id' => 'hot_3_link_text', 'type' => 'text', 'default' => '更多'),

        array('title' => '排行榜3跳转链接', 'id' => 'hot_3_link', 'type' => 'text', 'default' => '/hot'),

    )

));



function widget_rank($args, $instance)

{

    Zib_CFSwidget::echo_before($instance, '');

    ?>

    <style>

        .rank-container {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 20px;

            margin-bottom: 15px; /* 小工具底部空隙 */

        }

        @media (max-width: 1024px) {

            .rank-container {

                grid-template-columns: repeat(2, 1fr);

            }

        }

        @media (max-width: 768px) {

            .rank-container {

                grid-template-columns: 1fr;

            }

        }

        .rank-block {

            position: relative;

            background: var(--main-bg-color);

            border-radius: 14px;

            box-shadow: 0 6px 14px rgba(0,0,0,0.08);

            overflow: hidden;

            transition: transform 0.25s ease;

        }

        .rank-block:hover {

            transform: translateY(-6px) scale(1.02);

        }

        .rank-header {

            background: linear-gradient(135deg, #ff9de6, #9dd9ff);

            color: #fff;

            padding: 12px 16px;

            font-weight: bold;

            font-size: 16px;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        .rank-header::before {

            content: "★";

            font-size: 18px;

        }

        .rank-list {

            display: flex;

            flex-direction: column;

        }

        .rank-item {

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 10px 14px;

            border-bottom: 1px dashed #f3c2ff;

            text-decoration: none;

            color: #444;

            transition: background 0.2s ease, transform 0.2s ease;

        }

        .rank-item:hover {

            background: rgba(255, 237, 255, 0.4);

            transform: translateX(4px);

        }

        .rank-num {

            flex-shrink: 0;

            width: 26px;

            height: 26px;

            border-radius: 50%;

            background: #ccc;

            color: #fff;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 13px;

            font-weight: bold;

        }

        .rank-num.top1 { background: linear-gradient(135deg, #ff5f6d, #ffc371); }

        .rank-num.top2 { background: linear-gradient(135deg, #42e695, #3bb2b8); }

        .rank-num.top3 { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }

        .rank-thumb {

            flex-shrink: 0;

            width: 48px;

            height: 48px;

            border-radius: 10px;

            overflow: hidden;

            box-shadow: 0 2px 6px rgba(0,0,0,0.15);

        }

        .rank-thumb img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

        .rank-info {

            flex: 1;

        }

        .rank-title {

            font-size: 14px;

            font-weight: 600;

            margin-bottom: 4px;

            line-height: 1.3;

            color: var(--key-color);

        }

        .rank-meta {

            font-size: 12px;

            color: var(--muted-color);

        }

        .rank-footer {

            text-align: center;

            padding: 10px;

            background: rgba(255, 237, 255, 0.5);

        }

        .rank-footer a {

            font-size: 14px;

            color: #ff6bb5;

            text-decoration: none;

            font-weight: bold;

        }

        .rank-footer a:hover {

            text-decoration: underline;

        }

    </style>



    <div class="rank-container">

        <?php for ($i = 1; $i <= 3; $i++): ?>

            <?php

                $title = $instance["hot_{$i}"];

                $cat_id = $instance["hot_{$i}_cat"];

                $num = $instance["hot_{$i}_num"];

                $link_text = $instance["hot_{$i}_link_text"];

                $link = $instance["hot_{$i}_link"];

                $phnum = 0;

            ?>

            <div class="rank-block">

                <div class="rank-header"><?php echo esc_html($title); ?></div>

                <div class="rank-list">

                    <?php

                    $args_query = array(

                        'cat' => $cat_id,

                        'showposts' => $num,

                        'orderby' => 'meta_value_num',

                        'meta_key' => 'views',

                        'order' => 'DESC'

                    );

                    query_posts($args_query);

                    while (have_posts()) : the_post(); $phnum++;

                    ?>

                        <a class="rank-item" href="<?php the_permalink(); ?>" target="_blank" rel="nofollow">

                            <div class="rank-num <?php echo $phnum <= 3 ? 'top'.$phnum : ''; ?>"><?php echo $phnum; ?></div>

                            <div class="rank-thumb"><?php echo zib_post_thumbnail('', 'thumbnail'); ?></div>

                            <div class="rank-info">

                                <div class="rank-title"><?php the_title(); ?></div>

                                <div class="rank-meta"><?php echo get_post_view_count('', ''); ?> 热度</div>

                            </div>

                        </a>

                    <?php endwhile; wp_reset_query(); ?>

                </div>

                <?php if (!empty($link) && !empty($link_text)): ?>

                    <div class="rank-footer"><a href="<?php echo esc_url($link); ?>" target="_blank" rel="nofollow"><?php echo esc_html($link_text); ?></a></div>

                <?php endif; ?>

            </div>

        <?php endfor; ?>

    </div>

    <?php

    Zib_CFSwidget::echo_after($instance);

}

?>

<?php

if (file_exists(get_theme_file_path('/文件名.php'))) {

    require_once get_theme_file_path('/文件名.php');

}