Question

我使用高级自定义字段插件的所有可能性在自定义模板中处理此网站 MY Site 我创建了一些自定义字段，并使用以下代码调用字段值。

<div class="category-images"><?php echo get_field( "category_heading_1" ); ?></div>
<div class="images">
<?php 

$image1 = get_field('image_1'); 
$image2 = get_field('image_2');
$image3 = get_field('image_3');
$image4 = get_field('image_4');
$image5 = get_field('image_5');
$image6 = get_field('image_6');
$image7 = get_field('image_7');
$image8 = get_field('image_8');
$image9 = get_field('image_9');
?>

<div class="img1"><a href="<?php echo get_field( "image_link_1" ); ?>"><img src="<?php echo $image1['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2" ); ?>"><img src="<?php echo $image2['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_3" ); ?>"><img src="<?php echo $image3['url']; ?>" /></a></div>
</div>
  <div class="images_txt">
    <div class="img_txt"><b><?php echo get_field( "image_heading_1" ); ?></b> </div>
    <div class="img_txt1"><b><?php echo get_field( "image_heading_2" ); ?></b> </div>
    <div class="img_txt2"><b><?php echo get_field( "image_heading_3" ); ?></b> </div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_4" ); ?>"><img src="<?php echo $image4['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_5" ); ?>"><img src="<?php echo $image5['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_6" ); ?>"><img src="<?php echo $image6['url']; ?>" /></a></div>
</div>
<div class="images_txt"> 
 <div class="img_txt"><b><?php echo get_field( "image_heading_4" ); ?> </b></div>
   <div class="img_txt1"><b><?php echo get_field( "image_heading_5" ); ?> </b></div>
   <div class="img_txt2"><b><?php echo get_field( "image_heading_6" ); ?> </b></div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_7" ); ?>"><img src="<?php echo $image7['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_8" ); ?>"><img src="<?php echo $image8['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_9" ); ?>"><img src="<?php echo $image9['url']; ?>" /></a></div>
</div>
<div class="images_txt">  
<div class="img_txt"><b><?php echo get_field( "image_heading_7" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_8" ); ?></b> </div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_9" ); ?></b> </div>
   </div>

   <div class="category-images"><?php echo get_field( "category_heading_2" ); ?></div>
<div class="images">
<?php 

$image_21 = get_field('image_2(1)'); 
$image_22 = get_field('image_2(2)'); 
$image_23 = get_field('image_2(3)'); 
$image_24 = get_field('image_2(4)'); 
$image_25 = get_field('image_2(5)'); 
$image_26 = get_field('image_2(6)'); 
$image_27 = get_field('image_2(7)'); 
$image_28 = get_field('image_2(8)'); 
$image_29 = get_field('image_2(9)'); 

?>

<div class="img1"><a href="<?php echo get_field( "image_link_2(1)" ); ?>"><img src="<?php echo $image_21['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(2)" ); ?>"><img src="<?php echo $image_22['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(3)" ); ?>"><img src="<?php echo $image_23['url']; ?>" /></a></div>
</div>
<div class="images_txt">
<div class="img_txt"><b><?php echo get_field( "image_heading_2(1)" ); ?></b> </div>
<div class="img_txt1"><b><?php echo get_field( "image_heading_2(2)" ); ?></b> </div>
<div class="img_txt2"><b><?php echo get_field( "image_heading_2(3)" ); ?></b> </div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_2(4)" ); ?>"><img src="<?php echo $image_24['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(5)" ); ?>"><img src="<?php echo $image_25['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(6)" ); ?>"><img src="<?php echo $image_26['url']; ?>" /></a></div>
</div>
<div class="images_txt"> 
 <div class="img_txt"><b><?php echo get_field( "image_heading_2(4)" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_2(5)" ); ?> </b></div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_2(6)" ); ?> </b></div>
</div> 
<div class="images">
<div class="img1"><a href="<?php echo get_field( "image_link_2(7)" ); ?>"><img src="<?php echo $image_27['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(8)" ); ?>"><img src="<?php echo $image_28['url']; ?>" /></a></div>
<div class="img1"><a href="<?php echo get_field( "image_link_2(9)" ); ?>"><img src="<?php echo $image_29['url']; ?>" /></a></div>
</div>
<div class="images_txt">  
<div class="img_txt"><b><?php echo get_field( "image_heading_2(7)" ); ?> </b></div>
  <div class="img_txt1"><b><?php echo get_field( "image_heading_2(8)" ); ?></b> </div>
  <div class="img_txt2"><b><?php echo get_field( "image_heading_2(9)" ); ?></b> </div>
   </div>

所以在我的情况下，我只添加了3个文件作为后端的自定义文件。我已经分配了它9因为可以有未来的添加。我只有3个产品，当它在前端显示页面占用空间时对于我没有输入的文件。源代码显示每个自定义文件的div，即使它没有任何显示也没有。所以用户向下滚动了一点以达到页脚。你可以看到它HERE。有没有办法在添加未来图像时自动增加div的高度。请帮助，谢谢!!

Answer 1

你应该像$ image1一样检查变量返回第一个imaged的值检查if $image1==NULL or $image1=='' then do nothing else display image

你可以在这里查看 How to hide "image" custom field if empty PM http://www.advancedcustomfields.com/resources/functions/get_field/ 这些可能是你正确的答案。

我认为这会对你有帮助。

Answer 2

我建议你改变PHP，这样如果没有图像，它根本不会打印HTML。

if($image1 != null && $image2 != null && $image3 != null){
    echo '<div class="images">';
    echo '<div class="img1"><a href="'.get_field( "image_link_1" ).'"><img src=".'$image1['url'].'" /></a></div>';
    echo '<div class="img1"><a href="'.get_field( "image_link_2" ).'"><img src=".'$image2['url'].'" /></a></div>';
    echo '<div class="img1"><a href="'.get_field( "image_link_3" ).'"><img src=".'$image3['url'].'" /></a></div>';
    ...
}

你甚至可以通过几个技巧来改进代码：（我没有测试过，所以可能需要进行一些调整）。

<?php
    //Settings to set the amount of categories / images per category:
    //ACF might have a way of providing these numbers, I am not sure.
    $CATEGORIES = 2;
    $IMAGESPERCATEGORY = 9; // Must be divisible by three.

    for($i=1; i<$CATEGORIES+1; $i++){
?>

<?php  
        $images = array();
        $links = array();
        $headings = array();
        for($j =0; $j < $IMAGESPERCATEGORY; $j++){
            $img = get_field('image_'.$i.'_'.$j); //The file format is 'image_cat_no' so category 1 image 4 would be 'image_1_4';
            $link = get_field('image_link_'.$i.'_'.$j);
            $heading = get_field('image_heading_'.$i.'_'.$j);
            if($img != null && $link != null && $heading != null){
                //Data is there, push them to arrays:
                array_push($images, $img);
                array_push($links, $link);
                array_push($headings, $heading);
            }else{
                //TODO: Some data is not there, provide default values or some fault handling.
            }
        }
?>

        <div class="category-images"><?php echo get_field( "category_heading_".($i) ); ?></div>
<?php
        for($y = 0; $y < $IMAGESPERCATEGORY / 3; $y++){
?>
            <div class="images">
<?php
            //Print <img> tags
            for($x=0;$x<3;$x++){
                echo '<div class="img1"><a href="'.$links[$x].'"><img src=".'$images[$x]['url'].'" /></a></div>';
            }
?>
        </div>

        <div class="images_txt">
<?php
        //Print text
        for($x=0;$x<3;$x++){
            echo '<div class="img_txt'.($x!=0 ? ($x+1).'' : '').'"><b>'.$headings[$x].'</b></div>';
        }
?>
        </div>
<?php
    }
}
?>

Answer 3

这个问题不是关于jQuery，WordPress或高级自定义字段。

这只是CSS。向隐藏元素添加一个名为“hidden”的类，并使用相应的CSS代码隐藏它们：.hidden { display:none; }

从页面中删除不需要的空间

3 个答案: