こんにちは、ikuxxと申します。

今回は、デザインの異なる複数の固定ページがあるようなサイトをワードプレス化する方法をまとめてみました。

以前ワードプレス化について書いた記事は「ドットインストール」の動画を見ながら実際にまとめたもので、

そちらで紹介されているブログ型のサイトのような、比較的簡単な作りのサイトでしたら、

その動画を見て学ぶだけでもある程度のものには対応が出来るようになりますし、

実際に、動画を見て手を動かしながらやり方を教えてもらえるので、とても分かりやすくて簡単で素晴らしいです。

ただ、そこからの応用となると、これがやはりなかなか難しい。

ドットインストールでは、デザインの異なる固定ページが多くあるような中小企業のサイトをワードプレス化する方法には触れてはいないので、

これまたインターネットでいろんなサイトを訪問し、自分なりに勉強していかなくてはいけないという。

今回は、内容をまとめるにあたり、いろいろなサイトを見つつ、

「はにわまん」さんのサイトの「歯医者さんのホームページ」を実際に自分で模写し、ファイルを分割してみました。

今回は、そのサイトを参考にしながら順番にWordPress化を進めていこうと思っていたのですが、

正直、内容を見てもさっぱり理解が出来なかったため、今回自分で学んでまとめたものを再度記事にしてみました。

HTMLサイトを → WordPress化する方法、手順

①まずはともあれファイルを用意

今回必要になるファイルは、

index.html(トップページ用)

clinic.html(医院紹介用)

service.html(診療案内用)

staff.html(院長・スタッフ紹介用)

access.html(アクセスページ用)

style.css

imageフォルダ(ここに画像がいくつか)

これらのファイルを1つのフォルダにまとめておく。

ここでの注意点は「style.css」はCSSフォルダなどには入れずに、他のphpファイルと同じ階層に置くという点。

そうするとこんな感じ。

②「style.css」にヘッダー情報を書き込む

まずは、今回自分で用意したファイルをWordPressのテーマに適用させるため「style.css」にヘッダー情報を書き込みます。

今回は歯医者さんのサイトなので、テーマ名を適当に「歯医者さん」にしてみました。

こうする事で、WordPressテーマが実際に適用されるようになります。

③index.phpを用意

「index.html」を新たにコピー(複製)して、ファイル名を「index.php」に変更

そして、今回別で必要となるファイルも新規で作っていく。

ワードプレスのテーマを作る場合に、基本的に毎度必要になるものは、毎度共通で使える部分の、

header.php

footer.php

functions.php

他にも必要であれば「sidebar.php」なども追加。

この他にも、もし「screenshot.png」という名前の画像が他のPHPファイルと同じフォルダ内にあれば、

「screenshot.png」が、こんな感じで、テーマのイメージとして適用されます。

そして、今回はいくつかデザインの異なった固定ページがあるので、

③で「index.html」をコピーして「index.php」を作ったように、

clinic.html → clinic.php
service.html → service.php
staff.html → staff.php
access.html → access.php

という風にファイル名を変更する。

固定ページにファイル名をつける際の注意点について

通常だと、固定ページのテンプレートには毎度「page.php」が適用されるのですが、

固定ページごとにデザインやレイアウトを変えたい時ってありますよね？

そんなときに使えるのが「カスタムテンプレート」というもの(カスタムテンプレートは「固定ページ」にのみ有効)

固定ページのファイル名は自分が分かりやすければ何でもOK。

もし、固定ページのデザイン、レイアウトが全て同じという事なら「page.php」を1つだけ用意すればOK。

カスタムテンプレート以外にも別のデザインが欲しいという場合は「任意の名前.php」もしくは「page-スラッグ名.php」というファイル名で作ってもOK。

今回僕は、後で管理画面の一覧で見やすくなるように、

clinic.html → page-clinic.php
service.html → page-service.php
staff.html → page-staff.php
access.html → page-access.php

という風にファイル名をつけてみました。

通常は「page-」は省いて、

clinic.php
service.php
staff.php
access.php

でもOK。

ファイル名を変更後、WordPressで確認をしてみると、

という風に表示され、管理画面からも固定ページの編集が出来るようになります。

④「index.php」のファイルを分割していく

「header.php」

「index.php」のヘッダー部分を切り取り「header.php」に貼り付け。

「index.php」の切り取ったヘッダー部分には、

「footer.php」

「index.php」のフッター部分を切り取り「footer.php」に貼り付け、

切り取った部分に、

⑤ファイル全体にCSSが適用されるように「header.php」を修正

「header.php」の、

※プラグインの「All in One SEO Pack」を入れる場合は、わざわざここを編集する必要はない。

⑥「functions.php」 メニューバー部分(固定ページ)

固定ページのメニューバー部分は、管理画面から追加や、カスタマイズが出来ると便利なので、

「functions.php」に、

を追加。

そして、「header.php」のメニュー部分を切り取り(「ul」から「li」部分)

切り取った部分に、

そして「header.php」に、

を必ず追加(これらがないと動かないプラグインが出てくる場合がある)

⑦「index.php(新規記事一覧部分)」

新着情報の日付部分(2012年08月01日)を

ですので、今回の僕の場合だと、

そして、次に

抜粋文の文字数を調整したい場合

「functions.php」に以下を記載。

⑧「footer.php」

「footer.php」の

Copyright 2018 Dental Clinic CO.,LTD All Rights Reserved. の2018の部分を

に変えれば、年が変わると同時に自動的にここも変わるようになる。

そして、BODYの閉じタグの手前に必ず、

そして、ロゴの画像部分には、

⑨メニューバー部分

今のままだとメニューバーの部分(固定ページ)が「サンプルページ」の1つのみなので、それぞれの固定ページを作り、

会社によっては、固定ページごとのデザインが異なる事もあるため、それぞれのデザインに沿ったテンプレートを割り当てる必要がある。

今回は、5つの固定ページが必要

トップページ

医院紹介

診療案内

院長・スタッフ紹介

アクセス

固定ページの作成はWordPress管理画面の「固定ページ」→「新規追加」から追加。

それぞれの固定ページのテンプレートのヘッダー、メニュー、フッター部分も「index.php」同様に変更。

⑩独自のデザインのページ(テンプレート)を、それぞれの固定ページに割り当てる方法

トップページ – index.php
医院紹介 – page-clinic.php
診療案内 – page-service.php
院長・スタッフ紹介 – page-staff.php
アクセス – page-access.php

テンプレートをそれぞれの固定ページに適用させる場合、それぞれのPHPファイルの先頭に、

を追加した後に、「固定ページ一覧」→「編集」→「ページ属性」→「テンプレート」で割り当てる

※テンプレートの名前をそれぞれファイルに追加しておかないと「ページ属性」にテンプレートの項目が表示されない。

※通常「デフォルトテンプレート」には「page.php」が割り当てられる。

⑪固定ページのURLを変更(必須ではない)

今のままだと固定ページのURLがWordPress側で勝手に決められたものになっているはずなので、

まずは、「設定」→「パーマリンク設定」→「投稿名」を選択し、編集ページからパーマリンクを変更する。

医院紹介 → http://***.com/clinic
診療案内 → http://***.com/service
院長・スタッフ紹介 → http://***.com/staff
アクセス → http://***.com/access

という感じ。

もしくは、はにわまん先生の言うように、プラグイン「Custom Permalinks」を使ってパーマリンクを変更するという方法もあるが、404エラーが表示され、ページが開けなくなることもある。

個人的には、むやみやたらとプラグインは入れたくないので、自分でパーマリンクを変更しています。

(プラグインを入れる事でページの表示が遅くなったり、エラーが出たりすると面倒。)

⑫※トップページをクリックした際に、固定ページではなくきちんとトップページに戻る設定方法

今の状態だとトップページをクリックした際に「トップページ」という「固定ページ」に飛ばされてしまうため、

メニューバーのURL設定を変更、

「外観」→「メニュー」カスタムリンクのURLを直接入力。

メニューバーの順番を入れ変える(並べ替える)場合も、ここでドラッグ&ドロップをする事で設定が可能。

最後にまとめ

今回の手順を簡単にまとめると、

基本的なファイル(HTML, CSSファイルなど)を用意

「style.css」にヘッダー情報を書き込みWordPressテーマとして適用させる

index.phpを用意し、ファイルを分割していく

ファイル全体にCSSが適用されるように「header.php」を修正

「index.php(新規記事一覧部分)」の設定(新着記事がなければここは無視してOK)

メニューバー部分は、固定ページのテンプレート作り、それぞれを固定ページに割り当てる

メニューバーの並び替えや設定リンクの設定は「外観」→「メニュー」のカスタムリンクから

全ての設定が終わったら、SEO対策のために、プラグインの「All in One SEO Pack」を入れておくといいでしょう。

そして、はにわまんさんの言う通り、最後に「Screaming Frog SEO Spider Tool」でURL構造と、リンク切れがないかをチェックして終わり。

今回の内容に関しては「ドットインストール」の動画を見ながらある程度の勉強をしておけば、すぐに対応が出来るものになるでしょう
、
それに加えて「Progate」などでPHPの基礎部分を学んでおくと「ドットインストール」の内容の理解がより深まります。

おすすめです。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール