Rank Math SEO Eklentisinde FAQ Blok Alanına Akordiyon Yapısı Kazandırma

Rank Math SEO eklentisinde sıkça sorulan zengin snippet’i ekleyebilmek için FAQ blok yapısını kullanıyoruz. Ancak bu yapı çoğu temada uyumsuz olarak geliyor ve FAQ yapısı açık bir şekilde karşımıza çıkıyor.

Sıkça sorulan sorular alanını açılır kapanır akordiyon şeklinde bir yapıya kavuşturmak için aşağıdaki adımları uygulayalım.

1- Birinci Görünüm (Manuel Ekleme)

Resimdeki görünümü elde edebilmek için detaydaki kodları uygulayalım.

temanızdaki functions.php dosyasının en altına aşağıdaki kodları ekleyelim.

/**
 * Convert Rank Math FAQ Block Into Accordion
 */
function turn_rm_faq_to_accordion() {
	?>
	<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', 'turn_rm_faq_to_accordion' );

Temamızın style.css dosyasına veya Görünüm > Özelleştir altında bulunan Ek CSS seçeneğine aşağıdaki kodları ekleyelim.

#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 10px 0px 10px;
	max-height: 0;
	overflow:hidden;
}
#rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer {
	max-height: 100vh;
	overflow:visible;
}

2. İkinci Görünüm (Manuel Ekleme)

Resimdeki görünümü elde edebilmek için detaydaki kodları uygulayalım.

Temanızdaki functions.php dosyasının en altına aşağıdaki kodları ekleyelim.

/**
 * Convert Rank Math FAQ Block Into Accordion
 */
function turn_rm_faq_to_accordion() {
	?>
<script>
(function ($) {

	var rankMath = {
		accordion: function () {
			$('.rank-math-block').find('.rank-math-answer').hide();
			$('.rank-math-block').find('.rank-math-question').click(function () {  
				//Expand or collapse this panel
				$(this).nextAll('.rank-math-answer').eq(0).slideToggle('fast', function () {
					if ($(this).hasClass('collapse')) {
						$(this).removeClass('collapse');
					}
					else {
						$(this).addClass('collapse');
					}
				});
				//Hide the other panels
				$(".rank-math-answer").not($(this).nextAll('.rank-math-answer').eq(0)).slideUp('fast');
			});

			$('.rank-math-block .rank-math-question').click(function () {
				$('.rank-math-block .rank-math-question').not($(this)).removeClass('collapse');
				if ($(this).hasClass('collapse')) {
					$(this).removeClass('collapse');
				}
				else {
					$(this).addClass('collapse');
				}
			});
		}
	};

	rankMath.accordion();

})(jQuery);
</script>
	<?php
}
add_action( 'wp_footer', 'turn_rm_faq_to_accordion' );

Temamızın style.css dosyasına veya Görünüm > Özelleştir altında bulunan Ek CSS seçeneğine aşağıdaki kodları ekleyelim.

#rank-math-faq .rank-math-list-item {
    margin-bottom: 1em;
    margin-top: 1em;
    border-bottom: 1px solid #fff;
}

.rank-math-question {
    cursor: pointer;
    position: relative;
    display: block;
    padding-right: 1em;
    margin-right: 1em;
    font-weight: 300;
    margin-top: 30px;
}

.rank-math-question:after {
    position: absolute;
    right: 5px;
    top: 0;
    content: "\2715";
    transform: rotate(-45deg);
    transition: all 150ms ease-in-out;
}

.rank-math-question.collapse:after {
    transform: rotate(0deg);
}

.rank-math-question:hover {
    opacity: 0.8;
}

3- Ben Uğraşamam Eklentiyi Kurar Geçerim Diyenler İçin

Resimdeki görünümü elde edebilmek için buradaki eklentiyi kurun.

Kaynak : https://rankmath.com/kb/turn-faq-block-into-accordion/