Welcart_Basicの子テーマを作成する

ここでは「Welcart basic」の子テーマの作成方法を解説します。

1.子テーマ設定の基本

子テーマの基本的な設定方法は下記ドキュメントを参照してください。

子テーマの設定方法

Welcart basicで少し違う所は、

・親テーマの「style.css」に加えて、

・カートのCSSである「usces_cart.css」も

併せて読み込む必要がある事です。

又、読み込む順番にも制約があります。この辺は下記で説明していきます。

2.Welcartのカスタマイズサイトでの設定例

子テーマの作成だけなら簡単な記述で良いのですが、これからこのサイトは色々な機能追加を行っていきたいので下記構成で子テーマを作成しました。

1.第一階層

子テーマフォルダ「welcart_child」というフォルダを作成します。

2.第二階層

①functions.php

親テーマから「functions.php」をコピーし、中身は下記に変更します。

<?php
/*****************************************************************************
ファンクションロード
/******************************************************************************/
/* jquery&cssロード */
	get_template_part('func/setting/theme_setting');

■「get_template_part」はphpプログラムを読み込む関数で、指定されたフォルダの「theme_setting.php」が読み込まれます。

②screenshot.png

親テーマから「screenshot.png」をコピーします。

これが子テーマの画像になります。当然、別の画像でも良いです。

③style.css

親テーマから「style.css」をコピーし下記に変更します。

/*
Template:welcart_basic
Theme Name:welcart_child
*/

■上記は親テーマは「welcart_basic」で、このテーマは「welcart_child」ですという宣言文です。

④funcフォルダの作成

「welcart_child」フォルダの下に「func」というフォルダを作成します。

3.第三階層

「func」フォルダの下に「setting」というフォルダを作成します。

4.第四階層

「functions.php」をコピーして、ファイル名を「theme_setting.php」に変更し、中身を下記にします。

<?php
/*****************************************************************************
CSSやスクリプトファイルの読み込み
*******************************************************************************/
function theme_setting() {
/* スクリプトファイルの読み込み */

/* CSSファイルの読み込み */
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') );
}
add_action('wp_enqueue_scripts', 'theme_setting');
?>

■「wp_enqueue_scripts」は、スクリプトやCSSを読み込むアクションフック関数です。

header.phpの<head>～</head>までに記述するスクリプトやCSSをこの関数で行います。

■「wp_enqueue_style」は、スタイルシートを読み込むWordPress関数です。

引数は下記になります

第一引数：任意名称　第二引数：CSSのURL　第三引数：読み込む順番

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

上記は親テーマフォルダにある「style.css」を「parent-style」という名前で読み込め！という命令です。

wp_enqueue_style( 'parent-cart' , get_template_directory_uri() . '/usces_cart.css', array('parent-style', 'usces_default_css') );

上記は親テーマフォルダにある「usces_cart.css」を「parent-cart」という名前で読むのですが、読み込む順番は「parent-style」「usces_default_css」の後に読み込みなさい！という命令です。

メモ

「get_template_directory_uri()」は「親テーマ」フォルダを指すWordPress関数です。

この関数を使う事によりURLのダイレクト記述をさけています。

また、「usces_default_css」は、Welcartプラグインの中のCSSです。

以上で子テーマの作成は完了しましたので、このテーマを有効化します。

以上で子テーマは完了しました。