2022年版ワードプレスのテーマ「Jin(ジン)」子テーマをつくる方法

ワードプレスのテーマ「Jin(ジン)」の子テーマを作る方法です。

JINでは、公式サイトで子テーマを準備してくれています。
そちらを使って、簡単に子テーマをインストールできますよ!

Ad

完成イメージの紹介

ワードプレスのテーマ「JIN」の子テーマをインストールしています。テーマページに、「Jin-child」が有効化されています。

Jinの公式サイトから子テーマをダウンロードする

子テーマとは、親テーマとセットで使う、「カスタマイズ専用」のテーマです。

Jinに限らず、Wordpressのテーマは、アップデートされることも多いため、親テーマを直接編集してカスタマイズいる場合、「アップデートでカスタマイズ内容が消えてしまう」ことがあります。

その点、子テーマを作っておけば、大元のテーマがアップデートされても、子テーマに影響はありません。カスタマイズ情報が消えることもないので、安心です。

今回はJinが提供しているオフィシャルの子テーマを使用します。
もしまだ、Jinの大元(親テーマ)をお使いのワードプレスにインストールしていない場合は、必ず「親テーマ」→「子テーマ」の順番でインストールしてください。

さっそく、Jinの公式サイトから子テーマをダウンロードしましょう。
上のボタンから、Jinの公式サイトへいき、「Download」と書かれたボタンをクリックしましょう。

Jinの公式サイトから、黄色いDOWNLOADボタンをクリックする。

「jin-child.zip」という名前のzipファイルが、ダウンロードされます。こちらは圧縮したままの状態にしておいてください。

JINの子テーマをインストールします

それでは、ご自身のワードプレスに、ダウンロードした子テーマをインストールしていきましょう。

ワードプレスにログインして、管理画面(ダッシュボード)を表示します。

『外観』 > 『テーマ』 をクリックします。

ダッシュボード → テーマ をクリック

現在、インストールされているテーマ一覧が表示されます。

そのページ上部にある「新規追加」をクリックします。

テーマを追加する画面が表示されます。

同じくページ上部に表示される「テーマのアップロード」をクリックします。

テーマのアップロード画面が表示されます。

ページ中央に、「ファイルを選択」するボックスが表示されますので、先ほどJINの公式サイトからダウンロードした、子テーマのzipファイルを選択します。

アップロードが完了したら、「今すぐインストール」ボタンをクリックして、インストールされるのを待ちましょう。

インストール後、「テーマのインストールが完了されました」と表示されれば、無事にインストールが完了しています。

無事にインストールが完了すれば、「有効化」をクリックします。こちらはテーマ一覧からでも、有効化することができます。

もし、「親テーマが必要です….」などのエラーが表示された場合は、親テーマが正しくインストールされていない可能性があります。その場合は、親テーマをインストールしてから、子テーマをインストールしてください。

子テーマにカスタマイズ用ファイルを作成する

子テーマを作ったら、さっそくカスタマイズ用のファイルを作ってみましょう。

カスタマイズ用のファイルを作るには、FTPツールを使って、フォルダやファイルを、親テーマからコピーするのが良いでしょう。

FTPツールの場合(CyberDuck)

FTPツールで、お使いのサーバー環境にログインしてください。
/wp-content/themes/jin が親テーマのインストールディレクトリです。

親テーマのインストールディレクトリ

そこまで移動したら、カスタマイズしたファイルを、コピーしましょう。
今回は、 /include/headerstyle/geader-style3.php をカスタマイズする想定です。

コピーしたいファイルの階層まで、FTPツールで移動します。
今回は/wp-content/themes/jin/include/headerstyle/header-style3.php がファイルしたいファイルのフルpathになります。

今回のコピーしたいファイルの階層

お目当てのファイルがあれば、そちらをローカルPCなどに、コピーしましょう

続いて、子テーマにアップロードしていきます。

再びFTPツールで、子テーマのインストールディレクトリへ移動します。
/include/headerstyle/ の2階層については、おそらく初期段階でフォルダがありません。
FTPツールで、新しくフォルダをつくりましょう。

jin-childの配下に、フォルダをつくる

FTPツールで、コピーしておいたheader-style3.phpをアップロードしましょう。

ワードプレスで確認する

ワードプレスの管理画面で、「ダッシュボード > 外観 > テーマエディター 」をクリックします

編集するテーマを選択で「jin-child」を選択します。

表示されるファイルに、先ほどFTPでアップロードしたファイルが表示されれば、OKです。

Ad
最新情報をチェックしよう!