web-dev-qa-db-ja.com

各投稿の代替post_class

列にハイライトを交互に表示するには、投稿に交互の（偶数、奇数...）クラスを用意する必要があります。最良のことはpost_class（）のすべてのインスタンスにあるようにpost_class（）にこれを添付することです。以下は、この効果を達成するためにこの時点で持っているコードです。

<?php 

// setting other variables for alternating categories
$style_classes = array('even', 'odd');
$style_counter = 0;
?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="<?php $k = $style_counter%2; echo $style_classes[$k]; $style_counter++; ?>">

<?php the_cotent(); ?>

</div>

<?php endwhile; ?>

<?php endif; ?>
post-class
2
curtismchale

functions.phpに次のコードを追加する必要があります。

add_filter ( 'post_class' , 'my_post_class' );
global $current_class;
$current_class = 'odd';

function my_post_class ( $classes ) { 
   global $current_class;
   $classes[] = $current_class;

   $current_class = ($current_class == 'odd') ? 'even' : 'odd';

   return $classes;
}

これにより、テーマのpost_class()を使用するだけで、ページ上のすべての奇数の投稿がクラス「奇数」になり、すべての偶数の投稿がクラス「偶数」になります。

6
Adhip Gupta

特定のクラスを異なるコンテンツに追加したい場合は、別の解決策があります。例えば、ループするだけです：

add_filter( 'post_class', 'my_post_class' );

function my_post_class( $classes ) {

  if ( ! is_single() ) {
    global $wp_query;

    // Set "odd" or "even" class if is not single
    $classes[] = $wp_query->current_post % 2 == 0 ? 'even' : 'odd' ;
  }

  return $classes;
}

単一のコンテンツを表示するときに「偶数」または「奇数」クラスを追加したくないためです。

1
Marco Godínez

これは動作し、追加のクラスを post_class() に渡します。

<?php $c = 0; ?>
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <div <?php post_class((++$c % 2 === 0) ? 'odd' : 'even'); ?>>
            <?php the_content(); ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>

編集：これは、ページ上のカウントを追跡するバージョンのpost_class()を作成する方法です。今、それは新しい名前oddeven_post_class()を使います、しかしそれはあなたが望むように働きます。これをfunctions.phpにドロップするだけです。

/* Drop this block into functions.php */
class MyCounter {
    var $c = 0;
    function increment(){
        ++$this->c;
        return;
    }
    function oddOrEven(){
        $out = ($this->c % 2 === 0) ? 'odd' : 'even';
        $this->increment();
        return $out;
    }
}
$my_instance = new MyCounter();
function post_class_oddeven() {
    global $my_instance;
    ob_start();
    post_class($my_instance->oddOrEven());
    $str = ob_get_contents();
    ob_end_clean();
    echo $str;
}
/* end block */

それで、それを呼び出すために、あなたがpost_class_oddeven()を呼び出すであろうところはどこでもあなたのテーマの中でpost_class()を使いなさい

1
artlung

あなたはまっすぐなCSSでこれをすることができます。例えば、ループがdiv "main"の中にある17のテーマでは、

#main .post {
    color: red;
}

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

トリックを行います。

1
ronald