日: 2017年5月11日

is_main_query で　meta_query　を使う

複数　meta_key　の指定

http://qiita.com/harapeko_wktk/items/4fe7d39ad22d3951e5cc

elseif ( $sortset == 'car_price_high' ) { //価格高い
			 $meta_query = array(
            'relation' => 'AND', //meta_queryの配列が1つの時は指定しない
            'meta_sort_parent_id' => array(
                 'key' => 'car_open', //カスタムフィールドのキー
                'type' => 'NUMERIC',　　　　　//カスタムフィールドの値のタイプ
            ),
            'meta_sort_child_id' => array(
                 'key' => 'car_price', //カスタムフィールドのキー
                'type' => 'NUMERIC',       //カスタムフィールドの値のタイプ
            )
        );

  $orderby = array(
            'meta_sort_parent_id' => 'DESC',
             'meta_sort_child_id' => 'DESC',
               //            'date' => 'DESC'
        );
        $query->set('meta_query', $meta_query);
        $query->set('orderby', $orderby);
        }

だがけっきょく、　使わない買った
いや使った

結局、価格でソートなど
その前に売り切れで分岐したい場合
２個使いました。

car で　ギャラリーで　色々

まず　カーのギャラリーで　たてよこ　の画像の対応

まず　新しく
画像　高さ　中心　のcss

これほんと？　って感じですごいけど

http://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html

.demo p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

スクリーンショット 2017-05-11 16.31.49

そんで　ギャラリーに使ってる画像　ファンクション

		//carサムネイル使用
			 'car_thum' => array(
            'name'       => 'car_thum', // 選択肢のラベル名
            'width'      => 360,    // 最大画像幅
            'height'     => 270,    // 最大画像高さ
            'crop'       => true,  // 切り抜きを行うかどうか
            'selectable' => false // 選択肢に含めるかどうか
        ),
					//carサムネイル使用
			 'car_big' => array(
            'name'       => 'car_big', // 選択肢のラベル名
            'width'      => 784,    // 最大画像幅
            'height'     => 588,    // 最大画像高さ
            'crop'       => false,  // 切り抜きを行うかどうか
            'selectable' => false // 選択肢に含めるかどうか
        ),

新たに足したcss

.flickSlider .flickView ul li img.car_big {
    width: auto;
	max-height:588px;
	  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 736px) {
	
	.flickSlider .flickView ul li img.car_big {
   width: auto;
   max-width:100%;
	max-height:262px;
}
}

幅100%にせずに、　サムネイル切り抜きの幅を　100%のサイズで数字指定
高さもサムネイル切り抜きの数字指定。

ただし、ギャラリーが１個めの画像の高さを取得して高さを出してくるので
1こめが小さい画像だと、高さが　高いやつが隠れてしまう。　なので、
１個めが小さい画像だった場合、高さが低いやつだった場合、その高さを取得して、
マックスハイトを変更してやることにした。

それがflickSliderに書いた
最後の方のコード

・・・
	var $w = ($('.flickSlider .flickView ul li').height());
$('.flickSlider .flickView ul li img.car_big').css("max-height", $w);

    });
});

これ同じオンロードに入れてやって最後に処理させることで辻褄が合うのでここで、。

但し、今思ったが、　１個目の画像の高さを取得した時　すんごい小さい場合、全部スのサイズになってしまうよね、。そんなやつおらんか？
なので、
スマホ　PCで　もう高さ指定したほうがいいんかな？

上記だと上手く動作していなかったみたいだで　高さ取得して変更するのやめた
（JSないでなく　シングルの最後にいれると、ギャラリーが表示されんことあるもんでたまに）

やっぱこうした

/*一応最小のギャラリーの高さを出しておく*/
.flickSlider .flickView,.flickSlider .flickView ul,.flickSlider .flickView ul li{
	min-height:500px;
	}

.flickSlider .flickView ul li img.car_big {
    width: auto;
	max-height:588px;
	  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 736px) {
	
	/*一応最小のギャラリーの高さを出しておく*/
.flickSlider .flickView,.flickSlider .flickView ul,.flickSlider .flickView ul li{
	min-height:200px;
	}

	
	.flickSlider .flickView ul li img.car_big {
   width: auto;
   max-width:100%;
	max-height:262px;
}
}