web-dev-qa-db-ja.com

3ポストごとにマークを付ける方法

私は自分のバンドのためにWordPressサイトに取り組んでいます、そして私は私達のブログページのすべての3番目の投稿にそれに適用される特別なクラスがあるようにしたいです。どんな助けも非常に非常に高く評価されています、ありがとう！ロックンロール。

postscountpost-class
17
Zoran M

私のアプローチ追加機能なし、フィルタなし。 :)

<?php $GLOBALS['wpdb']->current_post = 0; ?>
<div <?php post_class( 0 === ++$GLOBALS['wpdb']->current_post % 3 ? 'third' : '' ); ?>>

代替案

<div <?php post_class( 0 === ++$GLOBALS['wpdb']->wpse_post_counter % 3 ? 'third' : '' ); ?>>
14
fuxia

@helgathevikingsへの回答として回答

グローバル名前空間を汚染せずにpost_class（）fnを使用する

  1. クラス内でstatic変数を使用すると、グローバル変数を持つのと同じ動作が可能になります。それらを変更しない限り、それらはそのまま残り、変更されません。
  2. さらに良いことに（コメントで@Miloが示唆したように）、DBクラスから現在の投稿を取ります。
function wpse44845_add_special_post_class( $classes )
{
    // Thanks to @Milo and @TomAuger for the heads-up in the comments
    0 === $GLOBALS['wpdb']->current_post %3 AND $classes[] = 'YOUR CLASS';

    return $classes;
}
add_filter( 'post_class','wpse44845_add_special_post_class' );

更新

グローバルなcurrent_postオブジェクトの$wp_queryプロパティを利用できます。 anonymous関数をuseキーワードとともに使用して、グローバルな$wp_queryを参照渡しする（PHP 5.3+）：

add_filter( 'post_class', function( $classes ) use ( &$wp_query )
{
    0 === $wp_query->current_post %3 AND $classes[] = 'YOUR CLASS';

    return $classes;
} );

さらに、 in_the_loop() 条件付きチェックでそれをmain loopに制限することができます。

8
kaiser

あなたのテーマがpost_class（）を使って投稿クラスを生成するのであれば試すことができます。私はそれがどのようにページ付けb/cを処理するかを私は100％確信していません

add_filter('post_class','wpa_44845');

global $current_count;

$current_count = 1;

 function wpa_44845( $classes ){

    global $current_count;

    if ($current_count %3 == 0 ) $classes[] = 'special-class';

    $current_count++;

    return $classes;

 }
3
helgatheviking
$i = 0;
if ( have_posts ) :
while( have_posts ) :
    the_post();

    $class = 'class="BASIC-CLASS';
    if ( 0 === ( $i % 3 ) )
        $class .= 'YOUR-SPECIAL-CLASS';
    $class .= '"';

    echo "<div {$class}>";
        // do stuff
    echo '</div>';

    $i++;
endwhile;
endif;
2
kaiser

CSSとJavaScriptを使ってこれを行う方法もあります。

CSS3では、3番目ごとの投稿をn番目の子セレクタでターゲットにします。

article.post:nth-child(3n+0)
{
    background-color: #777;
}

あるいはjQueryを使えば、同じテクニックを使ってCSSクラスを追加できます。

jQuery(function($) {
    $( "article.post:nth-child(3n+0)" ).addClass("custom-class");
});
1
rohmann