wordpress

【WordPress】子テーマの作成方法とメリットを解説

2021年7月24日

こんにちは、よしです。

me
悩んでいる人

WordPressの学習を始めたのですが、子テーマの作り方がわかりません!

また、子テーマのデメリットはありますか?

今回は、 そんなWordPress初学者が悩みがちな子テーマの作成方法と子テーマ導入のメリット、デメリットを解説していきます!

子テーマの知識は WordPress案件をこなす上で必ず必要になってくるので、しっかりマスターしましょう!

もしあなたがWordPressを独学で学びたいなら、"独学でOK" WordPress案件を取れる学習ロードマップの記事が参考になるのでぜひチェックしてみてください。

この記事で分かること

・ WordPressの子テーマとは

・子テーマを導入するメリット、デメリット

・子テーマが必要な場合と必要ない場合

・ WordPressで子テーマを作成する方法

チェック!
"独学でOK" 未経験でもWordPress案件を取れる学習方法
"独学でOK" WordPress案件を取れる学習ロードマップ

続きを見る

チェック!
【Local By Flywheel】WordPressのローカル環境構築手順
Local By FlywheelでWordPressローカル環境を構築する方法

続きを見る

WordPressの子テーマとは

WordPressを学習している方なら、「子テーマ」という単語は聞いたことがあるのではないでしょうか。

子テーマを作成することで、既存の WordPressテーマに機能を追加したり、デザインをカスタマイズしたりすることが出来ます。

cropped secondfavicon 1
よし

少し分かりにくいですよね、、

既存のテーマ(棒人間)を元に子テーマ(洋服、髪の毛)を作成することで、オリジナルの人物を作ろう!というイメージで考えると分かりやすいかも知れません。

WordPressの管理画面でも追加CSSで簡単なカスタマイズをすることは可能ですが、子テーマを作成するとさらに複雑なカスタマイズやPHPを使ったカスタマイズも可能になります。

実際に WordPress案件も子テーマを使用する事が多々あるので、使い方、作成方法をマスターしましょう。

WordPressで子テーマを導入するメリット、デメリット

WordPressの子テーマはとても便利で、メリットも多いですが、多少のデメリットもあります。

メリット、デメリットをそれぞれ解説していきます。

WordPressで子テーマを導入するメリット

子テーマを使用する主なメリットは以下の通りです。

子テーマのメリット

・幅広いカスタマイズが可能になる

・親テーマがバージョンアップしても、カスタマイズがリセットされない

・重要なファイルを誤編集する危険がない

簡単に説明を加えていきます。

幅広いカスタマイズが可能になる

子テーマを利用すると、親テーマの機能を保ったまま自由にカスタマイズすることが可能になります。

0からWordPressテーマを作る場合、それぞれのページのテンプレートやSEO対策などかなりの作業量が必要になります。

それに対して、子テーマをしようする場合、既に完成している親テーマに自由に追加したい機能、デザインを実装できるので、簡単に思い通りの

サイトを作成する事ができます。

親テーマがバージョンアップしても、カスタマイズがリセットされない

わざわざ子テーマなんて作らなくても、親テーマを直接編集すればいいじゃん!と思うかもしれませんが、そうはいきません。

WordPressのテーマは頻繁にアップデートされることが多いです。

親テーマのファイルを直接編集していると、アップデート時に全てリセットされてしますのです。

一生懸命カスタマイズしたのに、全てリセットなんてつらすぎますよね。

そこで、子テーマを作成し、そちらでカスタマイズすると、親テーマがアップデートしても子テーマは変わらないのでリセットされることはありません!

WordPressで子テーマを導入するデメリット

子テーマを使用する主なデメリットは以下の通りです。

子テーマのデメリット

・HTML,CSS,WordPress(PHP)の専門的な知識が必要

・SEOに悪影響の可能性がある

こちらも簡単に説明を加えていきます。

HTML,CSS,WordPress(PHP)の専門的な知識が必要

WordPressで子テーマを作成するには、HTM,CSSの知識はもちろん、WordPressで扱われているPHPの知識もある程度必要になってきます。

全く知識がない状態で子テーマの作成に挑戦すると、かなりの時間がかかったり、うまく表示されないという現象がおきたりするので、最低限の参考書は持っておいた方がいいです。

こちらの参考書を一冊持っておけば、WordPressの基本的な知識は網羅されているので、辞書的に使えておすすめです。

SEOに悪影響の可能性がある

絶対悪影響があると言い切れるわけではないので、参考程度に。

子テーマを使用し、読み込みデータが多くなり速度が低下することで結果的にSEOに悪影響があるのではないかと言われることがあります。

全く使うことがないのに子テーマを作成するのは避けた方が良いかもしれません。

WordPressで子テーマが必要な場合と必要ない場合

WordPressで子テーマを使用するメリットとデメリットを元に、子テーマが必要なサイトと必要ないサイトを解説します。

子テーマが必要な場合

  • 複雑なCSSカスタマイズが必要な場合
  • 固定ページにオリジナルページを作成したい場合
  • カスタム投稿タイプやカスタムフィールドを自由に使いたい場合
  • 直接テンプレートファイルを編集したい場合

子テーマが必要ない場合

  • 既存テーマをそのまま使う場合
  • カラーの変更などの小さなCSSカスタマイズで済む場合

WordPressで子テーマを作成する方

WordPressの子テーマは、style.cssとfunctions.phpがあれば最低限作ることができます。

簡単に、以下の流れで作成します。

  1. フォルダにstyle.css,functions.phpを作成
  2. wp-content/themes にフォルダを格納(管理画面からアップロードも可)
  3. 子テーマを選択
  4. function.phpにコードの記述
  5. 子テーマ完成

style.cssとfunctions.cssの作成

子テーマ作成ステップ1
子テーマ作成ステップ1

画像のように、自分のPCに新規フォルダを作り、style.cssとfunctions.cssを作成しましょう。

functions.phpは現状空の状態でも問題ありません。

style.cssには、

Theme Nameには子テーマの名前Templateには親テーマのフォルダ名(親テーマのstyle.cssに書いてあるTheme Nameとは異なるので注意しましょう)

を記述します。

作者名やバージョンも記述できるのですが、上記の記述で子テーマ作成は可能です。

WordPress上にアップする

子テーマ作成ステップ2
子テーマ作成ステップ2-1

WordPressのテーマは、wp-content/themesに格納されているので、作成したフォルダを同じ階層に入れます。

スクリーンショット 2021 07 24 22.17.17
子テーマ作成ステップ2-2

作成したフォルダは、WordPress管理画面からアップロードする事もできます。

WordPress管理画面で小テーマを選択する

子テーマ作成ステップ3
子テーマ作成ステップ3

ここまで問題なく進められていれば、上の画像のように、作成したテーマが選択できるので、有効化しましょう。

テーマ選択画面に子テーマが表示されない場合は、画面下部を確認してみてください。

画像のようにエラーが表示されているはずなので、修正してもう一度アップしましょう。

スクリーンショット 2021 07 24 22.29.17

【子テーマ作成ステップ4】functions.phpに必要なコードを書く

この状態で子テーマのstyle.cssにコードを書いても、まだ反映されません。

子テーマのCSSを反映させるために、先ほど作成したfunctions.phpにコードを記述する必要があります。

functions.phpに以下を追記してください。

基本的にこのコードで子テーマのCSSが反映されるようになります。

まとめ  WordPressの子テーマは必要に応じて使えるように!

いかがでしたか?

WordPressの子テーマはとても便利で、オリジナリティーのあるサイト制作には必須です!必要に応じて使えるようにしておきましょう。

それではまた!

no image

大学生

2021/10/18

【暇な大学生におすすめ】暇な時間を有効活用できる方法

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

WEB制作 ブログ運営 プログラミング

2021/10/16

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

211007アートボード 1 のコピー 42

ブログ運営

2021/10/7

【特化ブログ運営4ヶ月目】アクセス微増、収益4桁達成!!

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

プログラミング

2021/9/30

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

ブログ運営

2021/9/5

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

WEB制作

2021/9/30

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

簡単なサムネ、バナーの作り方!

WEB制作 ブログ運営

2021/8/19

【簡単】短時間でサムネ、バナーを作る手順!

no image

WEB制作

2021/8/18

webデザイナーはコーディングできないといけない??

no image

WEB制作

2021/8/19

【web制作は大変?】実際に経験した感想を語る

no image

WEB制作

2021/10/8

webデザイナーは絵が下手でもなれる?!

no image

WEB制作

2021/8/15

web制作案件に必要なスキルセット【初心者必見】

【文系もOK】レバテックルーキーの評判、口コミと使ってみた感想

プログラミング

2021/10/16

【文系もOK】レバテックルーキーの評判と使ってみた感想

【Udemy】web制作が学べるおすすめ講座  

WEB制作

2021/10/14

【Udemy】web制作が学べるおすすめ講座  

5149301 s

ブログ運営

2021/8/20

【特化ブログ運営2ヶ月目】アクセス数と収益は先月から変わった??

fv e1622358020615

ブログ運営

2021/8/13

ブログのコンタクトフォームの必要性と実装方法

【Local By Flywheel】WordPressのローカル環境構築手順

WEB制作 wordpress

2021/8/23

Local By FlywheelでWordPressローカル環境を構築する方法

undraw warning cyit

プログラミング

2021/8/23

プログラミングスクール卒業生が「使えない」と言われる理由と解決策

WordPressの子テーマのメリットデメリット

wordpress

2021/10/12

【WordPress】子テーマの作成方法とメリットを解説

undraw researching 22gp

プログラミング

2021/10/12

文系大学生が新卒でエンジニア就職する方法

【安い】大学生に本気でおすすめのwebデザインスクール4選!

WEB制作

2021/9/29

大学生におすすめのwebデザインスクール4選【安い】

-wordpress

© 2021 よしブログ Powered by AFFINGER5