Webサイトを開発してみる（入門編）ー概要ー
Webサイトを自作できる知識があると副業などに活用できますね。でも未経験から独学するのは意外と大変、簡単には知識を得られません。本投稿では初心者の方がWebサイトの開発を一通り体験できるよう解説します。サンプルとなる画像やプログラムソースも掲載しますので活用して下さい。
※本投稿は以下のブログサイトと連携しています：
第0章 解説
WordPressを使った【歯科クリニックのWebサイト】を事例とします。WordPressには有償・無償の「テーマ」がありますが、ここでは簡単なオリジナルテーマを自作します。携帯やタブレットでもきちんと表示できるレスポンシブなデザインを実現するためにCSS/JSで「Bootstrap5」（無償）を活用し自作CSSにて補足します。
第1章～第7章にて、Webサイト開発に必要な環境の準備からWordPressの導入と設定、オリジナルテーマのプログラムソース作成とコンテンツの登録、開発終了後にレンタルサーバー（Xserver）に独自ドメインを取得後、プログラムとコンテンツをアップロードし公開するまでの一連の手順を解説します。オリジナルテーマのプログラムとコンテンツはコピーしてお使いください。新規にWebサイトを開発する際の参考になれば幸いです。
第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章 1.3 ① header.php のソースコードと詳細
第4章 1.4 ② footer.php のソースコードと詳細
第4章 1.5 ③ front-page.php のソースコードと詳細
第4章 1.6 ④ sidebar.php のソースコードと詳細
第4章 1.7 ⑤ page.php のソースコードと詳細
第4章 1.8 ⑥ single.php のソースコードと詳細
第4章 1.9 ⑦ archive.php のソースコードと詳細
第4章 1.10 ⑧ search.php のソースコードと詳細
第4章 1.11 ⑨ 404.php のソースコードと詳細
第4章 1.12 index.php のソースコードと詳細
第4章 1.13 ⑩ functions.php のソースコードと詳細
第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 のソースコードと詳細
第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」を使用します。
最終章 まとめ
第4章で紹介したプログラムソース一式を一括ダウンロードできるようにしました。（有償：100円）よろしければご活用下さい。
いいなと思ったら応援しよう！
