【WordPress】ページのURL構造を最適化する方法

ロッチくん

WordPressでサイトを構築してみたのだが投稿一覧、投稿、カテゴリー一覧のURLにおけるディレクトリ構造がなんだか気持ち悪いニャ。。

WordPressでサイトを作り始めたときに最初につまずいたのがこちらの記事で書いたようにパンくずリストを設定した際に表示がうまくいかないというものでした。こちらの記事に書いたように「設定」→「表示設定」→「ホームページの表示」を「固定ページ」に設定することで問題は解決したのですが、その際に投稿の個別ページや、投稿の一覧ページのURLにおけるディレクトリ構造がいまいちしっくりこないと感じていました。

それは当ブログを参考にするならば、

・投稿の一覧ページのURL
https://daian-kichijitsu.com/news/

・投稿のカテゴリ―ページ（例：カテゴリーのスラッグが「web-design」の場合）
https://daian-kichijitsu.com/category/web-design/

・投稿の個別ページ（例：個別ページのスラッグが「session-storage」の場合）
https://daian-kichijitsu.com/session-storage/

となることです。おそらく一般的なWEBサイトであれば、上のURLを例に考えると

・投稿の一覧ページのURL
https://daian-kichijitsu.com/news/

・投稿のカテゴリ―ページ（例：カテゴリーのスラッグが「web-design」の場合）
https://daian-kichijitsu.com/news/web-design/

・投稿の個別ページ（例：個別ページのスラッグが「session-storage」の場合）
https://daian-kichijitsu.com/news/web-design/session-storage/

となることが理想的であると考えるからです。

ただこちらは例に出したように私が使用しているテーマ「COCOON」でもそうですし、以前私がおすすめした「ビジネスサイトを作って学ぶ WordPressの教科書」でも投稿に関しては同様のディレクトリ構造になっていましたので間違いというわけではないようです。おそらく普段からWEB制作に携わっている私のような人間以外はあまり気になることはないのかもしれません。

今回はこちらが気になってしまった方に向けたニッチな記事になりますが、解説していきたいと思います。今回の記事の内容を実行することでパンくずリストと同じ綺麗なディレクトリ構造が実現できます！

設定
1. WordPress管理画面の設定
2. functions.phpの設定

設定

WordPress管理画面の設定

「設定」→「パーマリンク」→「パーマリンク構造」→「カスタム構造を選択」
以下のようにタグを入力します。

/%category%/%postname%/

オプションはそのままで大丈夫です！

functions.phpの設定

先ほどの設定の変更で、投稿のカテゴリ―ページは
https://daian-kichijitsu.com/categoly/web-design/ となっているはずです。

今度はとなっているので、/categoly/を一覧ページのスラッグ/news/に変更してあげる必要があります。functions.phpに以下の記述を追加します。

function my_custom_permalinks( $termlink, $term ,$taxonomy ) {
    return str_replace( '/' . $taxonomy . '/', '/news/', $termlink );
  }
  add_filter( 'term_link', 'my_custom_permalinks', 11, 3 );
  
  // リライトルールの変更
  add_rewrite_rule( 'news/([^/]+)/?$', 'index.php?category_name=$matches[1]', 'top' );
  add_rewrite_rule( 'news/([^/]+)/page/([0-9]+)/?$', 'index.php?category_name=$matches[1]&paged=$matches[2]', 'top' );

また、投稿の個別ページが、https://daian-kichijitsu.com/web-design/session-storage/ のようにカテゴリー始まりになっているはずなのでその前に一覧ページのスラッグである「/news/」を挿入します。

以下をfunctions.phpに追記してください。

// 投稿の個別ページに`/news/`(アーカイブ名)を追加する
function add_article_post_permalink( $permalink ) {
	$permalink = '/news' . $permalink;
	return $permalink;
}
add_filter( 'pre_post_link', 'add_article_post_permalink' );

以上で実現したかったパンくずリストと同じ綺麗なディレクトリ構造が実現できたかと思います！

↓↓↓ カスタム投稿タイプのURL最適化はこちら ↓↓↓