为每个粘性帖子添加不同的类名？

时间：2017-06-17 作者：Destiny2Gamer

我正在尝试在我的博客中设置一个特色内容部分。这将包含两个粘性贴子。

我有一个自定义循环，它只会显示两个粘性帖子，在循环中我会得到一个content-featured.php 模板具有粘性帖子的结构。

在我使用的主post div中post_class(). 我知道我可以传递如下值post_class(\'featured\') 但我希望每个贴子都有一个不同的类名，即。featured-0, featured-1.

我已尝试在中创建函数functions.php, 但由于我对PHP知之甚少，我正在努力让它正常工作。以下是我所拥有的：

//add classes to sticky posts
function gwad_sticky_classes( $classes, $class ) {
    $sticky = get_option( \'sticky_posts\' );
    if ( $sticky ) {
        $query = new WP_Query( $sticky );

        $sticky[0] =\'featured-0\';
        $sticky[1] = \'featured-1\';

    }

    return $classes;
}
add_filter( \'post_class\', \'gwad_sticky_classes\', 10, 2 );
正如你所看到的，我不知道我在做什么，任何帮助都将不胜感激。

2 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

这里有一个解决方案，它添加了额外的粘性类，一个用于post ID，另一个用于粘性post counter。

/**
 * Adds .featured-{$post_id} and .featured-{$sticky_counter}
 * class names to sticky posts.
 *
 * @param array $classes An array of post classes.
 * @param array $class   An array of additional classes added to the post.
 * @param int   $post_id The post ID.
 *
 * @return array
 */
add_filter( \'post_class\', \'gwad_sticky_classes\', 10, 3 ); 
function gwad_sticky_classes( $classes, $class, $post_id ) {

    // Bail if this is not a sticky post.
    if ( ! is_sticky() ) {
        return $classes;
    }

    // Counter for sticky posts.
    static $gwad_sticky_counter = 0;

    $classes[] = \'featured-\' . $post_id;
    $classes[] = \'featured-\' . ++$gwad_sticky_counter; 

    return $classes;
}
Edit: 下面是一个避免使用静态变量的替代版本：

add_filter( \'post_class\', \'gwad_sticky_classes\', 10, 3 ); 
function gwad_sticky_classes( $classes, $class, $post_id ) {

    // Bail if this is not a sticky post.
    if ( ! is_sticky() ) {
        return $classes;
    }

    global $wp_query;
    $classes[] = \'featured-\' . $post_id;
    $classes[] = \'featured-\' . ( string ) ( $wp_query->current_post + 1 );

    return $classes;
}

SO网友:ronald

另一种选择是，您可以使用直接css来实现这一点。默认情况下，post类将包含sticky类。例如，在2017主题中，循环位于div“main”中：

#main .sticky:nth-of-type(1) {
   color: red;
}

#main .sticky:nth-of-type(2) {
    color: blue;
}
会成功的。

结束
标签： post-class   小码农  

相关推荐