<link> タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの関係を定義します。リンク要素は、属性のみを含む空の要素です。この要素はヘッド セクションにのみ出現しますが、出現回数は任意です。 HTML では、<link> タグに終了タグはありません。 XHTML では、<link> タグを適切に閉じる必要があります。 HTML の標準的な共通属性に加えて、link 要素には、charset、href、hreflang、media、rel、rev、target、title、type などの多くのオプション属性が含まれます。これらの属性のうち、target は Transitional および Frameset DTD でのみ使用できますが、その他の属性は Strict、Transitional、および Frameset DTD で使用できます。 これらの属性の中で、rel 属性が中心となります。この記事では、123WORDPRESS.COM が、私たちが知っているいくつかの rel 属性と、WordPress のいくつかのリンク要素の処理を紹介します。これは、初心者の友人が学習するのに適しています。 1. 外部スタイルシートの呼び出し(1)表示スタイルシートリンク タグは、次のような外部スタイル シートを呼び出すために最もよく使用されます。 ここで、 hrefは対象ドキュメントの URL、 typeは対象 URL の MIME タイプ、 media はドキュメントが表示されるデバイスを指定します。 (2)印刷デバイススタイルシート次のwebdesignerwallスタイルシート呼び出しは、印刷デバイスに表示されるドキュメントの CSS スタイルを指定します。 (3)置き換え可能なスタイルシート一部の Web ページでは、次のようなスタイルシート呼び出しも表示されることがあります。 このコードは、最初のリンク要素と組み合わせて使用される代替スタイルシートを定義します。最初の要素は優先スタイルシートを定義し、この要素はユーザーが代替スタイルシートを選択できるようにします。ただし、この置換操作にはブラウザのサポートが必要ですが、IE などの多くのブラウザはこれをサポートしていません。 そのため、置換スタイルを使用する Web ページでは、通常、スタイルシートの切り替えに JS が使用され、ユーザーはインターフェース スタイルを自由に切り替えられるようになります。誰もがこれを見たことがあるはずです。一部の Web サイトでは、Web ページに複数の配色を定義しています。 WordPress ユーザーが興味を持っている場合は、 Small PotatoのWPDesigner 7 WordPress テーマを試用版としてダウンロードできます (またはDEMO を確認してください)。シンプルな JS と複数の置き換え可能なスタイルを使用して、ユーザーが Web ページの色を変更できるようにします。さらに高度なものには、日中は明るい色、夜間は暗い色を表示するなど、JS を使用して時間とともにスタイルを変更することもできます。 注: 優先スタイルシートに media="all" を指定し、印刷スタイルシートを追加すると、Web 標準にさらに準拠するようになります (ただし、通常の Web サイトの場合、ページを印刷したい人はほとんどいません)。 Palan Imageは印刷スタイルを定義していません。後で時間を見つけて定義します。 注: 代替スタイルを使用するかどうかは裁量の問題です。配色のみを変更し、全体のトーンが変わらない場合は、許容されます。しかし、WordPress ユーザーなど、まったく異なるスタイルの複数のテーマを有効にし、プラグインを使用してユーザーが自由に変更できるようにする人もいます。これはクールに思えるかもしれませんが、やらない方がいいと思います。 SEO に影響するかどうかに関わらず、ウェブサイトに対する固定イメージが人々には欠けてしまいます。 2. ウェブサイトのお気に入りアイコンを定義するfavicon/bookmarks iconの詳しい紹介については、Baidu Encyclopedia ( 1 、 2 ) を参照してください。次のコードを使用して呼び出すことができます。 この呼び出しについてはまだ少し混乱していますが、私の実験の結果は次のとおりです。
注: このリンク要素を使用せずに、favicon.ico ファイルを直接作成し、Web サイトのルート ディレクトリに配置することもできます。 Shun Ding Share: ウェブサイトに Apple Touch アイコンを追加するiPhone または iPod Touch デバイスでは、ユーザーはホーム画面に Web サイトへのリンクを追加できます。次のコードを使用して、Web サイトに Apple Touch アイコンを割り当てます。 アイコンのサイズは PNG 形式で 57 x 57 です。そうでない場合は、自動的に拡大縮小されます。また、私の記憶が正しければ、iPhone スタイルの美しい丸い角である必要はありません。iPhone は、last.fm のApple Touch アイコンのように、スタイルに応じて角が丸いアイコンを自動的にグラデーションにします。 国内ユーザーの場合、iPhoneを使っている人は多くありません。たとえ多くても、あなたのサイトをホーム画面に置いてくれるでしょうか?残念ながら、それは私たちの小さなウェブサイトではできないことです。しかし、楽しみのために、自分の Web サイト用に 1 つ作成し、リンク要素を追加しました。 3. WordPressのリンク要素(1)RSSアドレスとPingbackアドレス以下は、デフォルトの WordPress テーマにおける RSS2 アドレス、Atom アドレス、Pingback アドレスの定義です。具体的な原則は非常に奥が深く複雑だと思うので、勉強するつもりはありません。とにかく、あなたのブログにはそれが必要なので、Atom はそれがなくても大丈夫のようですね? (2)リモート公開用リンク要素テーマに <?php wp_head(); ?> 関数がある場合は、次の 2 つのリンク要素が表示されます。 これら 2 つの要素は主にリモート公開に使用されます。たとえば、Windows Live Write などのデスクトップ ブログ エディターを使用して記事を公開します。この機能が必要ない場合は、これら 2 つの要素を削除できます。削除するには、WordPress テーマの functions.php を開き、<?php } ?> または ?> タグの前の下部に次のコードを挿入します。 注: これら 2 つを生成するのは <?php wp_head(); ?> 関数なので、これを削除すればいいのではないかと思われるかもしれません。はい、他のプラグインでこの機能が必要になることが予想されない場合は、削除してください。 4. 重複コンテンツを防ぐための正規属性Google、Yahoo、Live Searchは今年2月頃、重複コンテンツの問題を解決するためにウェブページの権威チェーンを指定するために主に使用されるCanonicalと呼ばれる新しいLink属性をサポートすると発表しました。 この属性の詳細な説明については、Google 中国語ウェブマスターの「URL 形式の指定」をご覧ください。 WordPress ユーザーがヘッド セクションにこの属性を追加するために推奨される 2 つのプラグインは、 SEO No DuplicateまたはCanonical URL’s です。好きな方をお使いください。 完全な分析だと言いましたが、実際にはよく使われるものについてのみ話しました。ほとんどの人にとってはこれで十分です。他の重要な、よく使われる rel 属性をご存知でしたら、ぜひ共有してください。 |
<<: MySQL 8.0 の新機能 - チェック制約の紹介
>>: 大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法
初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...
WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...
目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...
1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...
目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...
まず、例を挙げてみましょう(読みたくない場合は、以下の要約だけ読んでください)。 order_typ...
デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...
目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...
目次序文1. スケーラビリティとは何ですか?スケールアウトの利点:スケールアウトのデメリット:スケー...
目次1. 複数の .catch 2. 複数の .catch 3. .then と .catch の連...
この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...
Linux での動的ライブラリ ファイルのファイル名は libxxx.so のようになります。ここで...
目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...
1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...
iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...