Question

标题可能会产生误导，因为我不完全确定如何表达我想要完成的事情。

我想在Meet the Team页面上列出WordPress运行网站的用户，我发现这是该作业的最佳代码：

function contributors() {
global $wpdb;

$authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");

foreach($authors as $author) {
echo "<li>";
echo "<a href=\"".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "\">";
echo get_avatar($author->ID);
echo "</a>";
echo '<div>';
echo "<a href=\"".get_bloginfo('url')."/?author=";
echo $author->ID;
echo "\">";
the_author_meta('display_name', $author->ID);
echo "</a>";
echo "</div>";
echo "</li>";
}
}

这很好用，并根据需要列出用户。但是，我的客户希望用户布局如下：

[姓名] [图片]
[说明]

[图片] [姓名]
[说明]

[姓名] [图片]
[说明]

等等。因此，奇数会在右侧显示图像，偶数会在左侧显示图像。我们的想法是稍微分解设计，使其看起来不那么僵硬。（希望有意义）

关于如何使用开头给出的代码实现这一点的任何想法？

非常感谢：）

（注意 - 我知道给出的vanilla代码没有任何图像调用或类似的东西，我只知道那是PHP函数的起点，它的术语。我将添加图像调用，之后的描述和名称）

Answer 1

对我来说，你有两种选择。

选项＃1

使用变量将奇数/偶数类添加到图像中，然后使用css进行目标并将图像浮动到适当的一侧

这是一个例子。

<?php
function contributors() {
    global $wpdb;

    $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users ORDER BY display_name");

    $count = 1;
    $class = "odd";
    foreach( $authors as $author ) : ?>
        <li class="<?php echo $class; ?>">
            <a href="<?php echo get_author_posts_url( $author->ID ); ?>">
                <?php echo get_avatar( $author->ID ); ?>
            </a>
            <div>
                <a href="<?php echo get_author_posts_url( $author->ID ); ?>">
                    <?php echo get_the_author_meta( 'display_name', $author->ID ); ?>
                </a>
            </div>
        </li>
        <?php 
        $count = $count * -1;

        if( $count == 1) {
            $class = "even";
        } else {
            $class = "odd";
        }

    endforeach;
}
?>

和css

.odd img {
    float: right;
}

.even img {
   float: left;
}

选项＃2

使用nth-child（）css选择器控制图像浮动到哪一侧。

示例：

ul li:nth-child(odd) img {
    float: right;
}

ul li:nth-child(even) img {
   float: left;
}

您也可以查看内置的作者功能 https://codex.wordpress.org/Template_Tags#Author_tags

WordPress - 列出奇数/偶数系统的用户

1 个答案: