【ワードプレス】カバーブロックでオープニングローダーを表示する方法

2022年5月21日

ワードプレスのカバーブロックに簡単なCSSとJavaScriptを使って、オープニングローダーを表示します。

ブロックエディター内の構成は以下の通りです。ローダー部（背景色とテキスト）をカバーブロックで作成し、その下に任意のブロックでコンテンツ部を作成します。

ローダー部がフェイドアウトして消えたあと、コンテンツ部が表示される仕組みとなります。

今回はローダーがフェイドアウトした後の表示コンテンツとして、先の記事で作成したヒーローイメージを使ってみました。完成したデモサイトがこちらです。構成は以下の通りです。

全面背景色のみ表示
↓
loaderテキストがフェイドイン
↓
loaderテキストがフェイドアウト
↓
全面背景色がフェイドアウト
↓
コンテンツ（ヒーローイメージ）を表示

この記事でわかること

ワードプレスのカバーブロックにカスタムCSSとJavaScriptを適用することで、オープニングローダーを表示させる方法。

カバーブロックで背景色とloaderテキストを入力。idも設定する。
カバーブロックにカスタムCSSを適用して、カバーブロックを全画面表示とする
（背景色で全画面を塗りつぶし。テキストは非表示としておく。）
カバーブロックにjavascriptを適用して、次の動きとする
①loaderテキストをフェイドイン
②loaderテキストをフェイドアウト
③背景色をフェイドアウト
④最後にコンテンツ（今回はヒーローイメージ）を表示

※jQueryは使用せず、JavaScriptのライブラリであるgsapを使用します。gsapを使って簡単な記述でアニメーションしていきます。

ヒーローイメージをコンテンツ部に使うので、便宜上テーマには有料版Lightning G3 Pro Unitを使いますが、オープニングローダーの作成には他のテーマでも流用可能です。（ただし１カラムレイアウトが使えること）

本記事で作成するローダーに追加として、背景色が左右に開いてコンテンツ表示する動きをつけてみました。合わせて参照ください。

【ワードプレス】オープニングローダーに背景色を左右に開く画面遷移を追加

前の記事でオープニングローダーを作成しました。本記事では、オープニングローダーの後、背景色で塗り ...

https://web-children.com/2022/05/14/adding-of-opening-screen...

1. ローダー設定手順の概要
2. ローダー設定手順の詳細
3. 出来上がったローダー
4. まとめ

ローダー設定手順の概要

ローダーを設定する手順概要です。

ブロックエディターを準備
（１カラムレイアウトやヘッダー非表示設定など、1stビューに全幅画像を表示する準備をする）
カバーブロックで背景色とloader用テキストを入力
（カスタムCSS、js用にid名も付与しておく）
カスタムCSSの記述
（②のカバーブロックを全画面表示するとともに、テキストは非表示としておく）
jsファイルの準備と記述
（loader用テキストのフェイドイン、フェイドアウトと背景色のフェイドアウトの記述）
functions.phpでjsファイルを読み込む

ローダー設定手順の詳細

①ブロックエディターの準備

固定ページでも投稿でもどちらでもOKです。（今回のデモ画面は投稿を使用しました。）

1stビューとして画像を画面いっぱいに広げるための準備として、次の設定をしておきます。

１カラムレイアウトとする
1stビューにヘッダーなど何も表示しない設定
（サイトコンテンツの上下余白をなし、ヘッダー・ページヘッダー・パンくずリストの非表示）

Lightning G3 Proならば次の設定でOKです。

レイアウトの１カラム化は、ダッシュボードメニューの外観＞カスタマイズ＞レイアウト設定＞カラム設定　でも可能です（その場合は全投稿ページ共通の設定となります）。

固定ページ・投稿を問わずこういった臨機応変なレイアウト設定が可能なのがLightningの使いやすいところだと思います。

他の１カラムレイアウトのテーマを使う場合は、header.phpを編集するか、CSSのdisplay:none;でヘッダー部を非表示化しておきましょう。

②カバーブロックで背景色とloaderテキストを入力

ブロックエディター内にカバーブロックを挿入し背景色とテキストを入力します。

設定は以下の通りです。

背景色（オーバーレイ）：黒
不透明度：100％
テキスト（段落ブロック）：”Sweet Time”と入力。中央揃えで、白の斜体文字としています。
HTMLアンカー（id設定）：下記画像参照
　・カバーブロック・・・loading
　・段落ブロック・・・・loading_logo

このidを目印として、カバーブロックとテキストにCSSとjavascriptを適用していきます。

カバーブロックの下にコンテンツを配置

ローダーとなるカバーブロックの下に、ローダーのフェイドアウト後に表示するコンテンツを配置しておきます。

冒頭に説明の通り、今回はヒーローイメージを配置しました。

ヒーローイメージの作成はこちらの記事を参照ください。

テーマLightning G3 Proでヒーローイメージを作成する方法

ワードプレスの人気テーマLightningで1stビューに画面いっぱいに広がるヒーローイメージを配置してみよ ...

https://web-children.com/2022/04/28/hero-image-by-lightning-...

もちろんヒーローイメージ用のCSSとjavascriptもそのままコピペして持ってきています。

③カスタムCSSの記述

CSSを記述します。

記述場所は子テーマのstyle.cssやカスタマイザーの追加CSS欄でも構いませんが、Lightningの場合はブロックエディター画面下部にある、VK All in One Expansion UnitのカスタムCSS欄でもよいでしょう。

記述CSSは以下の通りです。

/* Loading背景画面設定　*/
#loading {
  /*fixedで全面に固定*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

/* Loaderテキスト中央配置　*/
#loading_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-family: serif;
}

position: fixedとすることで、ローダー部が画面上部に固定されると同時にレイヤー的に浮いた状態となり、その下層レイヤーとしてコンテンツ部（今回はヒーローイメージ）が潜り込むことになります。

loaderテキストは他のテキストと雰囲気を変えるためにserif（明朝体）としました。opacity:0で初期値は非表示としておき、あとでjavascriptでフェイドインさせます。

④jsファイルの準備と記述

GSAPの準備

JavaScriptにはGSAPを使います。GSAPは軽量でありながら高機能なアニメーション用JSライブラリです。

『生のJavaScriptだけだとコードが長くなりがち、しかしjQueryは重くなるので使いたくない』という場合にはGSAPが重宝します。ほかにも次のメリットが大きいでしょう。

CSSのtransitionプロパティをGSAPで簡単に記述できるので、JavaScriptの記述だけでアニメーションが完結しやすい
CSSのtransitionプロパティは、現在でもiphoneのChromeではバグの問題で不安定だが、GSAPで指定すれば安定動作する

JavaScriptとCSSを組み合わせたアニメーションでは、イベントやタイムライン的にJavaScriptでクラスを付与させ、CSSでアニメーションさせる、という手法が多いようですが、JSとCSSの両方を確認しながらコーディングしていく必要があるので面倒だと感じています。

GSAPを使えば、アニメーションは基本的にGSAPに任せてCSSはアニメーション以外のレイアウト等を記述する、と役割分担できるので便利です。

GSAPを使用するために、ファイルgsap.min.jsを読み込みできるように準備します。

gsap.min.jsの読み込みはCDNを使うのが最も簡単です。以下のscriptを<header>タグ内に設置すればOKです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

※上記はversion3.10.4のものです（2022年5月現在最新）。

しかしきちんと自サイト内にアップロードして使うのが最も確実なので、私は以下の手順で読み込みさせています。

ダウンロードページからZipファイルをダウンロード
Zipファイルを解凍（展開）する
minifiedフォルダ内のgsap.min.jsを子テーマのstyle.cssと同階層にアップロードする
functions.phpで読み込みの記述をする

手順④のfunctions.phpでの読み込みは後述するので、ここでは①～③まで進めておきましょう。

loader用jsファイルの準備と記述

JavaScriptファイル名をloader.jsとして、子テーマフォルダのstyle.cssと同じ階層に設置します。

記述する内容は以下の通りです。

window.addEventListener("load", function () {
  gsap.to("#loading_logo", { delay: 0.2, duration: 1, opacity: 1 });
  gsap.to("#loading_logo", { delay: 1.5, duration: 1, opacity: 0 });
  gsap.to("#loading", {
    delay: 3,
    duration: 1,
    opacity: 0,
    onComplete: Unshow,
  });
  function Unshow() {
    document.querySelector("#loading").style.display = "none";
  }
});

gsapで一番基本的なアニメーションは次の方式で記述します。

gsap.to(要素, {（プロパティ: 値）, （プロパティ: 値）, ・・・・});

例えば次の記述だと、『id="loading_logo"の要素を0.2秒後に1秒間で不透明度100%に変化させる』となります。

gsap.to("#loading_logo", {delay: 0.2, duration: 1, opacity: 1});

これで非表示だったloaderテキストがフェイドインするわけですね。

また、プロパティonCompleteでは、すでに記述したアニメーションが完結後に発火する関数を指定できます。

gsap.to("#loading", {
  delay: 3,
  duration: 1,
  opacity: 0,
  onComplete: Unshow,
});
function Unshow() {
  document.querySelector("#loading").style.display = "none";
}

この記述によりローダー部であるカバーブロックが、opacity:0による非表示化の完結後、display: noneで完全に消去されています。

opacity:0による非表示化だけだと、その後に表示されるコンテンツ部のボタン等がクリックできないなど問題が発生します。

⑤functions.phpでjsファイルを読み込む

子テーマのfunctions.phpにgsap.min.jsとloader.jsを読み込む記述を追記します。

define( 'MY_DIR_URL', get_stylesheet_directory_uri() );
define( 'MY_DIR_PATH', get_stylesheet_directory() );

add_action( 'wp_enqueue_scripts', function(){
    //gsap.min.jsの読み込み
    $timestamp = date( 'Ymdgis', filemtime(MY_DIR_PATH . '/gsap.min.js' ));
    wp_enqueue_script( 'gsap_js', MY_DIR_URL . '/gsap.min.js', [], $timestamp, true);
    //loader.jsの読み込み
    $timestamp = date( 'Ymdgis', filemtime(MY_DIR_PATH . '/loader.js' ));
    wp_enqueue_script( 'loader_js', MY_DIR_URL . '/loader.js', ['gsap_js'], $timestamp, true);
});

loader.jsでGSAPライブラリを使った記述をしているので、loader.jsの前にgsap.min.jsを読み込む必要があります。そのためにloader.jsを読み込むwp_enqueue_script( )の第4引数には、gsap.min.js読み込みのハンドル名’gsap_js’を記述しておきましょう。