Liberty

こんにちは、yutaです。

はじめに

本記事は筆者がWordPressオリジナルテーマを制作するにあたり、つまいづいた問題を解決していく過程を時系列的に記述しているものですので内容としては結論にすぐたどり着かず冗長なものになっています。結論だけをすぐに確認したい方は目次から飛んでください。

1.問題にぶつかるまでの過程
1-1.補足
2.get_template_directory_uri()/a.phpで中身が表示されないことからの考察
3.結局、直接a.phpへのリンクを貼ることはできない
4.固定ページのテンプレートという形でそれぞれのページを作成する
5.固定ページのオリジナルテンプレートの作り方
6.固定ページとトップページのリンクのやり方

記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。

1.問題にぶつかるまでの過程

wordpressなどを使わずにホームページを作る時にindex.htmlからサブページであるa.htmlへのリンクを貼るとしたら<a href=“a.html”>aへのリンク</a>としますね。

これと同じ発想でwordpressで上記コードを記述してもリンクが機能しません。

ところでwordpressはphpファイルを組み合わせてwebページを生成しているので、使用するファイルもindex.htmlではなくindex.phpですね。そして、index.php内で記述しているリンクも<a href=“a.php”>aへのリンク</a>となります。

まぁ、これも機能しないわけですが。

「どうやらパスの指定方法に問題があるらしい」と思って調べました。

wordpressにはwordpress専用の関数がたくさん用意されています。

そのうちの一つであるget_template_directory_uri()を使うとテンプレートのURLが取得できます。テンプレートのURLというのはつまり、index.phpやa.phpがあるディレクトリのURLのことなのでこの関数を使ってリンクを貼ってみます。

<a href=“<?php echo get_template_directory_uri(); ?>/a.php”>aへのリンク</a>

どうやらa.php自体にはリンクできているようなのですが、a.phpの中身がブラウザに表示されません。奇妙なことに、a.phpではなくa.htmlをリンクすると中身が表示されました。

上記のような流れで、wordpressであるページへのリンクを貼るにはどうしたらいいのだろうという疑問にぶつかったのでそれをなんとか解決しようという話です。

1-1.補足

筆者はwordpressのオリジナルテーマを作ろうとしています。

そしてそのテーマはブログ用というより企業サイト用です。

つまり内容としては、固定ページの集まりになります。投稿ページもありますが企業ニュースのページくらいです。

固定ページといっても、企業概要ページ、製品ページ、採用ページ、お問い合わせページのように全て個別のレイアウトを持ったページを作る必要があるので、wordpressに初めから入っているレイアウトではいけません。

つまりwordpressデフォルトのレイアウトは使わず、全ての固定ページをそれぞれ作成して、それらを単純にトップページとリンクしたいのです。

wordpressを使わずにホームページを作る時はそうですよね。index.htmlからリンクしたいページがある場合、そのページを作って<a>タグでリンクを貼りますよね。それをやりたいというだけです。wordpressのwp-adminにログインして固定ページの新規追加をしてごちゃごちゃみたいなことはやりたいくないわけです。

2.get_template_directory_uri()/a.phpで中身が表示されないことからの考察

a.htmlには<!docutype html>の記述から</html>まで全てを記述していますが、a.phpではwordpress専用の関数であるget_header()およびget_footer()を使用して、header.phpとfooter.phpの内容を読み込ませているので、a.php自体にはこれらの関数とbodyの中身しか記述しません。

上記したように、同じリンクの貼り方でa.htmlの中身は表示されて、a.phpの中身は表示されないということから考えられることは、a.phpのget_header()やget_footer()が機能していないせいでa.phpの中身がブラウザに表示されていないのではないかということです。

3.結局、直接a.phpへのリンクを貼ることはできない

a.htmlは上記したように直接リンクを貼れます。ただし、a.phpはwordpressのやり方でwebページを組み立てる必要があるので、直接リンクを貼ってもうまくいかないようです。

4.固定ページのテンプレートという形でそれぞれのページを作成する

では、どうすればいいのか・・・。調べた結果、リンクしたいそれぞれのページ(企業概要ページとか)をwordpressの固定ページのテンプレートという形で作成する必要があるようです。

wordpressで固定ページを追加する時、新規追加ボタンを押すとあらかじめテンプレートが設定されていますよね？意識していないかもしれませんが、一番上にタイトルを入力する欄があり、その下に本文を入力する欄があるはずです。あれがまさにテンプレートです。

そしてこのテンプレートはオリジナルで作成することができるので、自作テンプレートにページに記載する内容を全て書いておけば、そのテンプレートを適用した固定ページには初めからページの内容が含まれることになります。

要するに「あいう」とあらかじめ記述されているテンプレートを作って、wordpressの固定ページ新規追加時にそのテンプレートを適用すると、何も記述しなくても「あいう」と書かれたページが生成されるということです。

5.固定ページのオリジナルテンプレートの作り方

テンプレートの作り方自体はすごくシンプルでした。上記で作っていたa.phpの一番最初に<?php /* Template Name: 任意の名前 */ ?>を記述するだけです。そうすれば、固定ページの新規作成の時に画面右のページ属性→テンプレートから自作テンプレートを選択できるようになります。

このやり方であれば、a.php内のget_header()やget_footer()が正常に読み込まれてページの中身が表示されました。実際にサイトを構築する際には、wp-adminにログインして固定ページを追加する作業が必要になりますがこれは仕方のないことなんでしょうね。

6.固定ページとトップページのリンクのやり方

上記のやり方で作成した固定ページですが、固定ページ作成時にページidやパーマリンクが生成されるのでこれらを使ってトップページからのリンクを作ることができます。ページidはページごとに個別の数字が割り当てられるのですが、後から変更ができないうえ数字なので覚えづらいです。そのに対してパーマリンクは後から自分で変更できるのでパーマリンクを使ってトップページに固定ページへのリンクを貼ることにします。

前述したようにリンクを貼るときは以下のコードを使います。

<a href=“<?php echo get_template_directory_uri(); ?>/a.php”>aへのリンク</a>

しかし今回はa.phpの部分がパーマリンクに変わるので以下のようになります。

<a href=“<?php echo get_template_directory_uri(); ?>/a.php”>パーマリンク</a>

画像の例ではパーマリンクをsubpageとしているので実際の記述は以下の通りです。

<a href=“<?php echo get_template_directory_uri(); ?>/subpage”>aへのリンク</a>

上記のようにget_template_directory_uri()を使ってリンクを貼れるんですが、esc_url(home_url(‘/‘))という関数を使ったほうがスマートな感じがするので結局僕はこっちを使いました。esc_url(home_url(‘/’))はesc_url()とhome_url()という関数の組み合わせなわけですが、esc_url()はWordPress Codexによれば「テキストや属性などのURLを無害化する時に用いる関数」だそうです。なんじゃそりゃ。とりあえず、怪しいURLは除外してくれるらしいです。なくても良いと思いますが、home_url()のデフォルトの使い方として紹介されているのでその通りにしています。home_url()はサイトのトップページのURLを返します。

というわけで、トップページからサブページa.phpへのリンクを貼るために最終的に記述したコードは以下です。

<a href=”<?php echo esc_url(home_url(‘/’));?>/subpage”>aへのリンク</a>