랭크매스 목차 블록을 접는 방법

작성자:

워드프레스 SEO에 도움이 되려면 목차를 사용해야 한다는 게 주류이기에 보다 편하게 목차를 사용하기 위해 SEO를 위해 설치한 랭크매스의 목차 블록을 사용하고 있습니다.
기본 상태의 목차 모양은 너무 보기 싫어서 간단하게 CSS로 꾸며보았고 목차 블록을 접을 수 있는 방법에 대해서 찾아보았습니다.

랭크매스 목차 블록을 접는 방법

랭크매스 목차는 기본적으로 접히지 않지만 아래 코드를 ftp를 통해서 rank-math.php 파일에 추가하여 접을 수 있도록 설정할 수 있습니다.

/**
 * Convert Rank Math FAQ Block Into Accordion
 */
function turn_rm_toc_collapsable() {
    ?>
    <script>
        jQuery(document).ready(function() {
            var tocItems = jQuery("div.wp-block-rank-math-toc-block");
            tocItems.bind("click", function(event) {
                var nav = jQuery(this).find("nav");
                if (nav.css("overflow") == "hidden") {
                    nav.css("overflow", "visible");
                    nav.css("max-height", "100vh");
                } else {
                    nav.css("overflow", "hidden");
                    nav.css("max-height", "0");
                }
            });
        });
 
    </script>
    <?php
}
add_action( 'wp_footer', 'turn_rm_toc_collapsable' );

추가로 CSS 코드를 활용하여 랭크매스 목차 꾸미기

완료되면 아래 CSS 코드를 사용자정의>추가 CSS에 추가하여 간단하게 꾸며볼 수도 있습니다 🙂

.wp-block-rank-math-toc-block {
	position:relative;
}

.wp-block-rank-math-toc-block h2 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position:relative;
    margin-bottom: 0;
}
.wp-block-rank-math-toc-block h2: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;
}

.wp-block-rank-math-toc-block nav{
	padding: 10px 10px 0px 10px;
	max-height: 0;
	overflow:hidden;
}
.wp-block-rank-math-toc-block input:checked+h2~nav {
	max-height: 100vh;
	overflow:visible;
}

특정 브라우저에서 반응하지 않을때 해결방법

하지만 혹시라도 해당 코드를 적용했을때 크롬 브라우저에서만 반응하고 웨일, 엣지 등에서 작동하지 않는다면 아래 코드를 사용해보시길 권장드립니다.
또한 rank-math.php 파일보단 footer에 삽입하면 플러그인 업데이트시에 먹통이 되는 현상을 방지할 수 있습니다 (출처: 네이버카페, 워드프레스를 사용하는 사람들, 워드프레스 정보꾸러미)

/**
* Convert Rank Math FAQ Block Into Accordion
*/
function turn_rm_toc_collapsable() {
?>
<script>
           document.addEventListener("DOMContentLoaded", function () {
               var tocBlocks = document.querySelectorAll("div.wp-block-rank-math-toc-block");
               tocBlocks.forEach(function (block) {
                   block.addEventListener("click", function () {
                       var nav = block.querySelector("nav");
                       if (!nav) return;

                       var isHidden = getComputedStyle(nav).overflow === "hidden";

                       nav.style.overflow = isHidden ? "visible" : "hidden";
                       nav.style.maxHeight = isHidden ? "100vh" : "0";
                    });
                });
            });
</script>
<?php
}
add_action('wp_footer', 'turn_rm_toc_collapsable');