[jQuery]BxSliderで画像をズームアウトさせながらスライドさせる

経緯

表題の動きをしようと思ったけど参考サイトのJS覗いたら処理が難しすぎてハァ?ってなったのでもっと簡単にできるだろ!!!と思って考えた結果。プラグインの機能の範囲で済ましてるし自分ではこっちのが良い。
※この記事はSlickでやろうとした結果挫折した記事の続きです。

要点

  • ズームアウトの動きは CSSのAnimation
  • movingクラスにズームアウトするアニメーションを呼び出し
  • BxSliderは普通に呼び出すだけ。難しいことしない。

CSS

スライド内のliに

0% → transform: scale(1.2)
100% → transform: scale(1)

という感じで最初が大きくもとに戻っていくCSSアニメーションを適用する。

親要素のoverflowはhiddenで。後は普通にスライドしたらOK。多分動く。

[WordPress]ページリストを出力して現在のページ以外の子孫ページのソースをぶっ殺す

概要

タイトルの通りなんですけど下記のようなサイドバーが必要だったのでコネコネしてました。
一応できたよ。一応。
なお最後のリスト呼び出しの際に全然条件指定してないのでお好みでカスタムが必要でございます。

  • ページリストが出したい
  • 現在のページまたは現在のページが属する階層以外の子ページ孫ページのリストは出したくない

コード

下記のとおりです。

// 通常のページリストから、
// 現在のページ以外の子ページ孫ページのリストを削除して出力

//現在のページID 親ページがなければそのまま・あれば一番上の親のIDを取得
if( !$post->post_parent ){
$current_id = $post->ID;
} else {
$ancestors = get_post_ancestors( $post->ID );
$current_id = end($ancestors); //get_post_ancestorsの最後の数値が最上層
}

$pages = get_pages(); //ページ全部
$page_ids = array(); //ページID格納用配列
$children_lists = array(); //子ページリスト格納用配列

//1.
//最上層のページIDを配列に格納
foreach( $pages as $page ){
if( !$page->post_parent ){ //ここはforeach文の変数を使わないとダメなので$page->post_parentになります
$page_ids[] = $page->ID;
}
}
//現在のページIDを配列から削除
$page_ids = array_diff($page_ids, array($current_id));
//配列を詰める
$page_ids = array_values($page_ids);

//2.
//現在のページ以外の子ページ孫ページのリストを、後ほどの置換用に文字列として取得(タブと改行を削除)
foreach( $page_ids as $page_id ){
$children_lists[] = preg_replace('/[\n\t]/', '', wp_list_pages( 'title_li=&child_of='.(int)$page_id.'&echo=0' ));
     //ここと 下の「$all_pages」のwp_list_pages両方とも「child_of」以外のオプションを完全に合わせる。
    // sort_columnを片方にしか設定しなかった場合などにマッチしなくて除外に失敗するため。
}
//全ての固定ページリストを文字列として取得(タブと改行を削除)
$all_pages = preg_replace('/[\n\t]/', '', wp_list_pages( 'title_li=&echo=0' ));
//現在のページ以外の子ページ孫ページのリストを削除
$page_list = str_replace($children_lists, '', $all_pages);
//空のul.childrenを削除
$page_list = str_replace('<ul class=\'children\'></ul>', '', $page_list);


//3.
//リストを出力
echo '<ul>'.$page_list.'</ul>';

[リンク]リップルエフェクトのTips参考サイト

ちょっと書き留めておく場所がなかったので参考にしたいサイトメモということでリンクをば

https://saruwakakun.com/html-css/material/ripple_effect

[jQuery]Slickで画像をズームアウトさせながらスライドさせる

2018/8/10追記

修正忘れてました。
説明がややこしくなりそうなので別の記事で書きます。
こちら。

2018/5/2追記

すみませんこの方法IE11だとはみ出した部分が表示されてしまい、ちらつきが出ちゃって使えませんでした、、、
全画面背景になら使えると思います。
BxSliderを使ったらもっと簡単にできるかも。今度まとめます。。

経緯

この動きをしようと思ったけど参考サイトのJS覗いたら処理が難しすぎてハァ?ってなったのでもっと簡単にできるだろ!!!と思って考えた結果。プラグインの機能の範囲で済ましてるし自分ではこっちのが良い。
initの発火タイミングが.slickより前っていうのがめっちゃわかりにくかった。

要点

  • ズームアウトの動きは CSSのAnimation
  • movingクラスにズームアウトするアニメーションを呼び出し
  • なんでもかんでもSlickのコールバックで処理

CSS

.slick-slideに.movingが付くようにコールバックを設定するので、
.slick-slide.moving{ ここにアニメーションを呼び出し。 }

0% → transform: scale(1.2)
100% → transform: scale(1)

という感じで最初が大きくもとに戻っていくアニメをつくる

JS

$(‘.slider’).slick() が基本の形なんだけども、
初期化された時実行される init のコールバックを使いたいので一番最初にinitの命令を書く。
これをやらないと1枚目にmovigクラスが付かず止まってしまう。

次にslickを呼び出し、色々設定、

最後に beforeChange のコールバックで下記の命令を実行。

  • 最後のスライド番号を判定するためlengthを使ってスライドの数を数える
  • 現在の2個前のスライドからmovingクラスを除去
    (余分に動かし続けないとスライドの切り替わり時に動きが止まってしまう)
  • 次のスライドにmovingクラスを付加
  • 最初に戻った(data-slick-indexが0になった)ら最後のスライドからmovingクラスを除去
    (こうしないと最後のスライドからmovingクラスが消えない)
$('.slider').on('init', function(){
  $('.slick-slide[data-slick-index="0"]').addClass('moving');
})
  .slick({
    arrows: false,
    dots: false,
    infinite: true,
    fade: true,
    speed: 2400,
    autoplay: true,
    pauseOnHover: false,
    autoplayspeed: 5000,
    centerMode: true
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var slide_num = $('.slick-slide').length;
    $('.slick-slide[data-slick-index="'+ ( currentSlide - 1 ) +'"]').removeClass('moving');
    $('.slick-slide[data-slick-index="'+nextSlide+'"]').addClass('moving');
    if( currentSlide == 0 ){
      $('.slick-slide[data-slick-index="'+ ( slide_num - 1 ) +'"]').removeClass('moving');
    }
  });

以上!!

[WordPress]検索画面にターム一覧のチップを追加・検索対象にする

概要

テキストボックスでの検索の他に日付検索とタームを選択しての検索を追加する必要があった。
検索は特定のポストタイプでのみ動作する。
全部フック「pre_get_posts」の中に書いて、if ( $query->is_search() )で検索結果だけに反映しています。

add_action( 'pre_get_posts', 'customize_main_query' );
function customize_main_query($query) {
  if ( is_admin() || ! $query->is_main_query() )
    return;
    //ゴニョゴニョ………
}

ターム一覧

ポイントは下記

  1. 検索フォーム内で、チェックボックスのnameはcat[]とかcategory[]とか、[]で終わらせる。
    こうすると後でURLパラメータを配列に格納した時に勝手にこの項目が配列になる。
  2. functions.php内でパラメータをGETしてループを加工することで投稿の呼び出しへ反映させる。

検索テンプレート、検索を実装するテンプレートではinputタグのチェックボックスを用いてタームの選択肢を追加。

functions.phpでは、URLを元にパラメータの中身を配列として取り出し、tax_queryでタクソノミーとタームを指定する。
ターム名を配列にしてタームの指定に用いる。

参考URL:
【PHP】URLを分解して配列で取り出すには?(Web.fla)

functions.php

//URL取得
if ( isset($_SERVER['HTTPS']) and $_SERVER['HTTPS'] == 'on' )  
{  $protocol = 'https://';  }  
else  
{  $protocol = 'http://';  }
$search_url  = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];  
//念のためデコード
$decoded_url = urldecode($search_url);
//URLを配列に分解
$url_arr = parse_url($decoded_url);
//パラメータの中身を文字列の配列として変数へ格納
parse_str($url_arr['query'], $parms);
//タクソノミー指定
if ( ! empty( $parms['category'] ) && !is_wp_error( $parms['category'] ) ){
  $query->set('tax_query' , array(
    array(
      'taxonomy' => 'タクソノミー名',
      'field' => 'slug',
      'terms' => $parms['category'] //フォームで取得した値
      )
    )
  );
}

ちなみにこれを作ってるときまで気づかなかったけどfunctions.php内で普通に$protocol.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REQUEST_URI’]でURLを取得しようとしても実行タイミングが早すぎてサイトURLしか取れません。pre_get_postsのタイミングだから取れてるだけ。

検索するテンプレートのフォーム部分

<ul class="term-list">
<?php
  $terms = get_terms('タクソノミー名',
    //オプションは必要に応じて
    array(
      'parent' => 0,
      'orderby' => 'description'
    )
  );
  //投稿が存在するタームの一覧を取得・加工
  if ( ! empty( $terms ) && !is_wp_error( $terms ) ):
  foreach( $terms as $term ):
?>
  <li>
    <label class="term-item"><input name="category[]" type="checkbox" value="<?php echo $term->slug; ?>"><span><?php echo $term->name; ?></span></label>
  </li>
<?php endforeach; endif; ?>
</ul>

日付検索の実装

jQueryUIのDatepickerで入力した値を、検索結果のループを加工する時に利用する。
基準となる日付は投稿日ではなくてカスタムフィールドに入力された日付の値を利用しているのでちょっとややこしかった。

$date_from_src = $_GET["date_from"]; //この日から
$date_until_src = $_GET["date_until"]; //この日まで

if( $date_from_src != '' && $date_until_src != '' ){
  //始めも終わりも指定した場合
  $query->set(
    'meta_query', array(
      'relation' => 'AND', //AND検索にする
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_from_src,
        'compare'=>'>=',
        'type' => 'DATE'
      ),
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_until_src,
        'compare'=>'<=',
        'type' => 'DATE'
      )
    )
  );
} elseif( $date_from_src != '' && $date_until_src == '' ){
  //始めだけ指定した場合
  $query->set(
    'meta_query', array(
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_from_src,
        'compare'=>'>=',
        'type' => 'DATE'
      )
    )
  );
} elseif( $date_from_src == '' && $date_until_src != '' ){
  //終わりだけ指定した場合
  $query->set(
    'meta_query', array(
      array(
        'key' => 'カスタムフィールド名',
        'value' => $date_until_src,
        'compare'=>'<=',
        'type' => 'DATE'
      )
    )
  );
}

[WordPress]メディアファイルへリンクしている画像をLightbox対応する

概要

本文内に挿入した画像のうちリンク先が「メディアファイル」になっているものをすべてLightboxを用いて拡大する必要があったのでその方法の備忘録。

参考URL

[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法(memocarilog)

フィルターの内容は上記で紹介してくれているソースを使用。正規表現詳しくなくて……
調整して、下記のソースにした。

add_filter( 'image_send_to_editor', 'addClass' );
add_filter( 'the_content', 'addClass' );
function addClass( $html ) {
  if(preg_match('/<a href="https?:\/\/+[-_.\/a-zA-Z0-9]+(?:png|jpg|jpeg|gif)"><img/' , $html)){
      $html = str_replace( '<a ', '<a data-lightbox="gallery" ', $html );
  }
  return $html;
}

追加点

1行目を追加。
フック「image_send_to_editor」はその名の通り「メディアライブラリから画像をエディタ内に追加するタイミングで」働くので、画像を挿入した後に編集してリンクを追加した場合には働かない。

もしも「メディアを追加」から追加するタイミングで設定を忘れたら対応できないということになるので、「the_content」にもフィルタリングして、本文がそもそも書き出される時に付加してくれるように調整。
これを使用した案件では特定のポストタイプのシングルページでのみ動作させれば良く、Lightboxのファイルの読み込みは条件付きにしたのであまり影響がなさそうだったのでここで落とし所とした。

ギャラリー機能への対応

post_galleryというフィルターフックがあったが出力されるHTMLの変数名などチラと見ただけでわからず、面倒だったのでjQueryで操作しました。
やってることは、似たようなもんです。
「.gallery-item内のaを全部調べて、hrefの中身に画像の拡張子があった場合data-lightbox属性をつける」という内容ですが、ちょっとif文甘い?ギャラリーの中だけだしイレギュラーはない気がするんですけど……

$(".gallery-item a").each( function(){
  var link = $(this).attr('href');
  if( link.match(/(?:png|jpg|jpeg|gif)/g) ){
    $(this).attr('data-lightbox','gallery');
  }
});

以上でございます。

[JS][jQuery]CSSの読み込みに日付を追加

きっかけ

最近iPhoneのSafari、キャッシュが全然消えない。CSS変更しても反映されない。一応URLをコピーして新しいタブで開き直すと反映されたりするけど、Basic認証かかったディレクトリのファイルなんかそんなことやってられないのでCSSへJSで日付を追加した。
PHPだともうちょっと簡単かもしれないがHTML普通に書いてる時に使いたいのでjQueryで適当に書いた。

本題

//css読み込みに日付付加
var date_obj = new Date();
var times = [
  String(date_obj.getFullYear()),
  String(date_obj.getMonth()+1),
  String(date_obj.getDate()),
  String(date_obj.getMinutes()),
  String(date_obj.getSeconds())
];
var timeNum = times[0]+times[1]+times[2]+times[3]+times[4];

$("link[href$='css']").each( function(){
  var filename = $(this).attr("href");
  var pathWithTime = filename.replace( /.css/g, '.css?v='+timeNum );
  $(this).attr("href",pathWithTime);
});

こう。もっといいやり方が…とか思うけどとりあえず付いたら良かったので。
即定型文登録。

[Coda2]background指定編集中にフリーズする件

Coda2を少し前にアップデートしてからCSSモードで色指定を行う時にフリーズするようになった。
原因は補完候補にカラーピッカーなどが出る機能だったので下記画像内のチェックを外して解決。

最初、設定確認してもどのチェックかわからなくて公式さんに確認したら「セーフブートしてみてくれ」とのことだったのでセーフブート、機能の一部がオフになった状態で操作してやっとわかったが手当たり次第にチェックを外してみればよかった……優しい公式さんでした。