ACF 中继器字段和 Clearfix / 显示时的样式

Posted 2023-03-04

【中文标题】ACF 中继器字段和 Clearfix / 显示时的样式

【英文标题】：ACF Repeater Fields & Clearfix / Styling when displaying

【发布时间】：2020-10-29 08:33:47

【问题描述】：

第一次发帖，用这些论坛作为资源已经有一段时间了……希望你能提供帮助。

我对 php 的事情摸不着头脑，想知道您是否有任何想法

情况是这样，首先是“背景故事”；

我通常在 Wordpress 和 Bootstrap 中工作。我在这里找到了一些代码，可以帮助我格式化帖子类型，以便我可以将帖子类型用作图库（例如）并在其中运行 clearfix 以整理每一行，并阻止图像相互碰撞。这是我一直在使用的

<?php $args=array(
'post_type' => ‘post-name',
'posts_per_page'      => '100',
'orderby'=> 'date', 'order' => 'ASC' );
$my_query = null;
$my_query = new WP_Query($args);

if( $my_query->have_posts() ) 

$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 4 == 0)  ?> 

<div class="row">

<?php ?>

IMAGE / CONTENT THAT REPEATS GOES IN HERE

<?php $i++; if($i != 0 && $i % 4 == 0)  ?>

</div>
<div class="clearfix"></div>

<?php  ?>
<?php endwhile; wp_reset_query(); ?>

正如我所说，当图像可能会破坏页面流程时，这会应用 clearfix div 并在行尾设置权限。 到目前为止，一切都很好。这就是问题所在。

最近我一直在使用高级自定义字段插件的自定义“中继器”字段（您基本上可以将图像堆叠到堆栈中，但它们不再是帖子类型，就像上面）这就是我用来拉的

<?php if(get_field(‘repeater-field-name')): ?>
<?php while(has_sub_field('repeater-field-name')): ?>

IMAGE / CONTENT THAT REPEATS GOES IN HERE

<?php endwhile; ?>
<?php endif; ?> 

这也很好用。 所以，我的斗争基本上是将重复的字段代码与 clearfix 代码合并。

是否有任何简单的方法可以修改 clearix 代码以包含转发器字段？ 有没有更好的方法？

基本上，任何帮助表示赞赏。

谢谢！

编辑 - 有关更多信息，这是我尝试使用的实际代码，在这种情况下它不是帖子类型，只是利用中继器字段； 这是我试图开始工作的代码。它不是一个帖子类型，它是一个转发器字段，所以它会按照上面的示例（第二个代码块）在没有任何样式的情况下重复。所以简而言之，我正在尝试将无限的 clearfix（如我用于帖子类型的第一个代码块）应用于转发器字段。我一直在尝试将两者结合起来。也许我走错了路？

<div class="container">
 <div class="row">
  <div class="main_cbrand roomy-100 gallery">

<?php if(get_field('artwork')): ?>
<?php while(has_sub_field('artwork')): ?>

<?php if( get_sub_field('image') ): ?>

<div class="col-md-2 col-sm-4 col-xs-6" style="padding-bottom: 20px;">
<a title="<?php the_sub_field('title'); ?>" href="<?php the_sub_field('image');             ?>"><img src="<?php the_sub_field('image'); ?>"  title="<?php the_sub_field('title'); ?>"></a>
  </div>

<?php endif; ?>
<?php endwhile; ?><?php endif; ?> 
</div>
</div>
</div>

【问题讨论】：

中继器内是否只有图像？您可以使用 get_field('field_id', $post_id) 并打印输出吗？

只是一张图片，是的，还有一些小样式 - 取决于使用情况。通常是一个 DIV 包装器，以及一些用于设置样式的类。我通常说，当我以前使用它作为帖子类型来生成画廊时，我会过去。我还没有设法让它按照我想要的转发器进行......

【参考方案1】：

基本上，您可以采用组织化的方式；） - 示例：

<?php 
$args = array(
    'post_type'     => 'post',
    'posts_per_page'=> '100',
    'orderby'       => 'date', 
    'order'         => 'ASC' 
);
$query = new WP_Query($args);


// The Loop
if ( $query->have_posts() ) 
    while ( $query->have_posts() ) 
        $query->the_post();
        

        // collect item data
        $pid = get_the_ID();
        $rpt = get_field('some_name', $pid);

        // build repeater data
        $counter = 0;
        $rptData = '';
        if( !empty($rpt) ) 
            foreach($rpt as $item) 

                // 4 condition
                $rtpData .= ($counter % 4 == 0 ? '<div class="row">' : '');
                
                // make what you want with info inside the item here
                $rptData .= '<div class="col-md-3">'.$item['something'].'</div>'; 

                $rtpData .= ($counter % 4 == 0 ? '</div><div class="clearfix"></div>' : '');

                $counter++;
            
        ;


        echo '
        <div>
            <h3>I AM THE WRAPPER</h3>
            <div class="container">
                '.$rptData.'
            </div>
        </div>
        ';
    

/* Restore original Post Data */
wp_reset_postdata();
?>

.编辑： 第一个。您甚至需要 clearfix 的原因是 .row div 不是这些列的直接父级。否则，您不需要任何 clearfix。

我不明白这是怎么工作的。'the_sub_field('image')' 你确定吗？

如果您认真考虑一下，不同的分辨率每行的列数会有所不同，那么 clearfix 将如何提供帮助？ （见第一条评论）

尽管如此.. 来了 ;)

<div class="container">
    <div class="row">
        <div class="main_cbrand roomy-100 gallery">

            <?php 
            if(get_field('artwork'))

                $counter = 0;

                while(has_sub_field('artwork'))  
                    ?>

                    <?php if( get_sub_field('image') ): ?>

                        <div class="col-md-2 col-sm-4 col-xs-6" style="padding-bottom: 20px;">
                            <a title="<?php the_sub_field('title'); ?>" href="<?php the_sub_field('image'); ?>">
                                <img src="<?php the_sub_field('image'); ?>"  title="<?php the_sub_field('title'); ?>">
                            </a>
                        </div>

                        <?php echo ($counter % 4 == 0 ? '<div class="clearfix"></div>' : ''); ?>


                    <?php endif; ?>
                    
                    <?php 
                    $counter++;
                
             
            ?> 
        </div>
    </div>
</div>

您可以更改它在此行中出现的频率

echo ($counter % 4 == 0 ? '<div class="clearfix"></div>' : '');

【讨论】：

我要玩这个 - 谢谢你抽出时间 - 虽然我马上注意到帖子类型 arg 仍然在那里 - 这就是我想要摆脱的from，因为转发器字段不使用帖子类型。对不起，如果我不清楚。像这样涉及 PHP 仍然让我有点吃惊。

我只是不知道你在哪里提取转发器的信息......如果是每个帖子，那么你需要帖子类型，因为它在一个循环中。如果中继器的数据保存在主题选项面板中，那就另当别论了。我需要一些额外的信息来理解这一点。

你看...在这一行“$rpt = get_field('some_name', $pid);”我们正在从该特定帖子中获取转发器数据...（这有助于理解吗？）

我仍然无法完成 - 感谢您的帮助。我想我可能把事情搞糊涂了。请忽略帖子类型元素 - 我用它作为我如何使用帖子类型进行明确修复的示例。我正在尝试将清晰的修复解决方案应用于转发器字段 INSTEAD。

顺便说一句，我也无法让代码自行运行...希望原始帖子中的编辑信息应该可以清除它，我已经包含了实际的代码我正在使用（并且正在工作）-基本上，我只是想对其进行明确的修复。