我正在嘗試制作 if else 腳本，但無法正確處理。我想要一個帶有左側(cè)縮略圖和右側(cè)文本的帖子，當(dāng)我在該類別中發(fā)布另一個帖子時，我想要右側(cè)縮略圖和左側(cè)文本。到目前為止，這是我的代碼：<div class="row"> <?php if (query_posts('category_name=news')) if (have_posts()) : while (have_posts()) : the_post(); ?> <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <?php if ($wp_query->current_post % 2) { echo "<div class='image-test'>"; the_post_thumbnail('thumbnail'); echo "</div>"; echo "<div class='tekst-rechts'>"; the_title('<h2 class="entry-title"><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h2>'); the_content(); echo "</div>"; } ?> </div> <?php endwhile; ?> <?php else : ?> <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <?php //echo "Current item is ". (($wp_query->current_post % 2) ? "oneven" : "even"); //the_title( '<h1 class="entry-title">', '</h1>' ); the_title('<h2 class="entry-title"><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h2>'); the_post_thumbnail(''); the_content(); ?> </div> <?php endif; ?> <?php wp_reset_query(); // reset the query ?> </div>
1 回答
MM們
TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個贊
你可以通過 CSS Flex、Order和:nth-child()選擇器來做到這一點(diǎn)。
HTML（包含 php）：
<div class="row">
<?php if (query_posts('category_name=news'))
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class('post-contents'); ?> id="post-<?php the_ID(); ?>">
<?php
echo "<div class='image-test'>";
the_post_thumbnail('thumbnail');
echo "</div>";
echo "<div class='tekst-rechts'>";
the_title('<h2 class="entry-title"><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h2>');
the_content();
echo "</div>";
?>
</div>
<?php endwhile; ?>
<?php else : ?>
<p>No posts!</p>
<?php endif; ?>
<?php wp_reset_query(); // reset the query ?>
</div>
CSS：
.post-contents {
display:flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.post-contents:nth-child(odd) .image-test {
order: 2;
}
.post-contens:nth-child(odd) .entry-title {
order: 1;
}
不要忘記在 post_class() 函數(shù)中添加 post-contents 類。
- 1 回答
- 0 關(guān)注
- 104 瀏覽
添加回答
舉報(bào)
0/150
提交
取消