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

2019年11月7日

2019年11月8日

WRITER

橘伸季

この記事を書いている人 - WRITER -

橘伸季

広告やモールに頼らないネットショップ集客・販売の専門家。観葉植物通販グリーンマイルのウェブマスター。株式会社グリーンエージェント　代表取締役。趣味は旅行、花や緑など自然散策。

詳しいプロフィールはこちら

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

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

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

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

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

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

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

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

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

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

【自分で作るネットショップ】テーマ（テンプレート）をインストール

2019-11-06

1 子テーマのファイルの作成
2 子テーマの有効化

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

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
*/