全テーマで使える子テーマの作り方

スーパーマンを演じる子供

子テーマ作成方法 保存版

子テーマは、1つのディレクトリ(子テーマディレクトリ)と、2つのファイル( style.cssfunctions.php )から構成されます。

子テーマを作成する最初のステップは、子テーマディレクトリ(子テーマフォルダ)の作成です。

サーバー会社の用意する FTP 等で、themes フォルダ内に入ってみましょう。

 

 

■子テーマ用のフォルダ作成

XSERVER の場合、ファイルマネージャにログイン後、wp-content フォルダ内の themes フォルダを開きます。

現在このフォルダ内には、テーマ hestia のフォルダがあります。
こちらに子テーマのフォルダを作成します。

作成方法は、ファイルの操作の下の方にある 作成 フォルダ作成 の左部分に、子テーマのフォルダ名を記載し フォルダ作成 をクリックします。

 

フォルダ名の例)hestia_child

例えば、テーマが Lightning というテーマで、フォルダが lightning だった場合、子テーマのフォルダ名は lightning_child とします。

空白(スペース)は使用出来ないので必ず アンダーバー などを挿入しましょう。

 

 

■子テーマフォルダ内にファイル作成

先ほど作成したフォルダのファイル名をクリックします。

因みに XSERVER の場合、「フォルダ」のファイル名部分をクリックするとフォルダ内に入り、「ファイル」のファイル名部分をクリックするとデスクトップなどにファイルの保存が可能です。

下の画像は hestia_child (テーマによってフォルダ名は変わります)内に入って、ファイルを2つ作成した後の画像です。

作成は先ほどのフォルダ作成と同様、ファイルの操作の下の方にある 作成 ファイル作成 の左部分に、下記のファイル名を記載し ファイル作成 をクリックします。

style.css

functions.php

一つずつ作ってくださいね。

 

ファイルマネージャ

 

■ファイルの内容を記載

XSERVER の場合、「ファイル」のファイル名部分をクリックするとデスクトップなどに保存のダイアログが開いてしまいます。

ファイルの編集は、該当するファイルのアイコン左にあるチェックボックスにチェックを入れ、ファイルの操作欄から 編集 をクリックします。

 

style.css を編集

※下記は hestia の例です。Template部分に親テーマのフォルダ名、Theme Name部分に子テーマのフォルダ名を記載してください。

 

 

functions.php を編集

※多くのテーマの場合下記を記載すれば問題ありませんが、Hestia 等トップページがカスタマイズされている場合、記述が足りません。
その場合はテーマ固有の記載方法に従いましょう。

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。

 

 

■子テーマの有効化

ダッシュボード>外観>テーマ から子テーマを有効化します。

 

 

 

 

 

 

 

 

この記事を書いたのは

白馬のおんじ
名古屋市の情報通信システム会社に勤務。生活の大半をブログ運営に捧げています(笑)WordPress や BiND を使用したサイト制作承ります!

"ZERO"で作るゼロ円ホームページ

レカムジャパン名古屋第一支店で作るホームページ。"ZERO"ならドメインの取得や管理にかかる初期費用も一切ゼロ。もちろん製作費も更新費用もかかりません。ホームページにかかる4つの費用を全てゼロにした名古屋第一支店だけのオールフリープラン"ZERO"。是非ご利用ください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です