WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

WordPressのテーマを変更する場合は子テーマを使おう

この記事は約2分51秒で読めます

ライオン 親 子
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

ブログの文字の色など変更したいときには
style.cssを変更すると反映されます。

ただし、直接変更を加えた場合

バージョンアップされた際に、
手を加えた箇所がなくなってしまいます。

更新前に、バックアップを取って差分を追加してもいいのですが
非効率的ですね。

今まで、直接いじってきておいたヤツが言っても説得力なし!

はい、気を取り直します。

WordPressのテーマに修正を加えたい場合は
子テーマ」を利用しましょう!

子テーマの作り方

実際に現在使用している N1 テーマを例に子テーマを作成します。

子テーマのディレクトリを作成

wp-content/thmes/n1
N1テーマフォルダこのように配置されています。

wp-content/thmes/n1-child
というフォルダを新規作成します。(フォルダ名はなんでもいい。)

n1-childフォルダに手を加えたいファイルを作ります。

wp-content/thmes/n1-child/style.css
ファイルを新規作成します。

Theme Name: 子テーマの名前
Template: 親テーマのフォルダ名

@import 文を書くと親テーマのstyle.cssに追記する形になります。

「n1-child」のフォルダと「style.css」を作成すれば
子テーマの作成は完了です!

おつかれさまでした!!!

子テーマの style.css ヘッダー情報

子テーマで必須なのは style.css ファイルだけです。

このファイルで親テーマの style.css を上書きして、
WordPress が子テーマを認識するためのヘッダー情報を書きます。

  • Theme Name (必須) 子テーマ名
  • Theme URI (任意) 子テーマのウェブページ
  • Description (任意) テーマの説明
  • Author URI (任意) 作者のウェブページ
  • Author (任意) 作者の名前
  • Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
  • Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc
  • @import 親テーマのスタイルシートをインポート

もっと詳しく知りたい方はこちら
WordPress Codex 日本語版「子テーマ」

子テーマの有効化

さて
管理画面を確認すると
N1-Childテーマが追加されています。

子テーマを有効化

そして、見て分かるように更新通知が来ております。
必要に迫られないとやらないヤツ・・・私です(笑)

では

子テーマを有効化して、サイトを確認してください。
親テーマが読み込まれていると思います。

親テーマのデフォルトの状態で表示されていますので
自分で変更した箇所を子テーマに追記していきます。

子テーマの画像がなくて気になる人は親テーマから
screenshot.jpg をコピペしてくると同じものが表示されます!

子テーマの使い方

@import 文を書いていれば親テーマのstyle.cssに追記する形になります。

既存のデザインを変更したい場合は
対象の id や class を子テーマに記述すれば
その部分だけきちんと反映されます。

@import 文を書かないと親テーマのstyle.cssは読み込まれません。

既にガッツリ変更を加えてくる場合は
@import 文は書かず、コピペするといいと思います。

functions.php は追記する形になります。

そのため既存の関数を書いてしまうとエラーとなります。

これは
親テーマの functions.php が、
子テーマの functions.php より後に読み込まれるため上手く動作しなくなるようです。

ちなみに子テーマは最小でstyle.cssのみでオッケーです。
最大では親テーマと同じ数のファイルを使うことができます。

詳しい内容は追々紹介していくとします。

今回は子テーマを試しに使ってみました!
ということで、一歩前進です。

ちょっとした変更を加えたい場合でも子テーマを利用するようにしましょう!

関連記事

  1. Gravator
  2. ワードプレス Browser Shots rel nofollow
  3. 【WordPress】TwitterカードとFacebook OGPの設定方法
  4. WordPress SNS連携 プラグイン SNAP
  5. こんなはずはなかった。
  6. 虫眼鏡

PR

カテゴリー