wordpress-child-theme-adopting-202001-ec

WordPress

子テーマを用意してWordPressに導入する手順を「WING AFFINGER5」を例に優しく解説【公式の子テーマを使用】



今回は、WordPressブログにおいて避けては通れない…

子テーマ

の具体的な導入手順を、画像つきで解説していきたいと思います

まずWordPress子テーマとは、通常のいわゆるテーマ(=親テーマ)から派生した特殊なテーマのこと

テーマをアップデートする際に、今までのカスタマイズ内容をリセットさせないための必須とも言えるツールです

いわば親テーマの分身!

ちなみに、「親テーマと子テーマ」については ↓ をどうぞ♪

wordpress-theme-parent-and-child-202001-ec
WordPressの「親テーマと子テーマ」とは?違いって?1から丁寧に解説【ブログのアップデート対策】

続きを見る

で、この子テーマって仕組み自体はわかっても、いざ実際に自分のブログへ導入するとなると…

なにからどうすればいいの?

という初心者さんも、きっと多いと思います(経験談)

例えば…

  • そもそも「子テーマを用意する方法」がサッパリわからない
  • 子テーマは用意できたけど、それをどんな手順で「WordPress側で反映」させるのかわからない

こんな疑問ですね

ということで今回は、

  • 子テーマを用意する方法
  • 用意した子テーマを、WordPressに導入する流れ

この2つのポイントでご紹介していきたいと思います

このサイトでも実際に導入してるテーマ「WING(AFFINGER5)」を例に、画像つきで1から丁寧に解説していきますね

それではさっそく見ていきましょー🐥

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

【はじめに】WordPress子テーマを用意する方法は、2パターン【公式のものが安心】

pc-work-202001_01

まずWordPressの子テーマを用意する方法は、大きく2つのパターンにわかれます

  • 自作する
  • そのテーマ公式の子テーマを使う

で、結論から言ってしまうと「子テーマの自作」は個人的にあまりおすすめしません

なぜなら、初心者にとってはわりと専門領域になるからですね

具体的には…

  1. functions.phpを作る(必要なコード記述を入れる)
  2. style.cssを作る(必要なコード記述を入れる)
  3. この2つを入れたフォルダをZIP形式に圧縮して、WordPress管理画面からアップロード&有効化(もしくはFTPソフトを使ってアップロード)

という流れ。 たぶん意味不明ですよね(笑)

僕自身、以前はこの「子テーマの自作」をしたことがあります

実際ググれば自作の手順はいくらでも出てくるので、作れないことはないんですが…

  • phpやcssのコードについて、(当時の僕のような)完全素人がコピペで済ますことのリスクと不安感
  • しかもテーマファイルは、ちょっとしたカスタマイズと違い、WordPressにおいて根幹となる大事な部分

この2点を考慮すると、あえてムリして作るべきではないと僕は思います

いざ作れたと思っても、1つでもトラブルがあればもう四苦八苦…

なので結論、初心者であれば「公式の子テーマ」が付いてくるテーマを使うべき

今回例として挙げてる「WING(AFFINGER5)」も、まさに純正の子テーマが無料で付いてきます

公式の子テーマは、もちろん完成品なのでphpやcssのコードを自分で入れていく必要はありません

通常の親テーマと同じように、WordPress管理画面でアップロードして…

インストール&有効化

だけでセット完了🐥 3分もかからず導入できます

しかも公式の、プロが作ったものなので安心ですよね

ちなみに公式の子テーマが用意してあるのは、ほぼほぼ「有料テーマ」の無料特典やオプションになると思いますが、本当に楽です

完成品の子テーマがあるなら、あえて自作する必要はなくなる

そしてもし、自分のブログで「これから使っていこう」と思ってるテーマに公式子テーマがなければ…

「自作する(ググれば手順自体はすぐ出てきます)」か、もしくは「もう1度テーマの選定から落ちついて考え直してみる」というのも、1つの手かなと思います

テーマ選びはそれくらい重要で、1度使い慣れてからわざわざ別のテーマに乗り換えるのはぶっちゃけ凄く面倒です

設定が全部やり直しになるし、操作画面も1から覚え直さないといけない…

一例として、このブログでも愛用してる「WING(AFFINGER5)」における公式の子テーマを用意する手順をご紹介していきますね🐥

WordPress子テーマの導入方法【WING AFFINGER5を例に解説】

最新版の公式子テーマを、公式サイトからダウンロード【WING AFFINGER5の場合、STINGER STOREから】

pc-work-202001_02

まず大前提として、「WING AFFINGER5」をあらかじめWordPressにアップロードして「インストール&有効化」をしておく必要があります

ここで言う「WING AFFINGER5」とは、子テーマではなく通常のテーマ(=親テーマ)のことです

ちなみに、親テーマの導入方法は ↓ から♪

wordpress-theme-adopting-202001-ec
WordPressテーマの導入方法を「2つのパターン」で優しく解説【アップロード済みと、そうでない場合】

続きを見る

「WING AFFINGER5」をWordPressに無事インストールできたら、つづいて肝心の「子テーマ」を用意していきます

STINGER STORE」にログインします

wordpress-child-theme-adopting-202001_1-01

↑「購入ユーザー限定ページ一覧」をクリックします

wordpress-child-theme-adopting-202001_1-02

↑「WING(AFFINGER5)」をクリックします

wordpress-child-theme-adopting-202001_1-03

↑「子テーマAFFINGER5(WING)※ver〇〇〇〇〇〇〇〇」右側の「※承諾事項を了承の上、ダウンロードする」をクリックします

wordpress-child-theme-adopting-202001_1-04

↑ このようなバーが画面の下部に表示されたら、ダウンロードは完了です(このバーは、右端の「×」で閉じてOK!)

これでもう、子テーマファイルの用意はできました

自作するより100倍カンタンで安心

今度は、この子テーマファイルをWordPress管理画面でアップロードしていきます🐥

用意した子テーマファイルを、WordPress側でアップロードしてインストール&有効化

pc-work-202001_03

「公式の子テーマ」もしくは「自作の子テーマ」を無事用意できたら、WordPressでアップロードしていきましょう

FTPソフトでアップロードする場合

子テーマを自作して、FTPソフトを使って子テーマファイルをアップロードした場合は、以下の手順「WordPress管理画面でアップロード」までは不要になります

その場合、 WordPress管理画面 > 外観 > テーマ > 新規追加 > 該当の子テーマを選択 > インストール > 有効化 これで完了です

「FTPソフト」がよくわからない方は、ここはスルーして通常通り下記の手順でOKです

wordpress-child-theme-adopting-202001_2-01

↑ WordPress管理画面 > 外観 > テーマ をクリックします

wordpress-child-theme-adopting-202001_2-02

↑「新規追加」をクリックします

wordpress-child-theme-adopting-202001_2-03

↑「テーマのアップロード」をクリックします

wordpress-child-theme-adopting-202001_2-04

↑「ファイルを選択」をクリックします

wordpress-child-theme-adopting-202001_2-05

↑ 左側の「ダウンロード」を開いて、該当の子テーマZIPファイル(画像の例では「affinger5-child.zip」)を選択し、右下の「開く」をクリックします

ちなみに公式の子テーマではなく「自作」した場合、保存した場所を開いて同じように選択し、「開く」をクリックすればOK

wordpress-child-theme-adopting-202001_2-06

↑「今すぐインストール」をクリックします

wordpress-child-theme-adopting-202001_2-07

↑ インストールできたら、「有効化」をクリックします

wordpress-child-theme-adopting-202001_2-08

↑「WING-AFFINGER5 Child(=子テーマ)」が無事有効化されました

ちなみに右側に表示されてるそっくりなテーマが、通常のテーマ(=親テーマ)です

大事な注意点

子テーマは「親テーマの情報を読みこんで機能する」ので、子テーマの有効化が完了しても、親テーマはWordPressから削除しないで必ず残しておく必要があります

もし親テーマを削除してしまった場合、またWordPressにアップロードしてインストールすればOKです(有効化は不要!)

ということで、基本的な手順はこれでOKです

大変お疲れさまでした♪

あずき🐥

テーマのアップデート方法は ↓ から♪

wordpress-affinger5-update-202001-ec
【WordPressテーマ】WING AFFINGER5のアップデート手順を画像つきで解説【プラグイン「テーマアップデーター」を使用】

続きを見る

「WING AFFINGER5」を例に解説してるよ!

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.