HOME  /Welcart
 /welcart_basic ヘッダー画像をSlickで自動スライドさせる
2020年09月09日

welcart_basic ヘッダー画像をSlickで自動スライドさせる

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

尚、ここでの設定は下記のslickの導入と設定が完了している事が前提となります。

 Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方

 

1.関数作成の基本方針

1.関数名と引数

関数名:my_header_img_slic($type,$arrows)

引数 デフォルト値 備考
$type 1 ヘッダ画像のタイプ
1:一画面表示
3:三画面表示(左右に前後のスライドを少し表示する)
$arrows false slick矢印の表示。表示する場合はtrueを指定します。

 

2.スライドさせる関数を作成する。

1.プログラム

func¥welcart¥headerの下に「my_header_img_slic.php」というファイルを作成し、下記を追加します。

<?php 
/*****************************************************************
ヘッダ画像のslickによるスライド
引数 $type     三画面表示するか否か デフォルトは一画面表示
       $arrows 矢印を表示するか否か デフォルトは表示しない
******************************************************************/
function my_header_img_slic($type=1,$arrows=false)
{
	$attr = 'type='.$type.' arrows='.$arrows;     /* jqueryに属性と値をセットして渡す */
?>
<div id='main-image' <?php echo $attr;?>>      /* スライド画像の呼び出し */
	<?php foreach (get_uploaded_header_images() as $key => $value): ?>
	    <img src='<?php echo $value["url"];?>' alt="<?php bloginfo('name'); ?>" >
	<?php endforeach;?>
</div><!-- main-image -->

<!-- スタイル設定 ---------------------------->
<style>
#main-image{
	margin:0 auto; /* PCの左右余白 */
	width:1000px;  /* PCの画像枠は固定 */
}
#main-image img{
	width:100%;
}
@media screen and (max-width:767px){
	#main-image{
		margin:0;			/* スマホの左右余白 */
		width:100%;	
	}
}
/* slick-dotsの位置の変更 */
#main-image .slick-dots{     
	position: absolute;
	bottom:5px;          /* デフォルトは画像の下25pxを左記に変更 */
}
/* slick-dotsのカラー変更 */
#main-image .slick-dots li button:before{  
	position: absolute;
	color:#fff;          /*ドットを画像の中にしたので白に変更 */
	opacity:1;
}
#main-image .slick-dots li.slick-active button:before{
	opacity: .5;
	color: #fff;
}
.slick-prev:before,
.slick-next:before {
    color: #000;
}
</style>

<?php
}
?>

jqueryに引数を渡す為に、属性と値をセットしている。

注意:arrows=の前にスペースを入れる事(2つの属性を分離する為)

ここで属性値を書くと共に、ヘッダ画像を読み出している。

 

2.プログラムのロード

functions.phpに上記関数の読み込みを記述します。

get_template_part('func/welcart/header/my_header_img_slic');		/* ヘッダ画像のスライド設定 */

 

3.Jquery

上記のスライドを制御するJquryは下記になります。

/*************************************************/
/* ヘッダー画像の自動スライド設定                                         */
/*************************************************/
$(function(){
  var $type = $('#main-image').attr('type');            /*  属性値の読み込み  */
  var $centerMode = false;
  if($type == 3){$centerMode = true;}

  var $arrows = $('#main-image').attr('arrows');    /* 属性値の読み込み */
  if($arrows == 1){$arrows = true;}
	
  $('#main-image').slick({
    arrows:$arrows,
	dots:true,
    autoplay:true,
    autoplaySpeed:3000,
    speed:1000,
    centerMode:$centerMode,
  	centerPadding:'10%',
  });
});

$(‘#main-image’).attr(‘属性’);で属性の値を読み込んでいます。

 

3.header.phpの修正

子テーマの「header.php」を変更します。

上記ファイルが無い場合は、親テーマからコピーして下さい。

<変更前>

<?php if( ( is_front_page() || is_home() ) && get_header_image() ): ?>
	<div class="main-image">
		<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php bloginfo('name'); ?>">
	</div><!-- main-image -->
<?php endif; ?>

<変更後>

<?php if( ( is_front_page() || is_home() ) && get_header_image() ): ?>
	<?php my_header_img_slic(3,true);?>
<?php endif; ?>

 

4.使用例

1.一画面、アローなし

<?php my_header_img_slic();?>

2.一画面、アローあり

<?php my_header_img_slic(1,true);?>

 

3.三画面、アローなし

<?php my_header_img_slic(3);?>

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

関連ドキュメントはメニュの「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は商品だけしか検索対象としていませんが、ここではページの情報を読み込んで、カテゴリ別に検索できる様にカスタマイズする方法を解説しています。

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

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

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

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

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

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

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②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」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。