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

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 这样的变量 它返回第一个成像的值 检查if $image1==NULL or $image1=='' then do nothing else display image

你可以在这里查看 How to hide "image" custom field if empty下午 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; }