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

【问题标题】：Wordpress - set custom CSS classes for first 4 posts, and wrap 2 first postsWordpress - 为前 4 个帖子设置自定义 CSS 类，并包装 2 个第一个帖子
【发布时间】：2019-01-09 10:32:02
【问题描述】：

好的，我创建的主页有 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>

问题是如何为迟到的 4 个帖子设置不同的类别，例如：“first-post”、“second-one”、“third-post”、“last-one”。它不能是帖子 ID 或标题，因为每个新帖子都会有不同的 ID，并且布局必须始终相同。如何强制向他们添加我自己的课程？我在考虑 CSS nth-child，但恕我直言，自定义类会更好。

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

【问题讨论】：

你可以像$i++每次迭代然后检查并执行<p class="your-class-<?php echo $i; ?>"><?php echo get_the_excerpt(); ?></p>
如果你想避免弄乱$i变量，你也可以使用$the_query->current_post。

标签： php css wordpress

【解决方案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 } ?>

【讨论】：