WordPressでローディングアニメーションをプラグインor自作で実装する方法

2024.02.24
2024.02.24

みなさんこんにちは!エンジニアの高澤です!
今回はWordPressでローディングアニメーションを実装する方法を解説したいと思います。

ローディングアニメーションはサイトによってブランド力を高めたり、リッチな表現でユーザーの注目を高めるために必要になる機会はあるかと思います。

当記事では、そんな場面にいつでも対応できるように実際の実務に対応した構成で執筆しておりますので、よろしければぜひ当記事をご活用ください!

ローディングアニメーション(ロード画面)とは

ローディングアニメーションとは、ページが表示される手前の段階でロード時間として表示されるアニメーション画面のことをいいます。

ローディングアニメーションを実装することで、サイトに対してリッチ感を演出できるのと、ウェブサイトのブランド力をより高めることが可能だからです。

そんなメリットの多いローディングアニメーションですが、デメリットもあります。

それは、ページにアクセスするたびにローディングアニメーションを演出しすぎると待機時間が多く発生してしまい、ユーザーに対してストレスを与えてしまいページビュー数が減少してしまう恐れがあります。

このデメリットを回避するための注意点や解決策を、当記事では後ほど解説いたしますのでご安心いただければと思います。

ローディングアニメーションを実装する方法

ローディングアニメーションを実装する方法は2つあります。

それは以下の2つです。

  • プラグインで実装する方法
  • PHP等で自作する方法

それぞれについて解説していきたいと思います。

プラグインで実装する方法

WordPressの最大のメリットであるプラグインを利用する方法について解説したいと思います。

今回解説に利用するプラグインに関しては、「LoftLoader」を利用したいと思います。

まずはWordPress管理画面左メニューの「プラグイン」を選択してください。
そして、「新規プラグインを追加」ボタンをクリックしていただき、新規追加ページの右側の検索キーワード入力ボックスに「LoftLoader」と入力してください。

すると上記の検索結果が表示されるので、インストールして有効化していきます。

有効化すると、上図のように管理画面左メニューにある「設定」→「LoftLoader Lite」が追加されているかと思いますので、クリックしてプラグイン設定ページを表示します。

あとは上図の設定ページからローディングの図の種類や、アニメーションさせたいページの制御、背景色などを変更すれば完了です。

プラグインを有効化した時点でサイト上にローディングアニメーションが表示されるようになっておりますので、ご確認いただけますと幸いです。

PHP等で自作する方法

プラグイン以外にもHTMLやCSS、jQueryで自作する方法があります。

自作するメリットとしては、100%自由にオーダーメイドでカスタマイズしてローディングアニメーションを実装することができる点です。

ただしデメリットもあります。それはエンジニアが必要なことです。

ですが、非エンジニアの方でもここから解説するサンプルコードをコピー&ペーストしていただいて、多少HTMLやCSSを学習していただければある程度はカスタマイズすることができるかと思いますので、自信がある方はぜひ挑戦してみてください。

HTMLを記述する

まずは下記のHTMLコードを記述します。

アニメーションローディングの画面と、ローディング終了後に表示されるコンテンツ部分のHTMLコードになります。

CSSを記述する

次に、CSSを記述します。

以下のCSSコードをコピー&ペーストしてください。

色コードなど必要な箇所をご自身でアレンジしてカスタマイズしてみてください。

JavaScriptを記述する

最後に以下のJavaScriptコードをコピー&ペーストしてください。

ここまで完了したら、無事ローディングアニメーションの実装ができたかと思います。

ローディングアニメーションの注意点

ローディングアニメーションには注意が必要です。
その注意点とは、各々のページに実装して表示させることができますが「使い過ぎには注意すべき」ということがいえます。

ローディングアニメーションによってサイトのリッチ感やサイトのテイストを表現することができますが、ローディングしている時に待機時間が発生してしまい、そのぶんユーザーにストレスを与えてしまう可能性が高いです。

そのため、例えば筆者の経験上おすすめなのは「トップページのみにローディングアニメーションを実装する」ことです。

トップページにアクセスしたときにローディングアニメーションさせるぐらいがちょうど良いのかなと思います。

やり方はシンプルで、WordPressで作られたサイトであれば、PHPファイルにis_front_page()関数などを使ってif文と組み合わせて条件分岐させればOKです。

初回アクセス時のみローディングアニメーションさせる方法

また、トップページにアクセスしたときにローディングアニメーションさせる方法もありますが、それでもサイトやローディングアニメーションのアニメーション時間などによっては長く感じ、以前変わらずしつこい感じがしてユーザーにストレスを与えてしまう可能性があります。

そんなときにより有効なのが、「JavaScript(jQuery)のクッキーやブラウザのセッションを使って初回アクセス時のみローディングアニメーションさせる」ことです。

当記事ではブラウザのセッションを利用したコード例を解説したいと思います。

サンプルコードは以下になります。

まずは上記のHTMLコードをHTMLやPHPファイルにコピー&ペーストしてください。

次に、以下のJQueryコードを追加してください。

最後に以下のCSSコードをコピー&ペーストしてください。

これで初回アクセス時のみローディングアニメーションさせるサンプルを実装することができたかと思います。

あとはうまいことHTMLやjQueryをカスタマイズして実装してみてください。

まとめ

WordPressでローディングアニメーションを実装する方法は以上になります。

ローディングアニメーションを実装するにはそれなりに工数がかかりそうなイメージですが、WordPressを使えばプラグインを使って簡単に高度なローディングアニメーションを実装することができてしまいます。

また当記事ではプラグインのみならず、HTMLやCSS、JavaScriptコードを使って自作する方法まで解説しておりますので、エンジニアにとっても実務で使える構成にしております。

ローディングアニメーションはブロガーなどの方にとってもそうですし、エンジニアにとっても実際の実務で構築する機会があるかと思いますので、当記事をぜひお役立ていただけましたら嬉しいです。

2024.02.24
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ