【歯科クリニックのWebサイト開発】

解説）WordPressを使った【歯科クリニックのWebサイト】開発事例を紹介します。WordPressのテーマにはオリジナルテーマを自作します。レスポンシブを実現し安定したデザインとするためCSS/JSには主にBootstrap5を活用し自作CSSにて補足します。

完成した【歯科クリニックのWebサイト】はこちら→

https://dentalclinic.tomworks.site

第1章～第7章にて、Webサイト開発に必要な環境の準備からWordPressの導入と設定、オリジナルテーマのプログラムソース作成とコンテンツの登録、開発終了後にレンタルサーバー（Xserver）に独自ドメインを取得後、プログラムとコンテンツをアップロードし公開するまでの一連の手順を解説します。オリジナルテーマのプログラムとコンテンツはコピーしてお使いください。新規にWebサイトを開発する際の参考になれば幸いです。

リンク

第1章【歯科クリニックのWebサイト開発】の開発環境を準備する
解説）【歯科クリニックのWebサイト開発】をするために、まず自分のパソコン上にWebサイトの開発環境を準備します。開発環境には一般的にXAMPPやMAMPなどがありますが、今回は最近使われるようになってきたLocal（旧名はLocal by Flywheel）を使用します。LocalはWordPressのインストールが簡単にでき使い勝手も良いのでお勧めです。この章ではWordPressの初期設定までを行います。

第1章【歯科クリニックのWebサイト開発】の開発環境を準備する

解説）【歯科クリニックのWebサイト開発】をするために、まず自分のパソコン上にWebサイトの開発環境を準備します。開発環境には一般的にXAMPPやMAMPなどがありますが、今回は最近使われるようになってきたLocal（旧名はLocal by Flywheel）を使用します。LocalはWordPressのインストールが簡単にでき使い勝手も良いのでお勧めです。この章ではWordPressの初期設定までを行います。

第2章【歯科クリニックのWebサイト開発】WordPressのその他設定をする
解説）第1章では【歯科クリニックのWebサイト開発】を行うために自分のパソコン上に開発環境Localをインストールし初期サイトの生成、WordPressの初期設定を行いました。ここではWordPressのその他設定をします。

第3章【歯科クリニックのWebサイト開発】オリジナルテーマ「Tom Works Dental」の新設
解説）【歯科クリニックのWebサイト開発】で使用するWordPressのオリジナルテーマ「Tom Works Dental」を新設します。

第4章【歯科クリニックのWebサイト開発】オリジナルテーマ「Tom Works Dental」を作り込む
解説）ここでは、前章にて作成したオリジナルテーマ「Tom Works Dental」を保存する「TomWorksDental」フォルダ直下にテーマで必要なphpの基本プログラム、CSS /JSプログラムと画像を準備します。CSS/JS は Bootstrap5 を基本としCSS は自作プログラムを追加します。

※第4章の補足ページ一覧：

第4章 2.2 ① bootstrap.css ② bootstrap.min.css ⑤ bootstrap.bundle.js ⑥ bootstrap.bundle.min.js を準備する
 第4章 2.3 ③ tom-custom.css のソースコードと詳細
 第4章 2.4 ④ tom-editor.css のソースコードと詳細

※第4章でご紹介したプログラムソース一式をnote上にて一括ダウンロードできるようにしました。（有償：100円）よろしければご活用下さい

→noteでの「最終章まとめ」

第5章【歯科クリニックのWebサイト】の固定ページや投稿記事などのコンテンツを作り込む
解説）前章までに【歯科クリニックのWebサイト】のオリジナルテーマ「Tom Works Dental」の基本プログラムを準備できました。この章では【歯科クリニックのWebサイト】のサンプルコンテンツとしてWordPress管理画面より固定ページ、投稿記事、カテゴリーやメニューなどを作り込みます。

第5章【歯科クリニックのWebサイト】の固定ページや投稿記事などのコンテンツを作り込む

解説）前章までに【歯科クリニックのWebサイト】のオリジナルテーマ「Tom Works Dental」の基本プログラムを準備できました。この章では【歯科クリニックのWebサイト】のサンプルコンテンツとしてWordPress管理画面より固定ページ、投稿記事、カテゴリーやメニューなどを作り込みます。

※第5章の補足ページ一覧：

第5章 2.3 【歯科クリニックのWebサイト】の固定ページ（サンプル）を作り込む
 第5章 3.3 【歯科クリニックのWebサイト】の投稿記事（サンプル）を作り込む

第6章【歯科クリニックのWebサイト】にWordPressのプラグインを追加する
解説）【歯科クリニックのWebサイトの開発】の仕上げとしてWordPressのプラグインを２つ追加します。

第7章開発した【歯科クリニックのWebサイト】をレンタルサーバーにアップロードして公開する
解説）開発した【歯科クリニックのWebサイト】をレンタルサーバー（Xserver）にアップロードしてインターネット上に公開します。独自ドメイン取得後にサブドメインを設定し、アップロードする際にはWordPressのプラグイン「All-in-One WP Migration」を使用します。