【第3回 あれ？簡単すぎる】 "WordPress化"の工程解説！　投資家のFIREへの旅路 第212回

WordPress化の第3回です。
前回までの内容はこちら！

第一回では、リンクの書き換えを行い、ひとまずWordPress上でWEBサイトが観られるようにしました。

第二回では、index.phpを、パーツ分けをして使い回せるようにしました。

今回は、WEBサイトを構成する、トップページ以外のページの設定の仕方について解説します！

では始めて行きましょう！

【簡単すぎるWordPress化】 
⑪　固定ページ
⑫　パーマリンク
⑬　スラッグ

固定ページとは、about、company、contact などといったトップページからリンクされる別ページを作る際に使用します。

管理画面→固定ページ→新規追加
と、進むとこの画面になります。

右のパーマリンクをクリック！
すると、このように開きます。

URlスラッグというところに、作りたいページの名前を入力します！
例としてcontactページを作るための「contact」の文字を入れます。

そうすると、
パーマリンクというものが作られます。つまり、ページのURLが設定されたということです。

そして、今回入力した「contact」の部分をスラッグと呼びます。

つまり、
contactページ用のurlとして、http://○○○○/contact/　が設定されたということです。

このようにして、まずは、作りたいページ用のパーマリンク（URL）を取得します。
URLは、スラッグという自由に設定できる箇所があるので、ここに作るページのワードを入れましょう。

【簡単すぎるWordPress化】 
⑭　page-{slug}.php

パーマリンクの設定で、ページのURLを取得したら、そのURLと、表示させたいページを紐付ける必要があります。

その際に、page-{slug}.php というファイルを使用します。

例では、contactページを表示させるために
パーリンクのスラッグで「contact」の文字列を使用しました。

この場合でいくと、contactのページのhtmlファイルの名前を
page-contact.php　
と、変更しましょう！

そうすると、contactページ用のhtmlファイルの内容が表示されます！

つまり、
パーマリンクのスラッグ部分の名前と、
表示したいファイルの名前を同じにすると、
リンク先として表示されるようになります。

【簡単すぎるWordPress化】 
⑮　リンクをパーマリンクに変更

次は、contactページへのリンクのコードを、変更します。

<a href="/index.php/contact"> contact </a>

ナビの部分などに別ページへリンクを設定すると思いますが、その部分の記述えお変更していきます。

【テンプレート階層】

 WordPressには、さまざまなページを表示するための指定のファイル名が存在します。

それをテンプレート階層と呼ぶのですが、
正直ややこしいんです！！

まずは、先程取り上げた
page-slug.phpを使って、表示させたいページが表示できるように設定しましょう。

先ほどの例で行くと
WordPressの動きとしては
固定ページのスラッグが contactであった場合、WordPressはpage-contact.php を探して表示しています。

このように探して表示するファイルには優先順位が予め設定されています。

page-slug.phpは、その優先順位が高いファイルなので、ひとまず他のファイルは置いといて
このファイルを覚えてしまいましょう！

使っていくうちに WordPressの仕組みの理解が深まるので
順次テンプレート階層を学ぶ方が良いです！

【まとめ】

今回は、パーマリンク、スラッグの設定から
page.slug.phpへの命名変更を行いました。

これで、一通りのhtmlで書いたWEBページが WordPress上で表示される状態になりました。

ここからは、 WordPressのプラグインを利用したり、投稿機能を使ってブログ記事や、ニュース記事をつくり、それを表示したい箇所に表示させるなどの処理が可能です！

奥が深ーいのが WordPressです！

まずは、自作のWEBサイトを移行することができれば完了としましょう！

私もこれからさらに深掘りして記事にしていきたいと思います！