HOME  /Welcart
 /Welcart_Basic 検索BOXの仕組みとは?
2020年09月06日

Welcart_Basic 検索BOXの仕組みとは?

WelCart_Basicの検索フォームは「商品」だけが検索できる仕様で作られております。

ここではこの検索フォームがどの様に制御されているのか?を解説します。

1.検索フォームの中でのFont Awesomeの使われ方

WelCart_Basicの「Font Awesome」で総てのフォントアイコンが使える様になりましたが、検索フォームの中でどの様に使われているのか?を解説します。

Font Awesomeには2つの使い方があります。

①HTMLとしてアイコンフォントを記述する。

②Unicodeでアイコンフォントを記述する。

検索アイコンの場合の各々のコードは下記になります。

①HTML:<i class=”fa fa-search”></i>

②Unicode:f002

但し、Unicodeで指定する場合はUnicodeを囲む「&#xユニコード;」で指定する必要があります。

&#x」は数値文字参照コードで、CSSには「font-family: FontAwesome ;」を指定する必要があります。

 

2.プログラムとHTML表示

検索BOXの表示プログラムは下記になります。

<div class="search-box">
	<i class="fa fa-search"></i>
	<?php get_head_search_form();?>
</div>

上記を実行されるとHTMLは下記になります。

<div class="search-box">
	<i class="fa fa-search"></i>
    <form role="search" method="get" action="https://hnw.ddnsfree.com/welcart/" >
		<div class="s-box">
			<input type="text" value="" name="s" id="head-s-text" class="search-text" />
			<input type="submit" id="head-s-submit" class="searchsubmit" value="&#xf002;" />
		</div>
    </form>
</div>

■検索アイコンは、上記の赤字の2か所で表示するプログラムとなっています。

 

3.検索BOXのCSS制御

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

上記画面が表示されます。検索アイコンをクリックすると下記画面が表示されます。

クリック操作は「front-customized.js」のJqueryで開閉しています。

 

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

■PCの場合は、初めから検索BOXが表示されています。

 

3-3.CSS

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

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

①620px(38.75em)以下

②740px(46.25em)まで

③880px(55em)まで

④1000px(62.5em)以上

スマホ、iPAD等 PC
.search-box {
	float: left;
}
.snav .search-box i {
	font-size: 1.42857em;
	padding: .5em;
}
.search-box form {
	display: none;
}
.search-box.On form {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	padding: 1.4286em .714286em .714286em;
	background-color: #fff;
}
.search-box div.s-box {
	display: block;  
	position: relative;
	width: 100%;
	border: 1px solid #ccc;
	float: right;
	text-align: center;
}
.search-box input[type="text"] {
	width: 100%;
	border: none;
}
.search-box .searchsubmit {
	color: #aaa;
	font-size: 1.14286em;
	font-family: FontAwesome ;
	position: absolute;
	right: 0;
	top: 0;
	padding: .3124995em;
	background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
	border-radius: 0;
}
.search-box .searchsubmit:hover {
	background: none;
}
.search-box {
	position: inherit;
	padding: 0 0 10px;
	float: right;
}
.snav .search-box i {
	display: none;
}
.search-box form {
	display: block;
}
.search-box div.s-box {
	width: auto;
}
.search-box input[type="text"] {
	width: auto;
	padding: .357143em;
	background-color: #fff;
}
.search-box .searchsubmit {
	position: inherit;	
	color: #161616;
	padding: .357143em;
}

 

■1つ目の青字の記述で「<i class=”fa fa-search”></i>」を表示しています。

■2つ目の青字の記述で「検索フォーム」を非表示にしています。

■後は検索BOXのスタイル定義で、赤字の所で「FontAwesome」が指定されている為「&#xf002;」で虫眼鏡が表示されます

■1つ目の青字の記述で「<i class=”fa fa-search”></i>」を非表示にしています。

■2つ目の青字の記述で「検索フォーム」を表示しています。

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

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

関連ドキュメントはメニュの「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_basicのカートボタンの「色」と「文字」を変更する関数の作成方法を解説しています。

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

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

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」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。