如何在WP循环中调用外部函数并按指定Slug返回对应图片

需求背景 #

在WordPress子主题开发中，需根据页面Slug匹配对应图片组：

• slugA → 图片1、2、6
• slugB → 图片2、3、5、9
• slugC → 图片1、7
• 以此类推

现有代码仅能实现单张图片调用，无法按Slug返回指定图片组，需优化逻辑并提升执行效率。

现有代码 #

//DEFINING ALL MY PHOTOS AND RETURNING THEM
function my_post_photos (
  $mQuery = 1,
  $image01 = "filler_01.jpg",
  $image02 = "filler_02.jpg",
  $image03 = "filler_03.jpg",
  $image04 = "filler_04.jpg",
  $image05 = "filler_05.jpg",
  $image06 = "filler_06.jpg",
  $image07 = "filler_07.jpg",
  $image08 = "filler_08.jpg",
  $image09 = "filler_09.jpg",
  $image10 = "filler_10.jpg"
): string
{
  $vars = get_defined_vars();
  foreach ($vars as $key => $value) {
    $placeholders[] = get_stylesheet_directory_uri() . '/dist/images/' . $value;
  }

  return $placeholders[$mQuery];
}

//FURTHER DOWN THIS SAME PAGE...WITHIN MY WP LOOP, CALLING THEM
<?php 
$query = new WP_Query($args);
if ($query->have_posts()) :
   //WITH THE BELOW $i, I AM FULLY AWARE THAT THE NUMBER OF PHOTOS LOADS IS DEPENDENT ON HOW MANY TIMES MY LOOP CYCLES.  I'M COOL WITH THAT BECAUSE I'M EVENTUALLY GOING TO HAVE MORE PHOTOS THAN POSTS.
   $i=1;
     while ($query->have_posts()) : $query->the_post(); 
       $current_page = sanitize_post($GLOBALS['wp_the_query']->get_queried_object());
       $slug = $current_page->post_name;
?>
  
<?php
    if ($slug == "slugA") {
?>
      <div>
        <h6>
          <!-- //THIS FUNCTION LOADS EACH PHOTO PERFECTLY FINE, BUT HOW CAN I ONLY RETURN PHOTOS 1, 2, 6 HERE? -->
          <img src="<?php echo my_career_placeholder($i); ?>" border="0" alt="">
        </h6>
       </div>
       <?php
       } elseif ($slug = "slugB") {
         //HOW CAN I RETURN ONLY PHOTOS 2, 3, 5, 9 HERE?
       } elseif ($slug = "slugC") {
         //HOW CAN I RETURN ONLY PHOTOS 1, 7 HERE?
       }
       ?>
      <?php 
        $i++;
        endif;
        endwhile; 
        endif;
        wp_reset_postdata();
?>

优化方案 #

1. 抽离配置数据 #

把图片列表和Slug映射关系独立成配置数组，避免硬编码，提升可维护性：

// 图片列表（索引对应图片编号，从1开始）
$photos_list = [
    1 => 'filler_01.jpg',
    2 => 'filler_02.jpg',
    3 => 'filler_03.jpg',
    4 => 'filler_04.jpg',
    5 => 'filler_05.jpg',
    6 => 'filler_06.jpg',
    7 => 'filler_07.jpg',
    8 => 'filler_08.jpg',
    9 => 'filler_09.jpg',
    10 => 'filler_10.jpg',
];

// Slug与图片编号的映射表
$slug_photo_map = [
    'slugA' => [1, 2, 6],
    'slugB' => [2, 3, 5, 9],
    'slugC' => [1, 7],
    // 按需添加其他Slug的映射规则
];

2. 重写图片获取函数 #

修改原函数，支持返回单张或多张图片的完整URL：

function get_post_photos($photo_ids = [], $photos_list) {
    $image_base_url = get_stylesheet_directory_uri() . '/dist/images/';
    $return_urls = [];

    foreach ($photo_ids as $id) {
        if (isset($photos_list[$id])) {
            $return_urls[] = $image_base_url . $photos_list[$id];
        }
    }

    // 单张图片返回字符串，多张返回数组
    return count($return_urls) === 1 ? $return_urls[0] : $return_urls;
}

3. 循环内按Slug渲染图片组 #

修改WP循环代码，根据当前页面Slug匹配图片组并渲染：

<?php 
$query = new WP_Query($args);
if ($query->have_posts()) :
    // 引入配置数组
    global $photos_list, $slug_photo_map;
    
    while ($query->have_posts()) : $query->the_post(); 
        $current_page = sanitize_post($GLOBALS['wp_the_query']->get_queried_object());
        $slug = $current_page->post_name;

        // 检查当前Slug是否有对应配置
        if (isset($slug_photo_map[$slug])) {
            $photo_urls = get_post_photos($slug_photo_map[$slug], $photos_list);
            
            // 遍历渲染每张图片
            foreach ($photo_urls as $url) {
?>
                <div>
                    <h6>
                        <img src="<?php echo esc_url($url); ?>" border="0" alt="<?php echo esc_attr(get_the_title()); ?>">
                    </h6>
                </div>
<?php
            }
        }
    endwhile; 
    wp_reset_postdata();
endif;
?>

4. 额外优化建议 #

• 将配置数组放到子主题functions.php中，方便统一管理
• 使用esc_url()、esc_attr()对输出内容转义，符合WordPress安全规范
• 后续新增图片或Slug规则，仅需更新配置数组，无需修改函数和循环逻辑

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