Question

好的，我创建的主页上有4个最新帖子，并且每个帖子都必须具有不同的类才能使用CSS设置样式。

我正在使用此代码显示4条最新帖子：

<?php 
// the query
$the_query = new WP_Query( array(
 'category_name' => 'artykuly',
  'posts_per_page' => 4,
    'order'   => 'ASC',
 )); 
?>

<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <!---posty home--->
    <div class="home-posty" style="background: #ccc; margin: 20px;">
        <a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title(); ?></a>
        <div class="home-post-opis">
            <?php the_excerpt(); ?>
        </div>
        <div class="home-post-tags">
            <?php the_tags(); ?>
        </div>
        <div class="home-post-date">    
            <?php echo get_the_date(); ?>
        </div>    
    </div>

问题是如何为后四种设置不同的类别，例如：“第一名”，“第二名”，“第三名”，“最后一位”。它不能是post-id或title，因为每个新帖子将具有不同的ID，并且布局必须始终相同。如何强制向他们添加我自己的课程？我当时在考虑CSS nth-child，但是自定义类会更好，恕我直言。

我还需要包装（使用DIV）其中的前两个。有可能吗？

Answer 1

请使用add_filter更改班级列表。和add_action用于包装

add_filter('prefix_home_posts_classes', 'prefix_home_posts_classes', 10, 2);

function prefix_home_posts_classes( $classes, $index ) {
    $post_order = $index % 4;

    switch ( $post_order ) {
        case 0:
            $classes[] = 'last-one';
            break;
        case 3:
            $classes[] = 'third-post';
            break;
        case 2:
            $classes[] = 'second-one';
            break;
        case 1:
            $classes[] = 'first-post';
            break;
    }

    return $classes;
}

add_action('prefix_home_before_post', 'prefix_home_before_post');
add_action('prefix_home_after_post', 'prefix_home_after_post');

function prefix_home_before_post( $index ) {
    if ($index === 1) {
        echo '<div class="wrapper">';
    }
}

function prefix_home_after_post( $index ) {
    if ($index === 2) {
        echo '</div>';
    }
}

还有您的HTML模板，请更改为此模板

$index = 0; ?>
<?php if ($the_query->have_posts()) { ?>
    <?php while ($the_query->have_posts()) { ?>
        <?php $the_query->the_post(); ?>

        <?php $index++; ?>
        <?php $post_classes = apply_filters('prefix_home_posts_classes', ['home-posty'], $index); ?>
        <?php $post_classes_string = implode(' ', $post_classes); ?>

        <?php do_action( 'prefix_home_before_post', $index ); ?>
            <div class="<?php echo esc_attr($post_classes_string); ?>" style="background: #ccc; margin: 20px;">
                <a href="<?php echo esc_url(get_permalink()); ?>"><?php the_title(); ?></a>
                <div class="home-post-opis">
                    <?php the_excerpt(); ?>
                </div>
                <div class="home-post-tags">
                    <?php the_tags(); ?>
                </div>
                <div class="home-post-date">
                    <?php echo get_the_date(); ?>
                </div>
            </div>
        <?php do_action( 'prefix_home_after_post', $index ); ?>
    <?php } ?>
<?php } ?>

Wordpress-为前4个帖子设置自定义CSS类，并包装2个前帖子

1 个答案: