Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressテーマで投稿に奇数/偶数クラスを追加する方法

WordPressブログの投稿に視覚的な面白さを加えたいですか?奇数クラスと偶数クラスを追加することで、投稿ごとに異なるスタイルになり、ユニークで魅力的なデザインを実現できます。

このテクニックの適用方法について、読者からよく質問を受けます。多くのWordPressテーマには奇数・偶数投稿クラスのビルトインオプションはありませんが、自分で追加するのは比較的簡単なプロセスです。

この投稿では、WordPressテーマで投稿に奇数/偶数クラスを追加する方法を紹介します。

Adding Odd/Even class to your posts in WordPress themes

なぜWordPressテーマで投稿に奇数/偶数クラスを追加するのか?

多くのWordPressテーマでは、WordPressのコメントに奇数または偶数のクラスを使用しています。これは、ユーザーが一つのコメントがどこで終わり、次のコメントがどこで始まるかを視覚化するのに役立ちます。

同様に、WordPressの投稿にもこのテクニックを使うことができる。見た目が美しく、ユーザーがコンテンツの多いページを素早くスキャンするのに役立ちます。特に雑誌やニュースサイトのトップページに役立ちます。

それでは、WordPressテーマで投稿に奇数クラスと偶数クラスを追加する方法を見てみよう。

WordPressテーマで投稿に奇数/偶数クラスを追加する

WordPressは初期設定のCSSクラスを生成し、サイト上のさまざまな項目にその場で追加します。これらのCSSクラスは、プラグインやテーマの開発者がさまざまな項目に独自のスタイルを追加するのに役立ちます。

WordPressには、テーマ開発者が投稿項目にクラスを追加するために使用するpost_classという関数も用意されています。WordPressの各投稿を異なるスタイルにする方法については、ガイドを参照してください。

post_classは フィルターでもあるので、独自の関数をフックすることができる。つまり、独自の関数をフックすることができるのです。

このコードをテーマのfunctions.phpファイル、サイト固有のプラグイン、またはコード・スニペット・プラグインに追加するだけです。

1
2
3
4
5
6
7
8
9
function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

WPCodeプラグインを使用してこのコードを追加することをお勧めします。WordPressでカスタマイザーコードを安全かつ簡単に追加できる最高のコードスニペットプラグインです。

WPCode

まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。手順については、WordPressプラグインのインストール方法をご覧ください。

有効化したら、WordPressダッシュボードからCode Snippets ” + Add Snippetページにアクセスします。

次に、「カスタムコードの追加(新規スニペット)」設定の下にある「+カスタム・スニペットの追加」ボタンをクリックします。

Adding Custom Code in WPCode

次に、画面に表示されるオプションリストからコードタイプを選択する必要があります。

このチュートリアルでは、コードタイプとして「PHPスニペット」を選択します。

Select PHP Snippet as the code type

カスタムスニペットの作成ページに移動します。

ここから、コード・スニペットのタイトルを追加する。このタイトルは、何のためのコードなのかを覚えておくのに役立つものであれば何でもよい。

その後、上記のコードを「コード・プレビュー」ボックスに貼り付ける。

Paste the code to add odd/even class to your posts

それが終わったら、トグルを「Inactive」から「Active」に切り替え、「Save Snippet」ボタンをクリックするだけです。

Activate and save your custom code snippet

この関数は、単に最初の投稿に奇数を追加し、次に偶数を追加する、というものである。

サイトのソースコードで奇数クラスと偶数クラスを見つけることができます。投稿タイトルにマウスを持っていき、右クリックでInspectまたはInspect Elementを選択するだけです。

Odd and Even classes in source code

これで投稿に偶数クラスと奇数クラスが追加されました。次のステップは、CSSを使ってスタイルを設定することです。カスタムCSSは、子テーマのスタイルシート、テーマのカスタマイザー、またはWPCodeプラグインを使って追加することができます。

ここに、出発点として使用できるCSSのサンプルがあります:

1
2
3
4
5
6
.even {
background:#f0f8ff
}
.odd {
 background:#f4f4fb;
}

私たちのテストサイトではこのように見えた:

Posts using alternate background colors with even/odd css classes in WordPress

CSSの使い方がわからない場合は、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。

WordPressテーマで投稿に奇数/偶数クラスを追加する方法について、この投稿がお役に立てれば幸いです。WordPressのコメントレイアウトをスタイリッシュにする方法や、WordPressページビルダーのエキスパートが選ぶベストページも参考にしてください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

16件のコメントLeave a Reply

  1. Sarmad Gardezi

    I want to use it with CPT then how i can use it ?

    • WPBeginner Support

      It should automatically affect custom post types :)

      Admin

  2. Vera

    Hello,
    I was trying to make this work on my test site, where I work with Elementor and Astra. For some reason, once I add the code – everything colors with the “odd” color, and I don’t understand why.
    Can you help me sort it out, please?
    Vera

    • WPBeginner Support

      For that question, you would want to check with Elementor to ensure their page builder is not overriding the function and they should be able to assist :)

      Admin

  3. Oliur

    My Blog Name WayTrick. It a Blogger Blog. Now I want to my blog Tansfer to wordpress. How do it?

  4. kaluan

    This seems not working in Genesis framework? Any additional code needed to add?

  5. onkar

    how to add odd even class in posts for particular page

  6. Bucur

    Ok good function, but css style?

    . post {
    / / Rest of the css
    }

    .odd { } ???

  7. Simon

    Thanks for this. Just what I needed.

  8. Samuel

    How could I take this a step further and target a specific post category?

    I have a custom post type – testimonial, and I only want odd/even styling in that section.

    Thanks!

  9. Eric

    This is by far the easiest method of creating odd and even posts for wordpress!! Thanks so much for sharing!

  10. Christine

    As, sadly, css3 selectors are not well supported by all browsers…

    I just tried your code for a new twenty eleven child theme i’m customizing, it works so fine,

    Thanks a Lot for sharing this ! !

    • wpbeginner

       @Daniele Zamboni These are CSS classes that you can add for styling purposes.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.