1

标题可能具有误导性，因为我不完全确定如何表达我想要完成的内容。

我想在 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>";
}
}

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

[名称] [图片]
[描述]

[图片] [名称]
[描述]

[名称] [图片]
[描述]

等等。因此，奇数的图像在右侧，偶数的图像在左侧。这个想法是稍微打破设计，让它看起来不那么僵硬。（希望这是有道理的）

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

非常感谢 ：）

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

4

1 回答 1

2

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

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

于 2013-02-28T17:52:00.847 回答