初心者がWordPressで独自URLを用いて簡単なアプリケーションを作成する方法

WordPressは単一の投稿記事、固定記事、カスタムポストなどカスタマイズすれば単純なウェブサイトだけでなく、機能性に優れたウェブアプリケーションを開発することが可能です。

CPT UIなどのプラグインを用いることによって独自のURLを作成して、通常の投稿記事のようにポスト行くという方法もありますが、より拡張性の高いウェブアプリケーションを開発するには、独自にURLを用いて特定のPHPファイルを作成していく方が良いですね。

今回は、CPT UIを使わずに独自のURLを作り、ウェブアプリケーションを開発するための第一段階として、rewrite_rules_arrayflush_rewrite_rulesadd_rewrite_endpointの使い方などをご紹介します。

rewrite_rules_array、flush_rewrite_rules、add_rewrite_endpointを使って独自ページを作成

Rplayでもcompanylistというページ、company/1 , company/1/esなどのように企業の詳細情報と、企業のエントリーシートのページを独自で生成しています。これを実現しているのが、rewrite_rules_array、flush_rewrite_rules、add_rewrite_endpointの3セットです。

多くのアプリケーションで求められているURLの構造だと思います。今回は下記のようなURLを想定して、書き方や実装方法をご紹介していきます。

/area/tokyo
/company/rplay
/company/1
/company/1/hoge

add_rewrite_endpointの使い方

add_rewrite_endpointを追加しなければ、ブラウザ上で表示されていてもステータスコードが404になっています。add_rewrite_endpointの追加は下記のような形で、第一引数は、追加したいURLの名前を記述、第二引数はどこで有効にするかです。

add_rewrite_endpoint('companylist', EP_ALL);
add_rewrite_endpoint( $name, $places, $query_var = null );

・$name – エンドポイントの名前
・$places – 下記の表を参照

名前 内容
EP_NONE なし
EP_PERMALINK 投稿のパーマリンク
EP_ATTACHMENT 投稿に添付されたファイルを表示するためのページ
EP_DATE Date アーカイブ
EP_YEAR 年別アーカイブ
EP_MONTH 月別アーカイブ
EP_DAY 日別アーカイブ
EP_ROOT ルートページ(トップページ)
EP_COMMENTS コメントページ
EP_SEARCH 検索結果ページ
EP_CATEGORIES カテゴリーアーカイブ
EP_TAGS タグアーカイブ
EP_AUTHORS 著者アーカイブ
EP_PAGES 固定ページ
/*http://rplay.me/companylist
を実現したい場合は、*/
add_rewrite_endpoint('companylist', EP_ALL);

add_filter('query_vars', 'my_query_vars');

function my_query_vars($vars) {
    $vars[] = 'companylist';
    return $vars;
}

add_action('init', 'my_init');

function my_init() {
    add_rewrite_endpoint('companylist', EP_ALL);
}

WordPressでインデックスされない問題の解決

WordPressでページがGoogleにインデックスされない問題が起きることがあります。このサイトであるRplayでも独自に作ったcompanylistなどのページがインデックスされていない問題が起きていました。

Googleにインデックスされない原因の追究

Googleにページがインデックスされない理由というのはいくつか考えられます。問題の切り分けは非常に難しいですが、一つ一つ確認していくと以外と発見できるものです。

・ページの品質が低い。文字数が少ない、画像や動画ばかりのページなど
・カテゴリーページのように単一ページの集合体で重複してるコンテンツが多い

などの場合に、インデックスされないというケースがあるようです。

Rplayのcompanylistページがインデックスされていない問題は、よく見るとステータスコードが404で、Googleのウェブマスターツールで見てみると、確かに「見つかりませんでした」になっているという事が原因でした。

Google developer toolsでステータスコードの確認

Google Chromeをブラウザで使っている場合は、Google developer toolsのNetworkからステータスコードが確認できます。endpointの設定を追加したことによって、無事に200が返ってきていることがわかります。

developertools

この問題の解決のためには、「add_rewrite_endpoint」を追加してあげる必要がありました。

ページを表示するだけであれば、custom_template_includeを使って、特定のPHPファイルを呼び出してあげるだけで表示はできます。しかしページを作ってGoogleにインデックスさせなければページを作った意味がありませんよね。アプリケーションを開発していると、意図的にインデックスさせないページがあることもありますが、この場合は意図せずインデックスされていませんでした。

Googleウェブマスターツールの画面上で404の確認

Googleウェブマスターツールの画面上だとこのようになっています。ステータスのところがエラーになっていて、「見つかりませんでした」となっている場合ステータスコードが404になっているということです。

ウェブマスターツール

「add_rewrite_endpoint」を追加してあげると、無事下記のようにインデックスされていることがわかります。

ウェブマスター

ページを作ってブラウザで確認したから大丈夫ということではなく、作ったものが上手くいっているかどうか、しっかりステータスコードを確認するようにしましょう。

SEOを意識するようなブラウザのアプリケーションの場合対応は必須です。SEO担当になっていたら、インデックスされてなかったら顔面蒼白状態です。

WordPressやプログラミングの学習・課題解決方法

このようなプログラミングの悩みや問題が起きた時に、WordPressの問題やプログラミングについて聞けるサービスをこちらにまとめてありますので、こちらも合わせてどうぞ。

ちなみに今回の問題はteratailというサービスでヒントをいただきました。WordPressに精通している方が30分程度で返信をしていただき、その後に調べつつ解決。自分だけで悩むよりも、質問しながら自分でも調べるというスタイルの方が解決が早くて済みます。
特にプログラミング初心者の方にはオススメの学習方法です。

また、WordPressでウェブサイトを作りたいという方はこちらも。

参考記事

https://firegoby.jp/archives/5309
http://nskw-style.com/2014/wordpress/wordpress-app-with-rewrite-api.html