WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

どうもこんにちは、りゅう(@ryuta_blog)です!

WordPressでブログをやっている皆さん!

ちゃんと「子テーマ」を利用していますか?

「子テーマ?なにそれ?」となった人は、この記事を参考に子テーマについて理解していってください。

子テーマとは?

子テーマとは、通常のテーマ(親テーマ)の情報をすべて受け継いだテーマです。

通常

子テーマを使う場合

WordPressのテーマをカスタマイズする時は、親テーマではなく、子テーマをカスタマイズするのが正しいとされています。

子テーマは”カスタマイズ用のテーマである”と覚えておきましょう。

 

なぜ子テーマを使うの?

子テーマを使う理由は以下のとおりです。

子テーマを使う理由
  • テーマのカスタマイズを安全に行うため
  • テーマのアップデート時に、カスタマイズした内容を残しておくため

テーマのカスタマイズを安全に行うため

親テーマを直接編集してミスると取り返しがつかなくなります。

  • まちがって重要なコードを消してしまった
  • 画面が真っ白になってしまった
  • レイアウトがぐちゃぐちゃになってしまった

 

このような事態を防ぐために、親テーマではなく子テーマを編集するのです。

 

そうすれば、編集でおかしくなったとしても子テーマを消せば元に戻ります。

 

子テーマはカスタマイズを安全に行うための保険なのです!

 

テーマのアップデート時に、カスタマイズした内容を残しておくため

親テーマを直接カスタマイズした場合、アップデートが入るとカスタマイズした内容がすべて上書きされてしまいます。

 

ですが、子テーマをカスタマイズしていれば、たとえ親テーマにアップデートが入ったとしてもカスタマイズ内容が消えることはありません

 

以上のことから、カスタマイズは親テーマではなく子テーマで行うのが正しいといえます。

そうと分かれば、実際に子テーマを作成していきましょう!

※ほとんどの有料テーマには、あらかじめ専用の子テーマが用意されています。有料テーマをお使いの方はそちらをお使いください。

難しいことは一切しませんので、安心して読み進めていってくださいね!

 

【超かんたん】子テーマの作り方

子テーマを作成する手順は以下のとおりです。

子テーマの作成手順
  1. 子テーマのフォルダを作成する
  2. style.cssを編集
  3. function.phpを編集

作成の際は、お使いのサーバーのファイルマネージャー、もしくはFTPソフトを利用してください。

今回の説明ではエックスサーバーのファイルマネージャーを例にします(どのサーバーでも流れは一緒です)。

【手順1】子テーマのフォルダを作成する

今回は、WordPressに最初から入っている「twentyseventeen」の子テーマを作成します。

 

まずはファイルマネージャーを開き、以下の順にクリックします。

「お使いのドメイン>publc_html>wp_content>themes」

 

フォルダ名を「twentyseventeen-child」とし、フォルダ作成をクリックします。

(親子関係がわかるように語尾に「-child」をつけましょう)

 

こんな感じで作成されればOKです。そのままフォルダをクリックしましょう。

 

続いてフォルダ内に、以下の2つのファイルを作成します。

  • style.css
  • function.php

 

同じ手順で作成すればOKです。

※フォルダ作成ではなく、”ファイル作成”ですのでお間違えなく

【手順2】style.cssを編集

作成したstyle.cssに必要な情報を入れていきます。

チェックを入れて「編集」をクリックしましょう。

 

開きましたら以下のコードを記述し「保存する」をクリックします。

style.css

/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/

記述する際は、それぞれ下記の通りに書き換えてください。

  • Theme Name: 子テーマのフォルダ名
  • Template:       親テーマのフォルダ名

 

【手順3】function.phpを編集

function.phpにも必要な情報を入れていきます。

下記のコードをそのままコピペでOKです。

function.php

<?php add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ ); function theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); }

コピペしましたら「保存する」をクリックします。

 

これで子テーマが完成しました!

早速確認してみましょう。

 

作成した子テーマを有効化しよう

WordPress管理画面の「外観」から「テーマ」をクリックします。

 

作成した子テーマが反映されて入ればOKです。

 

あとは「有効化」をして、レイアウトに問題がないか確認してみましょう。

もしレイアウトが崩れていましたら、style.cssの記述に間違いがないか確認してください。(1文字でもスペルが間違っているとうまく動きません。)

 

おつかれさまでした!

これからカスタマイズをする際は、今回作成した子テーマのstyle.cssを編集するようにしましょう!

 

最後までしっかりお読みいただき、ありがとうございました!

 

こちらの記事もオススメです↓↓

あわせて読みたい
ブログをスラスラ書くためにやるべき3つの事【1記事1時間で書けます】どうもこんにちは、りゅう(@ryuta_blog)です! 駆け出しブロガーが必ずぶち当たる壁。それは 記事が書けない.....
あわせて読みたい
ブログでお金を稼ぐ仕組みと、稼ぐために必要なサイトを一挙紹介どうもこんにちは、りゅう(@ryuta_blog)です! このブログを始めてから約4ヶ月が経ちます。 ブログを始めてから今ま...
あわせて読みたい
【デザイン知識なしでもOK】シンプルなアイキャッチ画像の作り方どうもこんにちは、りゅう(@ryuta_blog)です! アイキャッチ画像は本でいえば”表紙絵”のようなものです。 目を引く...
ABOUT ME
りゅう
2つのサイトを運営するブロガー。 「好きなことでお金は稼げる」ことを証明するために、日々奮闘中! 新卒で入社したIT企業を半年で退職し、「あ、俺組織向いてないわ」と完全に開き直り、今後の人生で自分が楽しいと思える事しかしないと心に誓う。

POSTED COMMENT

  1. […] あわせて読みたいWordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】どうもこんにちは、りゅう(@ryuta_blog)です! WordPressでブログをやっている皆さん! ちゃんと「子 […]

  2. […] ⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】 […]

COMMENT

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