ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

loader部とコンテンツ部の構成

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

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

全面背景色のみ表示

loaderテキストがフェイドイン

loaderテキストがフェイドアウト

全面背景色がフェイドアウト

コンテンツ(ヒーローイメージ)を表示

この記事でわかること

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

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

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

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

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

ローダー設定手順の概要

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

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

ローダー設定手順の詳細

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

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

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

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

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

1stビューに余分な表示をなくす固定ページの設定

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

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

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

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

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

カバーブロックの設定

設定は以下の通りです。

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

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

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

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

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

表示コンテンツとしてヒーローイメージを配置

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

もちろんヒーローイメージ用の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月現在最新)。

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

  1. ダウンロードページからZipファイルをダウンロード
  2. Zipファイルを解凍(展開)する
  3. minifiedフォルダ内のgsap.min.jsを子テーマのstyle.cssと同階層にアップロードする
  4. 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’を記述しておきましょう。

出来上がったローダー

こうして出来上がったのが、こちらのデモサイトです。

動画はこちらです。Googleのページからデモサイトへ遷移するとローダー(全面黒背景色)とloaderテキストが表示されます。

ローダー表示後ヒーローイメージ表示

ローダーなしでヒーローイメージを表示したデモサイトと比較すると雰囲気の違いがわかります。

ローダーなしでヒーローイメージ表示

まとめ

ローダーをカバーブロックで作成してみました。もう一度手順を確認しておきましょう。

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

ローダー(全面背景色とloaderテキスト)をカバーブロックで作成して、CSSで初期レイアウトなどの見た目を整え、JavaScriptでアニメーション(フェイドイン・フェイドアウト)させる、という仕組みです。

今回、JSライブラリのGSAPを使いました。脱jQueryしたいけれど生のJavaScriptでは記述が面倒、という方にはおすすめです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる