Welcart Panetteriaの子テーマの作り方（XSERVER利用の場合）

こんにちは、逆転のEC戦略の橘です。

今日はWelcartの最新版のテーマ「Panetteria」の子テーマの作り方を解説いたします。

※現在は子テーマを自作する必要は無くなりました。予め子テーマは用意されています。

「これからネットショップをするなら、最新版で頑張ってみよう！」
と意気込み「Panetteria」を購入した人も多いのではないでしょうか。

しかしこの「Panetteria」は、初心者さんが使うには少々最初の設定に難があります。

それは「Panetteria」は親テーマだけで、子テーマは自分で作らないといけない点。

で、こちらが公式サイトで解説している子テーマの作り方です。

Welcartの公式サイトでは「子テーマの作成は難しくありません」との表記があるので安心して購入を決めた方もおられるかと思いますが、上記解説だけでは初心者さんは相当に手こずる作業と思います。

そこで、今日はじっくりと一つずつ「Panetteria」の子テーマの作り方を解説するのでご参考にしながら進めてください。

尚、今回の子テーマの作り方はXSERVER（エックスサーバー）を利用していることを前提としておりますがご了承願います。

Welcartのテーマのインストールの方法、子テーマ・親テーマについては以下を参考にしてください。

子テーマのファイルの作成

ZIPファイルを解凍

公式サイトにある以下の画像の通りに各ファイルを「****/wp-content/themes/ 」という親テーマと同じ階層に設置します。

公式サイト　https://www.welcart.com/docs/themes/welcart_panetteria/child_theme.html　参照

「？？？」
って方もご心配なく。
取りあえずは細かいことは気にせず、以下の通りに進めましょう。

まず、最初にダウンロードした「Panetteria」のZIPファイルを展開しておいてください。

やり方は

「Panetteria」のZIPファイルをダブりクリックし

全てを展開をくクリックします。

このようにフォルダが解凍されればOK。

こちらは後に使いますので次の作業へ進みましょう。

子テーマのフォルダを作る

XSERVERのファイルマネージャーで、子テーマに必要なファイルを一つずつ作っていきます。

時間のかかる作業ですので、1時間程度のお時間に余裕のある時に行いましょう。

XSERVERのファイルマネージャーにIDとパスワードでログインします。

最初に右の下の方にあるファイル名の文字コードを「UTF-8」に選択。

あなたのサイトをクリック

public_htmlをクリック

wp-contentをクリック

themesをクリック

welcart_panetteriaというフォルダがあると思います。
ここはクリックしないでください。

「welcart_panetteria」さえあれば良いです。
他のフォルダは同じじゃなくても問題なし。

この階層に子テーマのフォルダを作ります。

右下の方にある「作成」に「welcart_panetteria-child」と入力し「フォルダ作成」をクリックします。
フォルダ名は何でも良いですが、ここでは子テーマと分かりやすくするため「welcart_panetteria-child」とします。

「welcart_panetteria」と同じ階層に「welcart_panetteria-child」が出来ました。

これが子テーマのフォルダとなります。

さらに、これからこの子テーマに必要なファイルを作っていきます。

assetsフォルダを作る

では、「welcart_panetteria-child」フォルダが出来たので、その中に以下のファイル全てを作っていきます。

上から順番に作っていくことにします。

まずは最初の「assets」から

先ほど作った「welcart_panetteria-child」をクリックします。

画面が切り替われば右下の作成に「assets」と入力し「フォルダを作成」をクリック。

続いて同じように新しくできた「assets」フォルダをクリックし画面が切り替われば右下の作成に「images」と入力し「フォルダを作成」をクリック。

続いて同じく新しくできた「images」フォルダをクリックし画面が切り替われば右下の作成に「crystal」と入力し「フォルダを作成」をクリック。

「crystal」フォルダに画像を入れるので、「crystal」をクリックします。

画面が切り替われば右の「ファイルのアップロード」で以下の順で必要な画像をアップロードします。

①ファイルを選択をクリック
②解凍したwelcart_panetteria > assets > images > crystal > default で　defaultをクリック
③開くをクリック
④アップロードをクリック

以上でassetsフォルダは終了です。

functions.phpを作る

次はfunctions.phpを作ります。

現在、上記のような画面になっていると思うので、赤枠を何度かクリックし以下のようにassetsフォルダのある階層まで戻ります。

そのassetsフォルダがある階層の右の作成で下のファイル作成に「functions.php」と入力し、ファイル作成をクリックします。
その際に文字コードがUTF-8になっていることを確認しましょう。

「functions.php」といファイルが出来ているので、①チェックを入れて②編集をクリック。

画面が変わるので以下をコピーして、矢印の赤枠へペーストします。
文字コードがUTF-8にして、保存をクリック

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘parent-cart’, get_template_directory_uri() . ‘/usces_cart.css’, array(‘parent-style’, ‘usces_default_css’) );
}

尚、1行目には画像の通りの開始タグ　<疑問符php　を入れてください。
疑問符は「?」にしてください。

「<」　と「?」と「php」　を一緒に記事で書くと文字化けするので、こういう書き方になってしまいました。

functions.phpの作業はココまでです。

imagesフォルダを作る

では、また「assets」のある階層に戻りましょう。

今その階層には「assets」「functions.php」があるはずです。

その階層の右下の作成で「images」と入力し「フォルダ作成」をクリックします。

左に「images」フォルダが出来ているので、それをクリック。

今作った「images」フォルダに親テーマの画像を入れていきます。

①ファイルを選択
②解凍したwelcart_panetteria > images。　このimages にある画像を一つずつ選択し
③開く
④アップロード

これを繰り返し20個程ある画像を全て、子テーマに作ったフォルダに入れてください。

「images」フォルダはココまでで終了です。

screenshot.pngの取り込み

では、また「assets」のある階層に戻りましょう。

今その階層には「assets」「images」「functions.php」があるはずです。

その階層まで戻れば以下の通りに進んでください。

①ファイルを選択をクリック
②解凍したwelcart_panetteria > screenshot。　このscreenshotを選択し
③開く
④アップロード

screenshot.pngはココまでで終了です。

style.cssの設置

では、また「assets」のある階層に戻りましょう。

今その階層には「assets」「images」「functions.php」「screenshot.png」があるはずです。

右下の作成に「style.css」と入力し「ファイル作成」をクリック。

左に「style.css」が出来ているので、前にチェックを入れて「編集」をクリックします。

赤枠に以下をコピペします
/*
Theme Name: Welcart Panetteria Child
Description: Welcart Panetteria Child Theme
Author: Collne Inc
Template: welcart_panetteria
Version: 1.1.1
*/

文字コードをUTF-8にして、保存をクリック。

style.cssの設置はココまでで終了です。

usces_cart.cssの設置

では、また「assets」のある階層に戻りましょう。

今その階層には「assets」「images」「functions.php」「screenshot.png」「style.css」があるはずです。

この階層で右下の作成に「usces_cart.css」と入力し「ファイル作成」をクリック。

左にusces_cart.cssファイルが出来ていれば、usces_cart.cssの設置は終了です。

wc_templatesフォルダの作成

では、また「assets」のある階層に戻りましょう。

今その階層には「assets」「images」「functions.php」「screenshot.png」「style.css」「usces_cart.css」があるはずです。

この階層で右下の作成に「wc_templates」と入力し「フォルダ作成」をクリック。

左に「wc_templates」フォルダが出来ていますので、そちらをクリックします。

「wc_templates」の階層に行きますので

右下の作成に「cart」と入力しフォルダ作成をクリック。

続いて同じく作成に「member」と入力しフォルダ作成をクリック。

「cart」と「member」フォルダが出来たのを確認してください。

ではまず「cart」をクリックしてください。

画面が切り替われば右の「ファイルのアップロード」で以下の順で必要な画像をアップロードします。

①ファイルを選択
②解凍したwelcart_panetteria > wc_templates > cart。　このcartの中のデータをひとつづづ選択し
③開く
④アップロード

赤枠全てをアップロードしてください。

ひとつ前の画面に戻り

次は「member」をクリック。

画面が切り替われば右の「ファイルのアップロード」で以下の順で必要な画像をアップロードします。

①ファイルを選択
②解凍したwelcart_panetteria > wc_templates > member。　このmemberの中のデータをひとつづづ選択し
③開く
④アップロード

赤枠全てをアップロードしてください。

ひとつ前の画面に戻り

画面が切り替われば右の「ファイルのアップロード」で以下の順で必要な画像をアップロードします。

①ファイルを選択
②解凍したwelcart_panetteria > wc_templates。　このwc_templatesの中の赤枠のデータをひとつづづ選択し
③開く
④アップロード

wc_templatesの設定が終わりました。

お疲れ様でした。
これでひとまずXSERVER（エックスサーバー）側の設定が終わりました。

後もう少しです。

子テーマの有効化

WordPressの管理画面に入り

外観にカーソルを合わせテーマをクリックします。

「welcart_panetteria-child」が新しくできているので、そちらにカーソルを合わせ

有効化をクリックで完了です。

念のためサイトがちゃんと表示されるか確認しておきましょう。