世界のインターネット?ユーザーはますますモバイルに依存デバイスアクセスウェブでは、WordPressウェブサイトがあらゆる畫面サイズでスムーズに動(dòng)作するようにすることが不可欠な作業(yè)となっています。多くのプラグインしかし、これらのプラグインは通常ウェブサイトのロード時(shí)間とコードの複雑さの増加.

この記事では、コーディングとCSSをカスタマイズすることで、プラグインなしで真にモバイルフレンドリーなWordPressウェブサイトを作成する方法を紹介します。

なぜモバイルフレンドリーが重要なのか？

具體的なステップに入る前に、なぜ現(xiàn)代のウェブサイトにとってモバイルフレンドリーが重要なのかを理解しよう。

1. ユーザーエクスペリエンスレスポンシブデザインにより、ウェブサイトはあらゆるデバイスで最適な體験を.
2. 検索エンジンランキングGoogleのような検索エンジンは、以下のことを明確にしている。モバイルフレンドリーは検索ランキングの重要な要素である.
3. 換算率ユーザーフレンドリーなモバイルサイトは、ユーザーをより深くブラウジングさせる可能性が高く、購(gòu)入や登録といった主要なコンバージョンアクションの可能性を高めます。
4. 今後の動(dòng)向將來(lái)のネットワーク環(huán)境は、次のような特徴を持つようになるだろう。モバイル機(jī)器中心最適化に失敗したサイトは淘汰されるリスクがある。

モバイルフレンドリーなウェブサイトの基本を理解する

具體的な導(dǎo)入ステップに入る前に、まずモバイルフレンドリーなウェブサイトとは何かを理解する必要があります。ここでは、その重要な要素をご紹介します：

1. 流體グリッドシステム::流體グリッドシステム畫面サイズに応じてウェブサイトのレイアウトが変化するようにする。自動(dòng)調(diào)整.デザインの核となる部分までレスポンシブに対応し、ページのコンテンツがさまざまなデバイスで正しく表示されるようにする。
2. フレキシブル?イメージング畫像はウェブページで重要な役割を果たしますが、柔軟な畫像設(shè)定により、さまざまなスクリーンで適切に表示されます。これは以下の方法で実現(xiàn)できます。異なる解像度とサイズの設(shè)定これにより、モバイル端末で畫像がかさばったり、ぼやけたりするのを防ぐことができる。
3. メディアお問(wèn)い合わせメディアクエリは、デバイスの特性（畫面サイズや解像度など）に基づいて、以下のように設(shè)定することができる。さまざまなCSSスタイルを適用する.あなたのウェブサイトを様々な機(jī)器への適応デスクトップからスマートフォンまで。

プラグインなしでモバイルフレンドリーなWordPressウェブサイトを作成する手順

次に、プラグインを使わずにWordPressサイトのモバイルフレンドリーデザインを?qū)g現(xiàn)する方法を詳しく説明します。

ステップ1：現(xiàn)在のウェブサイトのデザインをチェックする

変更を加える前に、現(xiàn)在サイトに何があるかを知る必要があります。そのためにはChrome DevToolsもしかしたらMozilla Firefox 開発者ツール次プローブサイトのレイアウト、畫像サイズ、グリッド構(gòu)造。改善點(diǎn)の特定そして、問(wèn)題を引き起こす可能性のある設(shè)計(jì)要素を文書化する。

ステップ2：WordPressテーマの作成または修正

ウェブサイトをモバイルフレンドリーにするには、既存のテーマを修正するか、ゼロから始める必要がある。新しいトピックの作成を開始する.WordPressのテーマ開発に慣れていない場(chǎng)合は、既存のテーマから始めて変更することをお?jiǎng)幛幛筏蓼埂?/p>

例えば、デフォルトのWordPressテーマ「Twenty Twenty-One」を使って変更を加えることができる。

WordPressのテーマディレクトリ（通常は wp-content/themes/ パス)、新しいフォルダを作成し、カスタムテーマの名前を付けます。 トゥエンティトゥエンティワンチャイルド.

新しいカスタムテーマフォルダでは、元のテーマからいくつかのファイルをコピーして修正する必要があります。以下のファイルをコピーする必要があるかもしれません スタイル.cssそしてfunctions.phpテンプレート?ファイル（例えば header.phpそしてフッター.php (など）。これらのファイルは、カスタムデザインや機(jī)能的な修正を行うための基礎(chǔ)となります。

ある スタイル.css ファイルの一番上に、テーマ名、テンプレート、作者など、子テーマの基本情報(bào)を追加します：

cssCopyコード
/*
 テーマ名: Twenty Twenty-One Child
 テンプレート：twentytwentyone
 作者: あなたの名前
 説明: Twenty Twenty-Oneテーマの子テーマ。
 バージョン: 1.0
*/バージョン: 1.0

ある functions.php ファイルでは、必ず親テーマのスタイルシートを読み込んで、元テーマのスタイルを継承してください：

phpコピーコード
get('Version')
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles' )；

ステップ3：流體メッシュシステムのセットアップ

フルードグリッドシステムは、レスポンシブデザインの実裝において中心的な役割を果たす。フルードグリッドを設(shè)定することで、サイトのレイアウトを畫面サイズに合わせて自動(dòng)的に調(diào)整することができます。以下は、テーマのスタイルシートに追加できる基本的なCSSコードです：

CSSコピーコード
body {
  font-family: Arial, sans-serif; font-size: 16px; font-size: 16px
  font-size: 16px; line-height: 1.5; } }
  line-height: 1.5；
  line-height: 1.5; margin: 0；
  line-height: 1.5; margin: 0; padding: 0；
}

コンテナ
  max-width: 1280px；
  margin: 0 auto; padding: 0 20px; } .container { max-width: 1280px; } .
  padding: 0 20px；
}

.grid {
  display: grid; grid-template-columns: repeat(12, 1fr); } グリッド?テンプレート?カラム
  
  grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }.
}

.grid-item {
  grid-column: span 4; }.
}

このコードでは、12列の基本的なグリッドシステムを定義しており、ニーズに合わせて変更することができます。グリッドテンプレート列屬性は幅比屬ギャップ屬性はスペーシング.

ステップ4：柔軟な畫像を追加する

最適化されたモバイル?ディスプレイには、柔軟な畫像が不可欠です。これはソースセット歌で応えるサイズ屬性を使用すると、デバイスの畫面密度に応じて異なる畫像サイズを選択できます。以下はサンプルコードです：

htmlコピーコード<code><img src="image.jpg"
     alt="畫像説明"
     srcset="image.jpg 1x, image@2x.jpg 2x"
     sizes="(max-width: 768px) 50vw, 100vw"
     loading="lazy"
     style="width: 100%; height: auto; margin: 0 auto; display: block;">

この例ではソースセット屬性は、ブラウザに最適な畫像サイズの選択屬サイズ屬性は、デバイスの幅に基づいて畫像の幅を定義します。表示サイズ.loading="lazy"物件は畫像読み込みの遅延ユーザーがその畫像の位置までスクロールするまで、ロード時(shí)間は短縮される。

ステップ5：メディアへの問(wèn)い合わせを申し込む

メディアクエリは、デバイスの特性に基づいて異なるスタイルを適用することで、ウェブサイトのレスポンシブデザインを最適化することができます。以下は、CSSでメディアクエリを適用する方法の例です：

cssCopyコード

media only screen and (max-width: 1.0) 800px) {
  .グリッド {
    grid-template-columns: repeat(6, 1fr); }.
  }
}

media only screen and (max-width： 600px) {
  .グリッド {
    grid-template-columns: repeat(2, 1fr); }.
  }
}

このコードでは、メディアクエリがデバイスの畫面幅に基づいてグリッドの列數(shù)を調(diào)整する。畫面の幅が800ピクセルこれが実行されると、グリッドは次のように変更されます。12列から6列への削減で、畫面幅が600ピクセルグリッドがさらに強(qiáng)化される時(shí)期2列に縮小.この適応性により、コンテンツはあらゆるデバイスで最適な形で表示されます。

ステップ6：ウェブサイトのテストと最適化

これまでのステップをすべて終えたら、以下のさまざまな方法でウェブサイトをテストし、最適化する。ウェブサイトの応答性をテストするためのデバイスとブラウザそして、すべての機(jī)能が正しく機(jī)能していることを確認(rèn)します。テストの結(jié)果によっては、最高のユーザーエクスペリエンスを保証するために、CSSスタイリングやHTML構(gòu)造を調(diào)整する必要があるかもしれません。

その他のヒントとコツ

1. CSSプリプロセッサの使用の使用を検討する。SassやLessなどのCSSプリプロセッサより効率的でモジュール化されたコードを書くために。これらのツールは、複雑なCSSファイルを管理し、コードをより保守しやすくするのに役立ちます。
2. デザインはシンプルにレスポンシブ?デザインでは、すっきりとしたデザインを保つことは、ユーザー體験を向上させるだけでなく、読み込みのスピードアップにもつながります。
3. 定期的なアップデートとメンテナンスレスポンシブデザインは定石ではありません。あなたのウェブサイトが常にベストな狀態(tài)にあるよう、定期的にコードをチェックし、更新する必要があります。
4. 開発ツールを使ったライブプレビュー利用Chrome DevToolsもしかしたらFirefox Developer Editionライブプレビューを行うことで、即座にコードを書くことができます。改造の効果を見る.

はんけつをくだす

モバイルフレンドリーなWordPressウェブサイトの作成は、プラグインに頼る必要はありません。流體グリッドシステム、柔軟な畫像、メディアクエリなどの基本的なフロントエンドのテクニックを使用することで、さまざまなデバイスや畫面サイズに対して効果的にウェブサイトを最適化することが可能です。

これらのテクニックを深く學(xué)び、マスターしたい方には WP獨(dú)學(xué)ウェブサイトビルダー 基本的なコンセプトから高度なテクニックまで、完全な知識(shí)を習(xí)得しながら、モバイルデバイス向けのウェブサイトの構(gòu)築と最適化の方法をゼロから學(xué)ぶことができます。

お問(wèn)い合わせ
チュートリアルが読めない？無(wú)料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み