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 Loop Grid ou Loop Carousel) ou de nombreux éléments (tels que la création de la quasi-totalité du contenu de la page dans chaque onglet).
![Image[1]-Guide d'utilisation des pseudo-balises pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Service professionnel de réparation de sites WordPress, portée mondiale, réponse rapide](https://www.361sale.com/wp-content/uploads/2024/05/2024052913560210.png)
Ces questions sont notamment les suivantes
- Problèmes de performance au niveau 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
- 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
- Lorsqu'un onglet contient des éléments dépendant 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-étiquetage" est un choix populaire pour certains sites web, tels que Google :
![Image [2] - Guide d'utilisation des pseudo-tags pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Service professionnel de réparation de sites WordPress, portée mondiale, réponse rapide](https://www.361sale.com/wp-content/uploads/2024/05/2024052912492981.png)
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.
![Image [3] - Guide d'utilisation des pseudo-tags pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Service professionnel de réparation de sites WordPress, portée mondiale, réponse rapide](https://www.361sale.com/wp-content/uploads/2024/05/2024052912575053.png)
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.
![Image [4] - Guide d'utilisation des pseudo-balises pour améliorer les performances et le référencement des sites WordPress - Photon Flux Network | Professional WordPress repair service, worldwide, fast response](https://www.361sale.com/wp-content/uploads/2024/05/2024052912590947.png)
Ensuite, ajoutez toutes les pages que vous venez de créer à ce menu et cliquez sur "enregistrer (un fichier, etc.) (informatique)".
![Image [5] - Guide d'utilisation des pseudo-tags pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024052913021020.png)
Création de modèles de page unique
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".
![Image [6] - Guide d'utilisation des pseudo-balises pour améliorer les performances et le référencement des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024052913115257.png)
- Cliquez sur "Ajouter un nouveau modèle de page".
![Image [7] - Un guide sur l'utilisation des pseudo-tags pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024052913302152.png)
Ajouter des éléments de menu WordPress
![Image [8] - Un guide sur l'utilisation des pseudo-tags pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024052516340665.png)
- 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_idest 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.
![Image [9] - Un guide sur l'utilisation des pseudo-tags pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024052913305439.png)
- 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.
![Image [10]-Guide d'utilisation du pseudo-tagging pour améliorer les performances et le référencement des sites WordPress - Photon Fluctuation Network | Professional WordPress Repair Service, Global Reach, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024052913345449.png)
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.
![Image [11] - Guide d'utilisation des pseudo-tags pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Service professionnel de réparation de sites WordPress, portée mondiale, réponse rapide](https://www.361sale.com/wp-content/uploads/2024/05/2024052913471791.png)
Publiez votre modèle d'une page etFixer des conditions pour que tous les "onglets" en disposent.
Ajouter du contenu
Il ne reste plus qu'à aller dans chacun des "onglets" et à y ajouter le contenu dont vous avez besoin.
Résumé :
![Image [12] - Guide d'utilisation des pseudo-tags pour améliorer les performances et le référencement des sites WordPress - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response](https://www.361sale.com/wp-content/uploads/2024/05/2024052915042897.jpg)
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.
Lien vers cet article :https://www.361sale.com/fr/10758L'article est protégé par le droit d'auteur et doit être reproduit avec mention.






















![Emoji[wozuimei]-Photonflux.com | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![Émoticône [baoquan] - Photon Wave Network | Services professionnels de réparation WordPress, couverture mondiale, réponse rapide](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

Pas de commentaires