在WordPress中PHP嵌入CSS实现图片并排显示遇问题求助

我希望在WordPress中并行显示两张带有创建时间的图片，因此尝试用echo输出display:flex的CSS样式。虽然逻辑没问题，但图片的<a>标签无法正常工作，还可能存在其他语法错误。另外，如果提前闭合table标签，页面显示会异常。作为新手，恳请帮忙审查代码并提供解决方案。

原代码 #

<?php
  $dir = opendir('/var/www/html/data1/products/images/avhrr/rgb');
  $files = array();
  while (($file = readdir($dir)) !== false) 
    {
    if ($file == '.' || $file == '..' ) continue;
    if (is_dir("/var/www/html/data1/products/images/avhrr/rgb/$file")) continue;
    $lastModified = filemtime("/var/www/html/data1/products/images/avhrr/rgb/$file");
    $files[$file] = $lastModified;
    }
  closedir($dir);
  asort($files);
  $files=array_reverse($files);
  $count = 0;
  foreach ($files as $file => $lastModified) 
  $name = basename($file);
   $str = $name;
   $pattern = "/top/i";
  
if(preg_match_all($pattern, $str, $matches))
{
$file_stats = stat("/var/www/html/data1/products/images/avhrr/rgb/".$name);
echo '<div class="container" style="display:flex">';
echo '<table border="5">';
echo '<tr><td>';
echo 'Daily_RGB : '.date('d-m-Y h:m:i A',$file_stats["mtime"]).PHP_EOL; //Equivalent of filemtime()
echo "<br>";
echo "<a href='/data1/products/images/avhrr/rgb/$file'  target='_blank'></a>";
echo "<img src='/data1/products/images/avhrr/rgb/$file' height='450' width='450'/>";
echo '</td></tr>';
echo '</div>';
echo '</table>';
$count++;
}
 if ($count == 2) break;
    }
    ?>

问题分析与修复方案 #

核心问题点 #

• <a>标签失效：原代码中<a>标签是空的，没有将<img>包裹在内，导致点击图片无法触发跳转。
• HTML嵌套错误：先闭合<div>再闭合<table>，违反HTML嵌套规则，引发页面显示异常。
• foreach循环语法错误：循环体未加花括号，仅第一行代码在循环内，后续逻辑完全混乱。
• flex容器作用错误：每次循环创建独立的flex容器，两张图片无法并行排列，需将flex容器放在循环外部。
• 冗余的stat调用：已通过$lastModified获取修改时间，无需重复调用stat。

修复后的代码 #

<?php
$dir = opendir('/var/www/html/data1/products/images/avhrr/rgb');
$files = array();

// 读取目录文件并按修改时间排序
while (($file = readdir($dir)) !== false) {
    if ($file == '.' || $file == '..' ) continue;
    if (is_dir("/var/www/html/data1/products/images/avhrr/rgb/$file")) continue;
    $lastModified = filemtime("/var/www/html/data1/products/images/avhrr/rgb/$file");
    $files[$file] = $lastModified;
}
closedir($dir);
asort($files);
$files = array_reverse($files);

$count = 0;
// 先输出flex容器，包裹所有图片元素
echo '<div class="container" style="display:flex; gap: 20px;">';

foreach ($files as $file => $lastModified) {
    $name = basename($file);
    $str = $name;
    $pattern = "/top/i";

    if(preg_match($pattern, $str)) { // 仅需匹配一次，用preg_match即可
        echo '<table border="5">';
        echo '<tr><td>';
        // 直接使用已获取的$lastModified，无需stat
        echo 'Daily_RGB : '.date('d-m-Y h:i:s A', $lastModified).PHP_EOL;
        echo "<br>";
        // 将img放入a标签内部，实现点击跳转
        echo "<a href='/data1/products/images/avhrr/rgb/$file' target='_blank'>";
        echo "<img src='/data1/products/images/avhrr/rgb/$file' height='450' width='450'/>";
        echo "</a>";
        echo '</td></tr>';
        echo '</table>';
        
        $count++;
        // 达到2张图片后终止循环
        if ($count == 2) break;
    }
}

// 闭合flex容器
echo '</div>';
?>

关键修改说明 #

1. 调整flex容器位置：将<div class="container" style="display:flex">放在循环前，确保两张图片都在同一个flex容器内，实现并行排列。
2. 修复<a>标签：将<img>标签移入<a>标签内部，点击图片即可跳转。
3. 修正HTML嵌套：先闭合<table>再处理外层容器，符合HTML规范。
4. 修复foreach循环：添加花括号包裹完整循环体，确保逻辑正确执行。
5. 简化时间获取：直接使用$lastModified替代stat调用，减少冗余代码。
6. 优化正则匹配：用preg_match替代preg_match_all，仅需判断是否匹配即可。

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