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でもフォローできます。
Sarmad Gardezi
CPT で使用したいのですが、どのように使用できますか？
WPBeginnerサポート
It should automatically affect custom post types
管理者
Vera
こんにちは。 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
管理者
Eric
これは WordPress の奇数・偶数投稿を作成する最も簡単な方法です!! 共有していただきありがとうございます！
Christine
残念ながら、css3セレクターはすべてのブラウザで十分にサポートされていないため…
カスタマイズ中の新しいtwenty eleven子テーマでコードを試したところ、非常にうまく機能しました。
シェアしてくれて本当にありがとう！！
Daniele Zamboni
odd/evenクラスとは何ですか？すみませんが、初心者です
wpbeginner
@Daniele Zamboni これらは、スタイリング目的で追加できるCSSクラスです。