Ausgaben

Bei der Verwendung des Elements "Registerkarten" kann es zu Leistungsproblemen kommen, wenn Sie eine große Anzahl von Elementen (z. B. die Elemente "Schleifenraster" oder "Schleifenkarussell") oder viele Elemente (z. B. wenn Sie fast den gesamten Seiteninhalt in jeder Registerkarte erstellen) hinzufügen.

Zu diesen Themen gehören:

• Probleme mit der Leistung des Frontends (langsam ladende Seiten).
• Performance-Probleme im Elementor-Editor (Schwierigkeiten bei der Bedienung des Editors).

Ein weiteres Problem ist, dass JavaScript-abhängige Elemente im Inhalt der Registerkarte möglicherweise nicht richtig angezeigt werden. Zum Beispiel, wenn Sie eine kreisförmige Drehung in einer anderen Registerkarte als der ersten verwenden,Galerie Pro Elementeoder andere Elemente, die von JS abhängen, kann ein Fehler auftreten.

Diese Probleme können durch die Methoden in diesem Tutorial vermieden werden.

Blickwinkel

• LeistungsverbesserungVermeidung von Leistungsproblemen auf dem Frontend und im Editor.
• SEO-OptimierungJeder Tab-Inhalt wird eine eigene Seite mit eigenem und Meta-Beschreibung sein, und kein Inhalt wird angezeigt, was sich positiv auf die Suchmaschinenoptimierung auswirkt.

Anwendbare Szenarien

• Wenn Registerkarten eine Menge Inhalt enthalten
• Wenn es Elemente in der Registerkarte gibt, die von JavaScript abhängen
• Wenn SEO eine Priorität ist (d. h. wenn Registerinhalte für SEO wichtig sind)

Pseudo-Tags auf beliebten Websites

"Pseudo-Tagging" ist eine beliebte Wahl für einige beliebte Websites wie Google:

Alle diese Elemente wirken wie Tag-Titel, sind aber eigentlich Links zu anderen Seiten. Dies ist ein weit verbreitetes Gestaltungsmuster.

Pseudo-Etiketten erstellen

ausnutzenNavigationsmenü-ElementErsetzen Sie sie. Dann.Verknüpfen Sie Menüpunkte mit verschiedenen Seiten, die dem "Registerinhalt" entsprechen.

Pseudo-Etiketten erstellen

Seite erstellen

Erstellen Sie zunächst eine neue Seite für den Inhalt jeder Registerkarte.

Dies verbessert die Leistung und verhindert Fehler.

Als nächstes benennen und veröffentlichen Sie diese Seiten.

Menüs erstellen

Gehen Sie dann zum WordPress-Dashboard und klicken Sie wiederum auf "Erscheinungen" > "Menü", klicken Sie auf " ein neues Menü erstellen"Erstellen Sie ein neues Navigationsmenü.

Fügen Sie dann alle Seiten, die Sie gerade erstellt haben, zu diesem Menü hinzu und klicken Sie auf "Speichern (einer Datei usw.) (Informatik)".

Einzelne Seitenvorlagen erstellen

Um sicherzustellen, dass alle "Registerkarten" einheitlich sind, werden wir eine einzige Seitenvorlage erstellen.

Diese Vorlage kann mit bestimmten Beiträgen oder Custom Post Type (CPT)-Archiven verknüpft werden.

Schritte:

1. Gehen Sie zum WordPress-Backend und klicken Sie wiederum auf "Vorlage" > "Themenersteller".

2. Klicken Sie auf "Neue einseitige Vorlage hinzufügen".

Hinzufügen von WordPress-Menüelementen

1. Menüs erstellen::
   • Loggen Sie sich in das WordPress-Dashboard ein.
   • Gehen Sie zu Erscheinungsbild > Menü.
   • Klicken Sie auf "Neues Menü erstellen", benennen Sie das Menü und klicken Sie auf die Schaltfläche "Menü erstellen".
   • Wählen Sie in den Menüpunkten auf der linken Seite die Seite, den Artikel, die Kategorie oder den benutzerdefinierten Link aus, den Sie dem Menü hinzufügen möchten, und klicken Sie auf die Schaltfläche "Zum Menü hinzufügen".
   • Sie können die Menüpunkte ziehen, um die Reihenfolge anzupassen. Wenn Sie fertig sind, klicken Sie auf "Menü speichern".
2. Hinzufügen eines Menüs zu einer Seite::
   • Gehen Sie zu Seiten > Alle Seiten, suchen Sie die Seite, der Sie ein Menü hinzufügen möchten, und klicken Sie auf Bearbeiten.
   • Wenn der klassische Editor verwendet wird:
     • Wählen Sie im Seiteneditor ein Textwidget aus oder fügen Sie einen Shortcode direkt in den Seiteninhalt ein [menu id="menu_id"]die menü_id ist die ID des von Ihnen erstellten Menüs.
     • Verwendung des Elementor Builders
       • Öffnen Sie den Elementor-Editor und suchen Sie das Widget "Navigationsmenü".
       • Ziehen Sie das Navigationsmenü-Widget an die entsprechende Stelle auf der Seite.
       • Wählen Sie im linken Bereich das soeben erstellte Menü aus.

3. Benutzerdefinierte Menüstile(fakultativ):
   • Wenn Sie den Stil des Menüs anpassen möchten, können Sie dies über die Theme-Anpassung tun.
   • Gehen Sie zu Erscheinungsbild > Anpassen > Zusätzliches CSS und fügen Sie bei Bedarf benutzerdefinierten CSS-Code hinzu.

Hinzufügen von HTML-Elementen

• Öffnen Sie den Elementor-Editor und suchen Sie das "HTML"-Widget.
• Ziehen Sie das "HTML"-Widget über das Navigationsmenü-Element auf der Seite.

Suchen Sie einen ähnlichen Codeabschnitt wie den folgenden und ersetzen Sie ihn durch diesen Code. Die Stile wurden so angepasst, dass sie dieselben sind wie in der obigen Demo, was Zeit beim Ändern aller CSS spart.

<div class="custom-html">
  <!-- 您的自定义HTML代码 -->
  <style>
    /* 添加您自定义的CSS样式 */
    .custom-html {
      /* 示例样式 */
      padding: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
    }
  </style>
  <!-- 示例内容 -->
  <p>Dies ist ein Beispiel für ein HTML-Element, das über dem Navigationsmenü-Element liegt.</p>
</div>

Es kann notwendig sein, das unten stehende CSS zu durchsuchen und nach Bedarf anzupassen.

Ändern Sie nun den Container (der HTML-Elemente und WordPress-Menüelemente enthalten sollte), bis er den perfekten Stil hat, den Sie wünschen.

Bei Bedarf hinzufügen "Inhalt des Beitrags"Element. Das heißt."Markierter Inhalt"Standort anzeigen.

Veröffentlichen Sie Ihre einseitige Vorlage undBedingungen so festlegen, dass alle "Tabs" sie haben.

Inhalt hinzufügen

Jetzt müssen Sie nur noch zu den einzelnen "Registerkarten" gehen und ihnen die gewünschten Inhalte hinzufügen.

Zusammenfassung:

Wie Sie die Leistung und die Suchmaschinenoptimierung Ihrer WordPress-Website durch die Verwendung von Pseudo-Tabs anstelle von Tabs-Elementen optimieren können... In diesem Beitrag werden Möglichkeiten zur Erstellung von Pseudo-Tabs erläutert, darunter die Erstellung neuer Seiten, die Einrichtung von Navigationsmenüs und das Hinzufügen benutzerdefinierter HTML-Elemente. Diese Technik vermeidet Leistungsprobleme beim Laden des Frontends und des Editors, stellt sicher, dass JavaScript-Elemente korrekt angezeigt werden, und verbessert die Suchmaschinenoptimierung durch eine separate Seitenstruktur. Außerdem wird erklärt, wie man One-Page-Templates erstellt, um die Konsistenz zu wahren und den Inhalt der Registerkarten zu optimieren. Durch die Umsetzung dieser Schritte können Sie die Benutzerfreundlichkeit Ihrer Website und die Platzierung in Suchmaschinen erheblich verbessern.