現在、このサイトのトップページでもその効果を使って表現しています。Twenty-Three、しかも特別なブロックを作るわけでもなく標準のもので構成しているんです。今回はWordPress標準のグループブロック(でもこれブロックではなくグループ化機能なのでは?と常々思っているのですが、本ページではグループブロックと呼びます)を使って、スクロールしてコンテンツが画面に入ってきた時にアニメーション表示するためのコードを紹介します。有効化しているテーマに追加用のスタイルシートがあることと、WordPress標準のjQueryライブラリの後に読み込まれるJSファイルが存在していることが前提になります。テーマにこのような仕様になっているJSファイルがない場合は、文末の「jQyeryがWordPressのjQueryライブラリの後で読み込まれる環境を作る方法」をご覧になり、先に実装する必要がありますなお、本ページではどうして動きを持たせることができるのかという部分を含め、できるだけ丁寧に細かく説明していきたいという観点から、内容が結構長くなりますから、理解されている部分は適当に読み飛ばしてください。本ページ掲載のコードを使用するときは本ページで掲載しているコードは、以下に了承した上で使用くださいコードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いませんコードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでくださいコードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがありますコードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)スライドするグループブロックの表示サンプル本ページの方法で実装することで、以下のように表示させることができます(段落ブロックと画像ブロックをグループ化しています)。ここが段落ブロックですうーーん、いい感じですね。グループ化したブロックを組み合わせると、下のデモのように、背景は下から出てきて、コンテンツは左右から出てくるみたいなものも作れます。中のグループ化したブロックを逆方向に動かすと...さらにさらに、中の左側のコンテンツは固定して、右側のコンテンツを左へ移動させるようにすると..上のデモでは画像だけ入れてますが、グループに対して動きを持たせるものなので、中にどんなブロックを入れても機能します。今回のカスタマイズでは、以下のようなことをします。画面に入ったら何かをするという機能を持つjQueryコードを実装する1が発火した時にアニメーション表示させるスタイルコードを実装するブロックエディター上でボタンをクリックするだけで効果を選択、または効果なしが選択できるようにする従って、前述したように、jQueryが読み込まれる(WordPress標準のjQueryライブラリの後で読み込まれる)環境、スタイルが追加できる環境、そして、テーマのfunctions.phpへのコード追加ができることが最低限必要です。3の機構を追加することで、グループブロックに対してボタンクリックで効果を選択できるようになり、ブロックエディター上でいつでも変更・解除等ができるようになります(これをブロックスタイルといいますが、詳しくは後述します)。冒頭からグループブロックにと何度も書いていますが、そもそもなぜグループブロックに機能を追加するのかについて触れておきます。この機能は、別にグループブロックでなくても、段落ブロックや画像ブロックなど、基本どんなブロックにも追加できます。以下の3つの理由から、グループブロックにのみ機能を追加しておいた方がよいのです。ブロックごとに付加できるブロックスタイルが1つであることグループの中にグループを入れるなどして、複雑な動作をさせることができること複数のブロックに同じオプションを作る必要がないことブロックごとに付加できるブロックスタイルが1つであること今回はボタンでアニメーション効果を指定できるよう、ブロックスタイルという機能を使うのですが、ブロックエディターでは、効果の選択が1つしか選択できません。段落ブロックに対して「A」という装飾を行うブロックスタイルを選択した場合には、追加で別の「B」というブロックスタイルを選択できないからです。グループにしておくことで、段落ブロックに「A」というブロックスタイルを追加して、それをグループ化した上で「B」を付加することで「A」と「B」の両方を適用させることができます。グループの中にグループを入れるなどして、複雑な動作をさせることができることグループに機能を付加する利点としては、グループブロックの仕組みにもあります。グループブロックは、divなどで囲まれた部分(塊)を作るだけのブロックで、いくつでも子を入れることができるなので、上記のデモのように、1つのブロックは左から右へ移動、もう1つのブロックは右から左へ移動..といった柔軟な対応ができるようになります。複数のブロックに同じオプションを作る必要がないこと単独のブロックにそれぞれアニメーション効果を付加していくと、当然ながらその機能を動かすための同じようなコードがどんどん増えることになります。前述したようにグループブロックは単独または複数のブロックを塊にする機能なので、塊に対してアニメーションを掛ければ済む=余分なコードを読み込ませる必要がなくなるのです。下から上へスライドアップするグループブロックを作ってみるまずは画面内にコンテンツが入ると下から上へスライドアップするグループブロックを作ってみましょう。ブロックスタイルを追加する何度か出てきましたが、ブロックスタイルはブロックに独自のデザインを適用させる任意のボタンを作る機能です。ここでは、下から上へ移動させる機能をもたせるための「下から上」というボタンをグループブロックへ追加します。以下のコードを有効化しているテーマのfunctions.phpへ追加してください。'pwcn_register_block_design_group_animation');追加後に投稿編集画面などでグループブロックを追加すると..スタイルパネル(スタイルタブ)を開くと、いままでは「デフォルト」しかなかったボタンに「下から上」というボタンが追加されていることを確認できます。何をしているかというと、このコードによって「下から上」のボタンをクリックした際に、ブロックの「追加CSSクラス」へ「is-style-pwcn-fade-type-up」というクラスを追加するという処理をしています(コードは「pwcn-fade-type-up」というクラスを追加するように書いていますが、WordPress側で自動的に「is-style-」が追加されます)。念のため、「下から上」ボタンをクリックしたら、そのグループブロックの「追加CSSクラス」へ「is-style-pwcn-fade-type-up」される、「デフォルト」をクリックしたら「追加CSSクラス」が空欄になるという動作も確認しておきましょう。画面内にコンテンツが入ったかを判断する(jQuery)スクロールしていって、画面内にコンテンツが入ったかを判断するためにjQueryを使います。WordPressのjQueryライブラリが読み込まれた後で発火するようにしたファイルへ以下のコードを追加します。{$(this).addClass('is-active');}});});}$(window).trigger('scroll');});このコードでは、「is-style-pwcn-fade-type-up」というCSSクラスを持つコンテンツが画面の所定の場所までスクロールされたかを判断し、「is-active」というCSSクラスを処理するという動作をさせています。jQueryが発火したらスタイルを適用する以下のコードを有効化しているテーマのstyle.cssなど、スタイルコードの追加ができるファイルへ追加します。0;}このコードではコードの上から順に以下のことを行っています。アニメーション動作のための処理(呼び出し用)コンテンツを隠す(透明にしておく)「is-active」というCSSクラスが追加されたら、アニメーションを適用させ、1秒かけて透明だったコンテンツを表示させる※1の処理で、透明のまま一旦画面の下へ移動させてから、元の位置へゆっくり表示させていくようにしていますここまで行ったら、投稿編集画面などへグループブロックを追加した上で、スタイルパネルから「下から上へ」を選択し、プレビューして、画面内に入ったら下から上へスライドしてくるかを確認してください。ページの構成によっては、ページ一番先頭にこのグループブロックを入れると、既に「is-active」が付加された状態(つまりはアニメーション後の状態)になってしまうことがありますので、いくつかブロックを入れた後やスペーサーブロックを手前に配置するなどしてください。できているはずなのに動作しないときは、ブラウザキャッシュのクリア(キーボードの「Ctrl」+「F5」など)を行ってみてください。それでも解決しない場合で多いケースとしてはjQueryが適切に読み込まれていないことが挙げられます。上記のコードの中で以下の部分を使って、発火するタイミングと動くタイミングを指定しています。jQuery側の以下の部分で0.2となっているのが発火タイミング(is-activeが付加されるタイミング)です。{これはコンテンツの位置が画面の高さの20%になったら..ということを指定しています。数字が小さくなればより画面に入ってすぐの段階で、大きくなればその逆の段階で「is-active」を付与します。次に、スタイルコードの以下の部分で、「is-active」が付加された後の動作速度を指定しています。translateY(200px);...animation-duration:1s;...transformの指定は、一旦透明のまま画面の下からどの位の位置まで移動させるか、animation-durationは何秒で処理を完了させるかの指定です。多くの位置へ移動させ、より時間を短くすれば、スライドして見える速度は速くなり、逆なら遅くなります。これでグループブロックで「下から上」へ移動する機能の実装ができましたね。【応用編】下から上以外のアクションを作る方法ここまでの内容で、「下から上」にスライドしてくる機能が追加できたら、最後に応用編として、「下から上」だけでなく、「上から下」「左から右」「右から左」にスライドインさせるためのグループブロック用のスタイルボタンを追加してみます。動作サンプル段落ブロック追加するjQueryコード先に追加した「my-script.js」へ以下を追記します。(window.innerHeight)*0.2){$(this).addClass('is-active');}});});}$(window).trigger('scroll');});追加するPHPコード「下から上へ」移動するグループブロックのブロックスタイルを作成した時に追加した、「pwcn_register_block_design_group_animation」関数の中へ以下を追加します。));追加するスタイルコード子テーマのstyle.cssへ以下を追加します。動作サンプル段落ブロック追加するjQueryコード先に追加した「my-script.js」へ以下を追記します。(window.innerHeight)*0.2){$(this).addClass('is-active');}});});}$(window).trigger('scroll');});追加するPHPコード「sample_register_block_design_group_animation」関数の中へ以下を追加します。));追加するスタイルコードテーマのstyle.cssへ以下を追加します。動作サンプル段落ブロック追加するjQueryコード先に追加した「my-script.js」へ以下を追記します。(window.innerHeight)*0.2){$(this).addClass('is-active');}});});}$(window).trigger('scroll');});追加するPHPコード先に追加した、「sample_register_block_design_group_animation」関数の中へ以下を追加します。));追加するスタイルコードテーマのstyle.cssへ以下を追加します。0;}フェードインさせるブロックスタイルの追加方法ここまでくるともう何が違うのかはお分かりになると思いますので、アニメーション時のスタイルコードだけ掲載しておきます(要は移動させる部分をなくすだけです)。最後にWordPressのjQueryライブラリの後で記述したjQueryコードが読み込まれるようにするための措置について補足しておきます。「my-script.js」というファイルを作り、有効化しているテーマへアップロードします。次に、以下のコードを有効化しているテーマのfuncitons.phpへ追加します。'original-script');}}add_action('wp_enqueue_scripts','pwcn_custom_script_init');これで、テーマフォルダ内の「my-script.js」へ書いたjQueryのコードがWordPressのjQueryライブラリを通じて動作するようになります。表示高速化のための措置(プラグインの使用)などをしている場合には、うまく読み込まれないことがありますWordPressのjQueryライブラリ利用用にjQueryコードを書き換える必要があります($→$jQueryへの書き換えなど)本ページで掲載した内容や、紹介した参考コードなどがお役に立てたようでしたら、ページ末尾のコメント欄よりコメントを残す、SNS等で拡散するなどしていただけましたら幸いです。本ページ掲載の方法やコード等はあくまでも最終更新日時点での私の環境において動作確認等を行ったものです。動作不良やカスタマイズの詳細な方法などをコメント欄よりいただきましても原則回答は致しませんのでご了承ください。WordPressのカスタマイズに関するご要望はココナラにてお受けしております。お問い合わせ方法など詳しくはこちらをご覧ください。最後までお読みいただきありがとうございました。Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。Utility】プラグインの紹介などをしています。コメントをキャンセルメールアドレスが公開されることはありません。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(PWCN)WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなどこのスライドメニューは以下のページの方法を使って実装しています。以下のページでタブ切り替え式のコンテンツの作り方を公開しました。Utility】プラグインをバージョン5.1へ更新しました。