子猫をのせた乳母車を押す親猫

WEB

とっても簡単!!WordPress(ワードプレス)の子テーマの作り方

ずっと面倒だと思っていた WordPress(ワードプレス)の子テーマを簡単に作れる方法を知りましたので、記事としてまとめました。

まずは「なぜ子テーマを作った方が良いのか?」のお話から始めますね。

なぜ子テーマが必要なの?

私も以前は「既存のテーマ(親テーマ)を直接カスタマイズすればいいのに、なんで子テーマなんて作る必要があるのだろう・・・?」と思っていました。

既存のテーマは、新しい機能の追加や修正がある場合がありますし、WordPress 公式テーマなどは自動でアップデートが行われてしまうこともあります。

ということは、既存のテーマ(親テーマ)を直接カスタマイズしていた場合、知らないうちにファイルが上書きされ、今まで一生懸命カスタマイズしてきたことがなかったことになってしまうかもしれないのです!!

ちょっと、この事実を知ってしまうと怖くなってしまいますよね・・・

「でも、難しそうだな…」「面倒だな…」

そんな風に思うかもしれませんが、子テーマは案外簡単に作れます。

一緒に作ってみましょう!!

子テーマを作ってみよう

1、フォルダを作る

最初に、アップロードするフォルダを作ります。

使用するテーマ名に「-child」とつければ分かりやすいです。

私の場合は、「MAG」というテーマを使用しているので「MAG-child」にします。

 

2、「functions.php」を作る

お使いのテキストエディタに、下の記述をそのままコピペします。

 

「functions.php」と名付けて、1で作ったフォルダに保存します。

 

3、「style.css」を作る

下の記述を一部修正して使用します。

 

上の記述は、私が使用している「MAG」の例なので・・・

Theme Name 1で作ったフォルダ名
Template 親テーマのフォルダ名
Version 親テーマの現行バージョン

に書き換えて、ご使用ください。

 

親テーマのフォルダ名は、レンタルサーバーで確認できます。

wp-content/themes/」の直下にあります。

 

ついでに、同じところ(「wp-content/themes/」の直下)から、「screenshot.png」のファイルをダウンロードして、1で作ったフォルダに保存しておくと良いでしょう。

 

フォルダに保存しなかった時は、最終的にこのような表示になりますが、

 

子テーマ

 

保存した場合は、このような表示になります。

 

子テーマ

 

こちらは他の人から見えるわけではないので、自己満足の世界です。チャレンジしたい方はどうぞ。

 

親テーマの現行バージョンの確認方法は・・・

WordPress の管理画面 > 外観 > テーマの編集 に入ると、「style.css」が表示されます。

上の方(私が使用しているテーマ「MAG」では8行目)に書かれているのですぐに分かるはずです。

 

これを「style.css」と名前を付けて、1で作ったフォルダに保存します。

 

4、他にもカスタマイズしたいページがあれば同じように作る

例えば、ヘッダー(header)をカスタマイズしたい場合は、WordPress の管理画面 > 外観 > テーマの編集 を開き、

子テーマの作り方

① 編集するテーマを選択:親テーマ(私の場合は「MAG」)
② テーマファイル:テーマヘッダー(header.php)

を選択します。

「header.php」を全てコピーして、テキストエディタにペーストします。

これに「header.php」と名前を付けて、1で作ったフォルダ「MAG-child」に保存します。

 

5、アップロードして有効化する

① 1で作ったフォルダ「MAG-child」を圧縮します。

子テーマの作り方

 

② WordPress の管理画面 > 外観 > テーマ > 新規追加 > テーマのアップロード をクリックします。

子テーマ

上の画像の赤枠内『ファイルを選択』で ① で作った zip ファイルを選択し、『今すぐインストール』をクリックします。

 

③『有効化』をクリックします。

子テーマ

 

これで、『子テーマ』ができました!!

子テーマが利用できるか確認しよう

子テーマを作ることはできたけど「本当にこれで大丈夫なの?」と思う方は、試しに CSS ファイルに下の記述をして更新してみましょう。

コメントアウトしたテーマ情報の下に記述します。

 

サイトを更新すると、背景が水色になっているはずです。

確認が済んだら、このコードは削除しておきましよう。

 

うまく反映されない場合は、「functions.php」を下記に差し替え、再試行してみてくだい。

 

この記述は親テーマの後に子テーマのスタイルシートをロードすることを、よりはっきりと示しています。

最後に

もし親テーマである既存のテーマがアップデートされてしまったとしても、子テーマを使ってカスタマイズしていれば、カスタマイズしたものが全てなかったことになってしまうような惨事は免れることができます。

『子テーマ』は思っているよりも簡単に作れますので、ぜひチャレンジしてみてください。

 

ワードプレス製作代行サービスも承っております。

WordPressブログ製作代行いたします

 

 
スポンサードリンク
 
スポンサードリンク

関連記事

  1. コントローラー

    WEB

    WordPress でレイアウトが崩れる自動整形を回避する方法

    WordPress で固定ページを作成しようと思い、コードを記述して表…

  2. ペンを持つ手

    WordPress

    TCDさんのテーマ『MAG』を愛用する理由

    潔いまでのシンプルさ。それは、私が『MAG』を愛用する一番の理由です。…

  3. カメラ

    WEB

    WordPressで最低限おさえておきたい画像処理について

    せっかく良い記事なのに画像がぼやけている…という残念なブログに会うこと…

  4. 3匹のカエル

    WEB

    アメブロの見出しをカスタマイズする方法

    今更ながらアメブロデビューしました。そこで気づいたのですが、ア…

  5. Google Search Console
  6. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で即解決!!

    WordPressでは『Contact Form 7』というプラグイン…



== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. 郵便受け
  2. 海を背景にフレームを持つ女性の手
  3. crayon,クレヨン
  4. コントローラー
  5. cyclists
  6. ドメイン
  7. fontAwesome
  8. 緑のドア
  9. ガネーシャ
  10. 海に浮かぶ男性

カテゴリー

当サイトで使用しているテーマはこちら!!

アフィリエイトサイトにはDiverもお勧め!!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. ドメイン

    WEB

    お名前.com でドメインを取得する方法
  2. 3匹のカエル

    WEB

    アメブロの見出しをカスタマイズする方法
  3. local by flywheel

    WEB

    『Local by Flywheel』を使って、ローカル環境を構築してみよう
  4. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールし…
  5. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で…
PAGE TOP