初心者の為のWEB開発

【簡単初心者向け】誰でもできるWordPress子テーマの作り方

※当サイトはPR(プロモーション)を含みます。

WorddPress 子テーマの作り方 初心者の為のWEB開発
ファズ
ファズ

Hello!ファズです

WordPressを使うにあたり便利な子テーマ。

しかし、「初心者にとっては聞けば聞くほどめんどくさそう・・・」と思うかも。

実はめっちゃ簡単に作れます!
今回は誰でもできる子テーマの作り方について書いていこうと思います!

前提として、サーバ契約やWordPressはすでにセットアップ済みで、すぐに作業ができる状態というところからスタートしていきますね。

プラグインによる子テーマ導入方法もあります。

ですが、プラグインを入れる必要性はないと思いますし、動作不良になる可能性も考慮するとおすすめできない。そもそも難しくないですしね!

上記を踏まえ、この記事では子テーマ作成プラグインの使い方は解説していないのでご了承ください。

こんな人に読んでほしい人

  • 子テーマの作り方が知りたい人
  • 子テーマのアップロード方法が知りたい人
  • 子テーマ作ったけど反映されない人
ファズ

Hello!ファズです。

◆仕事関連 WEB制作4年:「WordPress/WEB制作」
◆インドア趣味:アニメ好き歴10年/ガンプラ購入数十種以上!
◆生活品:ソイプロテイン常用2年、試した数十数種

↑インドア多趣味の実際に試した内容の記事を紹介していきます。

※当サイトはリンクフリーですが「出展元」として記載をお願いします!

ファズをフォローする
wordpressのおすすめテーマ
WordPressのテーマ選びでお悩みの方必見!

【初心者におすすめの記事】

◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい

子テーマ作り方STEP

  • STEP①
    空のフォルダで「親テーマのフォルダ名+child」を付けて用意。

    親テーマを消すと子テーマも機能しなくなるので、間違えて消さないようにわかりやすい名前を付けるのを推奨。

    名前は任意で「child」以外でも構いませんが、楽でわかりやすいのでよく使われています。

    「フォルダ名例:cocoon-child」

  • STEP②
    子テーマ用のファイルを作成する
    1. functions.php
    2. style.css
  • STEP③
    サーバにアップロードして有効化が確認できたら完了!

それではさっそく子テーマの作り方STEP!

そもそも「子テーマとはなんぞや?」という人は「【WordPressの子テーマとは?】役割やそもそも必要か考える」の記事を先にご覧ください。

子テーマの作り方フローは下記の流れ。

  • 「親テーマのフォルダ名+child」を付けて新規フォルダを用意
  • 子テーマ用のファイルを作成する
  • ファイルに必要な情報を書き込む
  • thmesフォルダにアップロード

①空のフォルダで「親テーマのフォルダ名+child」を付けて用意。

まずは子テーマに必要なファイルを格納するフォルダを作成します。作成場所はWordPressテーマを設置する「thmes」フォルダの階層。

wordpressテーマの階層を示す画像

つまり元テーマと同じ階層になります。

あ、フォルダ名masterの部分はcocoonから配布されている子テーマの名前なので気にしないでね。

子テーマ名はなんでもいいですが、わかりやすいこともあって、

  • 何の子テーマかわかりやすい
  • 複雑な名前は読みにくい
  • フォルダ名を記述する時に記述ミスが起こりにくい

というようなメリットから「親テーマのフォルダ名+child」がよく使われますね。

②子テーマ用のファイルを作成する

フォルダ内に格納するファイルを作成します。

といっても、ベースは親となるテーマからコピーしてくるだけなので簡単ですし、基本的に作成して動かすために必要なファイルは2つ!

【コピーするファイル】

  • functions.php
  • style.css

上記のファイルを元テーマからコピーして、作成したフォルダの中にポイしてください。

コピーするファイルはindex.phpファイルと同階層、テーマフォルダ直下にあります。

3つコピー方法】

  • 親テーマがローカル上にあれば、解凍してファイルをコピー
  • FTPツールでサーバに接続し、指定した2つのファイルを選択してダウンロード
  • 親テーマをコピーして指定の2ファイル以外を削除

いずれの方法でも構いません。

WordPressテーマによっては専用の子テーマが配布されている場合があるので、その場合は専用のものを使うようにしてください!

自作のものだと動作不良を起こすことがあります。

③ファイルに必要な情報を書き込む

子テーマ内にコピーしたファイルをいれたら

  • functions.php
  • style.css

両方のファイルの中身を記述していきたいと思います。

まずは「functions.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' );
}

↑このコードを記述することで親テーマのスタイルが読み込まれます。

次に「style.css」のテーマ情報を書いていくので、function.php同様に中身をまっさらにしてください!

全て消してキレイにできたら下記のスタイル情報を記述。

/*
Theme Name:〇〇〇-child
Template:親テーマ名
Version:(例1.2.3)
*/

◇ Theme Name
子テーマのフォルダ名を指定してください。日本語以外であればわかりやすいように付けたらOK。


Template
「親」テーマを指定してください。themesフォルダの中にあるフォルダ名を指定でOK。


Version
親テーマ「style.css」のバージョンを入力してください。
バージョンの確認方法は直接ファイルを見たり、WordPressの管理画面からテーマに進み、「テーマの詳細」をチェックしたら確認できます。


以上!これで基本的な準備OK!!!

作り方は簡単ですが、メモ帳を使う場合は「改行」や「余白」で変に記述されるとエラーの原因になるので気をつけてくださいね。

文字コードは”utf-8″で指定してください。

子テーマのアップロード方法

それではthmesフォルダにアップロードして反映させてみましょう!(もしLocalなどのツールを使っていても同じです)

フォルダをZIP化する

まずは作成した子テーマフォルダを「ZIP」化します。この時、ZIP化は中身だけでなく、フォルダごとZIP化するようにしてね。

ZIP化したらいよいよアップロード!やり方は自由ですが、3つほど例として方法を紹介。

【アップロード方法の選択肢】

  • WordPressの管理画面にある「テーマ」からアップロード
  • 自身が準備したFTPツールを使ってサーバーに接続してアップロード
  • サーバーパネルからサービスで用意しているツールでアップロード

● 管理画面からアップロード

まずは簡単なWordPressの管理画面からのアップロード方法。

通常テーマ同様、ZIP化されたテーマを管理画面左のメニュー「外観」→「テーマ」→「新規追加」ボタンを選択してディレクトリを指定してアップロードで完了。

●FTPツールを使ったアップロード

FTPツールでサーバへ接続→「WordPressを設置したドメインへ」→「wp-content」→「themes」の全部のテーマを格納しているフォルダがあるのでそこへアップロード。

サーバーで用意しているツールでアップロード

サーバーパネルなどから利用できるファイルマネージャー・・・独自のFTPツールと思ってください。基本的には自分で用意したFTP同様の使い方ですが、利用しているサーバーによって若干表示は異なります。

下記はXサーバーでファイルマネージャーを利用する際の入り口例。

Xサーバーのファイルマネージャーを示す図

アップロード後、WordPressの管理画面テーマ一覧へ反映されているか確認し、「失敗」などのエラー文言が表示されなければ問題なくUPできているので、後は「有効」にすれば完了!

おつかれさまでした!

現時点だとまっさらな子テーマが作成されアップロードされている状態。管理画面から子テーマを有効に出来ている状態で、親テーマと同じスタイルが適用されていれば完了です。

以降、大きな変更を加える場合は子テーマにファイルを追加したり、style.cssを編集していけば親テーマの更新に影響が受けない運用が可能になります。

余談ですが、子テーマがそもそも必要ないケースが結構あります。「【WordPressの子テーマとは?】役割やそもそも必要か考える」の記事でもまとめたので、自分が該当するか一度チェックしてみることをおすすめします。

反映されない場合のチェックポイント

もし反映されない、またはエラーが出ている場合は以下のポイントを要チェック。

  • 子テーマは作ったフォルダを含めてZIP化しているか
  • 子テーマstyle.cssの「Theme Name」「Template」「Version」は正しく入力されている・または一致しているか
  • サーバへツールを使ってアップロードした場合、アップ場所は間違っていないか

基本的には上記を一度確認すれば大抵修正箇所が見つかると思います。

ただし、稀に構造自体が複雑化しているテーマがあり、基本的な子テーマ作成ではつなげることができないことも。

その場合は、テーマを指定して子テーマの作り方を調べてみてみてください。

配布されているテーマによっては、専用の子テーマも一緒に配布している場合もあるので要チェック!

プラグイン「Child Theme Configurator」を使って作る

子テーマの作成方法は簡単といいましたが、人によっては「ファイルを編集する」と聞いただけで拒絶反応が起こる方もいるかもしれません。

(もしかしたらcss見るだけで投げ出す方も)

そんな方にも使えるプラグインもちゃんとあるのでご安心を!それがこれっ!

「Child Theme Configurator」というプラグイン。

※ただし、どのテーマでも使えるかはわからないので、設定時にちゃんと確認するようにしてね。

それではインストールから子テーマを作るまでの手順を紹介していきます。

「Child Theme Configurator」のインストール

【インストール手順】

  • ダッシュボードから「プラグイン」 > 「新規プラグインを追加」を
  • キーワード検索で「Child Theme Configurator」を入力
  • ヒットした「Child Theme Configurator」を「今すぐインストール」
  • 「有効化する」にして完了

まずはインストール方法。

WordPressの管理画面(ダッシュボード)へ行き、メニューから「プラグイン」 > 「プラグインのを新規追加」 > 右上の検索窓に「Child Theme Configurator」を入力して検索

WordPressの管理画面からプラグインを示す画像
新規プラグインを検索した画面

赤枠内プラグイン「Child Theme Configurator」の「今すぐインストール」を押す。

インストールが終わると「有効化する」ボタンに変わるので、そのまま有効化してください。

これでインストールは完了!

子テーマを作成する

子テーマ作成手順】

  • 管理画面のメニューから「ツール」 > 「Child Themes」を選択
  • 「CREATE a new Child Theme」にチェックを入れる
  • 子テーマを作りたいテーマを選択
  • 「Analyze」をクリックして作成可能かチェックする
  • テーマの設定を引き継ぐ設定をして子テーマを作成

※インストールが完了し有効化したら「ツール」の中に「Child Themes」が表示されるようになっています。


【①管理画面のメニューから「ツール」 > 「Child Themes」を選択】

WordPressの管理画面のツールから「Child Themes」を選択

【②「CREATE a new Child Theme」にチェックを入れる】

設定項目が1~3まで表示されているので1の「Select an action:」では「CREATE a new Child Theme」を選択します。

【③子テーマを作りたいテーマを選択】

子テーマを作るテーマを選ぶ

項目2「Select a Parent Theme:」項目ではどのテーマの子テーマを作成するか選択できます。

デフォルト設定されているテーマ名をクリックするとドロップダウンメニューが表示されます。

好きなテーマを選択。

【④「Analyze」をクリックして作成可能かチェックする】

作成できるかチェックするボタン

「Analyze」ボタンをクリック。

Analyzeを押すと作成可能か自動でチェックが開始するの少し待ちます。

チェックが完了し、作成可能なら項目1~3までしかなかった表示が9まで表示されるので必要な部分にチェックを入れていきます。

※もし作成できない場合はエラー表示が出るはずなので翻訳に通して内容を確認してみてください。

【⑤テーマの設定を引き継ぐか決めて子テーマを作成】

新しく表示された項目は多いですが、基本的に子テーマを作りたい場合、項目の「4~7」はそのままでOK。

項目8の「Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme:」のみ自分で選択が必要。

カスタマイズの設定引き継ぎチェックボックス

項目8は「親となるテーマで設定したカスタマイズ内容を引き継ぎますか?」って感じの内容ですね。

項目8は下記に該当する場合チェックを入れてください。

  • 親となるテーマにデザインが適用されている
  • WordPressで「ウィジェット」や「メニュー」などの標準設定を済ませてある

親テーマで既にゴリゴリにいじってしまっている方はチェックを入れると引き継がれるので、そのまま利用できます。

チェックを入れないと項目2で「できません」判定されて作成できないことがあります。

その場合は設定をやり直し、再度項目8移動してチェックを入れてね。

項目8まで設定完了したら、ラストのClick to run the Configurator:項目9「Create New Child Theme」ボタンをクリックして作成

これでテーマ一覧に子テーマが追加されているはずです。

後は追加された子テーマを有効化して完了!おつかれさまでした!!

子テーマ作成後の対応

正直、子テーマの作成にプラグインを使う必要なんかないとも思ってましたが・・・子テーマ作成後プラグインを削除しちゃっても良いと考えるとあり。

初心者の方が手軽に作成するにはおすすめしてもいいかなとは思います。

後々カスタムテンプレートを作成するファイルの追加もできるみたいなので、最低限これから勉強していきたい方にもよく、プラグインを入れたままにしててもいいかも!

ただし、使う頻度がほんとに少ない場合は子テーマ作成後は削除推奨です。

プラグインに関しての注意点は下記記事にも書いてるので興味がある方はご覧ください。

【簡単プラグインの入れ方】ワードプレスを機能拡張するメリットと注意点

子テーマってどう使う?

WordPressの子テーマを使うには中のファイルを編集して上書きする形で使用します。

【編集方法】

  • 管理画面の「テーマファイルエディター」を使う
  • テーマファイルを「ローカルで直接編集して」アップロードする

この2つの方法があります!

ちなみに初心者さんは「管理画面のテーマファイルエディターを使う」方を選択してください。

テーマファイルエディターを使う場合、必ずバックアップをとって作業するようにしてくださいね。

管理画面 > 外観 > テーマファイルエディター > 右上「編集するテーマを選択」が子テーマになっているか確認!OKならファイルを選択して編集。

もっと詳しい使い方は下記の記事からご覧ください。

WordPress子テーマ作成まとめ

以上、WordPressの子テーマの作り方についてまとめてきました。

どうでしたか?

以外と誰でもできる内容だったと思います。

多分めんどくさいのはメモ帳でうまくいかない場合のエディタ探しくらいかな?

この記事を読んでくれている方は初心者さんだと思うので、エディタは好みで選んで大丈夫だと思いますよ。

ガッツリ使っていくならシェア率の高いVscodeをおすすめ。

触る機会だと思って一度イジってみてください。

「黒背景のカラー文字を触ってる自分かっけ~!!!」ってなるかも(笑)

ファズ
ファズ

今回はこんな感じですね。

ありがとうございました~

コメント

タイトルとURLをコピーしました