Hướng dẫn làm đẹp FAQ của RankMath SEO (Frequently Asked Questions)

Khi bạn cài RankMath SEO thì phần FAQ sẽ hiển thị mặc định khá là Basic. Cho nên ở bài viết này Công Việt Blog sẽ hướng dẫn bạn làm đẹp FAQ của RankMath SEO (Frequently Asked Questions).

Bạn có thể xem demo hiển thị FAQ trong bài viết này: Hướng dẫn đăng ký mở tài khoản ngân hàng MB Bank online

Với hiệu ứng FAQ của RankMath SEO như web của mình bạn sẽ có hiệu ứng đóng mở khi click, giúp website của bạn nhìn chuyên nghiệp hơn rất nhiều so với khi để mặc định.

Mặc định FAQ RankMath SEO chưa hỗ trợ hiệu ứng này, chỉ cho phép bạn hiển thị như một đoạn text cơ bản như đang viết bài mà thôi. Để đáp ứng nhu cầu SEO FAQ schema thì hầu như nhiều bạn đã tìm cách chèn FAQ vào website bằng nhiều cách.

Thêm FAQ bằng RankMath SEO

Đầu tiên phải thêm FAQ bằng RankMath SEO, bạn click vào dấu cộng để thêm block mới > gõ FAQ > chọn FAQ của RankMath và gõ thông tin FAQ mà bạn mong muốn.

LÀM ĐẸP FAQ CỦA RANKMATH SEO

Mặc định phần FAQ nó sẽ hiển thị như một đoạn nội dung bình thường, hoàn toàn không có hiệu ứng accordion như trên blog của mình. Và để được như web của mình bạn làm theo như sau:

Bước 1: Bạn vào Appearance => Customizer (Giao diện => Tùy biến) và tìm mục Custom CSS hoặc Additional CSS rồi chèn đoạn mã CSS sau vào:

/** Rank Math SEO FAQ **/
#rank-math-faq {
	margin-top: 40px;
	border: 1px solid #e0e0e0;
	border-top: 4px solid #22a8e2;
	padding: 20px;
	position: relative
}
#rank-math-faq .rank-math-question {
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	padding: 18px 0 13px;
	margin-top: 0;
	margin-bottom: 0;
	color: #333;
	position: relative;
	cursor: pointer
}

#rank-math-faq .rank-math-question:after {
	content: "";
	background: url(//congvietit.com/wp-content/uploads/chevron-down-black.svg) no-repeat right center;
	position: absolute;
	right: 0;
	top: 50%;
	z-index: 1;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: all .3s
}

#rank-math-faq .rank-math-question.faq-active:after {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg)
}

#rank-math-faq .rank-math-list-item:not(first-child) .rank-math-answer {
	display: none
}

#rank-math-faq .rank-math-list-item:not(:last-child) {
	border-bottom: 1px solid #f0f0f0
}

#rank-math-faq .rank-math-answer {
	padding: 0 10px
}

#rank-math-faq .rank-math-answer p,
#rank-math-faq .rank-math-answer {
	color: #666;
	background-color: #fff;
	font-size: 15px
}

Bạn nhớ icon ảnh này về và thay //congvietit.com/wp-content/uploads/chevron-down-black.svg thành link icon của bạn nhé.

Bước 2: Thêm script bên dưới vào footer của theme bạn đang sử dụng. Bằng cách mở Giao diện => sửa giao diện (Theme file editor) => chọn theme đang sử dụng => mở file footer.php. Kéo xuống cuối và thêm đoạn code sau vào sau thẻ đóng </body>:

Ghi chú: Bạn cũng có thể cài plugin Header and Footer Scripts và chèn đoạn sau vào Scripts in footer, hoặc nhúng vô tập tin .js trên theme của bạn đều được.

<script>
(function($) {
    if ($('body').hasClass('single-post')) {
        $('#rank-math-faq').prepend('<h3 class="rank-math-title">Câu hỏi thường gặp</h3>');
        $('.rank-math-question').click(function(event) {
            if (!$(this).parent().find('.rank-math-answer ').is(":visible")) {
                $('.rank-math-question').removeClass('faq-active');
                $(this).addClass('faq-active');
                $('.rank-math-answer ').hide();
            } else {
                $(this).removeClass('faq-active');
            }
            $(this).parent().find('.rank-math-answer ').toggle(300);
        });
    }
})(jQuery);
</script>

Kết quả:

Chúc bạn thành công!