WP テーマを選びインストールする
テーマはサイトのデザインです。様々なデザインから好きなものを選ぶことができます。
- 外観→テーマ
- 新規追加
- 好きなテーマをインストールする
- 好きなテーマをインストールする
- 利用するテーマの子テーマが必要
不要なテーマを削除する
- 既存のテーマの1つは残す
- 不要なテーマは削除する
既存のテーマのうち１つは必要
インストールした時に既にあるテーマ
- Twenty Twenty-One
- Twenty Twenty-Two
- Twenty Twenty-Three
子テーマは必要
テーマは時折アップデートします。好みのスタイルにカスタマイズした後にアップデートしてしまうと、記述した内容が消えてしまうかもしれません。「子テーマ」に記述した内容は上書きされません。
- テーマはアップデートすることがある
- 子テーマは親テーマの機能やスタイルを継承する
- 変えたい部分だけ子テーマに記述する
- 子テーマはアップデートにより記述した内容は消えない
テーマの選択で子テーマを有効化し、子テーマのテーマファイルエディッタに記述します。
子テーマを作る場所
WordPressのインストールによってできたフォルダで、wp-content にテーマディレクトリ（フォルダの階層）があります。
- wp-content/themes ディレクトリ下に子テーマディレクトリを作る
| 1.子テーマのディレクトリを作る（themesの下、親テーマと同じ階層にフォルダを作成） 2.フォルダに子テーマの名前を付ける（名前の最後に -child を付けることを推奨） 3.子テーマのスタイルシートを作成（style.css や functions.php） 4.親テーマと子テーマを関連付ける |
子テーマを作るためには、以上の作業をしますが大変です。
そこで、子テーマを作るプラグインを使います。プラグインは、FTPソフトがなくても、必要な階層に子テーマのファイルを簡単に作成できます。
子テーマをプラグインで簡単に作る
style.css や functions.php だけではなく、header.php なども簡単に作成できます。
Child Theme Configuratorのファイル生成
子テーマを作っていない場合は、下のリンクをご参考下さい。
オススメのテーマ「Cocoon」
多くの人が利用しているテーマです。Cocoonのサイトでご自身のPCにダウンロードして、サイトにアップロードします。
- 親テーマ
- 子テーマ
両方をダウンロードします。
テーマと子テーマの役割
| テーマ | バージョンアップする |
| 子テーマ | 自分の好みに設定する |
通常、子テーマは自分で作る必要がありますが、cocoonの場合は子テーマも配布されています。
テーマ「Cocoon」をアップロードする手順
- 外観→テーマ
- 新規追加
- テーマのアップロードをクリック
- 親テーマのファイルを選択→今すぐインストール
上記と同じように子テーマもインストールし、子テーマを有効化します。
インストール終了→有効化をクリック
テーマの不具合によりデフォルトのテーマに変更の通知
- テーマの不具合が起こることは少ない
- 不具合はアップデート時に怒る場合がある
下の画像のように、デフォルトのテーマに変更することが表示され、自動でデフォルトに代わります。その場合、利用していたテーマを再インストールすれば、元のテーマに戻すことができます。
テーマのカスタマイズ
見出しやフォントなどテーマのスタイルを変更する手順を下のリンクにまとめています。ご参考下さい。
テーマをカスタマイズ（CSSを追加）する手順
テーマのCSSを追加する場所は2つあります。どちらに記述しても構いません。
- ①外観→カスタマイズ→追加CSS
- ②外観→テーマファイルエディッタ→子テーマのスタイルシート
「カスタマイズ→追加CSS」の方は変更した部分を確認しながらCSSを追加できるのでオススメです。
①外観→カスタマイズ→追加CSS
②外観→テーマファイルエディッタ→子テーマのスタイルシート
「①追加CSS」と「②子テーマのスタイルシート」の優先順位
- ①追加CSS
- ②子テーマのスタイルシート
- 親テーマ
追加CSSに記述したCSSが、子テーマや親テーマよりも優先されます。
CSSの書き方
- 変更する部分のクラス名を知る
- 変更してみる
- CSSを書き加える
| h2 | 見出しタグ |
| article | クラス名（ドット） |
タグのCSSの書き方
- プロパティ+値
.article h2, .article h3, .article h4, .article h5, .article h6 {
border-image: linear-gradient(to right,#967cff,#ff58cc) 3%;
font-family: serif;
padding: 0 0.5em 0.5em 2.5em;
border-width: 0 0 3px 3px;
font-style: italic;
border-bottom: solid 2px;
border-image-slice: 1;
background: none!important;
border-left: 0;
color: #383940!important;
}
