我在 wordpress 中有一個自定義帖子型別，可以將新代理添加到一行中。如何創建一個條件陳述句來檢查行中的帖子數量，如果大于 4 創建一個新 div 并將新帖子附加到新行？我嘗試使用 JS 完成此任務，但失敗得很慘——這是我的第一個 php 和 wordpress 專案。
此外，我想而不是創建一個新帖子，我還會詢問如何內爆 $phone 變數以在前 3 位和 6 位數字之間添加連字符。先感謝您！
<?php get_header(); ?>
<div class="agent-wrap">
<?php
$args = array(
'post_type' => 'agents',
'post_status' => 'publish',
'posts_per_page' => '12'
);
$agents_loop = new WP_Query( $args );
if ( $agents_loop->have_posts() ) : ?>
<div class="agent-row">
<?php
while ( $agents_loop->have_posts() ) : $agents_loop->the_post();
// variables
$name = get_field( 'agent_name' );
$position = get_field( 'agent_position' );
$phone = get_field( 'agent_phone' );
$email = get_field( 'agent_email' );
$image = get_field( 'agent_image' );
$link = get_the_permalink();
?>
<a href="<?php echo $link; ?>">
<div class="agent">
<div class="agent-bg"></div>
<div class="agent-content">
<h3><?php echo $name; ?></h3>
<h5><?php echo $position; ?></h5>
<hr class="divider" />
<a href="tel:<?php echo $phone; ?>"><?php echo $phone; ?> <i class="fa fa-phone"></i></a>
<a href="mailto:<?php echo $email; ?>"><?php echo $email; ?> <i class="fa fa-envelope"></i></a>
</div>
<img src="<?php echo $image; ?>">
</div>
</a>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
<?php get_footer(); ?>
所需的 HTML 結構
<div class="agent-row">
<!-- only 4 agents post types per row -->
<div class="agent"></div>
<div class="agent"></div>
<div class="agent"></div>
<div class="agent"></div>
</div>
<!-- New Row After first row reaches 4 agent posts -->
<div class="agent-row">
</div>
uj5u.com熱心網友回復：
wp_query有一個名為的屬性"current_post"，它是當前顯示的帖子的索引。您可以在"while"回圈中使用它來構建您的布局。
"current_post"從零開始，這意味著如果您需要前 4 個帖子，它將是索引為 0、索引 1、索引 2 和索引 3 的帖子。因此您可以if ($agents_loop->current_post <= 3) {}用于第一個布局和if ($agents_loop->current_post > 3) {}第二個布局：
if ($agents_loop->have_posts()) : ?>
<div class='agent-row'>
<?php
while ($agents_loop->have_posts()) : $agents_loop->the_post();
if ($agents_loop->current_post <= 3) {
$name = get_field('agent_name');
$position = get_field('agent_position');
$phone = get_field('agent_phone');
$email = get_field('agent_email');
$image = get_field('agent_image');
$link = get_the_permalink();
?>
<a href='<?php echo $link; ?>'>
<div class='agent'>
<div class='agent-bg'></div>
<div class='agent-content'>
<h3><?php echo $name; ?></h3>
<h5><?php echo $position; ?></h5>
<hr class='divider' />
<a href='tel:<?php echo $phone; ?>'><?php echo $phone; ?> <i class='fa fa-phone'></i></a>
<a href='mailto:<?php echo $email; ?>'><?php echo $email; ?> <i class='fa fa-envelope'></i></a>
</div>
<img src='<?php echo $image; ?>'>
</div>
</a>
<?php
}
endwhile;
?>
</div>
<!-- New Row After first row reaches 4 agent posts -->
<div class='agent-row'>
<?php
while ($agents_loop->have_posts()) : $agents_loop->the_post();
if ($agents_loop->current_post > 3) {
# Put your desired layout here
}
endwhile;
?>
</div>
<?php
wp_reset_postdata();
endif;
為避免布局重復，您可以在回圈中創建單個模板和include/或它。require
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/419698.html
標籤：