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

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ブログ製作代行いたします

 

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

wordpress,ワードプレスエックスサーバーで WordPress をインストールする方法前のページ

Contact Form 7 のメールが届かない?『WP Mail SMTP』で即解決!!次のページドアに差し込まれた封筒

関連記事

  1. 歩道を歩く男性

    WEB

    DIVERのAMPページに『リンクユニット広告』を表示させる方法

    WordPressのテンプレート『DIVER』で、AMPページにリンク…

  2. local by flywheel

    WEB

    Local by Flywheel を使って、ローカル環境を構築してみよう

    『Local by Flywheel』は、簡単に WordPress …

  3. 海に浮かぶ男性

    WEB

    float 解除と clearfix

    要素を float させた場合、次の現象が起こります。 …

  4. シャットダウン

    WEB

    XSERVER(エックスサーバー)で設定したドメインを削除する方法

    せっかく取得したドメインですが「もう使わないから削除したい!」そう思っ…

  5. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法

    幅が 960px の inner の中に、幅が 300px、右側のマー…

  6. cyclists

    WEB

    【意外と簡単?!】FTPソフト『FileZilla』のダウンロードから使い方まで

    FTPソフト『FileZilla』をダウンロードしてインストールする方…

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

wordpress

よく読まれている記事

  1. 洗濯物
  2. ガネーシャ
  3. チェーン
  4. 海に浮かぶ男性
  5. 郵便受け
  6. コントローラー
  7. ネットショッピング
  8. 緑のドア
  9. local by flywheel
  10. ドメイン

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

Gutenberg 完全対応のテーマならコレ!!

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

パソコンを覗き込む二人の女子
  1. 海に浮かぶ男性

    WEB

    float 解除と clearfix
  2. ガネーシャ

    コラム

    大きな病気を抱えていても、他人のことを応援できる人
  3. pencils

    WEB

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

    WEB

    font-weight プロパティについて
  5. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の…
PAGE TOP