如何将WordPress文章图片存入PHP数组并通过JavaScript逐张展示？

嘿，我之前折腾过WordPress漫画站点的浏览功能，刚好能给你一步步捋清楚怎么实现！咱们分三个核心步骤来：从文章提取图片、传给JavaScript、做逐个展示的交互。

这里有两种常用方式，看你文章里的图片是怎么放的：

方式1：正则匹配文章内容里的所有图片（通用型） #

如果你的漫画图片是直接插入文章正文的，用正则可以快速抓取所有<img>标签的src属性：

// 获取当前文章的内容
$post_content = get_the_content();

// 正则匹配所有img标签的src属性
preg_match_all('/<img[^>]+src="([^">]+)"/i', $post_content, $matches);

// 提取到的图片URL数组（去重避免重复图片）
$comic_images = array_unique($matches[1]);

⚠️ 注意：这种方式可能会抓到文章里的表情、头像之类的无关图片，如果你想更精准，推荐下面的方式。

方式2：用自定义字段存储漫画图片（精准型） #

我更推荐给文章加一个自定义字段（比如叫comic_page_images），专门上传漫画图片。这样提取起来更干净：

// 获取当前文章的自定义字段值（假设字段是数组类型）
$comic_images = get_post_meta(get_the_ID(), 'comic_page_images', true);

// 确保是数组格式，避免报错
if (!is_array($comic_images)) {
    $comic_images = [];
}

这种方式完全不会抓到无关图片，后期维护也更方便。

WordPress有规范的传值方式，也可以直接输出JSON，两种都给你：

方式1：用WordPress官方推荐的wp_localize_script #

这个方式适合你有单独的JS文件的情况，符合WordPress的脚本加载规范：

// 先注册并加载你的JS文件（假设文件在主题的js文件夹下叫comic-viewer.js）
wp_enqueue_script('comic-viewer', get_template_directory_uri() . '/js/comic-viewer.js', ['jquery'], '1.0', true);

// 把图片数组传给JS，生成全局变量ComicData
wp_localize_script('comic-viewer', 'ComicData', [
    'images' => $comic_images,
    'totalPages' => count($comic_images)
]);

之后在你的JS文件里，直接用ComicData.images就能拿到图片数组了。

方式2：直接在模板里输出JSON（快速测试用） #

如果只是快速验证功能，直接在文章模板里加一段脚本就行：

<script>
// 把PHP数组转成JS数组
const comicImages = <?php echo json_encode($comic_images); ?>;
let currentPageIndex = 0; // 当前展示的页码索引
</script>

先在文章模板里加HTML结构（展示图片和导航按钮）：

<div class="comic-viewer">
    <!-- 漫画图片容器 -->
    <div class="comic-image-wrap">
        <img id="current-comic-img" src="" alt="漫画页面">
    </div>
    <!-- 导航按钮 -->
    <div class="comic-nav">
        <button id="prev-page-btn">上一页</button>
        <span class="page-info"></span>
        <button id="next-page-btn">下一页</button>
    </div>
</div>

然后写JS交互逻辑（不管用上面哪种传值方式，逻辑都通用）：

// 获取DOM元素
const comicImg = document.getElementById('current-comic-img');
const prevBtn = document.getElementById('prev-page-btn');
const nextBtn = document.getElementById('next-page-btn');
const pageInfo = document.querySelector('.page-info');

// 从PHP传过来的图片数组
const images = ComicData?.images || comicImages;
let currentIndex = 0;

// 加载当前页面的函数
function loadCurrentPage() {
    // 处理没有图片的情况
    if (images.length === 0) {
        comicImg.alt = '暂无漫画页面';
        pageInfo.textContent = '未找到漫画内容';
        prevBtn.disabled = true;
        nextBtn.disabled = true;
        return;
    }

    // 更新图片和页码信息
    comicImg.src = images[currentIndex];
    pageInfo.textContent = `第 ${currentIndex + 1} 页 / 共 ${images.length} 页`;

    // 禁用/启用按钮（边界控制）
    prevBtn.disabled = currentIndex === 0;
    nextBtn.disabled = currentIndex === images.length - 1;
}

// 绑定按钮点击事件
prevBtn.addEventListener('click', () => {
    if (currentIndex > 0) {
        currentIndex--;
        loadCurrentPage();
    }
});

nextBtn.addEventListener('click', () => {
    if (currentIndex < images.length - 1) {
        currentIndex++;
        loadCurrentPage();
    }
});

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', loadCurrentPage);

最后可以加一点基础CSS美化（放在主题的style.css里）：

.comic-viewer {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.comic-image-wrap {
    text-align: center;
    margin-bottom: 1.5rem;
}

#current-comic-img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.comic-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.comic-nav button {
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 4px;
    background: #2c3e50;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.comic-nav button:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.page-info {
    font-size: 0.9rem;
    color: #7f8c8d;
}

• 图片加载失败处理：给img加onerror事件，避免空白：

  comicImg.onerror = () => {
      comicImg.alt = '图片加载失败';
      comicImg.src = '这里可以放一张默认占位图的URL';
  };
  

• 用WordPress图片裁剪：如果想统一漫画尺寸，可以把图片URL替换成指定尺寸的版本，比如：

  // 把原图URL替换成中等尺寸（需要WordPress开启图片裁剪功能）
  $comic_images = array_map(function($src) {
      return str_replace('wp-content/uploads/', 'wp-content/uploads/medium/', $src);
  }, $comic_images);
  

内容的提问来源于stack exchange，提问作者Mikie Burgess