前回の復習
本日の訓練内容
WordPressについて
現在世界中のWebサイトの約1/3がWordPressでつくられていると言われている。
コードを書かなくてもWebサイトの作成が可能。
WordPressのテーマとは
Appendix-4 WordPressテーマ作成入門
A4.1 はじめに
A4.1.2 概要
WordPressテーマファイル
(1) ファイル配置
(2) ファイル配置（例）
A4.1.2.1 テーマファイルに格納される主要ファイル
- 制御ファイル
- style.css
テーマ情報を記述 - functions.php
テーマの機能やショートコードを記述 - screenshot.png
テーマ選択画面で使用するサムネイル画像
- style.css
- ページ共通のテンプレートファイル（各ページで共通に使用される部品）
- header.php
ページ共通のヘッダーテンプレート - footer.php
ページ共通のフッターテンプレート - sideber.php
ページ共通のサイドバーテンプレート
- header.php
- ページ個別のテンプレートファイル（ぺーじの種類によって命名ルールあり）
- front-page.php
トップページ用テンプレート - page.php
固定ページ用テンプレート - single.php
記事用テンプレート - category.php
カテゴリーの一覧（アーカイブ）表示用テンプレート - author.php
投稿者ごとの一覧（アーカイブ）表示用テンプレート - index.php
ブログ記事の一覧（アーカイブ）表示用テンプレート - date.php
年間、月間の記事一覧（アーカイブ）表示用テンプレート） - tag.php
タグの記事一覧（アーカイブ）表示用テンプレート - 404.php
404（ページが存在しない）テンプレート - search.php
検索結果表示用テンプレート
- front-page.php
A4.1.2.2 テーマ情報（style.css）
style.cssの頭にテーマ情報をコメントとして記載することが原則となっている。
- Theme Name: テーマ名（必須）
英数半角・空白なし - Description: テーマの修正
- Author: テーマ作成者の名前
- Version: テーマのバージョン
テーマの改版履歴を確認できる版数を指定する。3つの数字で表すことが多い。
（大きな変更）.（機能追加）.（バグ修正） - Template: 親テーマ名
A4.1.2.3 テーマ機能（functions.php）
A4.1.2.4 サムネイル画像（screenshot.png）
A4.1.2.5 ページ個別テンプレート
表示するページの種類によってテンプレートのファイル名の決定ルールが異なり以下の順序でファイルが検索される。
- サイトフロントページ（トップページを表示）
- front-page.php
- （固定ページ表示ルールを適用）
- サイトフロントページ（投稿を表示）
- front-page.php
- home.php
- index.php
- 投稿ページ
投稿ページのテンプレートファイル検索順序は以下の通り。- single-投稿タイプ.php
- single.php
- singlar.php
- index.php
- 固定ページ
- カスタムテンプレートファイル名.php（ページ作成時の指定名称）
- page-スラッグ名.php
- page-固定ページID.php
- page.php
- singular.php
- index.php
- カテゴリーアーカイブインデックスページ
- タグアーカイブインデックスページ
A4.2 静的ページオリジナルテーマ作成
A4.2.1 事前準備
- テーマ作成の原型となるHTML/CSSなどのファイルを作成する。
- screenshot.pngを作成する。
- テーマ用フォルダ（theme-simple）を作成し必要ファイルをコピーする。
- テーマ情報（style.css）を作成する。
- テーマの機能（functions.php）を作成する。
- ページ共通ヘッダーテンプレート（header.php）を作成する。
- ページ共通フッターテンプレート（footer.php）を作成する。
- トップページテンプレート（index.php）を作成する。
- テーマファイル（theme-simple.zip）を作成する。
- WordPressダッシュボードでテーマのインストールと有効化を行う。
- 表示確認を行うための投稿ページ、固定ページを作成する。
- サイトの表示確認を行う。
A4.2.2 テーマ作成
(1) テーマ作成の原型となるHTML/CSSの作成
(2) サムネイル画像（screenshot.png）の作成
(6) ページ共通ヘッダーテンプレート（header.php）の作成
元となるHTMLファイルから各ページで共通に使用するヘッダー部分を切り出してheader.phpを作成する。
WordPressでは絶対パスを使用するため、自身の絶対パスを呼び出すコードを入力する
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<link href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" rel="icon">
(8) トップページテンプレート（index.php）の作成
元となるHTMLファイル（indet.html）からヘッダー部とフッター部を削除しindex.phpを作成する。
A4.3 シンプルオリジナルテーマ作成
<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>
<main>
...
</main>
<?php /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>A4.3.1 事前準備
オリジナルテーマ作成の手順は以下の通り。
- テーマ作成の原型となるHTML/CSSなどのファイルを作成する。
- screenshot.pngを作成する。
- テーマ用フォルダ（theme-simple）を作成し必要ファイルをコピーする。
- テーマ情報（style.css）を作成する。
- functions.phpを作成する。
- header.phpを作成する。
- footer.phpを作成する。
- index.phpを作成する。
- テーマファイル（theme-simple.zip）を作成する。
- WordPressダッシュボードでテーマのインストールと有効化を行う。
- 表示確認を行うための投稿ページ、固定ページを作成する。
- サイトの表示確認を行う。
メモ
-本日のアジェンダ-
1限目
学科 CMS構築基礎⑤
WordPressのテーマについて
2限目
学科 CMS構築基礎⑤
WordPressのテーマの役割について
3限目
学科 CMS構築基礎⑤
課題作成
4限目
学科 CMS構築基礎⑤
課題作成
5限目
学科 CMS構築基礎⑤
課題作成
本日のテーマ
WordPressのテーマの仕組みを確認しましょう。
WordPressについて
WordPress（ワードプレス）は、ブログやサイト（ホームページ）を作成できるソフトです。今や、世界中のサイトの約3分の1はWordPressで作られていると言われています。日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。
参考サイト
WordPressのテーマとは
WordPressのテーマは、Webサイトのデザインを決定するものですが、デザインに加えてサイト全体の構成や表示される機能にも影響します。単純に見た目のデザインだけで選ぶと操作がしにくかったりメンテナンスが大変だったりする場合もあります。
テーマの入手方法は、以下の種類があります。無料のテーマの中には、機能制限有りが無料で制限を解除する場合は、有料になる場合もあります。
- 無料のテーマ（WordPress公式テーマ）
- 無料のテーマ（WordPress非公式テーマ）
- 有料のテーマ
- 制作会社に発注
- 自分で作成
参考サイト
HTML・CSSからオリジナルテーマを作成
WordPressのオリジナルテーマを作成する手順を理解しましょう。
参考サイト
- 【テーマ自作】WordPress オリジナルテーマの作り方と基本 – WEBST8のブログ
- WordPressのテーマを自作する方法解説！必要なファイルとそれぞれでよく使う内容例ご紹介
- WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス
本日の課題
WordPressサイトに、本日学んだ内容を投稿ページにまとめてください。
第6回成績考査
第6回成績考査（11月12日）は、ポートフォリオとします。Web版ポートフォリオまたは紙版ポートフォリオを提出してください。また、11月14日にプレゼンテーション訓練として「就職活動の取り組み」というテーマでの発表会を予定しています。ポートフォリオの説明や就職活動状況などを発表して頂きます。
