crocodile notebook

feedly feedburner google+ twitter facebook creative commons BY:2.1 プロフィール


このブログのトップページでは、最新記事から6件を並べて表示しています。
ひとつの記事枠は横幅310ピクセスで、右に25ピクセルの余白をつくっているので、合計335ピクセル。
それが横に3つ並ぶので合計は1,005ピクセルになります。
しかし、右はじの記事枠に余白は必要ないのです。
そのため、大元になる表示領域の横幅は980ピクセルにしてあります。

さて、このままでは『幅が25ピクセル足らないから、横には2つしか並べられない』ことになります。
それは困るので、右はじの記事枠については、右余白をゼロにしたいわけです。

でも、同じスタイルシートを繰り返して表示されている枠なので、そのままでは切り替えることはできません。
そこで、記事枠それぞれにスタイルシートのクラスを与えることにしました。

<?php if (have_posts()) : query_posts('posts_per_page=6&paged='.$paged); $i=0; ?>
<?php while (have_posts()) : the_post(); $i++; ?>
<div class="parent_class bgitem<?php echo $i; ?>">
</div><?php endwhile; endif; wp_reset_query(); ?>


1行目:《 $i=0; 》
   『i』の初期値を”0″にしています。
   2行目の設定で繰り返しの1回目のときにiの値が1となるよう0にしています。
   ”posts_per_page=6″で6回繰り返すように指定しています。

2行目:《 $i++; 》
   iに対して1を加算(+)します。
   これによって何回目の繰り返しかをカウントします。

3行目:《 bgitem<?php echo $i; ?> 》
   クラスを与えています。
   ここでは『bgitem』という固定の文字列にカウントされたiの数字を末尾に追加しています。

これでbgitem1〜6のクラスが、ぞれぞれの記事枠に割り当てられました。
あとはbgitem3とbgitem6に対して、スタイルシートで《 margin-right:0; 》を指定して解決です。

それぞれの記事枠で固有のクラスを割り当てたので、それぞれに違う装飾を施すことも可能です。
2ページ目以降もまた左上を1として6までのクラスが割り当てられます。

まとめ
<?php if (have_posts()) : query_posts('posts_per_page=6&paged='.$paged); $i=0; ?>
<?php while (have_posts()) : the_post(); $i++; ?>
<div class="parent_class bgitem<?php echo $i; ?>">
</div><?php endwhile; endif; wp_reset_query(); ?>


《 query_posts(‘posts_per_page=6’); 》で繰り返す回数(表示する記事数)を指定します。
《 while 〜 endwhile 》のあいだに記述されている内容が繰り返されます。
このあいだにHTMLが書かれている場合、それが画面に表示されます。
今回はwhile〜endwhileのあいだで《 $i++ 》として$iに加算をして繰り返し回数をカウントしています。
《 echo 》は書き出しの命令です。
カウントした$iをスタイルシートのクラス名としてHTMLに書き出しています。

プロが選ぶ WordPress優良プラグイン事典
相原 知栄子 一戸 健宏 大串 肇 大島 義裕 大曲 仁 北村 崇 小島 勝茂 後藤 賢司 染谷 昌利 高野 直子 高橋 文樹 鳥山 優子 西川 伸一 服部 久純 星野 邦敏 松田 千尋 吉澤 富美
エムディエヌコーポレーション
売り上げランキング: 43,255

ワードプレスのインデックスページで記事サムネイルなど個々にCSSクラスを与える簡単な方法

UPDATE: 2013.03.05
, , ,




併せ読みに選ばれている
記事はこちらのようです

本が好きな人、読書量を増やしたい人、本を知りたい人に向けたブログ『pigeon bookstock』

本が好きな人、読書量を増やしたい人、本を知りたい人に向けたブログ『pigeon bookstock』

[PR記事] 書籍を紹介するブログをWordPressで作りました。 今回利用したWordPress Tipsを簡単にご紹介します。

ワードプレスのページ送り(ページネーション)をプラグインなしで実装する方法

ワードプレスのページ送り(ページネーション)をプラグインなしで実装する方法

ワードプレスでのページ送りをプラグインなしで実装するためのPHPとCSSです。 機能的にはシンプルですが、簡単なCSSで自由にカスタマイズできるのがポイントです。

《プラグイン17選》WordPressでブログを始めたい方へ捧げます《テーマ4選》

《プラグイン17選》WordPressでブログを始めたい方へ捧げます《テーマ4選》

WordPressでブログを始めようとしてる人、始めたけどもう少し手を加えたい人。 そうした方の参考になればと思い、ボクが活用しているプラグイン17本を纏めてみました。 あわせて今気になってるテーマを4つご紹介。

Googleがschema.org(JSON-LD形式)のパンくずリストをサポート開始したのでWordPressで対応してみる

Googleがschema.org(JSON-LD形式)のパンくずリストをサポート開始したのでWordPressで対応してみる

Googleがscheme.orgを利用したパンくずリストに対応したので、WordPressでの構造化データもData-Vocabulary.orgからJSON-LD形式に切り替えて設定する方法です。

Googleウェブマスターツールは構造化データを重要視してるっぽいからWordPressで対応してみました

Googleウェブマスターツールは構造化データを重要視してるっぽいからWordPressで対応してみました

ブログってちょーっとマジメなことをやろうって思うと、なんか専門用語ばっかりでめんどくせーとか思っちゃうボクですがやってみたらできたっぽいのでそれっぽくwordpressで構造化データの対応方法まとめです。

俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。

俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。

自分の雑誌録を兼ねたブログを立ち上げました。 読んで益なし損もなし。薬にならなきゃ毒でもなし。