メニュー 閉じる

ワードプレスのページの読み込み画像&アニメ作成する方法と考慮すること

ワードプレスのページの読み込み画像やアニメーションを作成する方法と「状況」と題したのは、本当に重要な理由がある。今すぐロードページを実装するために来た人にこの言葉を最初にするのに十分だ。

現代の高速インターネット環境では、携帯電話の平均3秒以上のロード時間が遅延した場合、多くのユーザーが離脱することになる。ので、何も浮かばないかロードされている画面の代わりにロード画像及びアニメーションを浮かべて、ユーザーが「すぐにページが浮かぶ」は、直感的な判断をすることができるように手助けして、離脱する暇を作らない一種のトリックである。

ため、このページローダーのプラグインやコーディングを介してロード画像、あるいはアニメーションを作成するときに最初に考慮すべき事項は、「私のサイトの読み込み画像を実現するのに十分遅い」である。画像が主をなしているか、大容量のページ、あるいは多くのスクリプトや低速ホスティングサーバーなど、さまざまな複合的な理由で速度が遅くなったり、遅くなったサイトであれば、ページの読み込み画像が非常に効果的である(統計的に直帰率が30%程度減少するとする)。ただし、ページの読み込み速度が1〜2秒程度で、すでに十分に早いさらに高速化するために、あるいはデザインや漢字(?)などの他の理由で、画像の読み込みを使用するつもりなら強力に推奨する。

理由は、ロードのイメージを実装する必要があり、ページを覆って再び消えるなど、追加の読み込みとアニメーション時間が生じるため、かえって適用していないことが、できなかった状況が起きているからだ。ので、ロードイメージを作成する前に、次のチェックリストを確認してみて、もしそれを適用しなければならなら下のプラグインを適用させてみましょう。

  1. ページの読み込み速度が遅い>おすすめ
  2. ページの読み込み速度が速い>非推奨
  3. 特定のページの速度だけ遅い>プラグインの特定のページだけロードページを実装するためのオプションがありますので、それを使用して
  4. ページの読み込み速度が速くても遅いもない曖昧である>一度は非推奨ですが、直接適用してみ実質的な体感速度と快適さを判断した後、使用しても大丈夫

    ロードイメージ・アニメーションを作成する方法

ロードページを作成する方法は、直接コーディングを通じた方法とプラグインを介して2つの方法がある。どのような機能を実装しても、プラグインの数を最小限に減らし、できるなら、直接コーディングしてサイトの読み込み速度を最優先に考えているGKKmonが、ページローダー(Page loader)のような場合は、プラグインを使用することがさらに安定した速かった。特にコーディングのような場合には、特定の環境でのロードイメージが消えないなどのバグが生じるが、環境ごとにエラーを処理するには、なかなか面倒なものではない。ため、ページの読み込み時間のユーザーの離脱を防ぐためにページローダーを使用するように安定性が最も重要であるとすることがあるので、直接コーディングする方法は、非推薦する。

その後、いくつかのプラグインをインストールする必要がかというには、まず検索する最もたくさん出てくる「Preloader by SWS」は絶対にインストールしてはならない。現在、このキーワードでプラグインを検索すると、「Preloader by WordPress Monsters」というプラグインで名前が変わってサービスされているようですが、Googleのに検索すると、最上位には、プラグインの声が出てくるとは別の方法で更新されたかが、2年が越えもう正常に動作プラグインではない。

GKKmonが直接使ってみてテストし、プラグインは、 「Preloader」「Loading Page with Loading Screen」「LoftLoader」 3つのだった。

    Preloader

  • 速度 - 遅い〜普通
  • 機能 - 平凡
  • まずページローダプラグインが備えるべき機能は、基礎的にはどの程度だ備え人である。このプラグインメーカーから自主的に運営している Preloadersロードイメージの作成サイト を介して様々なロードイメージを直接カスタマイズして作成しやすいということが長所であれば、メリット(だってここイメージのみを生成し、他のプラグインを使ってもなるので...)。

    欠点は最も大きいのは、やはり「速度」の問題だ。ロードイメージを受けてきて、ロード画面を出力し、読み込みが終わった後、コンテンツへのバックアップにかかる時間があまり速くないし、その過程もボボクイムがあり、快適ではない。ので、必ずこのプラグインを使用する理由があるのでなければ、あまりお勧めしないプラグインです。また、基礎的にはどの程度の機能をすべて整えたが、本当に基礎的である。特定のページの構成をURLに設定することもなく、他のエフェクトや機能も一切ない。シンプルだとシンプルだこともできる(ところでシンプルするだけで速されたんふ?)。

    注意事項をもって、プラグインをインストールして有効とすぐに使用することができない。有効後 <div id="wptime-plugin-preloader"></div> というコードをサイトの 'header.php'<body> の中に入れなければならだけ働く。

      Loading Page with Loading Screen

  • 速度 - 非常に速い
  • 機能 - 新型、多様
  • 基本的なページローダの機能をプラグインの中で最も良い!その理由は速いから。速度が速い理由と関連があるようだが、ロード時にスラッシング距離のようなコンテンツ表現が少し不満気づくが、「Preloader」と比較すると、圧倒的に速い速度のためにも、魅力的なプラグインです。

    プラグインのインストール後すぐに使用され、基本的には使用されているロードアイコンも素晴らしいし、パーセンテージで読み込んで画面を表示するロードパーセントバー(Display loading percent)も基本的についている。ロードイメージは、合計10個の基本的なイメージを持っているが、通常円形のデザインが最も直感的ですっきりです。もちろん、本人が希望するイメージをリンク入力として使用することができる。また、ロードパーセントバードラッグすることもできる。そのほかの主要な機能を簡潔に説明すると次の通りである。

  • Enable loading screen - ロードスクリーンの使用の有無
  • Display a close screen button - ローディング画面の閉じるボタンを使用の有無
  • Remove the loading screen in the window onload event - 「onload」イベントのような新しいウィンドウを開く使用中のロード画面を使用の有無
  • Display the loading screen - ローディング画面の領域のサイズ調節、ピクセル単位で設定可能
  • Display the loading screen - 何度ローディング画面を表示するか決定した。「always:常に、once per session:セッションごとに1回、once per page:ページごとに1回、
  • Display loading screen in - どの画面でローディング画面を表示するか決定した。「homepage only:ホーム画面でのみ、all pages:すべての画面では、the specific pages:特定のページで(投稿またはページIDをコンマで区切って入力)
  • Exclude loading screen from - 特定の画面でのみロードスクリーンを取り除く。同様の記事やページIDをカンマで区切って入力
  • Select the loading screen - ロードイメージを示す、ロードパーセンテージバーのみ示す選択
  • Select the logo image(or any other image) - ロード画像の選択。下部の基本イメージの中から選択するか、直接設定可能。
  • Select background color - 背景色の選択。右側の「Apply transparency」は透明かどうかを選択
  • Display image in fullscreen - イメージフルスクリーンで表現するかどうか。(特定の環境では表示されない)
  • Select foreground color - 前景色を選択
  • Additional seconds - ページの読み込みが終わった後、さらに数秒後にロードするかどうかを設定する(基本0秒)
  • Include an ad、or your own block of code - 広告または本人が希望するコードを入力可能。文字通り、広告コードや、本人が希望するコードを読み込んで、画面に浮かせることができる。とても便利で、面白い機能。
  • Apply the effect on page - ページの効果を適用。基本的な「none」と左からページが表示される「rotatelnLeft」機能がある。有料版を使用すると、さらに多くの効果を使用することができているということだ。
  • Display loading percent - ロードパーセントの有無。ロードパーセントバーオンまたはオフにすることができる。
  • 最も下のLazy Loading機能は、画像を遅く読み込んで速度を高める技法であるが、同様に有料版で使用可能なようだ。
  • 速く、たとえ限定的であるが、いくつかの使用可能な機能が多く、斬新なのが長所である。その中で最も興味深い機能は、やはり「Include an ad、or your own block of code」機能だが、ロード画面に広告やフレーズを自由に浮かせることができるという点が魅力的だ。ので、ぜひロードイメージのためではなく、他の用途にも使用可能なことだ。

      LoftLoader

  • 速度 - 遅い〜普通だが、あまりにもアニメーションが柔らか
  • 機能 - アニメーション効果に焦点を当て
  • 最後に紹介する「LoftLoader」は、最もダイナミックなロードアニメーションプラグインです。他のページローダとは差別点が確実に、きれい滑らかで自然なロードアニメーションに適切フォーカスを合わせた。設定画面もワードプレスのユーザー定義」画面のように設定することができる。

    ローディングアイコン画像もとてもきれいで柔らかく、ダイナミックでシームレスがなく、フェードアウトしたり、左右、上下などにチュワアク繰り広げ開かスクリーンはロード画面一つのサイトが高級に見えるようにする効果がある。読み込み時間が退屈な時間ではなく、むしろ目の保養になる、見方をすればページローダーの目的に最も適した人と言えるだろう。

    しかし、明確な欠点は、やはりちょっと遅いということ。アンマンきれいところ「LoftLoader」を使用していないときよりも、目に見えて遅くなるので、少し気にされるのが事実だ。また、モバイルミル特定機器やブラウザでは画面全体に表示されず、解雇現象が頻繁である。欠点は本当に明確であるが美的に優れているため、ユーザーの好き嫌いが多く分かれると考えられる。機能は説明するよりも、直接押し見ることがより速く省略する。

      Finish

    現代の高速インターネット環境では、携帯電話の平均3秒以上のロード時間が遅延した場合、ほとんどのユーザーが離脱することになる。ので、ロードイメージ・アニメでは、遅延時間の間、ユーザーが「すぐに画面が浮遊ね」と直感的な判断をすることができるように助けてくれて退屈して離脱する暇を作ってくれないことで、簡単なトリック一つ直帰率を平均30%減少させてくれる優れた機能である。しかし、冒頭でも述べたように、平均速度がまともなサイトであれば、むしろ毒になる可能性があることを念頭に置いて、賢明かつ効率的に使用できるようにしましょう。

    コメントを残す

    メールアドレスが公開されることはありません。

    Posted in All , ワードプレス - Wordpress

    이메일 구독 - Email Subs

    최선을 다해 직접 만든 콘텐츠만 공유합니다.
    We share the best content we have created.