web-dev-qa-db-ja.com

各スティッキーポストに異なるクラス名を追加しますか？

私は私のブログの注目のコンテンツセクションを設定しようとしています。これは2つの付箋を含みます。

2つのスティッキポストのみを表示するカスタムループがあり、そのループ内にスティッキポストの構造を持つcontent-featured.phpテンプレートが表示されます。

メインの投稿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 );

お分かりのように、私は自分がしていることについての手がかりがありません。どんな助けでも大いに感謝されるでしょう。

post-class
3
Destiny2Gamer

これは、スティッキクラスを追加するソリューションです。1つは投稿ID用、もう1つはスティッキ投稿カウンタ用です。

/**
 * 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;
}

編集： これは、静的変数を使用しない代替バージョンです。

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;
}
3
Dave Romsey

別の方法として、あなたは単純なCSSでこれを行うことができます。 postクラスはデフォルトでスティッキクラスを含みます。例えば、ループがdiv "main"の中にある、例えば27のテーマでは、

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

#main .sticky:nth-of-type(2) {
    color: blue;
}

トリックを行います。

1
ronald