我意识到这是因为我需要获取帖子ID并将相同的ID添加到模式代码中
不，你的情况不是这样的。如果要对所有不同的图像使用单个模式（&M）；i、 e.根据触发模式的按钮/链接（或简单地说，单击的按钮/链接），模式中会显示不同的图像，您需要JavaScript来实现这一点，正如Bootstrap 4\'s Modal documentation &mdash；毕竟，modal本身就是一个JavaScript插件：
不同的模式内容是否有一组按钮，这些按钮都会触发内容略有不同的相同模式？使用event.relatedTarget 和HTMLdata-* 属性（可能通过jQuery）根据单击的按钮改变模式的内容。
所以根据这个例子there 以及您的代码：
Option 1: 您只需使用此脚本将模态内容替换为触发模态的按钮/链接的内部HTML：
jQuery( function( $ ){
$( \'#galleryModal\' ).on( \'show.bs.modal\', function ( event ) {
var button = $( event.relatedTarget ); // Button/link that triggered the modal
var modal = $( this );
// Update the modal\'s content.
modal.find(\'.modal-body\').html(
button.html()
);
});
});
Option 2: 或使用
data-* 属性进行更多控制，例如显示帖子缩略图的更大预览。在这里我使用
data-image 和
large 缩略图大小：
添加data-image: （为清晰起见，包装好）
<a data-toggle="modal" data-target="#galleryModal" href="<?php echo the_permalink(); ?>"
data-image="<?php the_post_thumbnail_url( \'large\' ); ?>">
查看reference 如果您需要帮助the_post_thumbnail_url().添加脚本：（注意新的image 变量）
jQuery( function( $ ){
$( \'#galleryModal\' ).on( \'show.bs.modal\', function ( event ) {
var button = $( event.relatedTarget ); // Button/link that triggered the modal
var image = button.data( \'image\' ); // Get the image URL from the data-image
// attribute of the button/link above.
var modal = $( this );
// Update the modal\'s content.
modal.find(\'.modal-body\').html(
\'<img src="\' + image + \'" alt="" />\'
);
});
});
注意，应将脚本放置在外部JavaScript文件中（例如
wp-content/themes/your-theme/custom.js) 并通过主题的
functions.php 文件或者将脚本代码包装为
<script> 和
</script> 标记，然后将脚本添加到
footer.php 或
header.php 文件（检查
this article 如果你需要帮助。您也可以在WPSE上搜索。：）
在modal-body DIV你不需要the_post_thumbnail().. 或者您可以将其更改为Loading... 或显示“特殊”图像/内容，其用途类似于视频海报图像。但是，这只是一个建议
