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

작성자:

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

만약 업데이트로 인하여 토글 기본 상태가 펼침으로 바뀌었을때

위 코드를 사용하였지만 이번 업데이트로 기본 상태가 펼침으로 풀려서 아래 코드를 다시 적용해보았습니다.

nav { max-height:0; overflow:hidden; } 초기 접힘을 JS 조건 판별에 맡기지 않고 CSS에서 강제하며 JS는 인라인 스타일을 건드리지 않고 .is-open 클래스만 토글하기 때문에 랭크매스가 업데이트로 인하여 일부 바뀌어도 영향이 적습니다.

기존에는 목차 제목 영역 전부를 클릭해도 작동했지만 제목 텍스트 영역 위주로 클릭 이벤트가 작동하도록 수정하여 목차 링크를 클릭하다 충돌 할 수 있는 확률을 줄였습니다.

/**
 * Rank Math TOC Block: collapsed by default + toggle on title click
 * - Updates safe: doesn't edit plugin files, relies on our own CSS class toggling
 */
function turn_rm_toc_collapsable() {
?>
<style>
  /* 1) 기본 상태: 접힘(강제) */
  .wp-block-rank-math-toc-block nav {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .25s ease;
  }

  /* 2) 펼침 상태 */
  .wp-block-rank-math-toc-block.is-open nav {
    max-height: 100vh !important; /* 필요하면 더 크게 */
    overflow: visible !important;
  }

  /* 3) 제목(토글 핸들) 커서 */
  .wp-block-rank-math-toc-block .rm-toc-toggle {
    cursor: pointer;
  }
</style>

<script>
(function () {
  function findToggleEl(block) {
    // Rank Math TOC 제목 래퍼가 태그/구조 변경될 수 있어 범용적으로 탐색
    return (
      block.querySelector(':scope > h1, :scope > h2, :scope > h3, :scope > h4, :scope > div:first-child') ||
      block
    );
  }

  function initToc(block) {
    if (!block || block.dataset.rmTocInit === '1') return;
    block.dataset.rmTocInit = '1';

    var nav = block.querySelector('nav');
    if (!nav) return;

    // 기본: 접힘 유지 (클래스로만 제어)
    block.classList.remove('is-open');

    var toggleEl = findToggleEl(block);
    toggleEl.classList.add('rm-toc-toggle');

    toggleEl.addEventListener('click', function (e) {
      // nav 안(목차 링크) 클릭은 토글하지 않음
      if (e.target && e.target.closest && e.target.closest('nav')) return;

      block.classList.toggle('is-open');

      // 접근성(선택): aria-expanded 부여
      var expanded = block.classList.contains('is-open');
      toggleEl.setAttribute('aria-expanded', expanded ? 'true' : 'false');
    }, { passive: true });
  }

  function initAll() {
    document
      .querySelectorAll('div.wp-block-rank-math-toc-block')
      .forEach(initToc);
  }

  document.addEventListener('DOMContentLoaded', function () {
    initAll();

    // 에디터/동적 렌더 등으로 늦게 삽입되는 경우 대비
    var mo = new MutationObserver(function (mutations) {
      for (var i = 0; i < mutations.length; i++) {
        var m = mutations[i];
        if (!m.addedNodes) continue;
        m.addedNodes.forEach(function (node) {
          if (!node || node.nodeType !== 1) return;
          if (node.matches && node.matches('div.wp-block-rank-math-toc-block')) initToc(node);
          if (node.querySelectorAll) {
            node.querySelectorAll('div.wp-block-rank-math-toc-block').forEach(initToc);
          }
        });
      }
    });
    mo.observe(document.documentElement, { childList: true, subtree: true });
  });
})();
</script>
<?php
}
add_action('wp_footer', 'turn_rm_toc_collapsable');