HOME  /Welcart
 /Welcart_Basic メニュの仕組みとは?
2020年09月06日

Welcart_Basic メニュの仕組みとは?

WelCart_Basicのメニュは下記の様になっています。

<PC>

<スマホ>

チェックボックスのON/OFFFでメニュが開閉できる様に設計されています。

 

1.プログラムとHTML表示

メニュの表示プログラムは「header.php」の下記部分です。

<nav id="site-navigation" class="main-navigation" role="navigation">
	<label for="panel"><span></span></label>
	<input type="checkbox" id="panel" class="on-off" />
	<?php 
			$page_c	=	get_page_by_path('usces-cart');
			$page_m	=	get_page_by_path('usces-member');
			$pages	=	"{$page_c->ID},{$page_m->ID}";
			wp_nav_menu( array( 'theme_location' => 'header', 'container_class' => 'nav-menu-open' , 'exclude' => $pages ,  'menu_class' => 'header-nav-container cf' ) );
	?>
</nav>

■上記の赤字部分の<label>の「for名」と<input>の「id名」を同じ名前にすると、ラベルのクリックでチェックボックスのON/OFFが行えるようになります。

■上記の茶色部分の「wp_nav_menu」で指定している引数は下記になります。

引数 解説
‘theme_location’ => ‘header’ メニュ名の中の「header」メニュを表示します。
‘exclude’ 除外するメニュ項目を指定します。
固定ページのカートとメンバは選択していないのでこの意味はありません。
‘container_class’ => ‘nav-menu-open’ メニュ全体をDivで括りクラス名に「nav-menu-open」を指定しています。
‘menu_class’ => ‘header-nav-container cf’ メニュのUL要素のクラス名に「header-nav-container cf」を指定しています。

上記を実行すると下記HTMLが生成されます。

<nav id="site-navigation" class="main-navigation" role="navigation">
	<label for="panel"><span></span></label>
	<input type="checkbox" id="panel" class="on-off" />
	これより下がメニュー項目
    <div class="nav-menu-open">
		<ul id="menu-header" class="header-nav-container cf">
            <li メニュー①</li>
			<li メニュー②>
				<ul class="sub-menu">
					<li 子メニュA</li>
					<li 子メニュB</li>
				</ul>
			</li>
			<li メニュ③</li>
			<li メニュ④</li>
		</ul>
	</div>		
</nav>

■「wp_nav_menu」でメニュが展開され、指定したクラス名が付与されています。

■CSSでは「site-navigation」の下にある要素で、スタイルを設定しています。

 

2.メニュのCSS制御

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

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

①620px(38.75em)以下

②740px(46.25em)まで

③880px(55em)まで

④1000px(62.5em)以上

2-1.スマホ、iPAD等(1000px未満)

CSSは下記になります

#site-navigation label,
#site-navigation input[type="checkbox"].on-off {   /* チェックボックスは非表示 */
	display: none;
}
#site-navigation label {                                        /* 開閉アイコンの表示位置は画面の右上 */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	padding: 0;
	text-align: right;
}
#site-navigation label span {               /* 開閉アイコンは表示する */
	display: block;
	padding: .714286em;
}
#site-navigation label span:before {    /* 開閉アイコンは FontAwesomeのf03a表示する */
	content: "\f03a";
	display: block;
	color: #fff;
	font-family: FontAwesome;
	font-size: 1.5714em;
	vertical-align: text-bottom;		
}
header #site-navigation input#panel.on-off + div.nav-menu-open,
header #site-navigation input#panel.on-off + div.header-nav-container {/* チェックなしの処理 */
	display: block;
	height: 0;         /* メニュ表示の高さを0にする事により非表示にしている */
	overflow: hidden;
}
header #site-navigation input#panel.on-off:checked + div.nav-menu-open,
header #site-navigation input#panel.on-off:checked + div.header-nav-container {/* チェックありの処理 */
	position: absolute;
	left: 0;
	width: 100%;
	height: auto;     /*メニュ表示の高さを持たせる事により表示させている */
	background-color: #fff;
	z-index: 1;
}
#site-navigation ul {
	padding: 1.4286em .714286em .714286em;
}
#site-navigation ul ul {
	padding: 0;
}

メニュの表示/非表示はメニュの高さで制御している。普通はdisplayのblock/noneで制御している。

 

2-2.PC画面(1000px以上)

CSSは下記になります

#site-navigation {
	clear: both;       /* スマホで設定したflot処理を総て解除 */
	padding: 0;
}
#site-navigation label {   /* 開閉アイコンは非表示 */
	display: none;
}
header #site-navigation input#panel.on-off + div.nav-menu-open,
header #site-navigation input#panel.on-off:checked + div.nav-menu-open,
header #site-navigation input#panel.on-off + div.header-nav-container {      /* チェックなしの処理 */
	display: block;                           /* メニュを表示 */
	overflow: inherit;
	height: auto;
	background-color: #131313;      /* メニュの背景色(黒) */
}
#site-navigation ul {                      /* メニュ幅は1000pxで中央配置 */
	width: 1000px;
	margin: 0 auto;
	padding: 0;
}
#site-navigation li {                        /* メニュ項目は左詰め */
	position: relative;
	float: left;
}
#site-navigation li a {                      /* メニュ項目の文字設定 */
	color: #fff;
	display: block;
	margin-bottom: 0;
	padding: 1em 1.42857em;
	border-bottom: none;
	line-height: 100%;
}
#site-navigation li {                          /* メニュ項目の右に線を引く */
	padding: 0;
	border-right: 1px solid #666;
}
#site-navigation ul li:first-child {       /* メニュ項目の1番目は左に線を引く */
	border-left: 1px solid #666;
}
#site-navigation li.current_page_item a,     /* 選択されたメニュ項目の色変更 */
#site-navigation li.current-menu-parent a{
	background-color: #565656;
}
#site-navigation li.current_page_item li a,  /* 選択されたメニュ項目のリンク文字設定 */
#site-navigation li.current-menu-parent li a {
	background: none;
}
#site-navigation li a:hover {                      /* メニュ項目にカーソルが来た時の色変更 */
	color: #fff;
	background-color: #565656;
	text-decoration: none;
}
/* -- sub-menu -- */
#site-navigation ul ul {                            /* 子メニュの初期設定は非表示。表示位置はメニュの下を計算 */
    display:none;
	position:absolute;
	top:42px;
	left:-2px;
	width: 120%;
	background-color: #fff;
	border: 3px double #e0e0e0;
	float:left;
	z-index: 99999;
}
#site-navigation ul li li {                            /* 子メニュのスタイル設定 */
	width: 100%;
	margin-left: 0;
	border: none;
}
#site-navigation ul li li:first-child {              /* 子メニュの最初のブロックの罫線を無くす */
	border: none;
}
#site-navigation li li a:hover {                     /* 子メニュにカーソルが来た時の文字色 */
	color: #262626;
}
#site-navigation li li.current-menu-item a {  /* 選択された子メニュの背景色 */
	background-color: #f6f6f6;
}
#site-navigation ul ul ul {                      /* 孫メニュのサイズ設定 */
	width: 100%;
	left:100%;
	top: -3px;
}
#site-navigation li li:first-child a {           /* 子メニュの最初の文字の色 */
	color: #262626;
	border: none;
}
#site-navigation ul ul li a {                     /* 子メニュの背景色と色、サイズ */
	color: #262626;
	background-color: #fff;
	border: none;
	height:auto;
	padding: .714286em .357143em;
	line-height:1em;
	width: 100%;
}
#site-navigation ul ul :hover > a {    /* 子メニュにカーソルが来た時の背景色 */
	background: none;
	background-color: #f6f6f6;
}
#site-navigation ul li:hover > ul {            /* 子メニュがある親にカーソルが来た時、子メニュう表示 */
	display:block;
}
#site-navigation * {                               /* メニュの開閉時間 */
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
}

スマホ設定→PC設定で読み込まれるので、スマホのflot処理をここで解除している。

当然、スマホでメニュの開閉に使った開閉アイコンは非表示

開閉アイコンの操作はできないので、チェックなしの条件でメニュを表示している

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

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

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

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


<関連記事一覧>

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

welcartで用意されている業務パックデータの表示関数はwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使える業務パックデータの表示関数を作成しました。

Welcartでは業務パック割引(購入数量割引)という機能があります。この機能を使うとカートページにGPマークが表示させますがこのマークを任意のアイコンに変更する方法を解説しています。

カートに商品を投入すると、商品名は①商品名②商品コード③SKU名④SKUコードを合わせた文字列が商品名として表示されます。これをカスタマイズする方法を解説しています。

Welcartのカートへの投入ボタンのプログラム解説と、色と文字を変更する新しい関数の作成方法を解説しています。

welcart_basicのオプション表示は、入力必須をチェックしてもユーザから見て判りません。またチェックボックスやラジオボタン表示に一部、おかしい所があります。ここではこれらの修正方法を解説しています。

Welcartにはポイントを付与し、商品購入時にそのポイントを利用する仕組みがあります。又キャンペーン設定でポイントをn倍にしたり価格を値引く仕組みもあります。ここではそれらの概要と問題点及び解決策を解説しています。

Welcartでは業務パック割引(購入数量割引)という機能があります。これは、指定した数量以上を購入した場合に価格を値引く仕組みですが、業務パック割引という言葉はあまりなじみがないのでこのメッセージを変更する方法を解説しています。

Welcart_Basicの購入数量は数値入力です。しかしスマホではこのような入力方法は面倒なので+/-ボタンで購入数量が変更できる様に変更した事例を紹介しています。

Welcartでは個別商品画面に商品オプションやカスタムフィールドを追加する事ができます。ここではその追加方法を解説しています。

Welcartで個別商品表示画面から、商品マスタ編集にジャンプする事ができるとコンテンツ編集効率が飛躍的に向上します。しかしWelcartではこの機能が提供されていないのでこれを可能になる関数を作成します。

ここではWelcart商品を価格順に並び替える為に、WordpressのメタデータにWelcartの価格データを自動的に登録する関数の作成方法を解説しています。

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

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

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

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

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

カートボタンをカスタマイズする為には、このカートがどの様に作られているのか?を知る必要があります。そこでここではその仕様について解説しています。

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

welcart_basicの会員システムをカスタマイズする為には、この機能がどの様に作られているか?を知る必要があります。
そこでこのでは会員システムの仕組みについて解説しています。

Welcart_basicの検索機能をカスタマイズする為には、これがどの様に作られているのか?を知る必要があります。ここではその仕様を解説しています。

welcart_basicは商品だけしか検索対象としていませんが、ここではページの情報を読み込んで、カテゴリ別に検索できる様にカスタマイズする方法を解説しています。

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

ここではwelcartの.検索機能制限の解除、カテゴリが製品か否かの判断関数、上位カテゴリの取得関数、.商品カテゴリの取得関数の作成方法を解説しています。

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

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

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

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

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

welcart_basicのカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。

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

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

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

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

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

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

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