Thứ Bảy, Tháng Mười 1, 2022
Trang chủ WORDPRESS TRUY CẬP VỚI FAQ VÀ CÁCH CHÈN VỚI RANK MATH SEO

TRUY CẬP VỚI FAQ VÀ CÁCH CHÈN VỚI RANK MATH SEO

Khi sử dụng RankMath SEO, nó có hỗ trợ sẵn một tính năng đó là chèn hộp hiển thị FAQ vào trong nội dung bài viết. Sau đây minh sẽ hướng dẫn TRUY CẬP VỚI FAQ VÀ CÁCH CHÈN VỚI RANK MATH SEO

Hiển thị truy cập FAQ lên kết quả tìm kiếm

CÁCH CHÈN FAQ CỦA RANK MATH SEO VÀO BÀI VIẾT

Để chèn được FAQ của Rank Math SEO, bạn phải sử dụng khung soạn thảo kiểu khối. Nếu bạn dùng plugin Classic Editor thì nhớ chuyển lại qua khung soạn thảo kiểu khối.

Bạn tạo một element với tên FAQ by Rank Math và thêm các câu hỏi, giống như ảnh dưới đây.

Cách thêm FAQ của RankMath SEO vào bài viết

Vị trí chèn hay nhất đó là chèn vào cuối bài viết. Một kiểu tóm tắt lại nội dung bạn đã trình bày trước đó theo dạng các câu hỏi để người dùng có thể tìm được thông tin bổ ích tại khu vực này.

Sau khi thêm hoàn tất, các câu hỏi và câu trả lời nó sẽ hiển thị như kiểu này.

Thu hút truy cập với FAQ trên Google và cách chèn với Rank Math SEO 102
FAQ hiển thị trong bài viết, như một đoạn văn bản bình thường

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.

Hiển thị FAQ với hiệu ứng accordion

Mình cũng nói luôn là việc hiển thị FAQ kiểu accordion như thế này là mình chôm chỉa từ blog VietMoz ?. Nếu bạn muốn hiển thị kiểu thế này thì chèn CSS và JavaScript như sau.

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: 16px;
	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(//thachpham.com/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: 18px
}

Bạn nhớ icon ảnh này về và thay //thachpham.com/chevron-down-black.svg thành link icon của bạn nhé. Buồn đời mình xóa mất hoặc thay đổi đường dẫn là bạn sẽ bị mất cái nút đổ xuống ngay.

Sau đó bạn 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ả:

Thu hút truy cập với FAQ trên Google và cách chèn với Rank Math SEO 104

Chúc bạn thành công nha.

Nguồn copy: Thachpham

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -

Most Popular

6 WEBSITES HAY ĐỂ HỌC JAVASCRIPT

Mặc dù blog mình đã có bài Học Javascript căn bản khá chi tiết và vui nhộn, nhưng nhiêu đó thật sự chưa đủ để...

4 CÔNG CỤ HỖ TRỢ DỊCH FILE PO NHANH HƠN

Việc sửa file .po mình đã có nói sơ qua bằng minh họa video hướng dẫn tự dịch Woocommerce, đồng thời mình cũng có nói...

TÀI NGUYÊN TRA CỨU HÀM VÀ HOOK

Ở đây mình sẽ giới thiệu bạn qua các tài nguyên tra cứu hàm và hook mà có thể giúp bạn tra cứu tất...

PHP CHO WORDPRESS VÀ CÁC TÀI NGUYÊN CẦN THIẾT

Hôm nay mình quyết định sẽ viết một bài guide là bài này để hướng dẫn bạn từng bước tìm hiểu PHP và các...

Recent Comments