【WordPress】記事ループでレイアウトが崩れた時はこれ

「ループで表示するとレイアウトが崩れる」「指定した数より多く記事が表示されている」こんな問題に答えます。

原因は簡単なことです、方法はいろいろあります。

wordpressに少し慣れてきた方、初心者の方は参考にどうぞ。

これ、wordpressを理解できてきたかな？って時くらいに直面しがちなんですよね。

ループ処理については【コピペOK】wordpressで記事をループ表示する方法をどうぞ。

なぜこんな事が起こるんでしょうか？

原因は「この投稿を先頭に固定表示」だった

頻繁に使うわけじゃないから問題に気付きにくい。

なにそれ？って方に簡単に説明を。

記事の公開オプションになります。

チェックして設定しておくことで、記事ループの際に優先的に表示されるようになります。

Twitterの「固定されたツイート」をイメージしてもらえればわかりやすいかも。

注目してほしい記事に設定すると効果的にビューを稼げるというメリットがあります。

なぜこれが原因なのか疑問ですよね。

特定の条件を満たすと取得記事数にズレが起きる

例えば下記コード

$args = array(
  'post_type' => 'post',
  'posts_per_page' => 10,
);

$my_query = new WP_Query( $args );

WP_Query()を使った普通のコード

これだと特定の条件を満たすとレイアウトが崩れたり、表示記事数にズレが起きます（上記では10件指定だが、11件,12件になる可能性がある）。

特定の条件とは？

上記コードを参考にすると、ループ最後(今回であれば10番目)の記事より古い記事に「この投稿を先頭に固定表示」を設定している場合ということになります。

／(^o^)＼ﾅﾝﾃｺｯﾀｲ

んじゃどうしたらいい？解決方法は4つあります

考えられるのは以下4つ

• 「この投稿を先頭に固定表示」を使えないようにする
• 先頭に固定表示を無効にする
• 先頭に固定表示されている記事は除外(非表示)する
• 取得記事数を操作する

それぞれ解説します。

「この投稿を先頭に固定表示」を使えないようにする【コピペOK】

運用としてそもそも使えないようにするということ。

先頭に固定表示させることは絶対にない！と決まっている時はこれが一番手っ取り早いです。

下記コードをfunctions.phpにコピペするだけで解決です。

functions.php

function remove_sticky_posts() {
    echo ''."\n";
}
add_action( 'admin_head', 'remove_sticky_posts' );

先頭に固定表示を無効にする

このページででは先頭に固定表示は無効にしてループさせたいって時に使えます。

勘違いしてはいけないのが、無効にするだけで記事そのものを表示させないわけではありません、元ある位置で表示されます。

WP_Query()使った例になります。

$args = array(
  'ignore_sticky_posts' => true,
  'post_type' => 'post',
  'posts_per_page' => 10,
);

$my_query = new WP_Query( $args );

2行目がポイントです、「ignore_sticky_posts」をtrueにすることで先頭に固定表示を無効にしています（デフォルトはfalse）。

ダミー記事を使って確認しましたが、表示件数も指定した通りになり、無効になっている事を確認しました。

ただ、一部レイアウト崩れを起こしている箇所もありました(表示件数は正常)ので、もしかすると根本的な解決策ではないのかもしれません。

先頭に固定表示されている記事は除外(非表示)する

このページでは先頭に固定表示に設定されている記事は一切表示させない！って時に使えます。

WP_Query()使った例になります。

$args = array(
  'post__not_in' => get_option( 'sticky_posts' ),
  'post_type' => 'post',
  'posts_per_page' => 10,
);

$my_query = new WP_Query( $args );

2行目がポイントです、「post__not_in」にget_option( 'sticky_posts' )を指定してあげることで対象記事を除外することができます。

これで先頭に固定表示と設定されている記事はループから全て除外されます。

これは使うシュチュエーションがかなり限られそうですね。

取得記事数を操作する

先頭に固定表示したい、でも普通に表示したい！という欲張りな方にオススメ！

先頭に固定表示設定している記事数を表示数から差し引いて調整するという方法です。

こちらを参考にしました。

WP_Query()使った例になります。

$list_cnt = 10; // 表示したい数
$sticky = get_option('sticky_posts');
if (!empty($sticky)) $list_cnt -= count($sticky);

$args = array(
  'post_type' => 'post',
  'posts_per_page' => $list_cnt
);

$my_query = new WP_Query( $args );

何をしているかというと。

1. 1行目,表示したい数を設定します
2. 2行目,先頭に固定表示する記事を取得
3. 3行目,表示したい数から固定表示分を差し引く
4. 7行目,差し引いた数をパラメーターに設定する

これで、万事解決！

と言いたいところですが、この方法には2つ穴があります。

• ページ送りを使用する時
• 固定表示数が表示したい数を上回った時

それぞれ簡単に解説します。

ページ送りを使用する時

プラグインWP-PageNavi等を使用してページ送り（ページャー）する場合は、意図している動作にはなりません。

最初のページのみ正常に表示され、2ページ目以降（固定表示の記事がないページ）は差し引いた数しか表示されないからです。

例えば、1ページあたり表示したい数は5,固定表示にしている記事数は1,記事の総数は15とした場合、以下のような結果になります。

• 1ページ目,5件表示(固定表示 + 差し引いた数)
• 2ページ目,4件表示(差し引いた数)
• 3ページ目,4件表示(差し引いた数)
• 4ページ目,2件表示(差し引いた数)

ページ送りには向いていない、というかページ送りを想定していないことがわかります。

もし、ページ送りで使いたい時は別の処理が必要になります。

固定表示数が表示したい数を上回った時

例えば、表示したい数が5,固定表示にしている記事数が6の場合、差し引いた数は-1になります。

'posts_per_page'にパラメーターとして-1を渡すと、全ての記事が表示されるようになります。

それ以外の値だったとしてもどちらにせよ意図している結果にはなりません。

対策としては分岐処理でなんとかするか、運用するにあたって固定表示にできる数を制限するかの2つになります。

固定表示を設定しまくっている事自体問題ですが、ともあれ気を付けておきましょう。

まとめ

本記事の内容を簡単にまとめました。

• 表示数のズレは固定表示に設定している記事が原因
• 改善策は設定させない、無効にする、除外する、表示数操作の4つ
• 表示数操作はページ送り、固定表示の記事数に気を付ける

個人的に「この投稿を先頭に固定表示」を除外するのがバッサリ切ってていいかな。笑

表示数操作については他にもいろいろ方法がありそうなので、また暇なときに考えたいと思います。

Twitterでも情報を発信していますのでフォローお願いします。

長くなりましたが以上になります。