WordPress でページ読み込みアニメーション (プリローダー) を追加する方法

ページ速度は、Web サイトのパフォーマンスにおいて重要な役割を果たします。 ページが完全に読み込まれるまでに 1 ～ 2 秒以上かかる場合、ユーザーはイライラしてサイトを離れてしまう可能性があります。 ただし、ページの読み込みが完了するまでの間、訪問者に何か魅力的なものがあると役立ちます。

ページ読み込みアニメーション、または「プリローダー アニメーション」は、ページが読み込まれている (スタックしていない) ことを訪問者に知らせるのに役立ち、訪問者がサイトにとどまる可能性を高めます。 このようにして、ユーザー エクスペリエンス (UX) を改善し、直帰率を下げることができます。

この投稿では、プリローダー アニメーションの利点と、いつ使用するかについて説明します。 次に、WordPress ページの読み込みアニメーションを追加するためのオプションについて説明します。 始めましょう！

プリローダー アニメーションとは

プリローダー アニメーションは、ページがアクティブに読み込まれていることをユーザーに知らせます。 これは、一度に特定のコンテンツのみをロードするページの進行状況インジケーターとして使用できる単純なアニメーションです。

WordPress プリローダーは、訪問者がページ全体の読み込みを完了するのを待っている間、数秒でより楽しく興味深いものを提供します。 場合によっては、残り時間の見積もりを提供することさえできます。

いつプリローダーを使用する必要がありますか?

プリローダーは、動画や画像が多く、読み込みに通常よりも少し時間がかかる WordPress サイトがある場合に賢明な選択です。 こうすることで、訪問者はサイトが意図したとおりに機能しており、壊れていないことを確信できます。

ただし、サイトの大部分がテキストベースの場合、プリローダー アニメーションは必要ない場合があります。 代わりに、ページの速度を向上させることに集中する方が理にかなっています.

WordPress にページ読み込みアニメーションを追加するための 2 つのオプション

WordPress プリローダー アニメーションをサイトに追加するには、主に 2 つの方法があります。 より簡単なオプションであるプラグインを使用するか、手動でタスクを実行できます。 両方の方法を開始する方法を見てみましょう。

オプション 1: プラグインを使用してプリローダー アニメーションを追加する

プラグインを介してプリローダー アニメーションを追加することは、ほとんどのユーザーにとってより迅速で簡単なオプションです。 使用できるプラグインはいくつかありますが、WP Smart Preloader をお勧めします。

これは無料で高度にカスタマイズ可能なプラグインです。 CSS と最小限の HTML マークアップを使用して、コンテンツの読み込み中にユーザーが Web サイトを離れてしまうリスクを軽減します。 次の手順では、その仕組みを説明します。

ステップ 1: WP Smart Preloader をダウンロードする

WP Smart Preloader プラグインは、WordPress プラグイン ディレクトリからダウンロードできます。 次に、管理ダッシュボードの[プラグイン] > [新規追加] > [プラグインのアップロード]に移動して、 .zipファイルを WordPress サイトにアップロードできます。

もう 1 つのオプションは、 [プラグイン] > [新規追加]画面の検索バーからプラグインを検索することです。

いずれにしても、プラグインがインストールされたら、 Activateボタンをクリックします。 その後、 Settings > WP Smart Preloaderでそのオプションを見つけることができます。

ステップ 2: スタイルを選択する

WP Smart Preloader Settingsページで、最初に行うことは、プリローダーのスタイルを選択することです。 Select Preloaderセクションの下に、6 つのスタイル オプションとカスタム アニメーションのオプションから選択できるドロップダウン メニューがあります。

スタイルを選択したら、下のウィンドウでプレビューできます。 独自のカスタム アニメーションを追加する場合は、 [カスタム アニメーション]セクションに HTML コードを含めることができます。

この画面の最後で、ローダー自体の持続時間と「フェードアウト」効果を設定できます。

これらのフィールドを空白のままにすると、デフォルトはそれぞれ 1500 ミリ秒 (1.5 秒) と 2500 ミリ秒 (2.5 秒) に設定されます。 完了したら、 [変更を保存]ボタンをクリックします。

ステップ 3: プリローダー アニメーションをプレビューする

設定の構成が完了したら、新しいブラウザー タブで WordPress サイトにアクセスして、プリローダー アニメーションをプレビューします。 必要に応じて、前に戻ってスタイルを変更できます。 プリローダーに満足したら、セットアップして準備完了です。

オプション 2: プリローダー アニメーションを手動で追加する

プラグインの使用に興味がない場合でも、この機能をサイトに手動で追加できます。 カスタム プリローダーを作成する主な利点は、設計方法の柔軟性が高いことです。

もちろん、それはより困難なプロセスでもあります。 次に、WordPress サイト用のカスタム プリローダー アニメーションを作成、アップロード、フォーマットする方法について説明します。

ステップ 1: アニメーションのブレインストーミング

最初のステップは、使用するアニメーションの種類を決定することです。 他のプリローダー アニメーション ツールを調べて、好みのスタイルのアイデアを得ることができます。 Codepen で使用および探索できる無料のアニメーションがいくつかあります。これは、アイデアを得るのに最適な方法です。

ステップ 2: アニメーションを開発またはダウンロードする

アニメーションを開発するには、Photoshop などのツールを使用して、GIF または回転するプリローダー アニメーションを作成できます。 CSS を使用した WordPress アニメーションの作成に関するリソースも参照できます。

WordPress サイトに GIF プリローダーを追加するには、プラグインを使用するのが最適であるため、後者のアプローチをお勧めします。 Codepen (上記) の他に、Spinkit や LoadLab などのサイトからアニメーションをダウンロードすることもできます。

このチュートリアルでは、Spinkit のプリローダー アニメーションを使用します。 アニメーションをどこから取得するかに関係なく、CSS ソース コードを手動で WordPress サイトに追加する必要があります。

ほとんどの無料のプリローダー アニメーションには、HTML と CSS の両方を見つけることができるソース リンクが含まれています。

プリローダー アニメーションの CSS ソース コードを使用して、後で好みに合わせてカスタマイズすることもできることに注意してください。

ステップ 3: 子テーマを作成する

アニメーションを作成したら、WordPress サイトに追加できます。 そのための最も安全な方法は、子テーマを設定することです。 その方法がわからない場合は、WordPress 子テーマの作成方法に関するチュートリアルを確認してください。

ステップ 4: テーマのheader.phpファイルに HTML コードを追加する

次のステップは、WordPress テーマのheader.phpファイルを見つけることです。 これは、WordPressテーマ エディター画面から実行できます。

FileZilla などの FTP クライアントを使用してファイルを編集することもできます。 ファイルは、サイトのルート ディレクトリのwp-content > themesフォルダーにあります。

ファイルを見つけて開いたら、body タグの下に次の HTML コードを挿入します。

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

特定の WordPress プリローダー アニメーションに必要な HTML コードを調整または追加し、ファイルを保存します。

ステップ 5: CSS コードをスタイルシートに追加する

次に、CSS を追加してアニメーションのスタイルを設定します。 WordPress テーマの CSS スタイルシート ( style.css ) を見つけて、アニメーションの CSS ソース コードをコピーして貼り付けます。 この場合、以下を追加します。

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

変更を保存する前に、「margin: 100px auto;」の部分を削除してください。 その場所に、次をコピーして貼り付けます。

 position: absolute; top: 48%; left: 48%;

その後、ファイルを保存できます。

ステップ 6: jQuey コードを追加してアニメーションを機能させる

スピナー プリローダー アニメーションを機能させるには、jQuery を少し追加する必要があります。 これを行うには、 header.phpファイルに戻り、body の終了タグの前に次を挿入します。

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

次に、ファイルを保存し、サイトをプレビューして、WordPress プリローダー アニメーションが意図したとおりに機能することを確認します。

WP Engine からその他のヒントとガイドを探す

WordPress プリローダー アニメーションをサイトに追加すると、訪問者を惹きつけ、直帰率を下げることができます。 さらに、仕事をすばやく終わらせるための複数のオプションがあります。

WP Engine では、開発者向けのヒント、トリック、およびリソースを提供して、Web サイトが常に最高に見えるようにすることを使命としています。 今日の私たちの計画についてもっと学びましょう！