questions
Lorsque vous utilisez l'élément Onglets, vous pouvez rencontrer des problèmes de performance si vous ajoutez un grand nombre d'éléments (tels que les éléments Grille en boucle ou Carrousel en boucle) ou de nombreux éléments (tels que la création de la quasi-totalité du contenu de la page dans chaque onglet).
Ces questions sont notamment les suivantes
- Problèmes de performance du front-end (pages à chargement lent).
- Problèmes de performance dans l'éditeur Elementor (difficultés avec le fonctionnement de l'éditeur).
Un autre problème est que si vous utilisez des éléments dépendant de JavaScript dans le contenu des onglets, ils risquent de ne pas s'afficher correctement. Par exemple, si vous utilisez une rotation circulaire dans un onglet autre que le premier,Éléments de Gallery Proou d'autres éléments qui dépendent de JS, vous risquez de rencontrer une erreur.
Ces problèmes peuvent être évités grâce aux méthodes décrites dans ce tutoriel.
avantage
- l'amélioration des performancesLes problèmes de performance sur le front-end et dans l'éditeur : éviter les problèmes de performance sur le front-end et dans l'éditeur.
- Optimisation du référencementChaque onglet sera une page séparée avec un
et une méta-description séparés, et aucun contenu n'utilisera l'affichage, ce qui a un impact positif sur l'optimisation des moteurs de recherche.
Scénarios applicables
- Lorsque les onglets contiennent beaucoup de contenu
- Lorsque des éléments de l'onglet dépendent de JavaScript
- Lorsque le référencement est une priorité (c'est-à-dire lorsque le contenu des onglets est important pour le référencement)
Pseudo-tags sur des sites web populaires
Le "pseudo-tagging" est un choix populaire pour certains sites web, tels que Google :
Tous ces éléments agissent comme des titres de balises, mais sont en fait des liens vers d'autres pages. Il s'agit d'un modèle de conception très répandu.
Création de pseudo-étiquettes
utiliserNav Élément de menuLe remplacer. Ensuite.Lier les éléments de menu à différentes pages correspondant au "contenu de l'onglet".
Création de pseudo-étiquettes
Créer une page
Tout d'abord, créez une nouvelle page pour le contenu de chaque onglet.
Cela permet d'améliorer les performances et d'éviter les erreurs.
Ensuite, nommez et publiez ces pages.
Création de menus
Ensuite, allez dans le tableau de bord de WordPress et cliquez à votre tour sur "état extérieur" > "menu", cliquez sur " créer un nouveau menu"Créer un nouveau menu de navigation.
Ensuite, ajoutez toutes les pages que vous venez de créer à ce menu et cliquez sur "enregistrer (un fichier, etc.) (informatique)".
Créer des modèles d'une page
Pour que tous les "onglets" soient cohérents, nous allons créer un modèle de page unique.
Ce modèle peut renvoyer à certains articles ou à des archives de types d'articles personnalisés (CPT).
Les étapes :
- Allez dans le backend de WordPress et cliquez à votre tour sur "modèle" > "Constructeur de thèmes".
- Cliquez sur "Ajouter un nouveau modèle de page".
Ajouter des éléments de menu WordPress
- Création de menus: :
- Connectez-vous au tableau de bord de WordPress.
- Allez dans Apparence > Menu.
- Cliquez sur "Créer un nouveau menu", nommez le menu et cliquez sur le bouton "Créer un menu".
- Dans les éléments de menu à gauche, sélectionnez la page, l'article, la catégorie ou le lien personnalisé que vous souhaitez ajouter au menu et cliquez sur le bouton "Ajouter au menu".
- Vous pouvez faire glisser les éléments du menu pour en modifier l'ordre. Lorsque vous avez terminé, cliquez sur "Enregistrer le menu".
- Ajouter un menu à une page: :
- Allez dans Pages > Toutes les pages, recherchez la page à laquelle vous souhaitez ajouter un menu et cliquez sur Modifier.
- Si l'éditeur classique est utilisé :
- Dans l'éditeur de page, sélectionnez un widget de texte ou ajoutez un shortcode directement au contenu de la page.
[menu id="menu_id"]
quimenu_id
est l'ID du menu que vous avez créé. - Utiliser le constructeur Elementor
- Ouvrez l'éditeur Elementor et trouvez le widget "Navigation Menu".
- Faites glisser le widget Menu de navigation à l'endroit approprié sur la page.
- Dans le panneau de gauche, sélectionnez le menu que vous venez de créer.
- Dans l'éditeur de page, sélectionnez un widget de texte ou ajoutez un shortcode directement au contenu de la page.
- Styles de menu personnalisés(facultatif) :
- Si vous avez besoin de personnaliser le style du menu, vous pouvez le faire dans le personnalisateur de thème.
- Allez dans Apparence > Personnaliser > CSS supplémentaire et ajoutez un code CSS personnalisé si nécessaire.
Ajout d'éléments HTML
- Ouvrez l'éditeur Elementor et trouvez le widget "HTML".
- Faites glisser le widget "HTML" sur l'élément de menu de navigation de la page.
Trouvez une section de code similaire à la suivante et remplacez-la par ce code. Les styles ont été ajustés pour être identiques à ceux de la démo ci-dessus, ce qui permet de gagner du temps en modifiant toutes les feuilles de style CSS.
<div class="custom-html">
<!-- 您的自定义HTML代码 -->
<style>
/* 添加您自定义的CSS样式 */
.custom-html {
/* 示例样式 */
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
</style>
<!-- 示例内容 -->
<p>Il s'agit d'un exemple d'élément HTML qui se place au-dessus de l'élément de menu de navigation.</p>
</div>
Il peut être nécessaire de parcourir le CSS ci-dessous et de l'ajuster si nécessaire.
Maintenant, modifiez le conteneur (qui doit contenir des éléments HTML et des éléments de menu WordPress) jusqu'à ce qu'il ait le style parfait que vous souhaitez.
Ajouter là où c'est nécessaire "Contenu du message"Élément. C'est-à-dire."Contenu étiqueté"Emplacement de l'affichage.
Publiez votre modèle d'une page etFixer des conditions pour que tous les "onglets" en bénéficient.
Ajouter du contenu
Il ne reste plus qu'à aller dans chacun des "onglets" et à y ajouter le contenu dont vous avez besoin.
Résumé :
Comment optimiser les performances et le référencement de votre site web WordPress en utilisant des pseudo-onglets au lieu d'éléments Tabs ? Cet article explique comment créer des pseudo-onglets, notamment en créant de nouvelles pages, en mettant en place des menus de navigation et en ajoutant des éléments HTML personnalisés. Cette technique permet d'éviter les problèmes de performance au niveau du chargement et de l'éditeur frontaux, de s'assurer que les éléments JavaScript s'affichent correctement et d'améliorer le référencement grâce à une structure de page distincte. Elle explique également comment créer des modèles de page unique pour maintenir la cohérence et optimiser le contenu des onglets. En mettant en œuvre ces étapes, vous pouvez améliorer considérablement l'expérience utilisateur de votre site web et son classement dans les moteurs de recherche.