月別: 2017年12月

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の後から読み込まれるようにしないといけない・・・と。

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





WORDPRESSでスケルトンテーマを使う

WEB制作の現場では、大きな予算のあるようなプロジェクトは、もちろんデザインや戦略がトップにくるので、スクラッチで「こうあるべき」と開発要件を決めていきます。
一方で、予算がない時とか普通なサイト(どんなんよ;)の場合は、お客さまが、単純にWORDPRESSで作ったら、元がタダだし、安くできるんじゃないの?早くできるんじゃないの?と吉野家行ってこいな勢いで迫ってくるようなこともあったり、ユーザー側で更新が必要なサイトだと、WORDPRESSでCMS組んじゃうのが使い勝手が良いところがあったりで、WPさんにお世話になることも結構多い昨今です。

よく制作者のブログ記事なんかでは(てかお前もじゃんwとか言わないの。)wordpressに必ず入れときたいプラグイン10選とか、そういう記事もよくありますが、実制作してると、ちょっと違うんだよなぁ、ということもママあります。もちろん、それでオッケーなこともあるんでしょうけどねw

最近やっている案件で、不動産屋さんの物件検索機能つきCMSサイトというのがあって、検索機能とかお問い合わせ機能とかを色々組み込む必要があったので、デザインは簡単にいきたいということで、WP案件ですが、スクラッチでコーディングするのではなくWPのテーマを元にカスタムコードなんかを組み込んでいくというやり方で進めたので、その備忘録を書いときます。

WPでデザインを作るときには、いくつかやり方があるけれど、どのみち、WPのテンプレートの組み込み規則にしたがって、wp-content/theme/のテンプレートディレクトリの中に、自分の使うテーマ用のフォルダを作成して、その中にコアのWPに連携できるように、.phpのテンプレートファイルを追加していくことになります。

そこで、テーマファイルを一から作りたくない人は、WPに標準で入っているtwentyseventeenみたいなのをコピーして中身のファイルを変更して、という感じ。
しかし、元にするテンプレートセットに色々複雑な機能が組み込まれていたり、画像が読み込まれていたりすると、それを要るものと要らないものに仕分けして変更するのはまあまあ面倒です。

そこで、登場するのがスケルトンテーマと言われるもの。
これは、読んで字のごとく、基本で必要なテンプレートファイルの一式をセットにしたものに、それぞれのスケルトンテーマの配布元が、特徴のある機能や仕組みを追加したりしているものです。基本は、デザインに関する画像なんかは入っていない骨組みだけだったり、編集が必要なCSSファイルなんかに細かくインラインで注意書きや使い方を書いてくれているものが多いです。
例えばあらかじめBootstrap4を組み込んでくれてる、とか、CSSの編集は、sassやlessを組み込んでくれているとか、あるいはファイル管理システムで元のテーマが更新されたときには自動で更新できるようになっていたり、みたいな。

ただし、スケルトンテーマは、自分でCSSやphpのテンプレートファイルをいじって編集できる人向けです。わっかんないわ、っていう人は素直に素人向けテーマファイル買いましょう。その方が絶対幸せになれます。

いくつか人気のものがあって、その中で私が現時点でママ良いと思ったものはこの4つ。
・habakiri=>日本の方が開発者なスケルトンテーマ。開発現場で結構人気。
・bones=>必要なものが揃っていて、なおかつファイル内のコメントなどがわかりやすく、読み解きやすい。
・underscore=>無駄にソースを汚したくない人向けのドベーシックなテーマ。スクラッチくらいの勢いで作りたい人は、これを使うと結構幸せになれると思います。WPの機能は損なわず必要なテンプレは揃っていて、なおかつ要らないものはほぼ入っていません。
・understrap=>underscoreにBootstrap4を組み込んで、SASSでCSS編集するようにして、gulpで更新管理や最小化ファイルをかき出してくれる、みたいな今時なやつ。

で。understrap使いました。
これは、エンジニア向けな更新フレームワークが組み込まれていたりして、ちょっと調べたりするのめんどいなぁと思ったりで、本当は、underscoreスタートにしたかったのだけど、ここにbootstrapを自分で組み込んだり、sass対応を考えるなら、あらかじめやってくれてるヤツのルールを調べて覚える方が、まだ楽かなぁと思ったのと、understrapは、childテーマに対応していて、公式サイトでもchildテーマを配布しているので、本体の更新の時に対応しやすかろうということ、あとは、githubでの更新が早く、不具合とかわからないことがあっても結構早くにレスが返ってくるので、その辺が地味に助かるからです。

understrapはファイル更新をgulpで管理する仕様になっています。
(この記事は書きかけです。ちょっと長くなるので、少しずつ追記します。)