あなたの主題に関する記事に奇数と偶数のクラスを追加しますか? WordPressのブログ ? クラスを追加すると、記事ごとに特定のスタイルを表示できます。

このチュートリアルでは、WordPressで偶数または奇数のクラスを表示する方法を示します。

奇数のWordPress検索クラスを表示する方法

クラスを追加する理由 ペア 「OR」 奇数 » あなたのテーマについて WordPressのブログ ?

多くの WordPressテーマ WordPress コメントに古いクラスまたは同じクラスを使用します。 ユーザーは、あるコメントがどこで終わり、別のコメントが始まるかを確認できます。

同様に、この手法を記事に使用できます。 ユーザーが大きなページをすばやくスキャンできるようにすると、見た目が美しくなります。 これは、新聞や雑誌のサイトのホームページで特に役立ちます。

そうは言っても、記事でクラスを追加する方法を見ていきます。 WordPressのブログ.

ワードプレスの偶数/奇数クラスを追加する方法

WordPressはデフォルトのCSSクラスを生成し、それらをWebサイトのさまざまな記事にその場で追加します。 これらのCSSクラスは、プラグインとテーマの開発者がそれぞれの記事に独自のスタイルを追加するのに役立ちます。

WordPressには、「 post_class テーマ開発者がクラスを記事に追加するために使用します。

機能 post_class フィルターでもあります。つまり、それを使用して操作できます。 それがまさにここでやろうとしていることです。

このコードを functions.php ファイルに追加するだけです。 ワードプレスのテーマ.

oddeven_post_class機能($クラス){グローバルの$ current_class。 $クラス[] = $ current_class。 Current_class $ =($のcurrent_class == '奇数')? 「「でも」」奇数。 $クラスを返します。 } ADD_FILTER( 'post_class'、 'oddeven_post_class')。 グローバルの$ current_class。 $ Current_class = '奇数';

この関数は、単に偶数と奇数のアイテムにクラスを追加します。

サイトのソースコードには、奇数クラスと偶数クラスがあります。 記事のタイトルにマウスを移動し、右クリックしてアイテムを検査します。

奇数のWordPress記事をプレビューする

これで、奇数クラスと偶数クラスが記事に追加されました。 次のステップは、CSSを使用して独自のスタイルを提供することです。 子テーマにカスタムCSSコードを追加するか、単純なCSSプラグインを使用できます。

出発点として使用できるCSSコードの例を次に示します。

.EVEN {背景:#f0f8ff。 .odd} {背景:#f4f4fb。 }

結果は次のようになります。

代替色のWordPress記事

良い結果を得るには少し練習が必要ですが、そのためにはCSSを習得するか、次のようなツールを使用する必要があります。 CSSヒーロー.

それはそれと同じくらい簡単です。 このチュートリアルがお役に立てば幸いです。 お気軽に質問したり、お気に入りのソーシャルネットワークでお友達とこのチュートリアルを共有してください。