HOME  /Welcart
 /Welcart_Basicの子テーマを作成する
2020年07月23日

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」をコピーして、下記に変更します。

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

/* Welcartのファイルの読み込み */
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です。

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

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

ここではWelcart商品を価格順に並び替える方法を解説しています

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

ここではWelcartで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品」としてリストする関数を作成する方法を解説しています。

ここではWelcart_basicのメニュのCSS制御の解説をしています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する方法を解説しています。

ここではWelCart_Basicのカートの仕様がどうなっているか?を解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

ここではwelcart_basicの会員システムがどの様な仕様になっているか?を解説しています。

ここではWelcart_basicの検索BOXがCSSでどの様に制御されているのか?を解説しています

welcart_basicは製品だけしか検索対象としていませんが、ここではページの情報を読み込んで、何を検索させるのかを自動で判断させる方法を解説しています。

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではWelcartの検索機能制限の解除と商品か否かを判断する関数を作成する方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

ここではカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。スライドサンプルとしては画像サイズと画像サイズ+αで表示させるサンプルを解説しています。

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と「無償テンプレート」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。