学科 CMS構築基礎⑦

訓練日誌

2022.10.18

目次

前回の復習
本日の訓練内容

前回の復習

本日の訓練内容

特殊文字・絵文字コード表 | HTML-CSS 入門講座 | 情報デザイン工房濱屋

A4.4 ノート風オリジナルテーマ作成

A4.4.1 事前準備

wp-theme-note
- html（作成するページの HTML ベースファイル群）
  - css（CSS ファイル格納フォルダ）
    - style.css（CSS ファイル）
  - fonts（フォント格納フォルダ）
    - KleeOne-Regular.otf（フォントファイル）
    - KleeOne-SemiBold.otf（フォントファイル）
  - index.html（トップ（表紙）ページ HTML ファイル）
  - jirou.html（ノートページ HTML ファイル）
- theme-note（テーマファイルの完成版）
  - css（CSS ファイル格納フォルダ）
    - style.css（CSS ファイル）
  - fonts（フォント格納フォルダ）
    - KleeOne-Regular.otf（フォントファイル）
    - KleeOne-SemiBold.otf（フォントファイル）
  - footer.php（ページ共通フッターテンプレートファイル）
  - functions.php（テーマ機能ファイルファイル）
  - header.php（ページ共通ヘッダーテンプレートファイル）
  - index.php（トップページテンプレートファイル）
  - page.php（固定ページテンプレートファイル）
  - screenshot.png（サムネイル画像ファイル）
  - single.php（投稿ページテンプレートファイル）
  - style.css（テーマ情報ファイル）
- screenshot.png（サムネイル画像ファイル）
- theme-note.zip（テーマファイル）

今回のテーマはフォント格納フォルダが存在する。

テーマ作成の原型となる HTML / CSS などのファイルを作成します。
サムネイル画像（screenshot.png）ファイルを作成します。
テーマ用フォルダ（theme-note）を作成し必要ファイルをコピーします。
テーマ情報（style.css）ファイルを作成します。
テーマの機能（functions.php）ファイルを作成します。
ページ共通ヘッダーテンプレート（header.php）ファイルを作成します。
ページ共通フッターテンプレート（footer.php）ファイルを作成します。
トップページテンプレート（index.php）ファイルを作成します。
固定ページテンプレート（page.php）ファイルを作成します。
投稿ページテンプレート（single.php）ファイルを作成します。
テーマファイル（theme-note.zip）を作成します。
WordPress ダッシュボードでテーマのインストールと有効化を行います。
表示確認を行うための投稿ページ、固定ページを作成します。
サイトの表示確認を行います。

A4.4.2 テーマ作成

(1) テーマ作成の原型となるHTML/CSSの作成

メモ

-本日のアジェンダ-

学科 CMS構築基礎⑦ | DEAUアカデミー WEBデザイナー養成科（短時間）A教室

1限目
学科 CMS構築基礎⑦
テーマのデザインを考えましょう

2限目
学科 CMS構築基礎⑦
テーマの構造を考えましょう

3限目
学科 CMS構築基礎⑦
課題作成

4限目
学科 CMS構築基礎⑦
課題作成

5限目
学科 CMS構築基礎⑦
課題作成

本日のテーマ

一般的なテーマの構造を理解しましょう。（その1）

WordPressテーマの基本機能とは

基本機能を持ったWorkPressテーマを作成するためには、以下の機能を実装する必要があります。

投稿一覧の表示
投稿ページの表示
固定ページの表示
メニューの表示

HTML・CSSからオリジナルテーマを作成

WordPressのオリジナルテーマを作成する手順を理解しましょう。

参考サイト

本日の課題

WordPressサイトに、本日学んだ内容を投稿ページにまとめてください。

第6回成績考査

第6回成績考査（11月12日）は、ポートフォリオとします。Web版ポートフォリオまたは紙版ポートフォリオを提出してください。また、11月14日にプレゼンテーション訓練として「就職活動の取り組み」というテーマでの発表会を予定しています。ポートフォリオの説明や就職活動状況などを発表して頂きます。