WordPress テーマを HTML5 に変換する-＆＃＆プレス-php.cn

HTML5 では、さまざまな優れた新機能とシンプルなオプションが導入されています。まもなく、現在使用されているほとんどのブラウザで完全にサポートされるようになる予定です。最終的には、誰もが WordPress テーマを XHTML から HTML5 に変換する必要があります。 Google の Panda アップデート後、Web サイトは Google でのランクを上げるために、より明確で読みやすいコードを必要とします。テーマを XHTML から HTML5 に変換する方法を説明します。また、(下位互換性のため) JavaScript が無効になっているインターネットユーザーの 2% にも配慮します。

＃＃＃私たちの目標＃＃＃

このチュートリアルでは、WordPress テーマを XHTML から HTML5 に変換することに焦点を当てます。以下にリストされているファイルを使用して変更を段階的に説明します (これらのファイルはテーマフォルダーにあります。つまり、

wp-content/messages/yourtheme/here!

)

(オプション)

基本的な HTML5 レイアウト

これから構築する基本的な HTML5 レイアウトを見てみましょう。 HTML5 は、コードの先頭にある単なるドキュメントタイプではありません。新しく導入されたいくつかの要素は、マークアップを減らして効率的な方法でスタイルとコードを作成するのに役立ちます (これが HTML5 が優れている理由の 1 つです)。

リーリー

ここで必要なのは、

header

、footer、nav、section、article# の新しい HTML5 について知ることだけです。 ## ラベルを好きな場所に配置するだけです。div構造化 XHTML とは対照的に、新しく導入されたタグの名前は一目瞭然です。

ステップ 1

header.php を HTML5 に変換します

次に、XHTML WordPress テーマの header.php で一般的に使用されるコードを紹介します。

#HTML テーマ header.php

リーリー

なぜこんなことをするのか、誰かが尋ねるはずです。答えは簡単で、HTML5 のセマンティックマークアップです。マークアップが削減され、理解と管理が非常に簡単になります。

HTML5 header.php (変換)

コードを読み、以下の手順に従ってテーマの header.php を HTML5 に変換します。

リーリー

ご覧のとおり、変換されたコードは XHTML コードとよく似ています。これらの変更について説明しましょう。

divコードを、HTML5 でナビゲーションバーを制御するための新しいセマンティックタグに置き換えました。

ヘッダーにsectionタグを含める人もいます。これについては多くの議論があります。私は、HTML5 の美しさを損なうため、ヘッダーにsectionタグを含めることに個人的に反対します。もちろん、そこで古いdivを使用することもできます。スクリプトとスタイルシートについてはどうですか?

WordPress テーマを HTML5 に変換する場合、ヘッダーに含まれるスクリプトとスタイルシートは非常にシンプルです。 HTML5 では、