WordPress をレスポンシブにする方法

WordPress のレスポンシブなテーマ/テンプレートを作成するにはどうすればよいですか?

今の時代、WordPress を使って Web サイトを構築したことがない人は、あえて Web サイトを構築したとは言えません。 WordPressとは何ですか? WordPress は、WP と呼ばれる世界で最も有名な Web サイト コンテンツ管理システム (またはブログ/ブログ システム) です。関連する調査によると、WordPress の世界市場シェアは 2015 年に 48% に達し、引き続き世界のオープンソース Web ウェブサイト システムのチャンピオンであり続けています。そして今も急速に成長を続けています... 国内のオープンソースCMSを見てみると、本当に生き残って最新の状態を保っているものはほんのわずかです。かつて全能だった Dongyi、dedecms、phpcms、 Imperial cms、phpwind、discuz などはまだ生き残ることができるでしょうか?

ツール/マテリアル

HTML5

CSS3

最新のブラウザ (Chrome、Firefox、Edge など)

関連する推奨事項: 「WordPress チュートリアル 」

方法/手順

1. 簡単に言うと、Web の先頭にあります。ページ (< ;head> ) にクエリ コード

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2 を追加します。次に、メディア クエリ要素を CSS ファイルに追加します。たとえば、

@media screen and (max-width:480px) {
//当浏览器屏幕小于480px时，此代码块生效
}
@media screen and (min-width:481px) and (max-width:720px) {
//当浏览器屏幕大于480px小于720px时，此代码块生效
}
@media screen and (min-width:721px) and (max-width:1079px) {
//当浏览器屏幕大于721px小于1079px时，此代码块生效
}

The範囲は実際の状況に応じて自分で変更することができます。はい、これがレスポンシブとノンレスポンシブの違いです。HTML CSS さえ理解していれば、すぐにマスターできると思います。非常に簡単だと思いませんか?

3. 重要なポイントを理解したら、レスポンシブな静的ページの作成を開始できます。次に、静的ページを WordPress 関連の関数とループに配置するだけです。 HTML 静的ページを作成したら、「WordPress テーマの開発と制作でよく使用される機能: openue.com/post/597」を参照してテンプレートを作成します。

注意事項

デザイン プロセス中は、CSS に固定の幅と高さを使用することは避け、代わりにパーセンテージを使用し、フォントには px の代わりに rem を使用してください。

以上がWordPress をレスポンシブにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。