Rank Math SSS Bloğu Akordeon'a Nasıl Dönüştürülür? Kolay Kılavuz. [2021]

Bu yazıda size Rank Math SSS Bloklarını şık bir Akordeon Bloğuna nasıl dönüştürebileceğinizi göstereceğim. Basit adımları izleyerek bunu kolayca yapabilirsiniz.

Bildiğiniz gibi Rank matematik SEO eklentisi, WordPress'e SSS şeması eklemek için yerleşik bir özelliğe sahiptir. WordPress'te Gutenberg veya klasik düzenleyici kullanıyorsanız, RankMath Bloklarını kullanarak blog gönderisine SSS ekleyebilirsiniz. Ancak, çoğu sayfa oluşturucunun yaptığı gibi SSS'leri şekillendirmemize izin vermediği için kendi sınırlaması vardır.

Ancak, RankMath FAQ şema uygulaması SEO dostudur ve Google Zengin sonuç testini geçmiştir.

Artık Rank Math SEO eklentisini kullanarak SSS şemasını kolayca ekleyebilir ve Google'ın içeriğinizi daha iyi anlamasına yardımcı olabilirsiniz. Ayrıca Google, Bing vb. arama motorlarının SERP'lerinin farklı bölümlerinde sıralamanıza yardımcı olabilir.

Öyleyse RankMath'in SEO eklentisi ile birlikte gelen yapılandırılmış SSS bloğunu katlanabilir bir akordeona nasıl dönüştüreceğimizi öğrenelim.

Bunu başarmanın iki yolu var. Bunlardan biri, bunun için gerekli olan CSS ve JS'yi içeren Hafif ve basit bir WordPress eklentisi kurmaktır. Veya mevcut temanıza CSS ve JS komut dosyasını ekleyebilirsiniz.

Sıra matematik SSS bloklarına Akordeon Stili nasıl eklenir?

RankMath'inizin SSS bloklarına akordeon stili eklemek için aşağıdaki adımları izleyin.

1. Blog gönderinize gidin ve Rank matematiğinden SSS bloğunu ekleyin.
2. Şimdi “ Rank Math SSS Block to Accordion ” adlı bir eklenti arayın.
3. Şimdi bu eklentiyi etkinleştirin ve Akordeon tarzı Rank matematik SEO otomatik olarak eklenir.

Not : Eklenti “ WP How Know” tarafından geliştirilmiştir ve çok hafif bir eklentidir . RankMath'in SEO eklentisiyle birlikte gelen yapılandırılmış SSS bloğunu katlanabilir bir akordeona dönüştürmek için gereken temel CSS ve JS komut dosyasını içerir.

Sıra matematiğindeki normal SSS bloklarınız, aşağıdaki resimde gösterildiği gibi güzel Akordeon Stili SSS bloğuna dönüştürülür.

SSS bölümünü şık hale getirmek için temaya manuel olarak CSS ve JS eklemek istemeyenler için süper yararlıdır.

Akordeon stili eklendikten sonra SSS blokları dizine eklenebilir mi?

Evet, akordeon stilini ekledikten sonra gayet iyi çalışacak. Bunu Google zengin sonuç testinde kontrol edebilirsiniz.

Bu eklentideki akordeon stilini değiştirmek mümkün müdür?

Bu eklentinin başka bir stili yok ama yine de özel CSS kullanarak bu stilin görünümünü değiştirebilirsiniz.

Bu eklenti tarafından oluşturulan bu akordeon SSS bloğunun tasarımını özel CSS kodunu kullanarak değiştirebilirsiniz. Burada stili biraz değiştirdim. [özellikli resimde gösterildiği gibi].

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

CSS kodunu, temanızın Ek CSS bölümüne veya tema düzenleyicinizin style.css dosyasına yapıştırmanız gerekir.

Yukarıdaki CSS kodunu değiştirerek arka plan rengini, genişliğini ve kenarlığını vb. de değiştirebilirsiniz.

Dereceli Matematik SSS için Video Kılavuzu Akordeon Stili

RankMath SSS şema blokları, daraltılabilir başlıklara sahip bir SSS bloğuna nasıl değiştirilir? [Manuel]

Fazladan bir eklenti eklemek istemeyenler için bunun için özel CSS ve JS dosyasına sahibim. Ancak manuel yollardaki stil çok basit ve eklentinin stiliyle rekabet etmiyor. Bu, yükleme hızına fazla baskı yapmadan daha iyi performans sağlamak içindir.

Bu manuel işlemin nihai sonucunu ekran görüntüsünden kontrol edebilirsiniz.

Bunu nasıl başarabileceğinizi öğrenelim. Sadece adımları doğru bir şekilde takip edin.

Adım-1 : Mevcut temaya CSS ekleyin.

Burada aşağıdaki CSS dosyasını temanızın ek CSS bölümüne veya tema düzenleyicinin style.css bölümüne eklemeniz gerekiyor.

WordPress panosu > Görünüm > özelleştir > Ek CSS'ye gidin > kodu yapıştırın ve kaydedin.

CSS kodunu buradan kopyalayın.

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

Adım-2 : Tema düzenleyicide JavaScript ekleyin

Şimdi, Rankmath SSS bloğundaki daraltılabilir akordiyonu çalıştırmak için JavaScript'i tema düzenleyicinize eklemelisiniz.

Şimdi WordPress kontrol paneli > Görünüm > Tema düzenleyici > Functions.php > aşağıdaki komut dosyasını burada gösterildiği gibi yapıştırın.

Javascript kodunu kopyalayın ve function.php içine yapıştırın

 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');

Javascript'i ekledikten sonra kodu kaydetmeyi unutmayın.

Artık RankMath'inizin yapılandırılmış SSS bloğu otomatik olarak Akordeon Stiline dönüştürülür. Artık daraltılabilir başlıklara sahip bir SSS bloğu olarak çalışacak.

Çözüm

Bu makalede tartışılan ilk yöntem, rank matematiğinin SSS bloğunu daraltılabilir bir Akordeon bloğuna dönüştürmek kolaydır. Ancak ikinci yöntem biraz manuel bir işlemdir ancak ilk yöntemden daha hızlı yüklenir.

Peki, Rank Math SSS bloklarınızı hangi yöntemle şekillendireceksiniz – yorum bölümünde bana bildirin.

Ayrıca, SSS eklemek için Rank matematiğini kullanan arkadaşlarınızla bu makaleyi paylaşmayı unutmayın.

Ayrıca Okuyun : GeneratePress temasına kanca öğesi kullanılarak Yazar kutusu nasıl eklenir. [Ek Eklenti olmadan.]