TomWorks

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

TomWorks

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

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

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

TomWorks

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

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

      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.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サイトを開発してみる（入門編）ー第5章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

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

          ー第4章に戻るー 第4章 1.6 ④ sidebar.php のソースコードと詳細1.6 ④ sidebar.php のソースコードと解説　 解説）　表示されるサイト画面のサイド側で共有に使用されるプログラムです。 ここでは左側にサイドメニュー（下図の赤線）を表示します。左メニュー上段に6つの「固定ページ」を表示する Side Menu（下図の緑線）、左メニュー中段に3つのカテゴリーを表示する Side Menu2 （下図の青線）、左メニュー下段に第6章の２でインストー

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 1.5 ③ front-page.php のソースコードと詳細1.5 ③ front-page.php のソースコードと解説　 解説）　front-page.php はトップページを専用に表示するプログラムです。このプログラムを準備することでトップページのみの工夫をすることができ独自の表現ができます Webサイトのトップページが表示された時にヘッダー部とフッター部に加え、下図の赤線で囲んだ部分（コンテンツ領域）を表示します。（front-pag

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 1.4 ② footer.php のソースコードと詳細1.4 ② footer.php のソースコードと解説　 解説）　footer.php は表示されるサイト画面下部で共有に使用されるプログラムです。ここでは画面上部と同じメニューとCopyrightの表示を行います。 下図の赤線で囲んだ部分（フッター部）を表示します。 以下が今回のプログラムソースです。 <div class="text-center p-3 navbar-dark bg

          TomWorks

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

          TomWorks

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

          ー第4章に戻るー 第4章 1.3 ① header.php のソースコードと詳細1.3 ① header.php のソースコードと解説　 解説）　header.php は表示されるサイト画面上部で共有に使用されるプログラムです。ここでは歯科のロゴ、及びメニューと（サイト内）検索の表示を行います。 下図の赤線で囲んだ部分（ヘッダー部）を表示します。 以下が今回のプログラムソースです。 <!DOCTYPE html><html <?php language_attrib

          TomWorks

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

          TomWorks