Rank Math có sẵn khối FAQ tích hợp để thêm câu hỏi thường gặp bất kỳ nơi nào trong nội dung của bạn, và điều đó quan trọng hơn nữa – định dạng FAQ tương ứng sẽ được thêm tự động để bạn có thể kiếm được một đoạn trích dẫn phong phú FAQ đẹp mắt trong kết quả tìm kiếm.

Khối FAQ đã bao gồm các tùy chọn tùy chỉnh như thêm lớp CSS và các tùy chọn định dạng khác, mang đến một loạt các khả năng để định dạng và tùy chỉnh FAQ để phù hợp với chủ đề hoặc bố cục của trang web của bạn.

Ví dụ, nếu bạn đang muốn chuyển đổi khối FAQ này từ dạng list (mặc định) thành một accordion, thì hãy làm theo một trong các cách sau.

(*) Lưu ý: Backup dữ liệu website trước khi thực hiện bất kỳ thay đổi cấu trúc code nào.

Chuyển đổi khối Rank Math FAQ thành Accordion

Để bắt đầu, chúng tôi đã tạo một khối FAQ mẫu bằng Rank Math, và khi chúng tôi đi qua các phương pháp khác nhau, chúng tôi sẽ xem xét cách định dạng thay đổi.

Custom Rank Math FAQ từ dạng list sang accordion - ảnh 4

Sử dụng đoạn mã Snippet

Chúng ta có thể sử dụng jQuery và các quy tắc CSS để chuyển đổi khối FAQ thành accordion. Bạn có thể thêm đoạn mã sau vào functions.php hoặc rank-math.php của chủ đề trang web của bạn.

Hoặc bạn có thể chỉ thêm chức năng jQuery vào tệp JavaScript của trang web của bạn.

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

/**

* Convert Rank Math FAQ Block Into Accordion

function turn_rm_faq_to_accordion() {

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

Sau đó, thêm một chút CSS sau vào file style.css của chủ đề của bạn hoặc sử dụng tùy chọn CSS bổ sung có sẵn dưới giao diện Appearance> Customize trong khu vực quản trị WordPress của bạ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 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;
}

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

}

Bây giờ chúng ta đã thêm mã, khối FAQ của chúng ta sẽ được chuyển đổi thành một accordion, và đây là kết quả:

Custom Rank Math FAQ từ dạng list sang accordion - ảnh 1

Nhưng nếu bạn sử dụng đoạn code trên mà không hoạt động, hãy thử với đoạn code dưới đây.

Một đoạn mã khác..

Chúng tôi có một phiên bản khác của accordion với mã được cung cấp bởi Silvan Hagen. Thêm đoạn mã sau vào functions.php hoặc rank-math.php của trang web của bạn. Thay vào đó, bạn có thể chỉ thêm hàm jQuery vào tệp JavaScript của trang web của bạn.

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

/**

* Convert Rank Math FAQ Block Into Accordion

function turn_rm_faq_to_accordion() {

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

Sau đó, thêm một chút CSS sau vào tệp style.css của chủ đề của bạn.

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

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

}

Bây giờ khối FAQ của bạn sẽ giống thế này:

Custom Rank Math FAQ từ dạng list sang accordion - ảnh 2

Sử dụng Plugin WordPress

Nếu bạn muốn cách dễ dàng để chuyển đổi khối FAQ của chúng tôi thành accordion, bạn có thể sử dụng một plugin WordPress đơn giản. Cài đặt và kích hoạt plugin Turn Rank Math FAQ Block To Accordion bằng cách sử dụng bảng điều khiển quản trị WordPress bằng cách điều hướng đến WordPress Dashboard> Plugins> Add New, như được hiển thị bên dưới.

Custom Rank Math FAQ từ dạng list sang accordion - ảnh 5

Và đây là kết quả sau khi sử dụng plugin:

Custom Rank Math FAQ từ dạng list sang accordion - ảnh 3

Ngoài các phương pháp trên, nếu bạn sử dụng trình tạo trang Elementor, bạn có thể dễ dàng thêm Schema FAQ của Rank Math vào tiện ích accordion của Elementor, và chúng tôi có một hướng dẫn chi tiết để giúp bạn.

Và đó là tất cả! Chúng tôi hy vọng hướng dẫn này đã giúp bạn chuyển đổi Khối FAQ của Rank Math thành Accordion. Nhưng xin lưu ý, phong cách có thể khác nhau trên trang web của bạn tùy thuộc vào chủ đề và các plugin được cài đặt trên trang web của bạn. Nếu bạn có bất kỳ câu hỏi nào về việc sử dụng Khối FAQ của chúng tôi, vui lòng liên hệ với đội ngũ hỗ trợ của chúng tôi trực tiếp từ đây, chúng tôi luôn sẵn sàng giúp đỡ.