php - Hide empty divs

Question

I have a WordPress footer file that display 3 social network icons as <li> based on inputs in the themes options panel.

All works fine if there is 1 or more link/image but if there are none, in the rendered source code I am left with open/closing <div> and <li> with no data in them. As far as visitors are concerned they would be none the wiser, but is there a way to hide these tags if there is no data.

This is the code I am using;

<div class="eight columns">
 <div class="social">
  <ul>
  <?php
  foreach (array("twitter","facebook","linkedin") as $option)
      ($tmp=of_get_option('fab_social_'.$option.'_url')) && (print('<li><a href="'.$tmp.'"><img src="'.of_get_option('fab_social_'.$option.'_icon').'" alt="Follow us on '.ucfirst($option).'"></a></li>'));
  ?>
  </ul>
 </div>
</div>

Answer 1

如果是我，我会先设置选项，然后评估以查看是否显示。

<?php
// Get all stored options
$socials = array();
foreach ( array( 'twitter', 'facebook', 'linkedin' ) as $option ){
    $setting = of_get_option('fab_social_'.$option.'_url');
    if ( $setting != '' ) $socials[ $option ] = $setting;
}


?>
<div class="eight columns">
<?php if ( count( $socials ) > 0 ) { /* check are any social options set, don't display unless >0 */ ?>
<div class="social">
<ul>
<?php
// Loop through options
foreach ( $socials as $option=>$setting ){
    print('<li><a href="'.$setting.'"><img src="'.of_get_option('fab_social_'.$option.'_icon').'" alt="Follow us on '.ucfirst($option).'"></a></li>'));
}
?>
</ul>
</div>
<?php } /* Close initial count() comparison */ ?>
</div>