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

WEB

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

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

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

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

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

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

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

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

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

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

それでは早速、一緒に作ってみましょう!!

子テーマを作ってみよう

1. フォルダを作る

最初に、アップロードするフォルダを作ります。使用するテーマ名に「-child」とつけると分かりやすいです。

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

2.「functions.php」を作る

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

 

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

3.「style.css」を作る

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

 

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

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

上記のように書き換えて、ご使用ください。

 

親テーマのフォルダ名は、レンタルサーバーで確認できます。
wp-content/themes/」の直下にあります。

同じところ(「wp-content/themes/」の直下)にある「screenshot.png」のファイルをダウンロードして、1 で作ったフォルダに保存しておくと、子テーマのサムネイル画像として表示されます。

つまり、何もしなければ、このような表示()になりますが、

子テーマ

フォルダに保存した場合は、このような表示()になります。

子テーマ

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

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

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

    エックスサーバーで常時SSL化する方法について

    こちらでは、Webサイトを常時SSL化する方法について、説明していきま…

  2. チェックリスト

    WEB

    『wpX Speed』でDNSレコードから所有権を確認する方法

    WordPress 専用クラウド型レンタルサーバー『wpX Speed…

  3. fontAwesome

    WEB

    超簡単!!Font Awesome(Version 5)の使い方

    アイコンフォント『Font Awesome』の使い方について説明します…

  4. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!

    全くの初心者さんでも分かるように、WordPress でブログを始める…

  5. ドアに差し込まれた封筒

    WEB

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

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

  6. 空にかざした水晶

    WEB

    Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法

    一生懸命作ったブログのロゴ画像。残念ながらそのままアップしても、Mac…



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

wordpress

よく読まれている記事

  1. ネットショッピング
  2. 広告
  3. 404
  4. ドメイン
  5. ブランコに乗る女の子
  6. 緑のドア
  7. チェーン
  8. ドアに差し込まれた封筒
  9. 海を背景にフレームを持つ女性の手
  10. 洗濯物

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

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

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

パソコンを覗き込む二人の女子
  1. ドアに差し込まれた封筒

    WEB

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

    WEB

    TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法
  3. 空にかざした水晶

    WEB

    Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法…
  4. wordpress,ワードプレス

    WEB

    エックスサーバーで WordPress をインストールする方法
  5. 海を背景にフレームを持つ女性の手

    WEB

    Photoshopで簡単!!画像に枠線を作る方法
PAGE TOP