仅使用CSS

Question

我正在使用高级自定义字段，如果两个字段都处于活动状态，我想显示一行。

我目前有一个检查spotify链接和一个检查iTunes链接。我想做的是显示一个| （如果正在使用两个字段，则除去文本），否则为|仍然隐藏着。

这是我的代码：

<?php if( get_field('spotify') ): ?>
    <a target="_blank" href="<?php the_field('spotify');?>">Spotify</a>
<?php endif; ?>

<?php if( get_field('spotify','itunes') ): ?>
    |
<?php endif; ?>

<?php if( get_field('itunes') ): ?>
    <a target="_blank" href="<?php the_field('itunes');?>">iTunes</a>
<?php endif; ?>

Answer 1

你为什么不试试：

<?php if(get_field('spotify') && get_field('itunes')): ?>

您还可以避免重复使用get_field函数：

<?php 
$spotify = false;
if( get_field('spotify') ) : 
    $spotify = true; 
?>
    <a target="_blank" href="<?php the_field('spotify');?>">Spotify</a>
<?php endif; ?>

<?php if( get_field('itunes') ): ?>
    <?php if ($spotify) : ?>|<?php endif; ?>
    <a target="_blank" href="<?php the_field('itunes');?>">iTunes</a>
<?php endif; ?>

修改：您可以使用此CSS获得结果：

#mylinksdiv a + a {
    border-left: 1px solid black;
    padding-left: 0.3em;
}

demo

Answer 2

您还可以充分利用get_fields( $postID )功能。像这样：

$fields = get_fields( $post->ID );

if( isset( $fields['spotify'], $fields['itunes'] ) ){
  // do something
} else {
  // do something else
}

Answer 3

仅使用CSS
可实现

您实际上只需使用CSS即可实现此目的。你可以做的是在CSS中使用+选择器。如果有两个，例如 - 让我们说<span>，那么您可以使用+选择器选择第二个并添加伪:before与content: " | ";

一起使用

关于这一点最好的事情是它在客户端并且不需要您的服务器执行多个get_field()

只有两个你需要拉动，而且对于ACF get_fields()来说太多了。

另一件好事是，如果您将来需要添加更多内容，则不必像现在使用当前解决方案那样进行另一项检查。

请参阅下面的示例：

＆＃13;

span + span:before {
  content: ' | ';
}

＆＃13;

<span>Spotify</span><span>iTunes</span>

＆＃13;

Answer 4

我创建了以下代码段，您可以在其中添加数组$fields中的链接，它会以与您相同的方式显示所有内容，但没有所有奇怪的条件：

<?php
    $links = '';
    $fields = array(
        'spotify' => 'Spotify',
        'itunes'  => 'iTunes',
    );
    foreach($fields as $field => $displayName) {
        if(get_field($field)) {
            $links .= (strlen($links) ? ' | ' : '') . '<a target="_blank" href="' . the_field($field) . '">' . $displayName . '</a>';
        }
    }
    echo $links;
?>

此代码的优点是它仍然适用于超过2个字段......

如果get_field使用多个字段

4 个答案:

仅使用CSS