Question

在本网站上发布的全新内容（我已经多次使用它来查找答案）。我正在尝试编辑一个WP插件，它会带来Instagram照片，优化它们并在本地存储它们，然后在小部件中输出到网站。它很棒。唯一的问题是没有样式，他们使用无序列表来显示。

查看前端显示代码，我看到了相关内容：

<ul class="opt-inst-wrap">
<?php
if ( 'lightbox' == $instance['image_open_mode']) {
    foreach ($images as $code => $image) { ?>
        <li><a href="<?php echo OptimizedInstagramImageHandler::get_upload_url($instance['username']).'/'. $image['standart'] ?>" rel="lightbox"><img alt="" src="<?php echo OptimizedInstagramImageHandler::get_upload_url($instance['username']) . '/' . $image[$instance['thumb_size']] ?>" /></a></li>
        <?php
    }
} elseif ( 'linktoimage' == $instance['image_open_mode']) {

总共有9张图片将被拉出，我希望将其显示为响应式网格。我准备好了显示代码。但不知道如何搞乱这个foreach循环等，这样我就可以把显示代码放进去了。最终结果会是这样的：

部分

开始行图片图片图片结束行

结束部分

所以我有点失落。任何帮助将不胜感激！

Answer 1

很容易使这个有序列表而不是无序列表只需更改ol标记的ul标记。您还需要将结束标记更改为，但这不在您包含的代码之内。然后我只是在'li'和'a'标签中添加一些类名，这样你就可以在你的css代码中定位它们

<ol class="opt-inst-wrap myorderedlistclass">
<?php
if ( 'lightbox' == $instance['image_open_mode']) {
    foreach ($images as $code => $image) { ?>
        <li class="mylistclass" ><a class="mylinkclass" href="<?php echo OptimizedInstagramImageHandler::get_upload_url($instance['username']).'/'. $image['standart'] ?>" rel="lightbox"><img alt="" src="<?php echo OptimizedInstagramImageHandler::get_upload_url($instance['username']) . '/' . $image[$instance['thumb_size']] ?>" /></a></li>
        <?php
    }
} elseif ( 'linktoimage' == $instance['image_open_mode']) {

我对你的建议只是陷入其中，制作代码的备份副本，这样如果你陷入困境，你总能回到它。

WordPress - 自定义插件循环数组

1 个答案: