課題
Tabs要素を使用する場合、多数の要素(Loop Grid要素やLoop Carousel要素など)を追加したり、多数の要素(各タブにページのほぼ全体のコンテンツを作成するなど)を追加したりすると、パフォーマンスの問題が発生することがあります。
これらの問題には以下が含まれる:
- フロントエンドのパフォーマンスの問題(ページの読み込みが遅い)。
- Elementorエディタのパフォーマンスの問題(エディタ操作の困難さ)。
もう一つの問題は、タブコンテンツにJavaScript依存の要素を使用した場合、正しく表示されない可能性があることです。例えば、最初のタブ以外のタブで円回転を使用した場合です、ギャラリープロの要素またはJSに依存する他の要素を使用すると、エラーが発生する可能性があります。
これらの問題は、このチュートリアルの方法で避けることができる。
バンテージ
- パフォーマンス向上フロントエンドとエディターでのパフォーマンスの問題を避ける。
- SEO最適化各タブコンテンツは別々の
とmeta-descriptionを持つ独立したページとなり、コンテンツは表示を使用しないため、SEOに良い影響を与えます。
適用シナリオ
- タブに多くのコンテンツが含まれる場合
- タブ内にJavaScriptに依存する要素がある場合
- SEOを優先する場合(つまり、タブコンテンツがSEOにとって重要な場合)
人気サイトの疑似タグ
「擬似タグ付け」は、グーグルなど一部の人気サイトでよく使われている:
これらはすべてタグ・タイトルのように機能するが、実際には他のページへのリンクである。これは広く使われているデザインパターンである。
擬似ラベルの作成
利用するナブ・メニュー要素交換してください。それからメニュー項目を「タブの内容」に対応する別のページにリンクする。
擬似ラベルの作成
ページ作成
まず、タブコンテンツごとに新しいページを作成する。
そうすることで、パフォーマンスが向上し、エラーを防ぐことができる。
次に、これらのページに名前を付けて公開する。
メニューの作成
次に、WordPressのダッシュボードに移動し、"を順番にクリックします。外装状態" > "メニュー「をクリックしてください。 新しいメニューを作る「新しいナビゲーション・メニューを作る。
次に、先ほど作成したすべてのページをそのメニューに追加し、"セーブ".
単一ページ・テンプレートの作成
すべての "タブ "に一貫性を持たせるために、1つのページ・テンプレートを作成する。
このテンプレートは、特定の投稿やカスタム投稿タイプ(CPT)アーカイブにリンクすることができます。
ステップ
- ワードプレスのバックエンドに行き、"テンプレート" > "テーマビルダー".
- 新しい1ページテンプレートを追加」をクリックする。
ワードプレスのメニュー要素を追加する
- メニューの作成::
- WordPressのダッシュボードにログインします。
- アピアランス>メニューに進む。
- 新規メニューの作成」をクリックし、メニュー名を付けて「メニューの作成」ボタンをクリックします。
- 左側のメニュー項目で、メニューに追加したいページ、記事、カテゴリー、カスタムリンクを選択し、「メニューに追加」ボタンをクリックします。
- メニュー項目をドラッグして順番を調整することができます。終了したら「メニューを保存」をクリックします。
- ページにメニューを追加する::
- ページ」>「すべてのページ」と進み、メニューを追加したいページを見つけて「編集」をクリックします。
- クラシックエディターを使用する場合:
- ページエディターで、テキストウィジェットを選択するか、ショートコードをページコンテンツに直接追加する。
[menu id="menu_id"]。
どのメニューID
は作成したメニューのIDです。 - Elementorビルダーを使う
- Elementorエディタを開き、"Navigation Menu "ウィジェットを見つける。
- ナビゲーション・メニュー・ウィジェットをページの適当な場所にドラッグします。
- 左側のパネルで、先ほど作成したメニューを選択します。
- ページエディターで、テキストウィジェットを選択するか、ショートコードをページコンテンツに直接追加する。
- メニュースタイルのカスタマイズ(オプション):
- メニュースタイルをカスタマイズする必要がある場合は、テーマカスタマイザーで設定できます。
- 外観」>「カスタマイズ」>「追加CSS」と進み、必要に応じてカスタムCSSコードを追加してください。
HTML要素の追加
- Elementorエディタを開き、"HTML "ウィジェットを見つける。
- HTML "ウィジェットをページ上のナビゲーションメニュー要素の上にドラッグします。
以下のようなコードの部分を見つけて、そのコードに置き換えてください。スタイルが上のデモと同じになるように調整されているので、すべてのCSSを変更する手間が省けます。
<div class="custom-html">
<!-- 您的自定义HTML代码 -->
<style>
/* 添加您自定义的CSS样式 */
.custom-html {
/* 示例样式 */
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
</style>
<!-- 示例内容 -->
<p>これはナビゲーション・メニュー要素の上に置かれるHTML要素のサンプルです。</p>
</div>
以下のCSSを参照し、必要に応じて調整する必要があるかもしれない。
次に、コンテナ(HTML要素とWordPressのメニュー要素を含むはず)を、あなたが望む完璧なスタイルになるまで微調整する。
必要な場所に追加する "投稿内容「エレメント。つまり"タグ付けされたコンテンツ「ディスプレイの位置
1ページのテンプレートを公開しすべての「タブ」に表示されるように条件を設定する.
コンテンツの追加
あとは、それぞれの「タブ」に必要なコンテンツを追加するだけだ。
概要
Tabs要素の代わりに擬似タブを使用して、WordPressウェブサイトのパフォーマンスとSEOを最適化する方法この投稿では、新しいページの作成、ナビゲーションメニューの設定、カスタムHTML要素の追加など、擬似タブを作成する方法を説明します。このテクニックは、フロントエンドのローディングとエディタにおけるパフォーマンスの問題を回避し、JavaScript要素が正しく表示されるようにし、独立したページ構造でSEOを向上させます。また、一貫性を維持し、タブコンテンツを最適化するための1ページテンプレートの作成方法についても説明しています。これらのステップを実施することで、ウェブサイトのユーザーエクスペリエンスと検索エンジンランキングを大幅に向上させることができます。
お問い合わせ |
---|
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
① 電話:020-2206-9892 |
② QQ咨询:1025174874 |
三 Eメール:info@361sale.com |
④ 勤務時間:月~金、9:30~18:30、祝日休み |