Cum să transformi Blocul de întrebări frecvente la Matematică Rank la acordeon? Ghid ușor. [2021]

În acest articol, vă voi arăta cum puteți converti blocurile de întrebări frecvente ale matematicii Rank într-un bloc de acordeon elegant. Puteți face acest lucru cu ușurință urmând pași simpli.

După cum știți, pluginul Rank Math SEO are o funcție încorporată pentru a adăuga schema de întrebări frecvente la WordPress. Dacă utilizați Gutenberg sau editorul clasic în WordPress, atunci puteți adăuga întrebări frecvente la postarea de blog folosind blocurile RankMath. Dar are propria sa limitare, deoarece nu ne permite să stilăm întrebările frecvente așa cum o fac majoritatea creatorilor de pagini.

Dar, implementarea schemei RankMath FAQ este prietenoasă cu SEO și a trecut testul de rezultat Google Rich.

Acum puteți adăuga cu ușurință schema de întrebări frecvente folosind pluginul Rank Math SEO și puteți ajuta Google să vă înțeleagă mai bine conținutul. De asemenea, vă poate ajuta să vă clasați în diferite secțiuni ale SERP-urilor motoarelor de căutare precum Google, Bing etc.

Deci, să învățăm cum să transformăm blocul structurat de întrebări frecvente care vine cu pluginul SEO RankMath într-un acordeon pliabil .

Există două moduri prin care poți realiza asta. Una este prin instalarea unui plugin WordPress ușor și simplu care conține CSS și JS necesare pentru aceasta. Sau puteți adăuga pur și simplu scriptul CSS și JS la tema curentă.

Cum se adaugă stilul acordeonului în blocurile de întrebări frecvente de matematică Rank?

Pentru a adăuga un stil acordeon la blocurile de întrebări frecvente ale RankMath, urmați pașii de mai jos.

1. Accesați postarea de pe blog și adăugați blocul Întrebări frecvente din Rank Math.
2. Acum căutați un plugin numit „ Turn Rank Math FAQ Block to Accordion ”
3. Acum activați acest plugin și în stilul acordeonului în Rank matematică SEO este adăugat automat.

Notă : pluginul este dezvoltat de „ WP How Know” și este un plugin foarte ușor . Conține scriptul de bază CSS și JS necesar pentru a transforma blocul structurat de întrebări frecvente care vine cu pluginul SEO RankMath într-un acordeon pliabil.

Acum, blocurile de întrebări frecvente obișnuite de la matematica de rang se convertesc în blocul de întrebări frecvente în stilul acordeonului, așa cum se arată în imaginea de mai jos.

Este foarte util pentru cei care nu doresc să adauge manual CSS și JS la temă pentru a stiliza secțiunea Întrebări frecvente.

Blocurile de întrebări frecvente vor mai fi indexabile după adăugarea stilului acordeon?

Da, va funcționa perfect după adăugarea stilului de acordeon. Puteți verifica acest lucru în testul de rezultate bogat Google.

Este posibil să schimbi stilul acordeonului în acest plugin?

Acest plugin nu are alt stil, dar puteți modifica aspectul acestui stil folosind CSS personalizat.

Puteți modifica designul acestui bloc de întrebări frecvente la acordeon generat de acest plugin folosind codul CSS personalizat . Aici am schimbat puțin stilul. [așa cum se arată în imaginea prezentată].

 #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; }

Trebuie să inserați codul CSS în secțiunea CSS suplimentară a temei sau în fișierul style.css al editorului de teme .

De asemenea, puteți schimba culoarea fundalului, lățimea și chenarul etc., schimbând codul CSS de mai sus.

Ghid video pentru Întrebări frecvente la Matematică de clasare Stil acordeon

Cum se schimbă blocurile de schemă de întrebări frecvente RankMath într-un bloc de întrebări frecvente cu anteturi pliabile? [Manual]

Pentru cei care nu doresc să adauge un plugin suplimentar, am fișierul personalizat CSS și JS pentru asta. Dar stilul în mod manual este foarte de bază și nu concurează cu stilul pluginului. Acest lucru este menit pentru o performanță mai bună, fără a adăuga prea multă presiune asupra vitezei de încărcare.

Puteți verifica rezultatul final al acestui proces manual în captura de ecran.

Să învățăm cum poți realiza asta. Doar urmați pașii corect.

Pasul 1 : Adăugați CSS în tema curentă.

Aici trebuie să adăugați fișierul CSS de mai jos la secțiunea CSS suplimentară a temei sau la secțiunea style.css a editorului de teme.

Accesați tabloul de bord WordPress > Aspect > personalizați > CSS suplimentar > inserați codul și salvați-l.

Copiați codul CSS de aici.

 #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; }

Pasul 2 : Adăugați JavaScript în editorul de teme

Acum trebuie să adăugați JavaScript în editorul de teme pentru a funcționa acordeonul pliabil în blocul de întrebări frecvente Rankmath.

Acum accesați tabloul de bord WordPress > Aspect > Editor de teme > Functions.php > lipiți scriptul de mai jos, așa cum se arată aici.

Copiați codul javascript și inserați în 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');

După adăugarea javascript-ului, nu uitați să salvați codul.

Acum blocul de întrebări frecvente structurat al RankMath este convertit automat în stilul acordeonului. Acum va funcționa ca un bloc de întrebări frecvente cu anteturi pliabile.

Concluzie

Prima metodă discutată în acest articol este ușor de a converti blocul Întrebări frecvente de matematică de rang într-un bloc Accordion pliabil . Dar a doua metodă este un proces puțin manual, dar se încarcă mai repede decât prima metodă.

Așadar, în ce metodă veți stila blocurile de întrebări frecvente ale Rank Math - anunțați-mă în secțiunea de comentarii.

De asemenea, nu uitați să împărtășiți acest articol prietenilor dvs. care folosesc matematica Rank pentru a adăuga întrebări frecvente.

Citiți și : Cum să adăugați caseta Autor în tema GeneratePress folosind elementul cârlig. [fără plugin suplimentar.]