wordpress图文教程

一套可直接在 WordPress 主题模板里使用的幻灯片

2026年6月13日
admin-sober

一套可直接在 WordPress 主题模板里使用的完整代码，包含：

  1. 后台自定义字段（设置大图轮播数量、推荐 / 置顶、小图滚动数量）
  2. 前端 HTML + CSS + JS 布局：左侧大图轮播 + 右侧三图竖向滚动
  3. 适配 WP 后台调用、样式美化、自动轮播 / 滚动

一、整体说明

  • 左侧：大图幻灯片（自动轮播、后台可添加多张、支持置顶 / 推荐标记）
  • 右侧：固定 3 列高度区域，图片竖向无缝滚动，后台可设置展示条数
  • 基于 WordPress 自定义文章 / 自定义字段实现，不用额外插件
  • 代码分：函数文件 (functions.php)、模板页面、样式 JS

第一部分：添加后台配置与自定义字段（functions.php）

把以下代码加到当前主题 functions.php 末尾

<?php
/**
 * 首页幻灯&右侧滚动图 自定义字段 + 后台配置
 */

// 1. 注册自定义文章类型 - 幻灯片（单独管理轮播图）
function slide_register_post_type() {
    $labels = array(
        'name'               => '首页幻灯片',
        'singular_name'      => '幻灯片',
        'add_new'            => '添加幻灯',
        'add_new_item'       => '添加新幻灯',
        'edit_item'          => '编辑幻灯',
        'new_item'           => '新幻灯',
        'view_item'          => '查看幻灯',
        'search_items'       => '搜索幻灯',
        'not_found'          => '暂无幻灯',
    );
    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => false,
        'rewrite'            => array('slug' => 'slide'),
        'menu_icon'          => 'dashicons-images-alt2',
        'supports'           => array('title','thumbnail','editor'),
        'menu_position'      => 5
    );
    register_post_type('slide',$args);
}
add_action('init','slide_register_post_type');

// 2. 添加自定义字段：是否置顶、是否推荐、排序
function slide_add_meta_box() {
    add_meta_box(
        'slide_meta',
        '幻灯设置',
        'slide_meta_box_html',
        'slide'
    );
}
add_action('add_meta_boxes','slide_add_meta_box');

function slide_meta_box_html($post){
    $is_top = get_post_meta($post->ID,'_slide_is_top',true);
    $is_rec = get_post_meta($post->ID,'_slide_is_rec',true);
    $sort   = get_post_meta($post->ID,'_slide_sort',true);
    wp_nonce_field('slide_meta_nonce','slide_meta_nonce');
    ?>
    <p>
        <label><input type="checkbox" name="slide_is_top" <?php checked($is_top,'on'); ?>> 设为置顶幻灯</label>
    </p>
    <p>
        <label><input type="checkbox" name="slide_is_rec" <?php checked($is_rec,'on'); ?>> 设为推荐</label>
    </p>
    <p>
        <label>排序权重：</label>
        <input type="number" name="slide_sort" value="<?php echo esc_attr($sort ?: 0); ?>" style="width:80px;">
        <small>数字越大越靠前</small>
    </p>
    <?php
}

// 3. 保存自定义字段
function slide_save_meta($post_id){
    if(!isset($_POST['slide_meta_nonce']) || !wp_verify_nonce($_POST['slide_meta_nonce'],'slide_meta_nonce')) return;
    if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

    update_post_meta($post_id,'_slide_is_top', isset($_POST['slide_is_top']) ? 'on' : 'off');
    update_post_meta($post_id,'_slide_is_rec', isset($_POST['slide_is_rec']) ? 'on' : 'off');
    update_post_meta($post_id,'_slide_sort', intval($_POST['slide_sort']));
}
add_action('save_post','slide_save_meta');

// 4. 右侧滚动图 自定义文章类型
function scroll_img_register_post_type() {
    $labels = array(
        'name'               => '右侧滚动图',
        'singular_name'      => '滚动图',
        'add_new'            => '添加图片',
        'add_new_item'       => '添加新图',
        'edit_item'          => '编辑图片',
        'menu_icon'          => 'dashicons-format-gallery',
    );
    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => false,
        'supports'           => array('title','thumbnail'),
        'menu_position'      => 6
    );
    register_post_type('scroll_img',$args);
}
add_action('init','scroll_img_register_post_type');

// 5. 主题选项：后台设置【大图轮播数量】【右侧滚动图显示数量】
function slide_add_theme_page() {
    add_theme_page(
        '幻灯滚动图设置',
        '幻灯图设置',
        'edit_theme_options',
        'slide_setting',
        'slide_setting_page'
    );
}
add_action('admin_menu','slide_add_theme_page');

function slide_setting_page(){
    if(isset($_POST['slide_submit'])){
        check_admin_referer('slide_setting_nonce');
        update_option('slide_max_num',intval($_POST['slide_max_num']));
        update_option('scroll_max_num',intval($_POST['scroll_max_num']));
        echo '<div class="notice notice-success"><p>设置已保存！</p></div>';
    }
    $slide_num  = get_option('slide_max_num',5); // 默认大图5张
    $scroll_num = get_option('scroll_max_num',8); // 默认小图8条
    ?>
    <div class="wrap">
        <h1>首页幻灯 & 右侧滚动图 配置</h1>
        <form method="post">
            <?php wp_nonce_field('slide_setting_nonce'); ?>
            <table class="form-table">
                <tr>
                    <th>左侧大图轮播最大数量</th>
                    <td>
                        <input type="number" name="slide_max_num" value="<?php echo $slide_num; ?>" min="1">
                        <p class="description">后台添加的幻灯，最多展示多少张</p>
                    </td>
                </tr>
                <tr>
                    <th>右侧竖向滚动图数量</th>
                    <td>
                        <input type="number" name="scroll_max_num" value="<?php echo $scroll_num; ?>" min="1">
                        <p class="description">右侧滚动列表读取多少条图片</p>
                    </td>
                </tr>
            </table>
            <p>
                <button type="submit" name="slide_submit" class="button button-primary">保存设置</button>
            </p>
        </form>
    </div>
    <?php
}

保存后：

  • WP 后台会多出两个菜单：首页幻灯片、右侧滚动图（用来上传图片）
  • 外观 → 幻灯图设置：可以设置大图轮播数量、右侧小图数量
  • 单张幻灯片可单独勾选：置顶、推荐、设置排序

第二部分：前端模板代码（首页 index.php/ 自定义模板）

在你要展示幻灯的位置，放入下面整套 HTML + PHP 调用代码

<?php
// ========== 读取左侧大图轮播 ==========
$slide_limit = get_option('slide_max_num',5);
$slides = new WP_Query(array(
    'post_type' => 'slide',
    'posts_per_page' => $slide_limit,
    'meta_key' => '_slide_sort',
    'orderby' => 'meta_value_num',
    'order' => 'DESC'
));

// ========== 读取右侧竖向滚动图 ==========
$scroll_limit = get_option('scroll_max_num',8);
$scroll_imgs = new WP_Query(array(
    'post_type' => 'scroll_img',
    'posts_per_page' => $scroll_limit,
    'order' => 'DESC'
));
?>

<!-- 幻灯整体容器 -->
<div class="home-slide-wrap">
    <!-- 左侧大图轮播 -->
    <div class="slide-left">
        <div class="slide-big">
            <?php if($slides->have_posts()): ?>
            <ul class="slide-list">
                <?php while($slides->have_posts()): $slides->the_post();
                    $top = get_post_meta(get_the_ID(),'_slide_is_top',true);
                    $rec = get_post_meta(get_the_ID(),'_slide_is_rec',true);
                ?>
                <li class="slide-item <?php if($top=='on') echo 'is-top'; ?> <?php if($rec=='on') echo 'is-rec'; ?>">
                    <a href="<?php the_permalink(); ?>">
                        <?php if(has_post_thumbnail()): ?>
                            <?php the_post_thumbnail('large',array('alt'=>get_the_title())); ?>
                        <?php endif; ?>
                        <div class="slide-title"><?php the_title(); ?></div>
                    </a>
                </li>
                <?php endwhile; ?>
            </ul>
            <!-- 轮播指示器 -->
            <div class="slide-dots"></div>
            <!-- 左右箭头 -->
            <span class="slide-prev">&lt;</span>
            <span class="slide-next">&gt;</span>
            <?php endif; wp_reset_postdata(); ?>
        </div>
    </div>

    <!-- 右侧三列竖向滚动图 -->
    <div class="slide-right">
        <div class="scroll-box">
            <div class="scroll-inner">
                <?php if($scroll_imgs->have_posts()): ?>
                <ul class="scroll-list">
                    <?php while($scroll_imgs->have_posts()): $scroll_imgs->the_post(); ?>
                    <li class="scroll-item">
                        <a href="<?php the_permalink(); ?>">
                            <?php if(has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('medium',array('alt'=>get_the_title())); ?>
                            <?php endif; ?>
                            <span class="scroll-name"><?php the_title(); ?></span>
                        </a>
                    </li>
                    <?php endwhile; ?>
                </ul>
                <?php endif; wp_reset_postdata(); ?>
            </div>
        </div>
    </div>
</div>

第三部分：CSS 样式（放入主题 style.css）

布局：左大图 + 右小图 左右并排，右侧固定区域内图片竖向滚动

/* 幻灯整体布局 */
.home-slide-wrap {
    display: flex;
    gap: 15px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 20px;
    overflow: hidden;
}

/* 左侧大图区域 */
.slide-left {
    flex: 7;
    position: relative;
    overflow: hidden;
}
.slide-big {
    width: 100%;
    height: 420px;
    overflow: hidden;
    position: relative;
}
.slide-list {
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.slide-item.active {
    opacity: 1;
    z-index: 2;
}
.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.slide-title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 20px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 14px;
}

/* 轮播箭头 */
.slide-prev, .slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(0,0,0,0.3);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
}
.slide-prev { left: 10px; }
.slide-next { right: 10px; }

/* 轮播圆点 */
.slide-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.slide-dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    margin: 0 4px;
    cursor: pointer;
}
.slide-dots span.active {
    background: #fff;
}

/* 右侧竖向滚动区域 */
.slide-right {
    flex: 3;
    height: 420px;
    overflow: hidden;
    border: 1px solid #eee;
}
.scroll-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.scroll-inner {
    width: 100%;
}
.scroll-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.scroll-item {
    padding: 8px 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 10px;
}
.scroll-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}
.scroll-name {
    flex: 1;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 标记样式：置顶、推荐 */
.is-top .slide-title::before {
    content: "【置顶】";
    color: #ff4444;
}
.is-rec .slide-title::after {
    content: " 推荐";
    color: #ffaa00;
}

第四部分：JS 轮播 + 竖向滚动（自动执行）

放到主题 footer.php 底部 </body> 之前，或者页面底部

<script>
jQuery(function($){
    // ========== 1. 左侧大图轮播 ==========
    let slideList = $('.slide-list .slide-item');
    let dotsWrap  = $('.slide-dots');
    let dots      = [];
    let index     = 0;
    let timer     = null;
    let len       = slideList.length;

    // 生成圆点
    for(let i=0; i<len; i++){
        dotsWrap.append('<span></span>');
    }
    dots = dotsWrap.find('span');

    // 初始化第一个
    slideList.eq(0).addClass('active');
    dots.eq(0).addClass('active');

    // 切换函数
    function changeSlide(i){
        slideList.removeClass('active').eq(i).addClass('active');
        dots.removeClass('active').eq(i).addClass('active');
    }
    function nextSlide(){
        index++;
        if(index >= len) index = 0;
        changeSlide(index);
    }
    function prevSlide(){
        index--;
        if(index < 0) index = len - 1;
        changeSlide(index);
    }

    // 自动轮播
    function autoPlay(){
        timer = setInterval(nextSlide, 3000); // 3秒切换
    }
    autoPlay();

    // 箭头点击
    $('.slide-next').click(function(){
        clearInterval(timer);
        nextSlide();
        autoPlay();
    });
    $('.slide-prev').click(function(){
        clearInterval(timer);
        prevSlide();
        autoPlay();
    });

    // 圆点点击
    dots.click(function(){
        clearInterval(timer);
        index = $(this).index();
        changeSlide(index);
        autoPlay();
    });

    // ========== 2. 右侧图片竖向无缝滚动 ==========
    let scrollBox  = $('.scroll-box');
    let scrollInner= $('.scroll-inner');
    let scrollList = $('.scroll-list');
    let listHeight = scrollList.height();

    // 复制一份实现无缝滚动
    scrollInner.append(scrollList.clone());

    let scrollSpeed = 1.5; // 滚动速度
    function scrollRun(){
        let top = parseFloat(scrollInner.css('top')) || 0;
        top -= scrollSpeed;
        if(Math.abs(top) >= listHeight){
            top = 0;
        }
        scrollInner.css('top', top + 'px');
        requestAnimationFrame(scrollRun);
    }
    scrollRun();

    // 鼠标悬停暂停
    scrollBox.hover(function(){
        scrollSpeed = 0;
    },function(){
        scrollSpeed = 1.5;
    });
});
</script>

五、使用步骤（完整流程）

  1. 把 第一部分代码 粘贴到主题 functions.php
  2. 把 第二部分 PHP+HTML 放到首页模板你想显示幻灯的位置
  3. 把 第三部分 CSS 加到主题 style.css
  4. 把 第四部分 JS 加到 footer.php 底部
  5. 进入 WP 后台：
    • 首页幻灯片 → 添加图片、标题、勾选置顶 / 推荐、设置排序
    • 右侧滚动图 → 批量上传小图
    • 外观 → 幻灯图设置 → 设置大图数量、小图数量
  6. 刷新前台即可看到：
    • 左侧大图自动轮播、带箭头 + 圆点、区分置顶 / 推荐
    • 右侧列表向上无缝滚动，鼠标悬停暂停

可自定义修改点

  • 轮播速度：JS 里 setInterval(nextSlide, 3000) 改数字（单位毫秒）
  • 滚动速度：JS 里 scrollSpeed = 1.5 调大小
  • 容器高度：CSS 里 height:420px 统一修改
  • 左右宽度比例：CSS flex:7 和 flex:3 调整数值
  • 图片尺寸：WP 媒体设置 / 代码里 the_post_thumbnail('large') 改尺寸名

整套代码无依赖第三方插件，纯原生 WP 功能，直接复制即用。