タイトルが何だか．．これを「ブロックスタイル」というのですが、そう書いても分かる人はそれなりな経験のある人のような気がするので、あえてこんなタイトルにしました（笑）。

ブロックスタイル、例えば、テーブルブロックを入れた時に、「デフォルト」と「ストライプ」が選択できると説明するとわかりやすいでしょう。もう少しこの機能を詳しく説明すると、ボタンで選択した時に「高度な設定」の「追加CSSクラス」の欄に、それ用のクラスが追加され、予めスタイルシートなどに記述していたスタイルが適用されて、見た目が変わるというものです（さらに分かりにくくなったかも．．）。

まあとにかく一言でいえば、ボタンでいろいろなデザインを選択できるようになるという機能です。

この機能自体は特に難しくなく、例えば以下のコードを追加すれば、段落タブにボタンを表示させることができます。

if ( !function_exists( 'sample_register_block_design_styles' ) ){
function sample_register_block_design_styles() {

register_block_style( 'core/paragraph',array(
	'name' => 'original-design',
	'label' => __( 'オリジナル','textdomain' ),
));
}
}
add_action( 'init', 'sample_register_block_design_styles');

「core/paragraph」というのが段落ブロックの意、「オリジナル」が段落ブロックのサイドバーに表示されるデザイン選択ボタンの名前、「original-design」というのが一意の名前で、ボタンをクリックすると「is-style-original-design」というCSSクラスが追加されるので、それに対してスタイルシートなどでスタイルを定義すれば、独自のデザインを簡単に追加することができます。

．．．と「ブロックスタイル」についてのざっくり説明はこの位にしておいて．．．、これを応用して、今回はグループブロックへ画面領域に来ると下からスライドインする動きを持つ「ブロックスタイル」を作る方法を紹介します。

トップページなどでスクロールするとスーっと下から上にスライドして表示される、かっこいいコンテンツを作ることができますよ！

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

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

ここが段落ブロックです

グループブロックに、画面領域に入ると画面外からスライドしてくるアクションを持つ選択ボタンを作る方法|Personal WP Customization Notes (PWCN)

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

この機能は本サイトで配布している「Hima Art Utility」というプラグインでも採用しています。以下のプラグイン紹介ページでこの動きをふんだんに使っていますので、よかったらご覧ください。

WordPressサイトの運営に必要な機能を詰め込んだプラグイン【Hima Art Utility】

「Hima Art Utility」プラグインでは、「下から上」に加え、「上から下」「左から右」「右から左」へのスライドも選択できるようにしています

どうしてグループブロックにするの？

ここではちょっと脱線して、なぜグループブロックにこのスライドアップをする「ブロックスタイル」を追加するのか？について言及しておきます。

この「ブロックスタイル」は、先に紹介したように段落ブロックなど、何もグループブロックでなくてもいろいろなブロックで追加できます。

理由は大きく以下の3つあります。

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

前者は、例えば段落ブロックに「A」という装飾を行うブロックスタイルと「B」というスライドアップさせるブロックスタイルの両方を適用できないからで、グループにしておくことで、段落ブロックに「A」というブロックスタイルを追加して、それをグループ化した上で「B」を付加することで「A」と「B」の両方を適用させることができるからです。

後者は、ブロックスタイルの登録には先ほどの例でいえば「core/paragraph（これは段落）」と、ブロックを指定する必要があり、多種のブロックに追加するにはブロック名だけが異なる同じコードを繰り返し追加しなければならず、余分なコードがたくさんできることになるからです。

スライドアップするグループブロックスタイルの作り方

「ブロックスタイル」について最低限必要である事柄を先に紹介したので、ここまで結構長くなってしまいましたが、ここからがいよいよ本題です。

まずは、上記のように「下から上」にスライドしてくる動きを持たせたグループブロックのスタイルボタンを追加してみましょう。

jQueryを使って動きを持たせる

ページ上で何かのきっかけで何かを動かすという機能を持たせるには、JavaScriptのライブラリの1つであるjQueryというのを使うのが、WordPressでは一般的です（理由はWordPressが常にjQueryを使えるような環境になっていることと、JavaScriptと比べて比較的構文が簡単だからです）。

まずは、有効化しているテーマでjQueryを動作させるための環境作りをします。

１．jQueryを記述するためのファイルを作り、テーマ内へアップロードする

「jQueryを適用させようとしたけど、動作しなかった．．」という話をよく聞きます。これは、そもそも構文が間違っているということを除けば、「WordPressのjQueryライブラリ（jQuery環境）が読み込まれる前に、記述したjQueryを実行しようとしている」ことが主な原因です。

今回の機能に限らず、WordPressではjQueryで何かの動きを追加することがあるでしょうから、構文に間違いがなければ必ず適用されるように、設定しておきましょう。

まず初めに、パソコン上でテキストエディタ（メモ帳ではなく、EmEditorなど無料のテキストエディタ推奨）を開き、何も書かずに、ファイル名を「my-script」、拡張子を「.js」として保存します。

次に、FTPクライアントツールなどを用いて、サイトで有効化しているテーマフォルダの中へ、「my-script.js」ファイルをアップロードします。

２．WordPressにファイルを読み込ませる

アップロードしたファイルをサイトに読み込ませるため、以下のコードを有効化しているテーマのfunctions.phpへ追加します。

/* 独自スクリプトの読み込み */
if ( !function_exists( 'my_script_init' ) ){
function my_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','my_script_init');

詳しい説明は本ページの主旨から外れるので省きますが、上記コードでは、テーマフォルダ内にある「my-script.js」をWordPressのjQueryライブラリが読み込まれた後で読み込んでねという指示をしています。また同時に管理画面側で動かす必要がないので、「管理画面でなければ．．」という条件を追加しています。

これで今回のコードに限らず、「my-script.js」ファイル内へ有効なjQueryコードを書けば、ほぼ必ず動作するようになります。

スライドアップさせるためのjQueryを追加する

「外観」→「テーマエディター」（ブロックテーマの場合は「ツール」→「ブロックエディター」）を開き、「my-script.js」を開いて以下のコードを追加して保存します。

jQuery(document).ready(function($) {
//aimation呼び出し
if ($('.is-style-u-fade-type-up').length) {
	scrollAnimation();
}

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

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

コードの概要としては、「is-style-u-fade-type-up」というCSSクラスに対して、このクラスを持つ要素（グループ化したブロック）が画面の高さから150pxの場所まで来たところで「is-active」というクラスをさらに追加しなさいというものです。

これを追加したら、jQueryの仕込みは終了です。

グループブロックにブロックスタイルを追加する

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

if ( !function_exists( 'sample_register_block_design_group_animation' ) ){
function sample_register_block_design_group_animation() {

/* グループ　アニメーション */
register_block_style('core/group', array(
	'name' =>'u-fade-type-up',
	'label' => __( 'アニメーション','textdomain'),
));
}
}
add_action( 'init', 'sample_register_block_design_group_animation');

コードの解説は前述してますので簡単に、要はグループブロックのブロックスタイルの選択に「アニメーション」という名前のボタンを追加し、クリックされたら「u-fade-type-up（実際に追加されるのは「is-style-u-fade-type-up」）」というCSSクラスを追加しなさいというコードです。

アニメーション用のスタイルを追加する

有効化しているテーマのカスタムCSS、または、有効化しているテーマのstyle.cssへ以下を追加します。

/* animation */
.is-style-u-fade-type-up{
	transform: translateY(120px);
	opacity: 0;
}
.is-style-u-fade-type-up.is-active{
	transition: 1s;
	transform: translateY(0);
	opacity: 1;
}

コードの内容としては、「is-style-u-fade-type-up」というクラスの付いた要素（この場合はグループ化してアニメーションボタンをクリックしたブロック）に対して、初期状態では120px下へ移動させた状態（画面外へ追いやった状態）にした上で、透明にしておき、「is-active」というクラスが付加されたら（jQueryで「is-active」が付加されたら）1秒かけて元の位置に戻しつつ透明でない（表示される）状態にするというスタイルコードです。

必要なコードやファイルの設定、追加は以上です。

画面の高さで起動点がまちまちになってしまうのを防ぐ工夫

動きの部分を制御する以下のjQueryコード。

jQuery(document).ready(function($) {
//aimation呼び出し
if ($('.is-style-u-fade-type-up').length) {
	scrollAnimation();
}

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

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

実は、複数の画面サイズで確認すると、1つ難点というか弱点があることに気づきました。

それは、画面サイズ（高さ）によって、起動する位置にばらつきが出てしまうことです。

起動させる画面の位置は以下の部分で制御しています。

if (scroll > position - windowHeight + 150) {

これは、「スクロールしていって、コンテンツの位置－画面の高さ＋150pxになったら起動させる」というものです。

最後の部分がピクセル単位なので、画面の大きさ（高さ）によってまちまちになってしまうんですね。

ただ、「scroll」というメソッドでは、ピクセル単位でしか指定できない（だから150と単位もない）ので、困った．．といろいろ調べたら「how to use vh units instead of pixels for .scrolltop functions」に掲載されていました。

コードを以下のようにするとどの画面サイズ（高さ）でもそれなりにうまく起動するようになります。

if (scroll > position - windowHeight + (window.innerHeight)*0.2){

ウインドウの高さに0.2を掛けたものという意味だそうです。0.2の部分は実際に実装してみてちょうどいい点を見つけてくださいね。

ブロックスタイルが適用されるかを試してみる

問題なくコードの追加や適用ができていれば、もう既にグループブロックに「アニメーション」というスタイル（ボタン）が追加され、段落ブロックなどをグループ化した状態で「アニメーション」を選択してプレビューなどすれば、スクロールしていったときに、画面内に入った段階で下からスライドインしてくるはずです。

もしも、動作しない場合は以下の点を確認しましょう

  • jQueryを読み込ませるための環境は間違いないか？
  • 各ファイルへ追加するコードは正しく挿入されているか？
  • アニメーション表示させるグループブロックがスクロール量の少ない場所（ページの上の方）にないか？

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

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

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

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

動作サンプル

段落ブロック

グループブロックに、画面領域に入ると画面外からスライドしてくるアクションを持つ選択ボタンを作る方法|Personal WP Customization Notes (PWCN)

追加するjQueryコード

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

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

//Down Slide Animation関数
function scrollAnimation() {
	$(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コード

先に追加した、「sample_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へ以下を追加します。

.is-style-u-fade-type-down{
transform: translateY(-200px);
opacity: 0;
}
.is-style-u-fade-type-down.is-active{
transition: 1s;
transform: translateY(0);
opacity: 1;
}

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

動作サンプル

段落ブロック

グループブロックに、画面領域に入ると画面外からスライドしてくるアクションを持つ選択ボタンを作る方法|Personal WP Customization Notes (PWCN)

追加するjQueryコード

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

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

//Right Slide Animation関数
function scrollAnimation() {
	$(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へ以下を追加します。

.is-style-u-fade-type-right{
transform: translateX(-200px);
opacity: 0;
}
.is-style-u-fade-type-right.is-active{
transition: 1s;
transform: translateX(0);
opacity: 1;
}

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

動作サンプル

段落ブロック

グループブロックに、画面領域に入ると画面外からスライドしてくるアクションを持つ選択ボタンを作る方法|Personal WP Customization Notes (PWCN)

追加するjQueryコード

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

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

//Left Slide Animation関数
function scrollAnimation() {
	$(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へ以下を追加します。

.is-style-u-fade-type-left{
transform: translateX(200px);
opacity: 0;
}
.is-style-u-fade-type-left.is-active{
transition: 1s;
transform: translateX(0);
opacity: 1;
}