HOME  /Welcart
 /カスタマイズのヘッダ画像で設定した画像をslickでスライドさせる方法
2020年07月20日

カスタマイズのヘッダ画像で設定した画像をslickでスライドさせる方法

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

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

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

1.ヘッダ画像サイズを確認する

ここで紹介しているWelcart Basicカスタムサイトのヘッダー画像は1000pxです。

このサイズによってCSSの設定が変わるので、まずはヘッダー画像のサイズを確認します。

 

2.header.phpのカスタマイズ

①親テーマから「header.php」をコピーして子テーマに取り込みます。

ヘッダー画像の取り込み部分は下記の様になっています。

<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 -->

■「.main-image」というクラスで「header_image()」というWP関数でヘッダー画像を取り込んでいます。

②カスタマイズします。

ヘッダ画像を1枚しか読んでないプログラムを総て読み込む様に変更します。

<div id="main-image">
	 <?php foreach (get_uploaded_header_images() as $key => $value): ?>
 		<img src='<?php echo $value["url"];?>' alt="<?php bloginfo('name'); ?>" >
	<?php endforeach;?>
</div><!-- main-image -->

■「.main-image」というクラスは色々な設定がされているので、これを「#main-image」に変更します。

■「foreach」でループさせ「get_uploaded_header_images()」で総てのヘッダー画像を読み込みます。

以上で総ての画像は読み込めたので、後はslickでどの様にスライドさせるか?を設計していきます。

 

3.画像単位でスライドさせる

3-1.ドットあり、アローなし

下記の様なスライド画面を設計します。

1.my_jqury.jsの設定

$(function(){
  $('#main-image').slick({
    arrows:false,
    dots:true,
    autoplay:true,
    autoplaySpeed:3000,
    speed:1000,
  });
});

■アローはOFFでドットはONに設定しています。

2.CSSの設定

#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はとトップ画像以外でも利用するので、「#main-image」の中の「slickオプション」の変更で行っています。

①このテーマは画像が1000pxで画面中央表示なので「margin:0 auto」にしています。

②しかしスマホは1000pxの画像ははみ出すので「margin:0」で画像サイズを「width:100%」にして画面一杯に表示する設定にしています。

③「 .slick-dots」の表示が画像の中にする為に「bottom:5px」にしています。

④更に「 .slick-dots」の表示が画像の中になった為、色を白系に変更しました。

3-2.ドットあり、アローなし

画面の左右にアローを表示しました。これをクリックしてもスライドします。

1.my_jqury.jsの設定

下記を追加します

arrows:false,を削除又はコメントにする

■「arrow」のデフォルトは「true」なので削除しても表示されます。

2.CSSの設定

下記を追加します

.slick-prev:before,
.slick-next:before {
    color: #000;
}

■アローのデフォルト色は白なので、白背景には見えません。そこでこれを黒に変更しました。

 

4.左右に画像を表示してスライドさせる

4-1.基準サイズ表示

1.my_jqury.jsの設定

$(function(){
  $('#main-image').slick({
    arrows:false,
    dots:true,
    autoplay:true,
    autoplaySpeed:3000,
    speed:1000,
    centerMode:true,
    centerPadding:'10%',
  });
});

■「centerMode」を「true」にする事により前後画面も少し表示しています。

■左右の表示幅を10%にしています。

画像の表示幅の1000pxをメイン画像が80%、左右が10%で表示しています

2.CSSの設定

3-1の設定と同じです。

 

4.2.拡大サイズ表示

下記はメイン画像サイズが1000pxで左右の画像は10%のスライダです。

1.my_jqury.jsの設定

上と同じです

2.CSSの設定

#main-image{
	margin:0 auto; /* PCの左右余白 */
	width:1250px;  /* ①PCの画像枠は固定で左右10%分だけ拡大 */
}
#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;
}

①前後スライドが10%の幅を取るので1000pxから1250pxに変更しました。

計算は「80%:1000px=100%:X」で計算

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

関連ドキュメントはメニュの「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.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています

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

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

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

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

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

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