1

達成しようとしていることをどのように表現すればよいか完全にはわからないため、タイトルは誤解を招く可能性があります。

Meet the Team ページで WordPress が運営する Web サイトのユーザーを一覧表示したいのですが、これがその仕事に最適なコードであることがわかりました。

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

私には 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 に答える