日: 2017年12月4日

wordpressのスケルトンテーマでunderstrapを使ってて、カルーセルスライダーの画像の一部にブラーをかける備忘録

understrapのスケルトンテーマでは、wordpress&bootstrapでカルーセルスライダーを入れていて、トップページのメインビジュアルの中央部分に部分的にblurをかけて、スリが和す風の上に文字がくっきり乗っているようにしたい。ただし、背景画像全体にblurは、メインビジュアルの意味がなくなるのでNG。
1)スライダーの画像は入れ替わる
2)上に重ねるdivで文字を載せるので、背景になるスライダーの画像全体でなく、そのdivの枠の中身だけブラーかけたい
3)スライダーの画像は、WPの管理画面のwidget登録からお客様が自分で画像をポンと入れ替えるようにしたい
メインビジュアルの単なるパーツなのに地味に面倒・・・
入れ替わる画像のurlの配列を取ってこないといけなくて、それをブラーかけるjsなりcssなりに渡さないといけない。
・・・意外と道のり長いな;

とりあえず、スライダーの画像は、wp_optionに入っているから、そのキーをget_optionで取ってきて、多次元配列をforeachで回す。
dumpしてみたら画像のURLのキー名称がわかったので、それをforeach内で取得して。
ブラーの背景画像URLをセットしているコードのところに、変数にセットしたURL(または取得コードを入れ子にして?)を置き換える。

とりあえず前半はすんなりできたけど、cssに変数入れ替えるのが、js使って面倒だったので、
https://msurguy.github.io/background-blur/
これで。
インラインのコードでurl指定する箇所に、先に取得した画像のURL置き換えたらいけるはず。

ほんで、gulpでjsもminファイルを自動更新するようになってるので、jsのincludeディレクトリとgulpのタスクコードにブラー用のjsを追加。ただしjqueryの後から読み込まれるようにしないといけない・・・と。

もうちょい!!・・・かな?