標準のブロックで画面領域に入ると画面外からスライドしてくるアクションを持つコンテンツを作る方法

公開日:2023(令和5)年5月25日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPressのサイト、特にトップページなどで、画面をスクロールするとスーっと移動してくるコンテンツ見たことありますよね?

現在、このサイトのトップページでもその効果を使って表現しています。

でもこの機能、特に特別なプラグインを使っているわけでもなく、テーマはWordPress標準のTwenty Twenty-Three、しかも特別なブロックを作るわけでもなく標準のもので構成しているんです。

今回はWordPress標準のグループブロック(でもこれブロックではなくグループ化機能なのでは?と常々思っているのですが、本ページではグループブロックと呼びます)を使って、スクロールしてコンテンツが画面に入ってきた時にアニメーション表示するためのコードを紹介します。

有効化しているテーマに追加用のスタイルシートがあることと、WordPress標準のjQueryライブラリの後に読み込まれるJSファイルが存在していることが前提になります。テーマにこのような仕様になっているJSファイルがない場合は、文末の「jQyeryがWordPressのjQueryライブラリの後で読み込まれる環境を作る方法」をご覧になり、先に実装する必要があります

なお、本ページではどうして動きを持たせることができるのかという部分を含め、できるだけ丁寧に細かく説明していきたいという観点から、内容が結構長くなりますから、理解されている部分は適当に読み飛ばしてください。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

スライドするグループブロックの表示サンプル

本ページの方法で実装することで、以下のように表示させることができます(段落ブロックと画像ブロックをグループ化しています)。

ここが段落ブロックです

動作サンプル用の画像

うーーん、いい感じですね。

さらにグループ化したブロックを組み合わせると、下のデモのように、背景は下から出てきて、コンテンツは左右から出てくるみたいなものも作れます。

動作サンプル用の画像
動作サンプル用の画像

さらに中のグループ化したブロックを逆方向に動かすと...

動作サンプル用の画像
動作サンプル用の画像

さらにさらに、中の左側のコンテンツは固定して、右側のコンテンツを左へ移動させるようにすると..

動作サンプル用の画像
動作サンプル用の画像

上のデモでは画像だけ入れてますが、グループに対して動きを持たせるものなので、中にどんなブロックを入れても機能します。

動きがあるだけでちょっとリッチ?で楽しいコンテンツになりますね!

QA Analytics QA Analytics

動きを持つグループブロックを作成するおおまかな手順

今回のカスタマイズでは、以下のようなことをします。

  1. 画面に入ったら何かをするという機能を持つjQueryコードを実装する
  2. 1が発火した時にアニメーション表示させるスタイルコードを実装する
  3. ブロックエディター上でボタンをクリックするだけで効果を選択、または効果なしが選択できるようにする

従って、前述したように、jQueryが読み込まれる(WordPress標準のjQueryライブラリの後で読み込まれる)環境、スタイルが追加できる環境、そして、テーマのfunctions.phpへのコード追加ができることが最低限必要です。

また、3の機構を追加することで、グループブロックに対してボタンクリックで効果を選択できるようになり、ブロックエディター上でいつでも変更・解除等ができるようになります(これをブロックスタイルといいますが、詳しくは後述します)。

ブロックスタイル追加後のブロックエディター選択ボタン

単独のブロックではなくグループに対して行う意味

冒頭からグループブロックにと何度も書いていますが、そもそもなぜグループブロックに機能を追加するのかについて触れておきます。

この機能は、別にグループブロックでなくても、段落ブロックや画像ブロックなど、基本どんなブロックにも追加できます。

ただ、以下の3つの理由から、グループブロックにのみ機能を追加しておいた方がよいのです。

  1. ブロックごとに付加できるブロックスタイルが1つであること
  2. グループの中にグループを入れるなどして、複雑な動作をさせることができること
  3. 複数のブロックに同じオプションを作る必要がないこと

ブロックごとに付加できるブロックスタイルが1つであること

今回はボタンでアニメーション効果を指定できるよう、ブロックスタイルという機能を使うのですが、ブロックエディターでは、効果の選択が1つしか選択できません。

例えば段落ブロックに対して「A」という装飾を行うブロックスタイルを選択した場合には、追加で別の「B」というブロックスタイルを選択できないからです。

グループにしておくことで、段落ブロックに「A」というブロックスタイルを追加して、それをグループ化した上で「B」を付加することで「A」と「B」の両方を適用させることができます。

グループの中にグループを入れるなどして、複雑な動作をさせることができること

グループに機能を付加する利点としては、グループブロックの仕組みにもあります。

グループブロックは、divなどで囲まれた部分(塊)を作るだけのブロックで、いくつでも子を入れることができるなので、上記のデモのように、1つのブロックは左から右へ移動、もう1つのブロックは右から左へ移動..といった柔軟な対応ができるようになります。

複数のブロックに同じオプションを作る必要がないこと

単独のブロックにそれぞれアニメーション効果を付加していくと、当然ながらその機能を動かすための同じようなコードがどんどん増えることになります。

前述したようにグループブロックは単独または複数のブロックを塊にする機能なので、塊に対してアニメーションを掛ければ済む=余分なコードを読み込ませる必要がなくなるのです。

下から上へスライドアップするグループブロックを作ってみる

まずは画面内にコンテンツが入ると下から上へスライドアップするグループブロックを作ってみましょう。

ブロックスタイルを追加する

何度か出てきましたが、ブロックスタイルはブロックに独自のデザインを適用させる任意のボタンを作る機能です。

ここでは、下から上へ移動させる機能をもたせるための「下から上」というボタンをグループブロックへ追加します。

以下のコードを有効化しているテーマのfunctions.phpへ追加してください。

function pwcn_register_block_design_group_animation() {
/* グループ アニメーション(下から上) */
register_block_style('core/group', array(
	'name' =>'pwnc-fade-type-up',
	'label' => __( '下から上',''),
));
}
add_action( 'init', '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ライブラリが読み込まれた後で発火するようにしたファイルへ以下のコードを追加します。

//下から上へのAnimation呼び出し
jQuery(document).ready(function($) {
if ($('.is-style-pwcn-fade-type-up').length) {
	UpScrollAnimation();
}

//aimation関数
function UpScrollAnimation() {
	$(window).scroll(function () {
		$(".is-style-pwcn-fade-type-up").each(function () {
			let position = $(this).offset().top,
			scroll = $(window).scrollTop(),
			windowHeight = $(window).height();

			if (scroll > position - windowHeight * 0.2) {
				$(this).addClass('is-active');
			}
		});
	});
}
	$(window).trigger('scroll');
});

このコードでは、「is-style-pwcn-fade-type-up」というCSSクラスを持つコンテンツが画面の所定の場所までスクロールされたかを判断し、「is-active」というCSSクラスを処理するという動作をさせています。

jQueryが発火したらスタイルを適用する

以下のコードを有効化しているテーマのstyle.cssなど、スタイルコードの追加ができるファイルへ追加します。

/* animation */
/* Animation Key */
@keyframes GroupslideUpAnime{
from {
    opacity: 0;
    transform: translateY(200px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.is-style-pwcn-fade-type-up{
	opacity: 0;
}

.is-style-pwcn-fade-type-up.is-active{
	animation-name: GroupslideUpAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

このコードではコードの上から順に以下のことを行っています。

  1. アニメーション動作のための処理(呼び出し用)
  2. コンテンツを隠す(透明にしておく)
  3. 「is-active」というCSSクラスが追加されたら、アニメーションを適用させ、1秒かけて透明だったコンテンツを表示させる
    ※1の処理で、透明のまま一旦画面の下へ移動させてから、元の位置へゆっくり表示させていくようにしています

ここまで行ったら、投稿編集画面などへグループブロックを追加した上で、スタイルパネルから「下から上へ」を選択し、プレビューして、画面内に入ったら下から上へスライドしてくるかを確認してください。

ページの構成によっては、ページ一番先頭にこのグループブロックを入れると、既に「is-active」が付加された状態(つまりはアニメーション後の状態)になってしまうことがありますので、いくつかブロックを入れた後やスペーサーブロックを手前に配置するなどしてください。

きちんとできているはずなのに動作しないときは、ブラウザキャッシュのクリア(キーボードの「Ctrl」+「F5」など)を行ってみてください。それでも解決しない場合で多いケースとしてはjQueryが適切に読み込まれていないことが挙げられます。確認はデベロッパーツールで行う必要があります

速度の調整の仕方

上記のコードの中で以下の部分を使って、発火するタイミングと動くタイミングを指定しています。

まずはjQuery側の以下の部分で0.2となっているのが発火タイミング(is-activeが付加されるタイミング)です。

if (scroll > position - windowHeight * 0.2) {

これはコンテンツの位置が画面の高さの20%になったら..ということを指定しています。数字が小さくなればより画面に入ってすぐの段階で、大きくなればその逆の段階で「is-active」を付与します。

次に、スタイルコードの以下の部分で、「is-active」が付加された後の動作速度を指定しています。

...
transform: translateY(200px);
...
animation-duration:1s;
...

transformの指定は、一旦透明のまま画面の下からどの位の位置まで移動させるか、animation-durationは何秒で処理を完了させるかの指定です。

より多くの位置へ移動させ、より時間を短くすれば、スライドして見える速度は速くなり、逆なら遅くなります。

これでグループブロックで「下から上」へ移動する機能の実装ができましたね。

【応用編】下から上以外のアクションを作る方法

ここまでの内容で、「下から上」にスライドしてくる機能が追加できたら、最後に応用編として、「下から上」だけでなく、「上から下」「左から右」「右から左」にスライドインさせるためのグループブロック用のスタイルボタンを追加してみます。

「下から上」スライドがうまく動作しない状況で以下を試してもうまくいきませんのでご注意ください

「上から下」へスライドするブロックスタイルの追加

動作サンプル

段落ブロック

画像ブロックのサンプル

追加するjQueryコード

先に追加した「my-script.js」へ以下を追記します。

jQuery(document).ready(function($) {
//Down Slide Animation呼び出し
if ($('.is-style-u-fade-type-down').length) {
	DownScrollAnimation();
}

//Down Slide Animation関数
function DownScrollAnimation() {
	$(window).scroll(function () {
		$(".is-style-u-fade-type-down").each(function () {
			let position = $(this).offset().top,
			scroll = $(window).scrollTop(),
			windowHeight = $(window).height();

			if (scroll > position - windowHeight + (window.innerHeight)*0.2){
				$(this).addClass('is-active');
			}
		});
	});
}
	$(window).trigger('scroll');
});

追加するPHPコード

「下から上へ」移動するグループブロックのブロックスタイルを作成した時に追加した、「pwcn_register_block_design_group_animation」関数の中へ以下を追加します。

/* グループ downアニメーション */
	register_block_style('core/group', array(
	'name' =>'u-fade-type-down',
	'label' => __( 'Down Animation','hima-art-utility'),
  ));

追加するスタイルコード

子テーマのstyle.cssへ以下を追加します。

@keyframes GroupslideDownAnime{
from {
    opacity: 0;
    transform: translateY(-200px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.is-style-u-fade-type-down{
	opacity: 0;
}

.is-style-u-fade-type-down.is-active{
	animation-name: GroupslideDownAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

「左から右」へスライドするブロックスタイルの追加

動作サンプル

段落ブロック

画像ブロックのサンプル

追加するjQueryコード

先に追加した「my-script.js」へ以下を追記します。

jQuery(document).ready(function($) {
//Right Slide Animation呼び出し
if ($('.is-style-u-fade-type-right').length) {
	RightScrollAnimation();
}

//Right Slide Animation関数
function RightScrollAnimation() {
	$(window).scroll(function () {
		$(".is-style-u-fade-type-right").each(function () {
			let position = $(this).offset().top,
			scroll = $(window).scrollTop(),
			windowHeight = $(window).height();

			if (scroll > position - windowHeight + (window.innerHeight)*0.2){
				$(this).addClass('is-active');
			}
		});
	});
}
	$(window).trigger('scroll');
});

追加するPHPコード

「sample_register_block_design_group_animation」関数の中へ以下を追加します。

/* グループ Rightアニメーション */
	register_block_style('core/group', array(
	'name' =>'u-fade-type-right',
	'label' => __( 'To Right Animation','hima-art-utility'),
  ));

追加するスタイルコード

テーマのstyle.cssへ以下を追加します。

@keyframes GroupslideRightAnime{
from {
    opacity: 0;
    transform: translateX(-200px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

.is-style-u-fade-type-right{
	opacity: 0;
}

.is-style-u-fade-type-right.is-active{
    animation-name: GroupslideRightAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}

「右から左」へスライドするブロックスタイルの追加

動作サンプル

段落ブロック

画像ブロックのサンプル

追加するjQueryコード

先に追加した「my-script.js」へ以下を追記します。

jQuery(document).ready(function($) {
//Left Slide Animation呼び出し
if ($('.is-style-u-fade-type-left').length) {
	LeftScrollAnimation();
}

//Left Slide Animation関数
function LeftScrollAnimation() {
	$(window).scroll(function () {
		$(".is-style-u-fade-type-left").each(function () {
			let position = $(this).offset().top,
			scroll = $(window).scrollTop(),
			windowHeight = $(window).height();

			if (scroll > position - windowHeight + (window.innerHeight)*0.2){
				$(this).addClass('is-active');
			}
		});
	});
}
	$(window).trigger('scroll');
});

追加するPHPコード

先に追加した、「sample_register_block_design_group_animation」関数の中へ以下を追加します。

/* グループ Leftアニメーション */
	register_block_style('core/group', array(
	'name' =>'u-fade-type-left',
	'label' => __( 'To Left Animation','hima-art-utility'),
  ));

追加するスタイルコード

テーマのstyle.cssへ以下を追加します。

@keyframes GroupslideLeftAnime{
from {
    opacity: 0;
    transform: translateX(200px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

.is-style-u-fade-type-left{
	opacity: 0;
}

.is-style-u-fade-type-left.is-active{
	animation-name: GroupslideLeftAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

フェードインさせるブロックスタイルの追加方法

ここまでくるともう何が違うのかはお分かりになると思いますので、アニメーション時のスタイルコードだけ掲載しておきます(要は移動させる部分をなくすだけです)。

@keyframes GroupFadeAnime{
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

.is-style-u-fade-type-fadein{
	opacity: 0;
}

.is-style-u-fade-type-fadein.is-active{
	animation-name:  GroupFadeAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

jQyeryがWordPressのjQueryライブラリの後で読み込まれる環境を作る方法

最後にWordPressのjQueryライブラリの後で記述したjQueryコードが読み込まれるようにするための措置について補足しておきます。

まずは、「my-script.js」というファイルを作り、有効化しているテーマへアップロードします。

次に、以下のコードを有効化しているテーマのfuncitons.phpへ追加します。

/* 独自スクリプトの読み込み */
function pwcn_custom_script_init() {
	if(!is_admin()){
	wp_register_script( 'original-script', get_stylesheet_directory_uri() .'/my-script.js', array('jquery'), null,true );

	wp_enqueue_script( 'original-script');
	}
}
add_action('wp_enqueue_scripts','pwcn_custom_script_init');

これで、テーマフォルダ内の「my-script.js」へ書いたjQueryのコードがWordPressのjQueryライブラリを通じて動作するようになります。

表示高速化のための措置(プラグインの使用)などをしている場合には、うまく読み込まれないことがあります

WordPressのjQueryライブラリ利用用にjQueryコードを書き換える必要があります($→$jQueryへの書き換えなど)



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)
ブロックテーマでサイトの背景画像を設定する5つの方法