HOME  /Welcart
 /Welcart_Basicの会員システムの仕様
2020年08月01日

Welcart_Basicの会員システムの仕様

WelCart_Basicの会員システムの仕様は下記の様になっています。

1.会員システムとは

1-1.会員システムの設定

会員システムを利用する場合は「Welcart shop→基本設定」に所定事項を記述します。

上記設定は下記を意味します。

①会員システムを利用し、ポイントを付与する設定になっています。

②ポイントは会員登録時に500ポイントを付与します。

③商品購入時のポイントは入金時に商品合計金額の1%を付与します。

<関連する関数>

項目 取得方法 備考
会員制フラグ usces_is_membersystem_state() true 会員制オン、false オフ
ポイント制フラグ usces_is_membersystem_point() true ポイント制オン、false オフ
初期付与ポイント usces_the_start_point() 会員入会したときのサービスポイント
初期ポイント率 usces_point_rate() 基本設定で設定したポイントレートを取得します

 

1-2.会員システムの表示

会員システムがONの時に下記が表示されます。

<PC画面>

ログインしている場合は下記表示になります

 

<スマホ、iPAD画面>

人アイコンをクリックすると下記画面が開きます。

 

2.会員システムの中でのFont Awesomeの使われ方

WelCart_Basicの「Font Awesome」で総てのフォントアイコンが使える様になりましたが、会員システムの中では下記が使われています。

<i class=”fa fa-user”></i>は、「Font Awesome」のです

 

3.プログラムとHTML表示

3-1.プログラム

会員システムのプログラム部分は「header.php」にダイレクトに記述されています。

<?php if(usces_is_membersystem_state()): ?>
	<div class="membership">
		<i class="fa fa-user"></i>
		<ul class="cf">
			<?php do_action( 'usces_theme_action_membersystem_before' ); ?>
			<?php if( usces_is_login() ): ?>
				<li><?php printf(__('Hello %s', 'usces'), usces_the_member_name('return')); ?></li>
				<li><?php usces_loginout(); ?></li>
				<li><a href="<?php echo USCES_MEMBER_URL; ?>"><?php _e('My page', 'welcart_basic') ?></a></li>
			<?php else: ?>
			    <li><?php _e('guest', 'usces'); ?></li>
			    <li><?php usces_loginout(); ?></li>
			    <li><a href="<?php echo USCES_NEWMEMBER_URL; ?>"><?php _e('New Membership Registration','usces') ?></a></li>
			<?php endif; ?>
			<?php do_action( 'usces_theme_action_membersystem_after' ); ?>
		</ul>
	</div>
<?php endif; ?>

■始めに会員システムのフラグをチェックして、会員システムがONの時だけ会員システムを表示しています。

<i class=”fa fa-user”></i>は、「Font Awesome」のです。

■会員システムの表示の前と後ろにアクションフックが記述されています。

この名前でアクションを記述すると、ここで表示されます。

■プログラムの中には下記のWelcart関数で記述されています。

項目 関数 備考
ログイン状態 usces_is_login() true:ログイン中、false:ログオフ中
会員名 usces_the_member_name() ログオフ中、「ゲスト」 を表示
ログイン中、「会員名」を表示
ログイン/ログアウト usces_loginout() ログオフ中、ログインのリンクを表示
ログイン中、ログアウトのリンクを表示
マイページ USCES_MEMBER_URL マイページのURLを返す
会員登録 USCES_NEWMEMBER_URL 新規会員登録URLを返す

3-2.HTML

上記のプログラムが実行されると下記HTMLが出力されます。

<div class="membership">
	<i class="fa fa-user"></i>
	<ul class="cf">
		<li>ゲスト</li>
		<li><a href="https://hnw.ddnsfree.com/welcart/usces-member/?page=login" class="usces_login_a">ログイン</a></li>
		<li><a href="https://hnw.ddnsfree.com/welcart/usces-member/?page=newmember">新規会員登録</a></li>
	</ul>
</div>

■CSSでのポイントは「membership」と「i」及び「ul li」です。

 

4.CSS制御

WelCart_BasicのCSSはモバイルファーストで記述されています。

ブレークポイントは下記の様になっています。

①620px(38.75em)以下

②740px(46.25em)まで

③880px(55em)まで

④1000px(62.5em)以上

スマホ、iPAD等 PC
.snav .membership {
	float: left;
}
.snav .membership a {
	display: block;
}
.snav .membership ul {
	display: none;
	position: absolute;
	width: 100%;	
	left: 0;
	padding: 1.4286em .714286em .714286em;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	z-index: 2;
}
.snav .membership.On ul {
	display: block;
}
.snav .membership li {
	float: none;
	background: none;
	border-bottom: 1px solid #e0e0e0;	
	margin: 0 0 1.07143em .714286em;
	padding-bottom: .357143em;
}
.snav .membership li:first-child {
	margin-left: 0;
}
.snav .membership li:last-child {
	margin-bottom: 0;
	border: none;
}

 

.snav .membership {
	padding: .357143em 0;
	float: right;
	overflow: hidden;
}
.snav .membership i {
	display: none;
}
.snav .membership ul {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}
.snav .membership li {
	float: left;
	margin: 0;
	padding: 0;
	border: none;
	line-height: 100%;
}
.snav .membership li:first-child {
	color: #565656;
	font-weight: bold;
}
.snav .membership li:first-child,
.snav .membership li a {
	font-size: 12px;
	border: none;
	margin: 0;
	padding: 0 .833334em;
	border-right: 1px solid #aaa;
}
.snav .membership li:last-child a {
	border-right: none;
}

 

■「<i class=”fa fa-user”></i>」に対しては何も記述が無いのでは表示されます。

青字の「display: none;」で「会員システム」を非表示にしています。

■「会員システム」のon/offは「front-customized.js」のJqueryで開閉しています。

■後は会員システムのスタイル定義です。

■1つ目の青字の記述で「<i class=”fa fa-user”></i>」を非表示にしているのでは表示されません。

■2つ目の青字の記述で「会員システム」を表示しています。

■上記で指定されてない項目はスマホのCSSを継承します

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

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

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

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


<関連記事一覧>

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

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

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

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

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

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

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

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

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

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

ここでは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 basic」の子テーマの作成方法を解説しています。

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

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

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

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

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