Webサイトを開発してみる（入門編）ー第4章ー

ー概要に戻るー

第4章【歯科クリニックのWebサイト開発】オリジナルテーマ「Tom Works Dental」を作り込む

解説）ここでは、前章にて作成したオリジナルテーマ「Tom Works Dental」を保存する「TomWorksDental」フォルダ 直下にテーマで必要なphpの基本プログラム、CSS /JSプログラムと画像 を準備します。CSS/JS は Bootstrap5 を基本としCSS は自作プログラムを追加します。

第4章の1：オリジナルテーマ「Tom Works Dental」のphp基本プログラムを用意する

TomWorksDental フォルダ直下に、オリジナルテーマ「Tom Works Dental」のphp基本プログラムを用意します。（同様に css と js フォルダ、画像用の img フォルダも作成しておきましょう。）ここでは、まずphpの基本プログラムの解説をします。

1.1 オリジナルテーマ「Tom Works Dental」のphp基本プログラムは以下の10プログラムになります。（TomWorksDental フォルダ直下にあり、前章で用意した3つの最小コンテンツ（phpプログラム index.php、画像 screenshot.png、cssプログラムstyle.css）を除く、グレーカラーの全phpプログラムです。）

1.2 ここで新設するphp基本プログラムは10本です。
（ここではフォルダ内の表示順に一覧します、以下の解説では丸番号順に進めます。）

⑨404.php：
⑦archive.php：
②footer.php：
③front-page.php：
⑩functions.php：
①header.php：
⑤page.php：
⑧search.php：
④sidebar.php：
⑥single.php：

1.3 ① header.php のソースコードと詳細
解説）　表示されるサイト画面上部で共有に使用されるプログラムです。ここでは歯科のロゴ、及びメニューと（サイト内）検索の表示を行います。

1.4 ② footer.php のソースコードと詳細
解説）　表示されるサイト画面下部で共有に使用されるプログラムです。ここでは画面上部と同じメニューとCopyrightの表示を行います。

1.5 ③ front-page.php のソースコードと詳細
解説）　トップページを専用に表示するプログラムです。このプログラムを準備することでトップページのみの工夫をすることができ独自の表現ができます。

1.6 ④ sidebar.php のソースコードと詳細
解説）　表示されるサイト画面のサイド側で共有に使用されるプログラムです。

1.7 ⑤ page.php のソースコードと詳細
解説）　WordPressダッシュボードにて作成された「固定ページ」記事を表示するプログラムです。header.php、footer.php、sidebar.phpに設定された固定ページへのリンク（虫歯治療、矯正歯科、当院のご案内、審美歯科、定期検診、インプラント）がクリックされた際に動作します。

1.8 ⑥ single.php のソースコードと詳細
解説）　WordPressダッシュボードにて作成された「投稿」記事を表示するプログラムです。ここではトップページ、または投稿記事の一覧に表示されている記事がクリックされた際に動作します。

1.9 ⑦ archive.php のソースコードと詳細
解説）　WordPress管理画面の投稿一覧で作成された「投稿」記事の一覧を表示するプログラムです。ここではサイドバー中段にあるカテゴリーのワードがクリックされた際に動作します。

1.10 ⑧ search.php のソースコードと詳細
解説）　サイト画面上部のメニュー右にある（サイト内）検索にてキーワードを検索が行われた際、その検索結果を表示するプログラムです。

1.11 ⑨ 404.php のソースコードと詳細
解説）　WordPressが正常に動作している場合は動作しませんが、何かエラーなどが発生し該当ページが見つからない無い場合に、はじめて動作するプログラムです。ここでは「404エラー（ページが見つかりません）　対象のページは移動もしくは削除された可能性があります。　メニュー右の（サイト内）検索、もしくはトップページよりお探しください。」と表示します。

1.12 index.php のソースコードと詳細
解説）　ここでは追加作業として第3章で作成した index.php を以下のように書き換えておきましょう。【歯科クリニックのWebサイト】では「新着記事一覧」を表示する際に起動します。

1.13 ⑩ functions.php のソースコードと詳細
解説）　今回作成する【歯科クリニックのWebサイト】にいろいろな機能を追加するプログラムです。

第4章の2：オリジナルテーマ「Tom Works Dental」の CSS/JS プログラムを用意する

TomWorksDental フォルダ直下に css と js フォルダを作成します。オリジナルテーマ「Tom Works Dental」の CSS と JS プログラムを css と js フォルダ下に用意します。

2.1 以下に CSS と JS プログラムの解説をします。

CSS プログラム：オリジナルテーマ「Tom Works Dental」の CSS プログラムは以下の4プログラム( Bootstrap5 の CSS ファイル２種、自作の CSS プログラム2種）になります。

①bootstrap.css：
Bootstrap5 の公式サイトからダウンロードします。実際に使用するのは ② bootstrap.min.css ですが、後で確認などチェックができるように ① bootstrap.css を用意します。

②bootstrap.min.css：
Bootstrap5 の公式サイトからダウンロードします。こちらが実際に使用されます。

③tom-custom.css：
【歯科クリニックのWebサイト】の各ページの装飾は、Bootstrap5 を基本としますが、補足或いは追加機能を付与するためにオリジナルCSSプログラムも準備します。

④tom-editor.css：
【歯科クリニックのWebサイト】の WordPress 内にて記事作成の際、ブロックエディター機能を記載するオリジナルCSSプログラムを準備します。

JS プログラム：オリジナルテーマ「Tom Works Dental」の JS プログラムは以下の2プログラム( Bootstrap5 の JS ファイル２種）になります。

⑤bootstrap.bundle.js：
Bootstrap5 の公式サイトからダウンロードします。実際に使用するのは ⑥ bootstrap.bundle.min.js ですが、後で確認などチェックができるように ⑤ bootstrap.bundle.js を用意します。

⑥bootstrap.bundle.min.js：
Bootstrap5 の公式サイトからダウンロードします。こちらが実際に使用されます。

2.2 ① bootstrap.css ② bootstrap.min.css ⑤ bootstrap.bundle.js ⑥ bootstrap.bundle.min.js を準備する
解説） Bootstrap5 の公式サイトから２つの CSS ファイル（ ① bootstrap.css ② bootstrap.min.css ）と２つの JS ファイル（⑤ bootstrap.bundle.js ⑥ bootstrap.bundle.min.js）をダウンロードして準備します。　

2.3 ③ tom-custom.css のソースコードと詳細
解説）　【歯科クリニックのWebサイト】の各ページの装飾は、Bootstrap5 を基本としますが、補足或いは追加機能を付与するためにオリジナルCSSプログラムも準備します。

2.4 ④ tom-editor.css のソースコードと詳細
解説） 【歯科クリニックのWebサイト】の WordPress 内にて記事作成の際、ブロックエディター機能を記載するオリジナルCSSプログラムを準備します。　

第4章の3：オリジナルテーマ「Tom Works Dental」のimgファイルを用意する

TomWorksDental フォルダ直下に img フォルダを作成します。オリジナルテーマ「Tom Works Dental」の img ファイルを img フォルダ下に用意します。以下に img ファイルの解説をします。

以下9つのサンプル画像をimg フォルダ直下に用意します。

3-1 サンプル画像 dental-logo.png 【歯科クリニックのWebサイト】のロゴ画像です。
（画像を右クリックにて「名前を付けて画像を保存」を選択し保存後に画像名を修正してお使い下さい。）

3-2 サンプル画像 TelNumber.png 【歯科クリニックのWebサイト】の上部に画像にて電話番号を表示しておきましょう。（画像を右クリックにて「名前を付けて画像を保存」を選択し保存後に画像名を修正してお使い下さい。）

3-3 サンプル画像 top1.jpg, top2.jpg, top3.jpg 【歯科クリニックのWebサイト】のトップ画面で3枚の画像が順次表示されるようにしましょう。
（それぞれの画像を右クリックにて「名前を付けて画像を保存」を選択し保存後に画像名を修正してお使い下さい。）

サンプル画像 top1.jpg

サンプル画像 top2.jpg

サンプル画像 top3.jpg

3-4 サンプル画像 new.png, update.png 【歯科クリニックのWebサイト】で投稿記事を作成した際、「最初に作成した日付」（new.png）、「更新した日付」（update.png）を表示する画像です。
（それぞれの画像を右クリックにて「名前を付けて画像を保存」を選択し保存後に画像名を修正してお使い下さい。）

サンプル画像 new.png

サンプル画像 update.png

3-5 サンプル画像 dummy-image.png, dummy-image_lg.png 【歯科クリニックのWebサイト】の投稿記事にてサムネイル画像が定義されなかった際に表示される画像です。小さいサイズ（dummy-image.png）と大きいサイズ（dummy-image_lg.png）のものを用意しておきます。
（それぞれの画像を右クリックにて「名前を付けて画像を保存」を選択し保存後に画像名を修正してお使い下さい。）

サンプル画像 dummy-image.png

サンプル画像 dummy-image_lg.png

第4章の4：この時点での【歯科クリニックのWebサイト】を確認する

解説） 以上により【歯科クリニックのWebサイト開発】オリジナルテーマ「Tom Works Dental」の基本プログラムの作り込みが完了しました。この時点でのWebサイトを以下に確認してみましょう。

4-1 Local（開発環境）画面に戻り右上の「Start site」をクリックして起動し、その下部にある「Open site」をクリックしWebサイトを立ち上げます。

4-2 以下のサイトが立ち上がり、オリジナルテーマ「Tom Works Dental」の基本プログラムが正常に稼働したこと、及び【歯科クリニックのWebサイト】が正常に起動したことが確認できました。