日: 2017年5月11日

is_main_query で　meta_query　を使う

複数　meta_key　の指定

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

1
2
3
4
5
6
7
.demo p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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に書いた
最後の方のコード

1
2
3
4
5
6
・・・
    var $w = ($('.flickSlider .flickView ul li').height());
$('.flickSlider .flickView ul li img.car_big').css("max-height", $w);
 
    });
});

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

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

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

やっぱこうした

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*一応最小のギャラリーの高さを出しておく*/
.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;
}
}