WordPressのブログ投稿に視覚的な興味を加えたいですか？奇数と偶数のクラスを追加すると、レイアウトがより魅力的になり、微妙なデザイン変更で長い投稿リストを区切り、目を引くことができます。
読者から、このテクニックをどのように適用するかについて頻繁に質問を受けます。多くのWordPressテーマには、奇数および偶数の投稿クラスの組み込みオプションがありませんが、無料のWPCodeプラグインを使用して、自分で簡単に追加できる方法を見つけました。
この記事では、WordPressテーマの投稿に奇数/偶数クラスを追加する方法を説明します。
WordPressテーマの投稿に奇数/偶数クラスを追加する理由
多くのWordPressテーマでは、WordPressのコメントに奇数または偶数のクラスを使用しています。これにより、ユーザーはコメントの終わりと次のコメントの始まりを視覚的に把握しやすくなります。
同様に、このテクニックをWordPressの投稿にも使用できます。見た目が美しく、ユーザーが大量のコンテンツを含むページをすばやくスキャンするのに役立ちます。特に雑誌やニュースサイトのホームページに役立ちます。
とはいえ、WordPress テーマで投稿に奇数・偶数クラスを追加する方法を見ていきましょう。
WordPressテーマの投稿に奇数/偶数クラスを追加する
WordPressはデフォルトのCSSクラスを生成し、ウェブサイト上のさまざまなアイテムに動的に追加します。これらのCSSクラスは、プラグインやテーマの開発者がさまざまなアイテムに独自のスタイルを追加するのに役立ちます。
WordPressにはpost_classという関数もあり、テーマ開発者は投稿アイテムにクラスを追加するために使用します。WordPressの各投稿を個別にスタイル設定する方法については、ガイドをご覧ください。
post_classはフィルターでもあり、独自の関数をフックできます。これはまさにここで行うことです。
このコードをテーマのfunctions.phpファイル、サイト固有のプラグイン、またはWPCodeのようなコードスニペットプラグインに追加するだけです。
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プラグインの使用をお勧めします。テーマのfunctions.phpファイルを直接編集することなく、サイトのカスタムコードを管理する最も安全で簡単な方法です。
私たちはWPCodeを使用して、ポートフォリオのウェブサイト全体でカスタムスニペットを処理しています。これにより、すべてが整理され、テーマの更新中にコードが消去されるのを防ぎます。
このコードスニペットプラグインの詳細については、WPCodeの完全レビューをご覧ください。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。手順については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
有効化したら、WordPressダッシュボードから Code Snippets » + Add Snippet ページに移動してください。
次に、「カスタムコードを追加（新規スニペット）」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。
次に、画面に表示されるオプションのリストからコードの種類を選択する必要があります。
このチュートリアルでは、コードの種類として「PHPスニペット」を選択してください。
カスタムスニペット作成ページに移動します。
ここから、コードスニペットのタイトルを追加します。これは、コードが何のためのものかを思い出すのに役立つものであれば何でも構いません。
その後、上記のコードを「コードプレビュー」ボックスに貼り付けます。
これが完了したら、トグルを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックするだけです。
この関数は、最初の投稿にoddを、次にevenを、というように追加するだけです。
奇数と偶数のクラスは、サイトのソースコードで見つけることができます。投稿のタイトルにマウスカーソルを移動し、右クリックして「検証」または要素を検証を選択するだけです。
投稿に偶数と奇数のクラスを追加したので、次のステップはCSSを使用してスタイルを設定することです。カスタムCSSは、子テーマのスタイルシート、テーマカスタマイザー、またはWPCodeプラグインを使用して追加できます。
開始点として使用できるCSSのサンプルを以下に示します。
.even {
background:#f0f8ff;
}
.odd {
background:#f4f4fb;
}
テストサイトではこのように表示されました：
CSSの使用方法がわからない場合は、WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドを確認してください。
WordPressのページと投稿をカスタマイズするための追加リソース
この記事がWordPressテーマに投稿の奇数/偶数クラスを追加する方法を学ぶのに役立ったことを願っています。サイトのデザインをさらにカスタマイズするために、これらの他の記事も確認することをお勧めします。
- WordPressでブログ投稿にカスタム投稿ステータスを追加する方法
- WordPressのブログページに表示される投稿数を変更する方法
- 特定のWordPressページにウィジェットを表示または非表示にする方法
- 15の最高のドラッグ＆ドロップWordPressページビルダー比較
- WordPressでページに抜粋を追加する方法（ステップバイステップ）
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
サルマド・ガルデジ
CPT で使用したいのですが、どのように使用できますか？
WPBeginnerサポート
It should automatically affect custom post types
管理者
ヴェラ
こんにちは。 ElementorとAstraを使っているテストサイトでこれを機能させようとしていました。何らかの理由で、コードを追加するとすべてが「奇数」の色で色付けされてしまい、その理由がわかりません。 解決するのを手伝っていただけますか？ Vera
WPBeginnerサポート
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
管理者
Oliur
私のブログ名 WayTrick です。Bloggerブログです。今、私のブログをWordPressに移行したいのですが、どうすればいいですか？
WPBeginnerサポート
BloggerからWordPressへの切り替え方法については、ガイドをご覧ください。
管理者
kaluan
これはGenesisフレームワークでは機能しないようですが？追加のコードは必要ですか？
onkar
特定のページで投稿に奇数・偶数クラスを追加する方法
ブクル
OK、良い機能ですが、CSS スタイルはどうですか？
.post { / / Rest of the css }
.odd { } ???
Simon
これ、ありがとう。まさに必要としていたものです。
サミュエル
特定の投稿カテゴリを対象にするには、どのようにステップアップできますか？
カスタム投稿タイプ「testimonial」があり、そのセクションに奇数/偶数のみのスタイリングを適用したいと考えています。
ありがとうございます！
編集スタッフ
WordPressの条件分岐を使用する必要があります。
http://codex.wordpress.org/Conditional_Tags
管理者
エリック
これは WordPress の奇数・偶数投稿を作成する最も簡単な方法です!! 共有していただきありがとうございます！
クリスティン
残念ながら、css3セレクターはすべてのブラウザで十分にサポートされていないため…
カスタマイズ中の新しいtwenty eleven子テーマでコードを試したところ、非常にうまく機能しました。
シェアしてくれて本当にありがとう！！
Daniele Zamboni
odd/evenクラスとは何ですか？すみませんが、初心者です
wpbeginner
@Daniele Zamboni これらは、スタイリング目的で追加できるCSSクラスです。