child theme

WordPress デザイン変更とCSSの編集方法


ウェブサイトのタイトルの文字のスタイルを変える

  1. WordPressをインストール
  2. テーマを選ぶ

WordPressをインストールしテーマを選らぶとウェブサイトらしくなります。しかし、文字の大きさが読みにくいサイズだったり、不格好だったりします。スタイルシートで、文字のサイズや色を変更したり、レイアウトを変えることができます。

左の画像はインストールしただけのウェブサイトです。右の画像はテーマを選び、スタイルシートで文字の大きさを変えたり、見出しに帯を入れたりしています。

  • タイトルの文字のサイズを変える
  • 見出しのスタイルを変える(見出しに帯をつける)

この2つをスタイルシートで文字などのスタイルを指定し、見栄えを良くしています。

スタイルシート(style.css)

テーマのスタイルシート言語であるCSSを利用して、スタイルを変更していきます。

スタイルシート(style.css)の場所

  • ダッシュボード→外観→テーマエディッタ

ここでスタイルシート(style.css)を編集します。

wordpress
wordpress

子テーマを作る

テーマのスタイルシートを編集することで、スタイルの変更はできます。しかしテーマがアップデートする時に、スタイルシートはリセットされます。

せっかく編集したテーマのスタイルシートをアップデートの影響を受けないようにするためには、「子テーマ」が必要です。WordPressでも「子テーマ」を作ることを推奨しています。

WordPressのテーマは、脆弱性の点からも、度々アップデートしています。

何故、子テーマが必要なのか?

  • 親テーマ(既存のテーマ)
  • 子テーマ

WordPressは既存のテーマ(親テーマ)よりも「子テーマ」を優先に反映してくれます。

つまり「子テーマ」を作っておくと、テーマの機能がアップデートされても、ご自分で作ったスタイルはリセットされないで残り、かつwebページに反映されるのです。

「子テーマ」は、WordPressのテーマの機能やスタイルを引き継ぎつつカスタムするテーマです。つまり、スタイルを変えたい部分だけを子テーマに書いていけばいいのです。子テーマの大きなメリットです。

子テーマを作る場所

WordPressのインストールによってできたフォルダで、wp-content にテーマディレクトリ(フォルダの階層)があります。

  • wp-content/themes ディレクトリ下に子テーマディレクトリを作る
child theme
child theme
1.子テーマのディレクトリを作る(themesの下、親テーマと同じ階層にフォルダを作成)
2.フォルダに子テーマの名前を付ける(名前の最後に -child を付けることを推奨)
3.子テーマのスタイルシートを作成(style.css や functions.php)
4.親テーマと子テーマを関連付ける

子テーマを作るためには、以上の作業をしますが大変です。

そこで、子テーマを作るプラグインを使います。プラグインは、FTPソフトがなくても、必要な階層に子テーマのファイルを簡単に作成できます。

子テーマのプラグイン

以前はOne-Click Child Themeというプラグインを利用していましたが、One-Click Child Themeは更新されておらず、プラグインの新規追加で検索しても検索上位にありません。

現在は、Child Theme Configurator を利用しています。 Child Theme Configurator は style.css や functions.php だけではなく、header.php なども簡単に作成できます。

Child Theme Configuratorのファイル生成

Child Theme Configurator
Child Theme Configuratorの設定画面

(参考)子テーマのスタイルシート

子テーマのスタイルシートはこんな感じです。

child theme
child theme

About ゆきを

ジャンルに拘らずに、好きなことを書いてます。 趣味であったり、覚書きであったりします。 むずかしい言葉を使わず、流行りの言葉を使わないように書いてます。