WordPress插件：替换loadMoreEndTxt文本为图片的方法咨询

核心思路 #

原代码里的loadMoreEndTxt默认是传递文本值，要显示图片得把图片HTML作为值传递，同时确保前端能解析HTML，而不是当成纯文本渲染。

方案一：直接传递图片HTML并修改前端渲染 #

1. 生成图片HTML（后端）
   先构建带正确路径和属性的图片标签，注意转义URL和alt文本避免安全问题：

   // 假设图片在插件的assets/images目录下
   $no_more_img_src = plugin_dir_url(__FILE__) . 'assets/images/no-more-posts.png';
   $no_more_img = '<img src="' . esc_url($no_more_img_src) . '" alt="' . esc_attr__('No more posts', ESG_TEXTDOMAIN) . '" class="no-more-posts-img">';
   

2. 替换原输出代码
   把原来的文本替换成上面的图片HTML：

   echo '        loadMoreEndTxt:"' . $no_more_img . '",' . "\n";
   

3. 调整前端JS渲染逻辑
   找到前端处理loadMoreEndTxt的代码，把原本的text()方法改成html()，这样JS会解析HTML而不是显示纯文本：

   // 原代码可能是这样的：
   // $('.end-message').text(loadMoreEndTxt);
   // 改成：
   $('.end-message').html(loadMoreEndTxt);
   

方案二：绕开文本参数，预先隐藏图片容器 #

如果前端代码限制死了只能传文本，没法修改渲染方式，就用这个方法：

1. 后端预先输出隐藏的图片容器
   在插件的前端模板或输出代码里添加：

   echo '<div class="no-more-posts-wrap" style="display:none;">
           <img src="' . esc_url(plugin_dir_url(__FILE__) . 'assets/images/no-more-posts.png') . '" alt="' . esc_attr__('No more posts', ESG_TEXTDOMAIN) . '">
         </div>';
   

2. 修改后端的loadMoreEndTxt为空

   echo '        loadMoreEndTxt:"",' . "\n";
   

3. 前端触发时显示图片容器
   找到无更多帖子的触发逻辑，隐藏加载按钮并显示图片容器：

   // 当检测到无更多帖子时
   $('.load-more-btn').hide();
   $('.no-more-posts-wrap').show();
   

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