[WordPress] jQueryを使用してフロントページ/カテゴリページをグリッドレイアウトに変える

上の図は、 WordPress Attitudeテーマのフロントページに表示されるブログ（最新記事）を2カラム形式のグリッドに配列した様子です。 このような形にする方法は多様であり、このブログの他の記事も扱っています。 単にCSSで調整することも可能ですが、その場合は、余白の問題などを処理するのが少し難しくなります。 このような問題をよりすることができウォルヒ実行するには、個々の文を囲む要素（例えば、 div要素 또는 ）に別のクラスを追加すると、お勧めします。

例えば、2段で構成する 奇数, さらにのようにペア、奇数を表すクラスを追加し、3段で構成する 左, 真ん中, 右のようなクラスを追加することができます。 4ただし、5短刀同様でしょう。 これにより、各カラム（列）の余白、パディングの値を容易に調整することができます。

2段で構成する場合は、次のような形式で、左には 奇数 クラスを、右に さらに クラスを追加することができます。

$('section:odd').addClass('odd');
$('section:even').addClass('even');

クラス部分は、 WordPress テーマに合わせて変えたらされます。

3段で構成する場合には、次のように nth-childを選択する選択子を追加してくれればされます。

$('section:nth-child(3n+1)').addClass('left');
$('section:nth-child(3n+2)').addClass('middle');
$('section:nth-child(3n+3)').addClass('right');

この場合、一番左の列の要素に 左が、中には 真ん中、右に 右が追加されます。

そして、CSSを使っ適切レイアウトを調整してくれるようです。 例：

section {
width: 32%;
display: inline-block;
vertical-align: top;
}

section.left {
padding-right: 5px;
box-sizing: border-box;

}

section.middle {
padding-right: 5px;
padding-left: 5px;
box-sizing: border-box;

}

section.right {
padding-right: 5px;
box-sizing: border-box;
}

そして、PCの画面では、3段に表示され、スマートフォンなどのモバイル機器では、2段あるいは1段で表示されるようにするには、メディアクエリ（media query）を使用するようにします。

@media screen and (min-width: 480px) {
// 480px 이상의 해상도에 적용
}

@media screen and (max-width: 479px) {
// 479px 이하의 해상도에 적용
}

メディアクエリを使用して、モバイル機器にも精密に対応することができます。 （jQueryを WordPressで使用するには、jsファイルをenqueueしてください。 詳しくは「WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法「を参照してください。）

以上でjQueryを使用して、個々の文wrapper要素にクラスを追加して、2段または3段などのグリッドレイアウト（ポートフォリオレイアウト）で文を配列する方法を説明しました。

最近では、ポートフォリオ（グリッド）形式のサイトが多く目立つようです。 現在、このブログに適用されたテーマも 冥王星というようなもののテーマです（おそらくいつ変わるかわからないしばらくはこのテーマを使用することです）。 この記事でスタイリッシュなポートフォリオ形式のテーマを確認することができます。

メモ：

• CSSを使用してMasonryグリッド形式でブログ記事の一覧を表示する