モバイルを最初に組み立てる方法、パフォーマンス指向のWordPressテーマ[パート2]

モバイルを最初に組み立てる方法、パフォーマンス指向のWordPressテーマ[パート2]

モバイルを最初に組み立てる方法、パフォーマンス指向のWordPressテーマ[パート2]
СОДЕРЖАНИЕ
02 июня 2020

下にスクロールしてここに何があるかを確認している場合、ポイント1〜5に何が起こったのか疑問に思われるかもしれません。.


ああ、そうです、答えを見つけるには、このミニシリーズの最初の部分を見てください。.

つまり、この後のガイドは、 WordPress用の高性能モバイルテーマを作成する方法. 最初はそのようには見えないかもしれませんが、実際には多くの人が考えるよりも大きな課題です.

結局のところ、一般的な信念は、テーマをレスポンシブにする必要があるだけであり、それはまさしくモバイルに最適化されているということです。まあ、かなり。さて、これ以上苦労せずに、トピックに戻りましょう。.

パート1については、こちらをご覧ください:モバイルを最初に組み立てる方法、パフォーマンス指向のWordPressテーマ[パート1]

6.すべてのモバイルブラウザ向けの設計

HTMLコードの一部が、実行されているWebブラウザーに応じてどのように異なる動作をするかは、驚くべきことです。これは、モバイルコンピュータとデスクトップコンピュータの両方に当てはまります。ただし、モバイルにはさらに多くのデバイスが必要です。何百もの異なるデバイスと画面仕様に対応する必要があるためです。.

したがって、テーマに取り組むときは、次のことを忘れないでください。

  • 主要なすべてのブラウザーで作業をテストします。これを早期に行うと、テーマ全体が完了したときにブラウザーテストを開始するのとは対照的に、トラブルシューティングがはるかに簡単になります。,
  • できるだけ多くのデバイスを手に取り、テーマがデバイスでどのように動作するかを確認します(可能な場合は、さまざまな画面サイズ、解像度、比率を試してください)。.

7. UXが重要

モバイルでは、人々はデスクトップ上とは非常に異なる方法でWebサイトを操作します.

これは基本的に聞こえますが、簡単な例を挙げましょう。デスクトップでピザ屋を探しているとき、彼らはおそらく彼らがチェックアウトしているレストランに関する多くの詳細に興味を持っています。たとえば、メニュー、ギャラリー、連絡先の詳細など.

ただし、モバイルで同じウェブサイトにアクセスする場合、気になるのは1つだけです。場所にたどり着く方法と予約するために呼び出す番号.

つまり、モバイルのテーマを作成する場合、サイトの所有者はモバイルユーザーにとって重要な特定の要素にさらに焦点を当てることができるように設計する必要があります。.

これを行う最も簡単な方法は、ホームページに表示され、画面の表示領域の上部にとどまる(別名、スクロールせずに見える範囲に保つ)うまく設計されたウィジェット領域を使用することです。.

モバイルでは、必要な情報を探す時間はほとんどありません。これが、優れたモバイルデザインがこの情報にアクセスできるようにするのに効果的である理由です。.

8.少ないほど良い

少ないほど、テーマ開発のほとんどのシナリオに簡単に適用できるコンセプトが増えます。モバイルテーマに関しては、素晴らしいテーマとまあまあのテーマの違いを意味します.

以下は、少ないリソースでより多くを達成するためにできることです。

  • ブランディング要素のためのスペースを少なくする. サイトのロゴのためのスペースが重要であることは明らかです。ただし、実際のコンテンツほど重要ではないので、折りたたみの上のスペースの大部分をロゴが占めないようにしてください。.
  • アクセシブルなメニューを紹介します。メニューは常にモバイルで問題となっています。一方で、ウェブサイトにはメニューが必要です。ただし、もう1つは、短いメニュー(4項目程度)でも、ほとんどのモバイルデバイスで2行のテキストを簡単に使用できるため、コンテンツがページのさらに下に移動します。これを解決する方法は次のとおりです。 (1)1行のテキストに収まる場合は通常どおりメニューを表示し、(2)収まらない場合はメニューをプルダウンにします.
  • 重要でないメニューを取り除きます。ほとんどの場合、フッターメニューはモバイルユーザーにとって何の価値もないと言います。デスクトップでは、訪問者が他のすべてのページへのリンクを見つけることができる一種のキャッチオールメニューとして機能しますが、モバイルでは、誰もがそれを使用する理由はほとんどありません。テーマがモバイルで表示されている場合は、完全に取り除くことを検討してください.
  • 追加のウェブサイト機能に注意してください。新しいWordPressテーマにカスタム機能を導入することに関しては、無数の可能性があります。画像スライダー、ソーシャルメディアの統合、カスタムギャラリーなど、さまざまなものを実装できます。しかし、あなたはすべきですか?これらの機能のアイデアはすべてすばらしいですが、モバイルユーザーに問題を引き起こす可能性があります。テーマがほとんどのプラットフォームで適切に機能することを確認したい場合は、ネイティブの wp_is_mobile() 関数。モバイルとデスクトップのビジターを区別できるため、前者のインターフェースを簡素化して問題を回避できます。.

9.必要なファイルのみをロードします

現在、人々はさまざまなモバイルデバイスからWebにアクセスできるため、必然的に、これらのデバイスの一部は非常に古くなり、最新のWeb機能をサポートできなくなります。このため、特定の機能を実行するために必要なライブラリまたはモジュールを常に確認する必要があります.

そのための最良の方法の1つは、 Modernizr. つまり、ユーザーのブラウザでHTML5とCSS3の機能を検出するJavaScriptライブラリです。特定の機能がデフォルトでブラウザに含まれているかどうかに基づいて、条件付きコードを記述できます。その後、必要に応じて、必要なライブラリをインポートできます.

Modernizr

しかし、Modernizrはすべてのソリューションにはなりません。覚えておく価値のあるその他のガイドラインを次に示します。

  • 原則として、テーマの機能にとってライブラリが絶対に不可欠ではない場合は、ライブラリをインポートしないでください。ライブラリと外部スクリプトが多いほど、最終的なサイトのロードに時間がかかります(特にモバイルの場合)。.
  • JavaScriptファイルを常にHTML構造の最初ではなく最後にロードするようにしてください.
  • してみてください DOM要素の数を最小限に抑える あなたのHTML構造が使用する.
  • すべてのページのCSSファイルとJavaScriptを個別に読み込みます。たとえば、1つの特定のページでのみ必要なCSSファイルがある場合は、条件ステートメント内でis_page()関数を使用し、そのページでのみスタイルをエンキューします.

10.テストサーバーで速度テストを実行する

ローカルテストサーバーがあれば、開発の初期段階で十分ですが、より高度なテスト設定をすばやく導入する必要があります.

実際のところ、少数のテスト環境にテーマをインストールして、実際のパフォーマンスを確認するまで、テーマがどのように最適化されているかは確実にはわかりません。.

コストを低く抑えながら、安価な共有ホスティングアカウントにテーマをインストールすることでこれを行うことができます(ほとんどのエンドユーザーがおそらくいずれにせよそれらを使用するため)。その後、次のツールを使用してさまざまなテストを実行できます。

  • PageSpeed Insights. Googleが作成したツール。モバイルとデスクトップの両方のパフォーマンスに関する優れたデータと、物事を改善するためのヒントが得られます.
  • Pingdomウェブサイト速度テスト. このツールは、サイトに必要な個々のスクリプト/ファイルをロードするのにかかる時間の完全な内訳を提供します.
  • ゴーストラブ. Webとモバイルの同時ブラウザーテスト用の非常に便利なツール.
  • Mobitestによるモバイルパフォーマンステスト. 一般的なエミュレートされたモバイル環境だけでなく、実際のモバイルデバイスでサイトをテストできます.
  • BrowserStack. 人気のあるすべてのモバイルおよびデスクトップブラウザーのすべてのバージョンに即座にアクセスできます。このツールを使用すると、古いブラウザでテーマがどのように表示されるかを気にする必要はありません。数回クリックするだけでスクリーンショットを生成できます.

pagespeed

これは、モバイル向けのパフォーマンス指向のWordPressテーマを作成するための10ステップガイドをまとめたものです。あなたがそれからいくつかのクールなアイデアを得て、それがあなたの次のテーマを真のパフォーマンスモンスターにするのに役立つことを願っています!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector