WP-PageNaviの2ページ目以降で起こる404エラーの回避方法

WP-PageNavi とは

WordPressユーザーにはお馴染み、WP-PageNaviはページネーションを簡単に追加できるプラグインです。

WP-PageNavi(wordpress.orgのページを見る)

ページネーションを入れたい箇所に、以下のコードを入れるだけで実装完了。超簡単です。

WP-PageNaviが表示されない問題

時々、WP-PageNaviのページネーションが表示されない問題が起きます。
これの原因のひとつに、「WP_Queryでクエリを変更していた」という事がよくあります。

例えば、固定ページでカスタム投稿のブログ記事を一覧表示したいとします。
その場合、new WP_Query()で、固定ページからカスタム投稿のクエリに変更します。

次のコードは一般的なWP_Queryでクエリを変更した処理です。

これではwp_pagenavi()を入れてもページネーションが表示されません。

WP-PageNaviが表示されない原因と対処方法

wp_pagenavi()のコードを以下に差し替えてみてください。

array('query' => $the_query)を追加することで、変更したクエリを正しく読み込むことができるようになります。

こちらのサイトを参考にさせていただきました。

WP_Queryを使用してWP-PageNaviでページナビを表示

 

これで正常にWP-PageNaviが表示され、2ページ目以降のリンクが生成されたはずです。

しかし、本当に恐ろしい問題はここからでした。次からが本題となります。

2ページ目以降「404 ページがありません」と出る

例えば、カスタム投稿「item」を追加したとします。
そしてカスタム投稿「item」記事を、固定ページに表示させたいとします。

心情的には、固定ページのスラッグを「item」にし、http://example.com/item/というURLで表示したいところです。

するとURLがこうなります。

WP-PageNavi 404 ページがありません と出るイメージ

これだとダメなんですよ。

404エラーの原因はパーマリンク

改めてURLを確認します。

(1)http://example.com/item/ = 「カスタム投稿」のアーカイブページのURL
(2)http://example.com/item/page/2/ = 「カスタム投稿」のアーカイブ2ページ目のURL

パーマリンク設定を%postname%にしていると、(2)のURLは固定ページitemの改ページとしてデータを参照しようとします。

改ページとは、本文にテキストモードで次のタグを入れるとページを分割することができる機能です。

文字数が多くなるページの場合、しばしば見られる構成です。ニュースサイトとかでよく見られます。

改ページのサンプルページを用意したので見てみてください。

 

固定ページのスラッグ名と、カスタム投稿のスラッグ名は、同じ文字列で設定すると、不具合の原因になる!

というか、スラッグ名のかぶりは原則避けるべし。
これ覚えておきましょう。

404エラーの解決方法まとめ

  • 固定ページなどでクエリ変更する場合、URL(パーマリンク)が被らないよう注意する
  • パーマリンクを一度デフォルトに戻してみる

スラッグ名が被ってしまうと思わぬ不具合が起きてしまうもの。
WordPressのテーマカスタマイズ初心者さんにありがちなミスのひとつです。

僕も実際にハマってしまったトラブルだったので、記事にまとめました。

誰かのお役に立てたら幸いです。

 

WordPressの基本的なことは、手元に本も置いておくと迷った時にすぐ見返せるからオススメですよ。

 

コメント

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • はてなブログの記事をインポートしたらHタグをSearch Regexで変換しよう

    はてなブログの記事ページは、HTML要素のh1、h2など「Hタグ」が若干おかしい事になっているのは知っていますか? はてなブログではブログタイトルにh1タグが使われていますが、個別記事のタイトルにもh1タグが使われています。 1ページにh1タグが2箇所あること […]

    2018.7.2
    Wordpress【初級者向け】
  • ソースコードを色分け表示するSyntax系プラグイン3選

    Web屋やっていて技術的な調査をしていると、備忘録としてブログをメモ代わりにしたくなる人は多いよね。 自分もだいぶ先人様たちのすばらしいブログにどれほど助けられたか。 Wordpressの便利そうなプラグインないかな~とちゃちゃっとぐぐったら色々出てくる。すば […]

    2012.6.23
    Wordpress【初級者向け】
  • ロリポップのWordPress簡単インストールの使い方

    格安レンタルサーバー「ロリポップ」では、Wordpressのインストールが簡単です。 WordPress簡単インストールの手順 左のメニューから「サイト作成ツール」をクリックします。   画面が変わったら左メニューの「Wordpress簡単インストー […]

    2018.5.18
    Wordpress【初級者向け】