フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

WEB

ページネーションも使える!wordpressでoffsetを使わず最新記事だけ大きく表示する方法

2016年2月12日

Pocket

トップページにインパクトが欲しい!

ブログを巡回していると最新記事だけ大きくなっていて、2件目以降はアーカイブ形式に表示されるトップページをよく見ますよね。
通常のループ処理だと同じレイアウトを並べることしかできないので、ちょっとした細工が必要になります。

ちなみにwhileループについてはこちらを参照してみてください。

WordPressでよく使われるwhileループ処理とサブループについて
WordPressでよく使われるwhileループ処理とサブループについて

WordPressで使われるループforeachについては前回の記事で書きましたが、今回はwhileループについて調べてみました。 併せて...

offsetだとページネーションが使えない

最初に思いつくのがoffsetだと思います。
最新記事と2件目以降で別にループを作って、2件目のループでoffset指定で2件目以降をループさせる方法です。

offsetを使用した場合

これでも期待した表示はできるのですが、問題はサブループを使うこととoffsetを使用するとページネーション(ページャー)が使えないという点です。

通常こういった表示をしたい場所はブログのトップページで、ページ送りで以前の記事も見られるようにすることだと思います。
その場合必須になるページネーションが使えないのは致命的です。

メインループの中で最新記事を判別する

となれば、何かしらの方法で最新記事だけ選別して別の表示をさせる方法がベターでしょう。
私は下記のように選別してみました。

最新記事だけ選別して表示

ちょっと分解してみます。
まず選別の方法ですが、記事一覧の格納されている$postsから一番上(最新)の記事IDを拾っておいて、メインループ内にif文でそのIDの記事をより分けて表示させています。

ただ$postsはページ送りする度に、そのページ内で表示される分だけの記事が格納されます。
例えば1ページ5記事表示の設定だと、2ページ目の6記事目も最新記事と同様大きく表示されてしまいます。

それだとちょっと意図したものと違うので、記事全体からの最新記事IDを拾うコードを書いてあります

最新記事のIDを取得

そのIDとループされる記事のIDを照合してより分け処理を行います。

まとめ

最初はちょっと悩んでいたのですが、いざ組んでみたら意外とシンプルでした。
$my_query -> posts[0];は0番目の記事を拾うという意味ですので、3番目・5番目も大きくしたいという場合は数値を2・4とすれば応用できます。

ちなみに$postsを参照して2ページ目、3ページ目も同じレイアウトで表示する場合はこちらになります。

2ページ以降も同じレイアウトで表示

追記

当サイト上記の方法で最新記事だけ大きくして、残りはfloatのカラム落としでレイアウトしていたのですが、記事が増えてきて少々トラブルに見舞われました。
後日そのトラブルを解消した記事を書きましたので、同じようなレイアウトを考えている方は併せて参照してみてください。

WordPressの記事をfloatで並べたらカラム落ちでズレた!カラム落ちを回避する方法。
WordPressの記事をfloatで並べたらカラム落ちでズレた!カラム落ちを回避する方法。

投稿の並びを単純にfloatのカラム落ちを利用していたのですが、これだと見出しの行数の増減で縦幅が変わった際に下段が右に寄ってしまうのです。...

追記2

後日気が付いたのですが「最新記事だけ選別して表示」の項の方法だと、2ページ目の表示が奇数になってしまい、最後の列に端数が出てしまいます。

例えば1ページ5件表示で最新記事が2枠、残り4記事が1枠ずつだと計6枠になるので、1ページ目は問題ないのですが、2ページ目は全て1枠になるので計5枠になってしまい最後の列が1個空いてしまう・・・という感じです。

そういう訳で一応2番目の記事まで大きくするソースを追記しておきます。

最新記事と次点記事だけ大きくする

Pocket

このカテゴリで良く読まれている記事
関連記事

COMMENT