MENU

初心者向けWordPressテーマカスタマイズのための、子テーマについて。 (CSS編)

  • URLをコピーしました!

これまで、このブログの表示などを変更するときに、直接「テーマ編集」でCSSやphpをいじっていました。

で、CSSやphpをいじったがために、画面表示出来なくなったり、ぐちゃぐちゃになったり、初心者が故のミスもありました。

そんな方に朗報です!

というか、そうしなければならないようです。

WordPress Codex日本語版によると、

WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。

さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。

このような理由で、使用しているテーマをカスタマイズする方法として子テーマをおすすめします。

とのことなので、ここで子テーマを整理して実装します。

まずは、「WordPressのあるフォルダ/wp-content/themes/テーマのフォルダ」に新規のフォルダを作成します。

今回は、「/wordpress/wp-content/themes/twentyten_child」というフォルダを作成しました。

次に、このフォルダの下に、子テーマの「style.css」を作成します。

この「style.css」は必須で、子テーマのフォルダと「style.css」が最小構成になります。

この「style.css」は、通常のテーマの「style.css」と異なり、以下のヘッダが必須となります。

/*
Theme Name:     twentyten_child
Template:       twentyten
*/

最小限だと、こうなります。この状態で、先程作成した「twentyten_child」のフォルダの下に「style.css」を置きます。

その後で、WordPressの管理画面から「外観」→「テーマ」を選択すると、

こんな画面になり、「twentyten_child」が新しいテーマとして追加されていることが確認できます。

ここで、「twentyten_child」を有効にします。

「twentyten_child」を有効してしまうと、ブログがこんなになっちゃいます。

あらら、全くCSSがリセットされた状態です。

なので、WordPressの管理画面から「外観」→「テーマ編集」を選択し、「style.css」を選択すると、

/*
Theme Name:     twentyten_child
Template:       twentyten
*/

なっているはずですので、ここに一行追加して、

/*
Theme Name:     twentyten_child
Template:       twentyten
*/

@import url('../twentyten/style.css');[/css]

とします。

そうすると、こうなり元通りです。

ただし、カスタムヘッダーとかは元通りになっちゃいますの、再設定が必要です。

これで、心置きなくCSSの変更が可能です。

phpを子テーマに追加して、上書きすることも出来ますが、今回はここまでです。

こうして、改めて自分のブログを見ると、かなりダサダサなので、CSSをいじり倒す予定です。

では。

よかったらシェアしてね!
  • URLをコピーしました!
目次