テーマ

【WordPressのカスタム】子テーマが良いらしい。

子テーマは上書きと追加

以前、カスタムするのを、ダッシュボードの外観>テーマ編集でやっていましたが、どうやらあまりオススメできない方法だったようです…。気付いた時には、カスタムした所がなくなってました…orz
その、何故なくなったの? と、
じゃぁこうやってカスタムすればハッピーだよ! というのが今回の内容です。

テーマはアップデートすると上書きされる→初期状態に戻る

プラグインやWP本体と同じように、テーマもたまにアップデート情報出ますが、そこでアップデートするとこれまでのテーマが上書きされるので、独自に修正した箇所が消えてしまうのです。

私の『カスタムした所がなくなった』原因も恐らくコレです(苦笑)。

そこで、アップデートで消されないために『子テーマ』というのを作り、それを修正します。

子テーマの作り方

1.wp-content/themes 内に、フォルダを作る

子テーマ用のファイルを入れるフォルダになります。
例えば、child とか、○○(親のテーマ名)_child とかで良いかと。

フォルダーの新規作成した所

2.作ったフォルダ内に、style.css を作成

記述内容は、以下。
[css]
/*
Theme Name:xxx  //子テーマの名称(必須)
Template:yyy //親となるテーマのフォルダ名(必須)
Description:zzz //子テーマの説明
Author:zzz //制作者
Author URI:zzz //制作者のURL
Version:zzz //1.0とか
*/
@import url('../親テーマのフォルダ名/style.css');
[/css]

最後の@の行は、親テーマのデザインを全部読み込んでね、という記述です。
これを書かないと、真っ白なサイト(何もデザインされていない状態)になります。

3.WPダッシュボードで、子テーマを適用したら完成

左メニューの 外観 > テーマ を見てみましょう。
下に、
cssに記述した1行目の名前があります。これを有効にすればOK。
『子テーマ』の設置は完了です。

ダッシュボードの外観メニュー

修正したい記述は、@行の下にどんどん記述するだけ

@importで親ファイルを読み込んでいるので、その後にcss記述すれば上書きされます。

子テーマのcssに記述すると反映(上書き)される!

PHPファイルもカスタムしたい時には?

PHPファイルを修正したい場合は、親からコピーしたものを同じファイル名のまま子テーマフォルダに入れるだけ。
そこで修正すればOK。

親にないテンプレートファイルをフォルダ内に作ってもちゃんと読み込まれるので大丈夫。

ちなみに機能的には以上ですが、気になる人のために解説。
screenshot.pngをchildフォルダに入れておけば管理画面でサムネイルが出ます。

子テーマの注意事項|function.phpは注意!

子テーマ内のファイルは基本的にファイル毎に上書きされる。
しかしfunction.ppは上書きされない!

function.phpは、追加で読み込まれるので、
子テーマで修正したい時は、子テーマ内のfunction.phpに修正箇所だけ追記します。

子テーマは上書きと追加

子テーマでの修正したCSSが動かない場合

今現在、このサイトはMontezumaというテーマを使っているのですが、これは子テーマでCSSの書き換えが出来ませんでした。
その理由は、function.phpファイルでこのフォルダのCSSファイルを読み込んでねーという記述がされていたからです。

montezumaのfunction.php

初心者の方には難易度が上がります…phpを記述すれば回避できます(。・_・。)

とりあえず今回私は違うテーマで子テーマの作成だけやってみました。

  • この記事を書いた人

サオリサン

WEB制作のディレクター・制作・運営支援をしてます(フリーランス&会社員)。アクセス解析してサイト改善するのが好き。

-テーマ
-, ,