WordPressにプリローダーアニメーションを追加する方法（ステップバイステップ）

WordPressサイトにプリローダー・アニメーションを追加したいですか？

プリローダーとは、ページの読み込みの進行状況をバックグラウンドで表示するアニメーションのことです。これにより、ページが読み込まれていることを訪問者に知らせることができ、ユーザー体験を向上させ、直帰率を減らすことができます。

この投稿では、WordPressにプリローダーを追加する方法を順を追って説明します。

WordPressのプリローダー・アニメーションとは？

プリローダーとは、ページが読み込まれるのを待っているときに表示されるアニメーションのことです。ユーザーにウェブページがまだ準備中であることを伝え、辛抱強く待つように促します。読み込みが終わると、プリローダーは消え、通常通りウェブページを見ることができます。

以下は、WordPressで新規投稿を追加してプレビューする際のプリローダー・アニメーションの例です：

プリローダーを追加したいシナリオの1つは、ウェブページに画像や動画がたくさん埋め込まれている場合です。この場合、ページの読み込みに通常より長い時間がかかるため、ユーザーがページを完全に表示するのに十分な時間、先頭に固定表示する必要があります。

もしあなたのページに重い要素があまりないのであれば、サイトのスピードとパフォーマンスを向上させることに集中した方がよいでしょう。また、より良いWordPressホスティングサービスにアップグレードするのも良いでしょう。

それでは、WordPressサイトにプリローダーを簡単に追加する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：

方法1：WP Smart Preloaderを使ってWordPressにプリローダーを追加する（簡単な方法）

WordPressでプリローダーを追加する最も簡単な方法は、WP Smart Preloaderを使うことです。このプラグインには6つのプリローダーアニメーションがビルトインされており、それを使用することもできますし、カスタマイザーHTMLとCSSを使用して独自のアニメーションを作成することもできます。

最初に必要なことは、WP Smart Preloaderプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、Settings ” WP Smart Preloaderに行き、’Smart Preloader’ドロップダウンを開いてください。使用できるアニメーションがすべて表示されます。

プラグインは、選択したアニメーションのプレビューを表示するので、さまざまなプリローダーを選択して、どれが一番好きかを確認することができます。

初期設定では、アニメーションはWordPressサイト全体に外観されますが、お好みにより、ホームページのみに使用することもできます。ホームページだけに表示する」にチェックを入れてください。

独自のCSSアニメーションを作成したい場合は、「カスタムCSS」ボックスにコードをタイプするだけです。

もう一つのオプションは、「カスタマイゼーション」ボックスにコードを追加して、カスタムHTML5アニメーションを作成することです。

アニメーションを選択したら、「ローダー表示時間」セクションまでスクロールしてください。ここで、プリローダーの再生時間を変更できます。

初期設定は1500ミリ秒または1.5秒です。ほとんどのサイトではこれで十分ですが、必要であれば別の数値を入力することもできます。

初期設定では、アニメーションが完全にフェードアウトするまで2500ミリ秒または2.5秒かかります。これを変更するには、’Loader to Fade Out’フィールドに大きいか小さい数値を入力するだけです。

プリローダーの設定に満足したら、「変更を保存」ボタンをクリックして設定を保存します。

これで、WordPressブログやサイトにアクセスして、プリローダーが動作しているのを確認できます。

方法2：LoftLoaderを使ってWordPressにプリローダーを追加する（よりカスタマイズ可能）

WordPressサイトにプリローダーアニメーションを追加するもう一つの方法は、LoftLoaderを使うことです。 このプラグインにはアニメーションがビルトインされており、様々な方法でプリローダーをカスタマイズすることができます。

まず最初にLoftLoaderプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。

有効化したら、Settings ” LoftLoader Liteでプラグインの設定を行います。 LoftLoader LiteはWordPressのテーマカスタマイザーと統合されているので、この画面は見慣れたものでしょう。

開始するには、「Display on」をクリックします。この画面で、WordPressブログ全体で同じプリローダーを使用するか、トップページのみで使用するかを選択できます。

例えば、トップページに画像や動画が他のサイトに比べて多い場合、カスタマイザーをトップページだけに表示するのは理にかなっているかもしれません。

決定後、「戻る」矢印をクリックしてメイン設定ページに戻ります。

次に、「背景」オプションをクリックする。

ここでは、「Pick Color」ボックスをクリックして背景色を変更できます。また、背景の不透明度を変更したり、「フェード」や「上下にスライド」などの新しい終了アニメーションを選択することもできます。

変更を加えると、プレビューが更新されますので、さまざまな設定を試して、最適な設定を確認することができます。背景の設定に満足したら、「戻る」矢印をクリックします。

次に、「ローダー」オプションをクリックしてアニメーションを変更することができる。

Loader Animation’ボックスのサムネイルをクリックして、新しいアニメーションを選択することができます。プリローダーの色を変更するには、「Pick Color」ボックスで新しい色を選択するだけです。

そうしたら、「戻る」矢印をクリックする。

次に、「More」メニューオプションをクリックします。 ここで、「Maximum Load Time」を選択することで、アニメーションの再生時間を変更することができます。

次に、プリローダーの持続時間を入力します。

次に、特に最大ロード時間を長くしている場合、ユーザーにアニメーションを閉じる方法を与えたいと思うかもしれません。終了ボタンを追加するには、’閉じるボタン’をクリックし、設定を使ってボタンを構成してください。

ボタンの設定に満足したら、’公開する’ボタンをクリックするだけで、プリローダーを公開することができます。

さあ、あなたのサイトにアクセスして、新しいプリローダーを実際にご覧ください。

WordPressサイトのパフォーマンスを向上させる究極のガイド

プリローダー・アニメーションは、実際の速度が変わっていなくても、ロード時間が速くなったような印象を与えることができます。しかし、サイトのパフォーマンスを最適化するための長期的な解決策にはなりません。

そのため、スピード最適化のベストプラクティスに従うことをお勧めします。サイトが成長するにつれ、プリローダーだけではユーザーのサイトからの離脱を防ぐことはできません。

サイトのパフォーマンスを向上させるために、以下のガイドをご覧ください：

• WordPressのパフォーマンスを高速化する究極のガイド
• サイトを高速化するWordPressのベストキャッシュプラグイン
• 最速のWordPressホスティングサービスプロバイダー（パフォーマンステスト付き）
• 画質を落とさずにウェブ用に画像を簡単に最適化する方法
• WordPressサイトに動画を最適化する方法

WordPressにプリローダーアニメーションを追加する方法について、この投稿がお役に立てば幸いです。WordPressでランディングページを作成する方法についてのガイド、またはドラッグ＆ドロップでWordPressページビルダーを作成する方法についてもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.