Question

我有一个WordPress页脚文件，根据主题选项面板中的输入显示3个社交网络图标<li>。

如果有一个或多个链接/图像，但是如果没有链接/图像，那么一切正常，在渲染的源代码中，我留下打开/关闭<div>和<li>，其中没有数据。就访问者而言，他们不会更聪明，但如果没有数据，有没有办法隐藏这些标签。

这是我正在使用的代码;

<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>

隐藏空div

1 个答案: