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

로

워드프레스 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');