ブロックエディタで自由にデザインできる！SWELLにローディング画面を実装する方法

2024-03-282024-04-05

WordPressのテーマSWELLをお使いの方に向けて、ローディングアニメを実装する方法をご紹介します。

プラグインなし
コピペでOK
初回アクセスのみ表示、毎回表示を選べる
全ページ表示、特定のページのみ表示を選べる
デザインはコード編集なしで好きに作れる

ブログパーツを使ったローディングアニメの実装自体はよく見かけますが、より初心者向けかつ複雑なデザインでも追加CSS不要の方法を思いついたので、その解説をしていきます。

※この方法はSWELL以外のテーマでは使えません。

SWELL使ってないよ！という方は神テーマなのでぜひチェックしてみてください！

SWELLにローディングアニメを実装した例

まずは実際に実装してみた例をご紹介します。

デザインは適当なのでシュールになってしまいましたが、サイトロゴなんかを表示したら良い感じだと思います。

この例では初回アクセスのみローディング画面を表示するようにしています。

動画内で画面を再読み込みしてもアニメーションが表示されないのはその為です。

実装の方法

STEP

ブログパーツで好きなデザインを作成する

STEP

基本のコードを配置する

STEP

ウィジェットにSTEP1で作ったブログパーツを配置する

まずは初回アクセスのみ表示、全ページ表示するものを基本として解説し、最後に各カスタマイズ方法をご紹介します。

コード部分はコピペのみで、クラスやCSSの追加をすることなくブロックエディタで作った見た目のまま表示されるようにしてあります。

ちーも

早速やってみよう！

ブログパーツを作成する

まずはローディング画面のデザインをブログパーツで作っていきます。

タイトルはなんでもOK

ここで作ったものがそのまま表示されることになるので、サイズや位置なんかをしっかり設定していきます。

※この例の「LOADING」の文字は、すでにアニメーション設定がされているSVGです。

SWELLでSVGを使う方法はこちら

こんなデザインも作れます

全てのブロックを検証したわけではないですが、リッチカラムや人気プラグインBlocks Animationによるアニメーションも問題なく表示されます。

Blocks Animationを使う場合、遅延を1秒にしてください

Blocks Animationで文字にタイピングアニメ、画像に適当なアニメを付けてみました。

WordPress.org 日本語

Blocks Animation: CSS Animations for Gutenberg Blocks Blocks Animation は、Gutenberg のすべてのブロックに最も洗練された方法で CSS アニメーションを追加することができます。

基本のコードを配置する

次にローディング画面を表示させるためのCSSとJSを配置していきます。

CSS

・カスタマイザー＞追加CSS

.loading {
  background-color: #fff; /*背景色*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1.5s;
}
.loading.loaded {
  opacity: 0;
  visibility: hidden;
}
.loading .post_content {
  opacity: 0;
  animation: fadeIn 1s 0.5s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

JS

・カスタマイザー＞高度な設定＞bodyタグ終了直前に出力するコード

<script>
  //ローディング画面表示用
  jQuery(function () {
    var webStorage = function () {
      if (sessionStorage.getItem('access')) {
        //2回目以降のアクセス
        jQuery('.loading').css('display','none');
      } else {
        //初回アクセス
        sessionStorage.setItem('access','true');
        setTimeout(function () {
          jQuery('.loading').addClass('loaded');
        }, 4000); // ローディングを表示する時間
      }
    }
    webStorage();
  });
</script>

コードが編集できる方は背景色やアニメの表示時間などをお好きにカスタマイズしてみてください。

ウィジェットにブログパーツを配置する

最後に作ったローディング画面用ブログパーツを、ウィジェット機能を使って配置します。

・外観＞ウィジェット

「フッター直前」に「カスタムHTMLウィジェット」を追加、下記コードをコピペしてください。

<div class="loading">
※①で作ったブログパーツのショートコードに置き換えてください
</div>

完成！

これでローディングアニメが表示されるようになりました。

全ページ対応なので、SNSや検索から特定の記事にアクセスした場合でも画面が表示されます。

カスタマイズしてみる

初回アクセスのみ表示→毎回表示にする

JSを以下のコードに置き換えてください。

<script>
  //ローディング画面表示用
  jQuery(function () {
    setTimeout(function () {
      jQuery('.loading').addClass('loaded');
    }, 4000); // ローディングを表示する時間
  });
</script>

全ページ表示→特定のページのみ表示にする

例えばTOPページのみローディングアニメを表示させたい場合のカスタマイズです。

先ほどの説明で追加したウィジェットは削除してください。

ローディングアニメを表示させたいページにカスタムHTMLブロックを追加し、ウィジェットに貼り付けたものと同じコードを記述します。

<div class="loading">
※①で作ったブログパーツのショートコードに置き換えてください
</div>

これだけでローディング画面自体は表示されますが、こんな感じにSWELLのヘッダーが被ってしまうので、気になる方はJSを以下のコードに差し替えてください。

<script>
  //ローディング画面表示用
  jQuery(function () {
    var webStorage = function () {
      if (sessionStorage.getItem('access')) {
        //2回目以降のアクセス
        jQuery('.loading').css('display','none');
      } else {
        //初回アクセス
        jQuery('#content').css('z-index',999);
        sessionStorage.setItem('access','true');
        setTimeout(function () {
          jQuery('.loading').addClass('loaded');
          jQuery('#content').css('z-index',1);
        }, 4000); // ローディングを表示する時間
      }
    }
    webStorage();
  });
</script>

おまけ

制限エリアを使ってカテゴリやタグなんかを指定すれば、ページによって表示する内容を変えられて楽しいかも。

この記事が気に入ったらシェアしてね

URLをコピーしました！