テーマ「ShapeShifter」のTips

外見的には非常にシンプルなテーマですが、管理画面での設定項目を見ると非常に多くの機能を備えていることが分かると思います。

そこで作っている側の僕から見えている、ちょっと便利な使い方を紹介しておこうと思います。

  • Table of Contents

コンテンツ編集でCSSアニメーションを指定可能

テーマ「ShapeShifter」のテーマカスタマイザーでは、アーカイブページのリストやコンテンツのタグにCSSアニメーションを設定することが可能ですが、実はコンテンツ編集で属性値を手打ち入力することで、任意の要素にアニメーションを設定することも可能です。

CSSアニメーションは設定した情報を、ワードプレスのフィルターで指定した要素に「クラス名」とデータ属性値を与えており、jQueryでアニメーションのクラスの操作を指定ます。ただ、ワードプレスのフィルターには既に設定されている場合は、そちらを優先するようにコーディングしておりますので、テーマカスタマイザーで指定したタグであっても、コンテンツで編集した属性値が優先されます。

例えば、

このタグのみに他のPタグとは異なるアニメーションを与えてみます。

CSSアニメーション対応のブラウザでないと動きが確認できなかったと思いますが、上の赤いテキストのPタグはコンテンツページでこのように書いています。

<p class="shapeshifter-hidden enter-animated hover-animated" data-animation-enter="rollIn" data-animation-hover="pulse" style="color: red;">このタグのみに他のPタグとは異なるアニメーションを与えてみます。</p>

テーマ「ShapeShifter」では、アニメーションのクラスとして「Animate.css」を実装していますので、それらは常時使用可能です。

では、書き方についてもご紹介します。

ホバーアニメーションの書き方

必要なのは以下の2点です。

  • クラスに「hover-animated」を与えること
  • データ属性「data-animatino-hover」の値に、CSSアニメーションを設定したクラス名を指定すること

ええ、これだけです。非常に簡単だと思います。

ホバークラスはjQueryでポインターを乗せた時と離した時の両方にアニメーションが作用するようにしています。

実はテーマカスタマイザーの設定項目としていない要素でも、条件を満たすことでCSSアニメーションを付けることが可能ですので、コンテンツ編集時にちょっと思い出していただければ、面白い動きを付けることが出来るんじゃないでしょうか。

スクロール表示用アニメーションの書き方

必要なのは以下の2点です。

  • クラスに「shapeshifter-hidden」と「enter-animated」を与えること
  • データ属性「data-animatino-enter」の値に、CSSアニメーションを設定したクラス名を指定すること

こちらは「shapeshifter-hidden」というクラスも与える必要があります。

テーマ「ShapeShifer」ではCSSアニメーションが適用されるのは、パソコンでの閲覧時のみに制限しており、「shapeshifter-hidden」クラスを持っていても、パソコンで見る場合しか非表示にはなりません。

ただ、対応している環境でも、アニメーション自体が上手く作用しない要素もありますので、ちゃんとプレビューで反映されているか確認するようにしてください。

確認したものだと、「li」タグがそうでした。

プラグイン「Magic Template Holder」との組み合わせ

ええ、クラスやデータ値を与えたタグをテンプレートとして保存しておくことで、コンテンツ編集時に簡単にCSSアニメーション付きのタグが使用可能になります。

例えば、デモで表示した赤いテキストなど、テキスト部分を入れ替えるだけにしておけば、クラス名や属性値を態々書き足す手間が省けます。

もともとこういった形で使用する予定でしたので、テーマと組み合わせて使うメリットがようやく出てきたんじゃないかと思い、ご提案させて戴きました。

プラグイン「Magic Template Holder」は、公式リポジトリにアップロードしていますので「ダウンロードページ」でダウンロード、もしくはワードプレスサイトの管理画面から「プラグイン」->「新規追加」ページにて、キーワード「Magic Template Holder」で検索することで直接インストールできます。