WordPressで機能の追加と言えばプラグインが真っ先に浮かんでしまいますが、小さい目的のたびにプラグインを追加していたら、いつのまにか何十個という状態になってしまいますね。
しかも、プラグインは、サイト内のどこで使用しても、大抵どんなテーマを使っていても一様に動作するように設計されているので、独自のスクリプトやCSSを読み込む形のものが増えれば増えるほど表示は重くなる傾向があります。
このサイトのトップページでスクロールしていくとふわっと表示されるようにしている機能についても、これまでは「Blocks Animation: CSS Animations for Gutenberg Blocks」というプラグインを使っていました。
ブロックやグループ単位でいろいろなアニメーション効果を追加することができる非常に便利なプラグインではあるのですが、いかんせん使用するのはほぼトップページだけなので、できる限りこのプラグインが追加するスクリプトとCSSは必要時以外読み込まないようにしたい。
そこで、テーマのfunctions.phpへ、追加されるスクリプトとCSSを一旦読み込まないようにしてから、トップページだけ再度読み込むようにするという、いいのか?悪いのか?の判断が難しい処理を追加していました。
実はページごとなどでプラグインの有効/無効を制御できる「plugin load filter」というプラグインを使えばこの処理は不要..なのですが、既にこれで2つのプラグインがトップページのためだけに追加されるという状態になってしまうので、あえて手動で制御してました。
ただやっぱり特定のページのみに対してプラグインを増やすのはちょっとなぁということで、いろいろと調べたところ、比較的簡単にこのふわっと表示させる機能をトップページのみに対して機能させることができましたので、サイト開発備忘録を兼ねて紹介しておきます。
ちなみに、どんな風に表示されるかは、画面右下のホームボタンをクリック、またはこちらをクリックしてトップページを実際にご覧になってみてください。
本記事を参考にして実現できるのは、「Blocks Animation: CSS Animations for Gutenberg Blocks」でいう「Slide in Up(下からふわっとスライドさせて表示)」のアニメーション効果のみです。その他の効果が必要な場合は素直にプラグインを使った方が無難だと思います。
特定ページ、特定ブロックでのみ動作するアニメーションコンテンツの作り方
この機能を実装するにあたっては、jQueryとCSSを使います。
..って結局プラグインと一緒じゃーーんと思った方、実はWordPressのブロックエディタでは、標準でそのページだけスクリプトを動かしたり、デザインコードを適用させたりすることができるんです。
それも含め、これから紹介していきますね。
カスタムHTMLブロックは案外万能
まずは気になるところから。
WordPressの標準ブロックに「カスタムHTML」というのがあるのはご存じでしょう。そしてその名前から、HTMLタグが使えるブロックなのだと容易に想像できますね。
でもこのブロック、実は、JavaScriptやjQueryなどのスクリプトや、CSS(デザイン用コード直書き)も書いて動作させることができるんです。知ってました?
必要なのはスクリプトなら<script></script>で、デザイン用コードなら<style></style>でコード全体を囲むことだけです。
まあスクリプトやCSSはheadまたはfooterで囲まれたタグの中に書きなさいというHTMLの標準的な構造には準拠しないことにはなるのですが、それほど厳密なものでもないでしょうから特に問題はないでしょう。
気になる方は作法に従って、これから紹介するコードをユーザー定義関数化して、特定ページにだけheadやfooterへ出力されるようにされればよいかと思います(作法については本記事では割愛します)。
それではカスタムHTMLブロックを使ってふわっと表示されるコンテンツの作成を進めていきましょう。
ブロックごとのアニメーション効果の作り方
作り進める前に、1つだけ注意事項です。今回の方法では、ブロックエディタ(編集画面)上への反映はされません。「プレビュー」→「新しいタブでプレビュー」で動作確認をするようにしてください。
今回は、jQueryとCSS(コードべた書き)を、必要なページのカスタムHTMLブロックへ追加する手法でアニメーション効果を任意のブロック(またはグループ)へ追加していきます。
必要なページ(投稿)の編集画面でカスタムHTMLブロックを追加して、以下のコードをコピペしてください。
<script>
jQuery(function () {
// aimation呼び出し
if (jQuery('.js-scroll-trigger').length) {
scrollAnimation();
}
// aimation関数
function scrollAnimation() {
jQuery(window).scroll(function () {
jQuery(".js-scroll-trigger").each(function () {
let position = jQuery(this).offset().top,
scroll = jQuery(window).scrollTop(),
windowHeight = jQuery(window).height();
if (scroll > position - windowHeight + 200) {
jQuery(this).addClass('is-active');
}
});
});
}
jQuery(window).trigger('scroll');
});
</script>
<style>
/* アニメーションスタイル */
/* ---------------------------- */
/* アニメーションさせる要素に u-fade-type-up js-scroll-trigger を付与する */
/* アニメーション前 */
.u-fade-type-up{
transform: translateY(120px);
opacity: 0;
}
/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
transition: 1s;
transform: translateY(0);
opacity: 1;
}
</style>
そして、アニメーション効果の必要なブロック(またはグループ)の「高度な設定」を開き、「追加CSSクラス」へ以下のクラスを追加するだけです。
u-fade-type-up js-scroll-trigger
以上!終了です(簡単すぎ?)
うーーん動かない..という方は、お使いのテーマとの相性や、高速化を目論んだプラグインとの相性(相性の詳細についてはここでは割愛します)なので、以下のコードにすれば動作すると思います。
<script type="text/javascript" src="/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script>
jQuery(function () {
// aimation呼び出し
if (jQuery('.js-scroll-trigger').length) {
scrollAnimation();
}
// aimation関数
function scrollAnimation() {
jQuery(window).scroll(function () {
jQuery(".js-scroll-trigger").each(function () {
let position = jQuery(this).offset().top,
scroll = jQuery(window).scrollTop(),
windowHeight = jQuery(window).height();
if (scroll > position - windowHeight + 200) {
jQuery(this).addClass('is-active');
}
});
});
}
jQuery(window).trigger('scroll');
});
</script>
<style>
/* アニメーションスタイル */
/* ---------------------------- */
/* アニメーションさせる要素に u-fade-type-up js-scroll-trigger を付与する */
/* アニメーション前 */
.u-fade-type-up{
transform: translateY(120px);
opacity: 0;
}
/* トリガー発火でis-activeを付与 */
.u-fade-type-up.is-active{
transition: 1s;
transform: translateY(0);
opacity: 1;
}
</style>
簡単に解説しておくと、コードの上半分(scriptタグで囲まれた部分)はスクロール位置が範囲内に入ったらCSSクラスを付与(いわゆる発火)しなさいというjQuery、下半分(styleタグで囲まれた部分)は、発火した時にふわっと表示させるためのデザインコードです。
また、最初に紹介したコードと動かなかったときのコードとの違いは、先頭行にある
<script type="text/javascript" src="/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
の部分で、これはページ表示時にWordPress本体のjQueryを動かすためのファイルが読み込まれる前に、今回のjQueryが読み込まれることで動作しなくなるのを回避するためのおまじないです(前述した通り、詳しい説明は割愛しますから、以前に公開した【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応の後半部分などを読んでみてください)。
以上、ブロックごとにふわっと表示させるコンテンツの作り方でした。
コード自体は「JavaScript(jQuery)でスクロールアニメーションを自作する方法を解説!」さんのページを参考にちょっとWordPress用にカスタマイズしただけですので、詳細はそちらを参照ください。