순위 수학 FAQ 블록을 아코디언으로 바꾸는 방법은 무엇입니까? 쉬운 가이드. [2021]

이 기사에서는 순위 수학 FAQ 블록을 세련된 아코디언 블록으로 변환하는 방법을 보여 드리겠습니다. 간단한 단계를 따르면 쉽게 할 수 있습니다.

아시다시피 Rank 수학 SEO 플러그인에는 WordPress에 FAQ 스키마를 추가하는 기능이 내장되어 있습니다. WordPress에서 Gutenberg 또는 클래식 편집기를 사용하는 경우 RankMath 블록을 사용하여 블로그 게시물에 FAQ를 추가할 수 있습니다. 그러나 대부분의 페이지 빌더처럼 FAQ 스타일을 지정할 수 없기 때문에 자체 제한이 있습니다.

그러나 RankMath FAQ 스키마 구현은 SEO 친화적이며 Google 리치 결과 테스트를 통과했습니다.

이제 Rank Math SEO 플러그인을 사용하여 FAQ 스키마를 쉽게 추가하고 Google이 콘텐츠를 더 잘 이해하도록 도울 수 있습니다. 또한 Google, Bing 등과 같은 검색 엔진의 SERP의 여러 섹션에서 순위를 매기는 데 도움이 될 수 있습니다.

이제 RankMath의 SEO 플러그인과 함께 제공되는 구조화된 FAQ 블록 을 접을 수 있는 아코디언 으로 바꾸는 방법을 알아보겠습니다.

이를 달성할 수 있는 두 가지 방법이 있습니다. 하나는 이에 필요한 CSS와 JS 가 포함된 가볍고 간단한 WordPress 플러그인 을 설치하는 것입니다. 또는 단순히 현재 테마에 CSS 및 JS 스크립트를 추가할 수 있습니다.

순위 수학 FAQ 블록에 아코디언 스타일을 추가하는 방법은 무엇입니까?

RankMath의 FAQ 블록에 아코디언 스타일을 추가하려면 아래 단계를 따르십시오.

1. 블로그 게시물로 이동하여 Rank Math의 FAQ 블록을 추가하세요.
2. 이제 " Turn Rank Math FAQ Block to Accordion "이라는 플러그인을 검색하십시오.
3. 이제 이 플러그인을 활성화하고 순위 수학 SEO에서 아코디언 스타일이 자동으로 추가됩니다.

참고 : 플러그인은 " WP How Know" 에서 개발했으며 매우 가벼운 플러그인 입니다. 여기에는 RankMath의 SEO 플러그인과 함께 제공되는 구조화된 FAQ 블록을 접을 수 있는 아코디언으로 바꾸는 데 필요한 기본 CSS 및 JS 스크립트 가 포함되어 있습니다.

이제 순위 수학의 일반 FAQ 블록이 아래 이미지와 같이 아름다운 아코디언 스타일 FAQ 블록으로 변환됩니다.

CSS와 JS를 수동으로 테마에 추가하여 FAQ 섹션을 세련되게 만들고 싶지 않은 사람들에게 매우 유용합니다.

Accordion 스타일을 추가한 후에도 FAQ 블록을 계속 인덱싱할 수 있습니까?

예, 아코디언 스타일을 추가하면 완벽하게 작동합니다. Google 리치 결과 테스트에서 확인할 수 있습니다.

이 플러그인에서 아코디언 스타일을 변경할 수 있습니까?

이 플러그인에는 다른 스타일이 없지만 사용자 정의 CSS를 사용하여 이 스타일의 모양을 변경할 수 있습니다.

사용자 정의 CSS 코드 를 사용하여 이 플러그인에 의해 생성된 이 아코디언 FAQ 블록의 디자인을 변경할 수 있습니다. 여기에서 스타일을 약간 변경했습니다. [특집 이미지에 표시된 대로].

 #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 섹션이나 테마 편집기 의 style.css 파일에 CSS 코드를 붙여넣어야 합니다.

위의 CSS 코드를 변경하여 배경색, 너비, 테두리 등을 변경할 수도 있습니다.

순위 수학 FAQ 아코디언 스타일에 대한 비디오 가이드

RankMath FAQ 스키마 블록을 접을 수 있는 헤더가 있는 FAQ 블록으로 변경하는 방법은 무엇입니까? [수동]

추가 플러그인을 추가하고 싶지 않은 사람들을 위해 맞춤형 CSS 및 JS 파일이 있습니다. 그러나 수동 방식의 스타일은 매우 기본적 이며 플러그인의 스타일과 경쟁하지 않습니다. 이는 로딩 속도에 많은 압력을 가하지 않고 더 나은 성능 을 위한 것입니다.

이 수동 프로세스의 최종 결과는 스크린샷에서 확인할 수 있습니다.

이를 달성할 수 있는 방법을 알아보겠습니다. 단계를 올바르게 따르십시오.

1단계 : 현재 테마에 CSS를 추가합니다.

여기에서 테마 추가 CSS 섹션 또는 테마 편집기의 style.css 섹션에 아래 CSS 파일을 추가해야 합니다.

WordPress 대시보드 > 모양 > 사용자 정의 > 추가 CSS 로 이동하여 코드를 붙여넣고 저장합니다.

여기에서 CSS 코드를 복사합니다.

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

2단계 : 테마 편집기에서 JavaScript 추가

이제 Rankmath FAQ 블록에서 접을 수 있는 아코디언이 작동하도록 JavaScript를 테마 편집기에 추가해야 합니다.

이제 WordPress 대시보드 > 모양 > 테마 편집기 > Functions.php로 이동하여 여기에 표시된 대로 아래 스크립트를 붙여넣습니다.

javascript 코드를 복사하여 function.php에 붙여넣습니다.

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

자바스크립트를 추가한 후 코드를 저장하는 것을 잊지 마십시오.

이제 RankMath의 구조화된 FAQ 블록 이 자동으로 아코디언 스타일로 변환됩니다. 이제 접을 수 있는 헤더가 있는 FAQ 블록으로 작동합니다.

결론

이 기사에서 논의된 첫 번째 방법은 순위 수학의 FAQ 블록을 접을 수 있는 Accordion 블록 으로 변환하는 것입니다. 그러나 두 번째 방법은 약간 수동 프로세스이지만 첫 번째 방법보다 로드가 빠릅니다.

따라서 순위 수학 FAQ 블록의 스타일을 지정하는 방법은 무엇입니까 ? 댓글 섹션에 알려주십시오.

또한 순위 수학을 사용하여 FAQ를 추가하는 친구와 이 기사를 공유 하는 것을 잊지 마십시오.

더 읽어보기 : 후크 요소를 사용하여 GeneratePress 테마에 Author 상자를 추가하는 방법. [추가 플러그인 없이.]