学科 CMS構築基礎⑩

前回の復習

本日の訓練内容

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

テーマのカスタマイズについて

A.4.5 テーマのカスタマイズ

テーマを直す

【外観】→【テーマファイルエディタ】(テーマを直接編集することは推奨されない/サイトの破損ほか親テーマの更新で変更が消える)

  1. テーマが提供するカスタマイズ機能でのカスタマイズ
  2. プラグインを利用したカスタマイズ
  3. 追加CSSを利用したカスタマイズ
  4. 子テーマを利用したカスタマイズ

追加CSS

  • 検証ツールで該当箇所のCSSを作成する
  • 【テーマ】→【カスタマイズ】→【追加CSS】にコピー

想定していない部分に変更が適用される場合があるので適用後はいくつかページをチェックする。

特定ページの特定コンテンツのみに追加CSSを適用したい場合

  • WordPressのページエディタ→【編集】タブ→【追加CSSクラス】で特定のブロックにのみ適用されるクラス名をつけることができる。

子テーマを作成する

おすすめテーマ【フカサワ】

  • 親テーマ(元のテーマファイル)をDLないし作成する
  • テーマファイルはユーザーのほかテーマ作成者が作成することも多い。
  • 子テーマファイルのテーマ情報にはテーマ名やバージョン情報のほか【Template: テンプレート名】の記載が必要

A4.5 テーマのカスタマイズ

A4.5.1 カスタマイズの種類

A4.6 子テーマの作成

A4.6.1 事前準備
A.4.6.2 テーマ作成
(1) 親テーマの提供サイトからテーマファイルをダウンロード
(2) カスタマイズ部分を特定
(3) サムネイル画像(screenshot.png)を作成
(4) 子テーマ用フォルダを作成と必要ファイルのコピー
(5) テーマ情報(style.css)の作成

Template: (テンプレート名) の入力が必要

(6) テーマの機能(function.php)の作成

親テーマのstyle.cssを読み込んだのちに子テーマのstyle.cssを読み込む

(7) 変更を行うテンプレートファイルの修正

変更を行うテンプレートファイルを親テーマから取得して必要部分を修正する。今回のカスタマイズではテーマ共通テンプレート(header.php)を修正する。

get_template_directory(現在のテーマまたは子テーマを使用している場合親テーマから呼び出し)

get_stylesheet_directory()(現在のテーマまたは子テーマのスタイルシートから呼び出し)

親テーマと子テーマを両方インストールし、子テーマを有効化する。

WordPressは子テーマの記述を優先して適用し、足りない部分を親テーマから適用するためTemplateの記述が必要。

メモ

-本日のアジェンダ-

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

1限目
学科 CMS構築基礎⑩
テーマのカスタマイズについて

2限目
学科 CMS構築基礎⑩
子テーマを使用したカスタマイズについて

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

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

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

本日のテーマ

WordPressのテーマのカスタマイズを理解しましょう。

テーマのカスタマイズについて

テーマのカスタマイズを行うには、以下の方法があります。テーマファイルを直接編集することも可能ですが、テーマのバージョンアップに対応できなくなりますので推奨できません。

  1. テーマが提供するカスタマイズ機能でのカスタマイズ
  2. プラグインを利用したカスタマイズ
  3. 追加 CSS を利用したカスタマイズ
  4. 子テーマを利用したカスタマイズ
  5. カスタマイズをあきらめましょう!(他のテーマを探すかオリジナルテーマを作成することを検討しましょう)

参考サイト

子テーマを使用したカスタマイズについて

テーマのカスタマイズには、子テーマを使用したカスタマイズが有効です。子テーマの作成方法を理解しておきましょう。

参考サイト

本日の課題

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

第6回成績考査

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