Comment transformer le bloc de la FAQ des mathématiques de classement en accordéon ? Guide facile. [2021]

Dans cet article, je vais vous montrer comment vous pouvez convertir les blocs FAQ Rank Math en un élégant bloc accordéon. Vous pouvez facilement le faire en suivant des étapes simples.

Comme vous le savez, le plugin Rank math SEO a une fonctionnalité intégrée pour ajouter un schéma FAQ à WordPress. Si vous utilisez Gutenberg ou un éditeur classique dans WordPress, vous pouvez ajouter des FAQ au blog en utilisant les blocs RankMath. Mais il a sa propre limitation car il ne nous permet pas de styliser la FAQ comme le font la plupart des constructeurs de pages.

Mais la mise en œuvre du schéma de la FAQ RankMath est optimisée pour le référencement et a réussi le test de résultat Google Rich.

Désormais, vous pouvez facilement ajouter un schéma de FAQ à l'aide du plug-in Rank Math SEO et aider Google à mieux comprendre votre contenu. Il peut également vous aider à vous classer dans différentes sections des SERP des moteurs de recherche comme Google, Bing, etc.

Alors, apprenons comment transformer le bloc FAQ structuré fourni avec le plugin SEO de RankMath en un accordéon pliable .

Il y a deux façons d'y parvenir. La première consiste à installer un plugin WordPress léger et simple qui contient le CSS et le JS nécessaires pour cela. Ou vous pouvez simplement ajouter le script CSS et JS à votre thème actuel.

Comment ajouter un style d'accordéon dans les blocs de FAQ sur les mathématiques de classement ?

Pour ajouter un style accordéon aux blocs FAQ de votre RankMath, suivez les étapes ci-dessous.

1. Accédez à votre article de blog et ajoutez le bloc FAQ de Rank math.
2. Recherchez maintenant un plugin appelé " Turn Rank Math FAQ Block to Accordion "
3. Activez maintenant ce plugin et le style accordéon dans Rank math SEO est ajouté automatiquement.

Remarque : Le plugin est développé par « WP How Know » et c'est un plugin très léger . Il contient le script CSS et JS de base requis pour transformer le bloc FAQ structuré fourni avec le plugin SEO de RankMath en un accordéon pliable.

Maintenant, vos blocs de FAQ réguliers des mathématiques de rang sont convertis en un magnifique bloc de FAQ de style accordéon, comme indiqué dans l'image ci-dessous.

C'est super utile pour ceux qui ne veulent pas ajouter manuellement CSS et JS au thème pour styliser la section FAQ.

Les blocs FAQ seront-ils toujours indexables après l'ajout du style Accordéon ?

Oui, cela fonctionnera parfaitement après avoir ajouté le style accordéon. Vous pouvez vérifier cela dans le test de résultat enrichi de Google.

Est-il possible de changer le style d'accordéon dans ce plugin ?

Ce plugin n'a pas d'autre style mais vous pouvez toujours changer l'apparence de ce style en utilisant du CSS personnalisé.

Vous pouvez modifier la conception de ce bloc FAQ accordéon généré par ce plugin en utilisant un code CSS personnalisé . Ici, j'ai un peu changé le style. [comme indiqué dans l'image en vedette].

 #rank-math-faq .rank-math-list-item { border: 2px solid #F8F9F9; margin-bottom: 20px; background-color: #E5E8E8; } #rank-math-faq .rank-math-answer { margin: 0; padding: 12px; background-color: #F8F9F9; font-size: 16px!important; line-height: 1.4!important; border-bottom: 1px solid #dedee0; display: none; }

Vous devez coller le code CSS dans la section CSS supplémentaire de votre thème ou dans le fichier style.css de votre éditeur de thème .

Vous pouvez également modifier la couleur d'arrière-plan, la largeur et la bordure, etc. en modifiant le code CSS ci-dessus.

Guide vidéo pour la FAQ sur les mathématiques de classement Style d'accordéon

Comment changer les blocs de schéma FAQ RankMath en un bloc FAQ avec des en-têtes réductibles ? [Manuel]

Pour ceux qui ne veulent pas ajouter de plugin supplémentaire, j'ai le fichier CSS et JS personnalisé pour cela. Mais le style des méthodes manuelles est très basique et ne rivalise pas avec le style du plugin. Ceci est destiné à de meilleures performances sans ajouter beaucoup de pression sur la vitesse de chargement.

Vous pouvez vérifier le résultat final de ce processus manuel dans la capture d'écran.

Apprenons comment vous pouvez y parvenir. Suivez simplement les étapes correctement.

Étape 1 : Ajoutez CSS dans le thème actuel.

Ici, vous devez ajouter le fichier CSS ci-dessous à la section CSS supplémentaire de votre thème ou à la section style.css de l'éditeur de thème.

Accédez au tableau de bord WordPress > Apparence > personnaliser > CSS supplémentaire > collez le code et enregistrez-le.

Copiez le code CSS d'ici.

 #rank-math-faq .rank-math-list-item{ position:relative; } #rank-math-faq .rank-math-list-item input{ position: absolute; left: 0; top: 0; width: 100%; height: 41px; opacity: 0; cursor: pointer; z-index:999; } #rank-math-faq .rank-math-list-item h3 { background: #f1f2f6; padding: 10px 12px 10px 18px; cursor: pointer; font-size: 18px !important; font-weight: normal !important; position:relative; margin-bottom: 0; } #rank-math-faq .rank-math-list-item h3:before { display:inline-block; content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 12px; border-color: transparent transparent transparent #000000; margin-right: 8px; } #rank-math-faq .rank-math-list-item input:checked+h3:before { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } #rank-math-faq .rank-math-answer{ padding: 10px; max-height: 0; overflow:hidden; } #rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer { max-height: 100vh; overflow:visible; } div.rank-math-list-item:hover > div.rank-math-answer { max-height: 100vh; overflow: visible; } #rank-math-faq .rank-math-answer { padding:0; }

Étape 2 : Ajouter JavaScript dans l' éditeur de thème

Vous devez maintenant ajouter le JavaScript à votre éditeur de thème pour faire fonctionner l'accordéon pliable dans le bloc FAQ de Rankmath.

Allez maintenant dans le tableau de bord WordPress > Apparence > Éditeur de thème > Functions.php > collez le script ci-dessous comme indiqué ici.

Copiez le code javascript et collez-le dans function.php

 function faq_accordion_hook_javascript_footer() { ?> <script> jQuery(document).ready(function() { var faqBlock = jQuery("div#rank-math-faq"); var faqItems = faqBlock.find("div.rank-math-list-item"); faqItems.bind("click", function(event) { var answer = jQuery(this).find("div.rank-math-answer"); if (answer.css("overflow") == "hidden") { answer.css("overflow", "visible"); answer.css("max-height", "100vh"); } else { answer.css("overflow", "hidden"); answer.css("max-height", "0"); } }); }); </script> <?php } add_action('wp_footer', 'faq_accordion_hook_javascript_footer');

Après avoir ajouté le javascript, n'oubliez pas de sauvegarder le code.

Maintenant , le bloc FAQ structuré de votre RankMath est automatiquement converti en style accordéon. Maintenant, cela fonctionnera comme un bloc FAQ avec des en-têtes réductibles.

Conclusion

La première méthode abordée dans cet article consiste à convertir facilement le bloc FAQ des mathématiques de rang en un bloc accordéon réductible . Mais la deuxième méthode est un processus un peu manuel mais se charge plus rapidement que la première méthode.

Alors, dans quelle méthode allez-vous styliser vos blocs FAQ Rank Math - faites-le moi savoir dans la section des commentaires.

N'oubliez pas non plus de partager cet article avec vos amis qui utilisent les mathématiques de classement pour ajouter des FAQ.

Lire aussi : Comment ajouter une boîte Auteur dans le thème GeneratePress à l'aide de l'élément crochet. [sans plugin supplémentaire.]