TomWorks

フリーランス 好きでIT学習しています。学んだITの事例や趣味のトピックなどを少しづ…

TomWorks

フリーランス 好きでIT学習しています。学んだITの事例や趣味のトピックなどを少しづつ記載します。 リモートでボランティアの仕事もしています。

Webサイトを開発してみる（入門編）ー最終章 まとめー

ー概要に戻るー 最終章 まとめ 「Webサイトを開発してみる（入門編）」 　を最後までお読み頂きありがとうございました。 副業のためにWebサイトを開発する・・・と簡単に言ってみても、そのために必要な技術や知識は多岐に渡りますね。自身のパソコン上に開発環境を用意したり、HTML、CSS、PHPなどのプログラミングの知識も必要です。Wordpressの基本的な理解も求められますし、レンタルサーバーの設定やドメイン名の取得もしなければなりません。 今回の投稿記事の全体を通

100
TomWorks

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

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

      TomWorks

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

        ー概要に戻るー 第6章【歯科クリニックのWebサイト】にWordPressのプラグインを追加する解説）【歯科クリニックのWebサイトの開発】の仕上げとしてWordPressのプラグインを２つ追加します。 1. WordPressのプラグイン「Breadcrumb NavXT」をインストールする 【歯科クリニックのWebサイト】にWordPressのプラグイン「Breadcrumb NavXT（訪問者に対し現在地へのパスを表示する「パンくずリスト」ナビゲーション）」をイン

        TomWorks

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

          ー第5章に戻るー 第5章 3.3 【歯科クリニックのWebサイト】の投稿記事（サンプル）を作り込む 解説）　【歯科クリニックのWebサイト】のサンプルコンテンツとして6つの「投稿記事」（温泉旅行、セミナー参加、花しょうぶ、インプラント専門医の認定、7月7日休診となります、6月5日と6日臨時休診のお知らせ）を作成します。1つのカテゴリーに2つの記事を配分します。 初期設定記事の Hello world! は不要なので削除します 1. 【歯科クリニックのWebサイト】の投稿記

          TomWorks

        Webサイトを開発してみる（入門編）ー最終章 まとめー

        TomWorks

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

          ー第5章に戻るー 第5章 2.3 【歯科クリニックのWebサイト】の固定ページ（サンプル）を作り込む解説）　【歯科クリニックのWebサイト】のサンプルコンテンツとして8つの「固定ページ」を作成します。フロントページ用に Home、投稿ページ用に 新着記事一覧、その他の固定ページとして６ページ（インプラント、定期検診、審美歯科、当院のご案内、矯正歯科、虫歯治療）を作成します。 1. 【歯科クリニックのWebサイト】固定ページ：フロントページ用 Home と投稿ページ用 新着

          TomWorks

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

          TomWorks

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

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

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 2.4 ④ tom-editor.css のソースコードと詳細 2.4 ④ tom-editor.css のソースコードと詳細　 解説） 【歯科クリニックのWebサイト】の WordPress 内にて記事作成の際、ブロックエディター機能を記載するオリジナルCSSプログラムを準備します。 以下が今回のオリジナルCSS プログラム「tom-editor.css」のプログラムソースです。 /*Tom Editor CSS*/html { fo

          TomWorks

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

          TomWorks

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

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

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 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.j

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 1.13 ⑩ functions.php のソースコードと詳細1.13 ⑩ functions.php のソースコードと詳細　 解説）　functions.php は今回作成する【歯科クリニックのWebサイト】にさまざまな機能を追加するプログラムです。 WordPressのオリジナルテーマ「Tom Works Dental」では、この functions.php で主に以下4つの要素を定義します。 １．標準機能（ページタイトル、html5対応

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 1.12 index.php のソースコードと詳細1.12 index.php のソースコードと詳細 解説）　ここでは第3章で作成した index.php を以下のように書き換えておきましょう。【歯科クリニックのWebサイト】では「新着記事一覧」を表示する際に起動します。 【歯科クリニックのWebサイト】では、トップページ以外の全てのページで表示される「パンくずリスト」（下図のヘッダー内の青線枠）の「新着記事一覧」をクリックすると動作します。基

          TomWorks

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

          TomWorks

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

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

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 1.10 ⑧ search.php のソースコードと詳細1.10 ⑧ search.php のソースコードと解説　 解説）　search.php はサイト画面上部のメニュー右にある（サイト内）検索にてキーワードを検索が行われた際、その検索結果を表示するプログラムです。 基本的には archive.php と同様の動作をします。（ヘッダー部、フッター部、サイドバーに加え、下図の青線で囲んだ部分（記事一覧領域）に検索されたキーワードを含む「投稿」記

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 1.9 ⑦ archive.php のソースコードと詳細 1.9 ⑦ archive.php のソースコードと解説　 解説）　archive.php はWordPress管理画面の投稿一覧で作成された「投稿」記事の一覧を表示するプログラムです。ここではサイドバー中段にあるカテゴリーのワードがクリックされた際に動作します。 動作した際は、ヘッダー部、フッター部、サイドバーに加え、下図の青線で囲んだ部分（記事一覧領域）にクリックされたカテゴリーのワ

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 1.8 ⑥ single.php のソースコードと詳細1.8 ⑥ single.php のソースコードと解説　 解説）　single.php はWordPressダッシュボードにて作成された「投稿」記事を表示するプログラムです。ここではトップページ、または投稿記事の一覧に表示されている記事がクリックされた際に動作します。 WordPressダッシュボードにて作成された「投稿」記事が選択された時に ヘッダー部、フッター部、サイドバーに加え、下図の

          TomWorks

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

          TomWorks

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

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

          TomWorks

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

          TomWorks