記事一覧
Webサイトを開発してみる(入門編)ー最終章 まとめー
ー概要に戻るー
最終章 まとめ
「Webサイトを開発してみる(入門編)」
を最後までお読み頂きありがとうございました。
副業のためにWebサイトを開発する・・・と簡単に言ってみても、そのために必要な技術や知識は多岐に渡りますね。自身のパソコン上に開発環境を用意したり、HTML、CSS、PHPなどのプログラミングの知識も必要です。Wordpressの基本的な理解も求められますし、レンタルサー
Webサイトを開発してみる(入門編)ー第7章ー
ー概要に戻るー
第7章 開発した【歯科クリニックのWebサイト】をレンタルサーバーにアップロードして公開する解説)開発した【歯科クリニックのWebサイト】をレンタルサーバー(Xserver)にアップロードしてインターネット上に公開します。独自ドメイン取得後にサブドメインを設定しアップロードする際にはWordPressのプラグイン「All-in-One WP Migration」を使用します。
Webサイトを開発してみる(入門編)ー第6章ー
ー概要に戻るー
第6章【歯科クリニックのWebサイト】にWordPressのプラグインを追加する解説)【歯科クリニックのWebサイトの開発】の仕上げとしてWordPressのプラグインを2つ追加します。
1. WordPressのプラグイン「Breadcrumb NavXT」をインストールする
【歯科クリニックのWebサイト】にWordPressのプラグイン「Breadcrumb NavXT
Webサイトを開発してみる(入門編)ー第5章3.3 ー
ー第5章に戻るー
第5章 3.3 【歯科クリニックのWebサイト】の投稿記事(サンプル)を作り込む
解説) 【歯科クリニックのWebサイト】のサンプルコンテンツとして6つの「投稿記事」(温泉旅行、セミナー参加、花しょうぶ、インプラント専門医の認定、7月7日休診となります、6月5日と6日臨時休診のお知らせ)を作成します。1つのカテゴリーに2つの記事を配分します。 初期設定記事の Hello wor
Webサイトを開発してみる(入門編)ー第5章2.3 ー
ー第5章に戻るー
第5章 2.3 【歯科クリニックのWebサイト】の固定ページ(サンプル)を作り込む解説) 【歯科クリニックのWebサイト】のサンプルコンテンツとして8つの「固定ページ」を作成します。フロントページ用に Home、投稿ページ用に 新着記事一覧、その他の固定ページとして6ページ(インプラント、定期検診、審美歯科、当院のご案内、矯正歯科、虫歯治療)を作成します。
1. 【歯科クリニ
Webサイトを開発してみる(入門編)ー第5章ー
ー概要に戻るー
第5章【歯科クリニックのWebサイト】の固定ページや投稿記事などのコンテンツを作り込む解説)前章までに【歯科クリニックのWebサイト】のオリジナルテーマ「Tom Works Dental」の基本プログラムを準備できました。この章では【歯科クリニックのWebサイト】のサンプルコンテンツとしてWordPress管理画面より固定ページ、投稿記事、カテゴリーやメニューなどを作り込みます。
Webサイトを開発してみる(入門編)ー第4章2.4 ー
ー第4章に戻るー
第4章 2.4 ④ tom-editor.css のソースコードと詳細
2.4 ④ tom-editor.css のソースコードと詳細
解説) 【歯科クリニックのWebサイト】の WordPress 内にて記事作成の際、ブロックエディター機能を記載するオリジナルCSSプログラムを準備します。
以下が今回のオリジナルCSS プログラム「tom-editor.css」のプログ
Webサイトを開発してみる(入門編)ー第4章2.3 ー
ー第4章に戻るー
第4章 2.3 ③ tom-custom.css のソースコードと詳細2.3 ③ tom-custom.css のソースコードと詳細
解説) 【歯科クリニックのWebサイト】の各ページの装飾は、Bootstrap5を基本としますが、補足或いは追加機能を付与するためにオリジナルCSSプログラムも準備します。
以下が今回のオリジナルCSS プログラム「tom-custom.c
Webサイトを開発してみる(入門編)ー第4章2.2 ー
ー第4章に戻るー
第4章 2.2 ① bootstrap.css ② bootstrap.min.css ⑤ bootstrap.bundle.js ⑥ bootstrap.bundle.min.js を準備する解説) Bootstrap5 の公式サイトから2つの CSS ファイル( ① bootstrap.css ② bootstrap.min.css )と2つの JS ファイル(⑤ boot
Webサイトを開発してみる(入門編)ー第4章1.13 ー
ー第4章に戻るー
第4章 1.13 ⑩ functions.php のソースコードと詳細1.13 ⑩ functions.php のソースコードと詳細
解説) functions.php は今回作成する【歯科クリニックのWebサイト】にさまざまな機能を追加するプログラムです。
WordPressのオリジナルテーマ「Tom Works Dental」では、この functions.php で
Webサイトを開発してみる(入門編)ー第4章1.12 ー
ー第4章に戻るー
第4章 1.12 index.php のソースコードと詳細1.12 index.php のソースコードと詳細
解説) ここでは第3章で作成した index.php を以下のように書き換えておきましょう。【歯科クリニックのWebサイト】では「新着記事一覧」を表示する際に起動します。
【歯科クリニックのWebサイト】では、トップページ以外の全てのページで表示される「パンくずリス
Webサイトを開発してみる(入門編)ー第4章1.11 ー
ー第4章に戻るー
第4章 1.11 ⑨ 404.php のソースコードと詳細1.11 ⑨ 404.php のソースコードと詳細
解説) 404.php はWordPressが正常に動作している場合は動作しませんが、何かエラーなどが発生し該当ページが見つからない無い場合に、はじめて動作するプログラムです。ここでは「404エラー(ページが見つかりません) 対象のページは移動もしくは削除された可能
Webサイトを開発してみる(入門編)ー第4章1.10 ー
ー第4章に戻るー
第4章 1.10 ⑧ search.php のソースコードと詳細1.10 ⑧ search.php のソースコードと解説
解説) search.php はサイト画面上部のメニュー右にある(サイト内)検索にてキーワードを検索が行われた際、その検索結果を表示するプログラムです。
基本的には archive.php と同様の動作をします。(ヘッダー部、フッター部、サイドバーに加
Webサイトを開発してみる(入門編)ー第4章1.9 ー
ー第4章に戻るー
第4章 1.9 ⑦ archive.php のソースコードと詳細
1.9 ⑦ archive.php のソースコードと解説
解説) archive.php はWordPress管理画面の投稿一覧で作成された「投稿」記事の一覧を表示するプログラムです。ここではサイドバー中段にあるカテゴリーのワードがクリックされた際に動作します。
動作した際は、ヘッダー部、フッター部、サイド
Webサイトを開発してみる(入門編)ー第4章1.8 ー
ー第4章に戻るー
第4章 1.8 ⑥ single.php のソースコードと詳細1.8 ⑥ single.php のソースコードと解説
解説) single.php はWordPressダッシュボードにて作成された「投稿」記事を表示するプログラムです。ここではトップページ、または投稿記事の一覧に表示されている記事がクリックされた際に動作します。
WordPressダッシュボードにて作成され
Webサイトを開発してみる(入門編)ー第4章1.7 ー
ー第4章に戻るー
第4章 1.7 ⑤ page.php のソースコードと詳細1.7 ⑤ page.php のソースコードと解説
解説) page.php はWordPressダッシュボードにて作成された「固定ページ」記事を表示するプログラムです。header.php、footer.php、sidebar.phpに設定された固定ページへのリンク(虫歯治療、矯正歯科、当院のご案内、審美歯科、定期