WordPress Post에서 목차를 만드는 방법

목차는 WordPress 게시물, 특히 제목이 많은 긴 게시물의 필수 부분입니다. 목차를 작성 하면 독자가 아이디어를 쉽고 빠르게 따라하고 이해할 수 있습니다. 게다가, 그것은 또한 당신이 SEO에 아주 좋은 게시물에 더 많은 키워드를 추가하는 데 도움이 됩니다.

목차를 만드는 방법

WordPress 게시물에서 목차를 만드는 방법에는 2가지가 있습니다.

첫 번째 방법은 플러그인을 사용하는 것입니다. 이것은 WordPress의 코드 전문가와 초보자 모두에게 간단하고 빠르며 무료 입니다.

두 번째는 코드를 사용하는 것입니다. 이를 통해 아주 작은 세부 사항까지 목차를 사용자 정의할 수 있지만 코더가 아닌 사용자에게는 상당히 복잡합니다. 이 포스트에서 목차를 만드는 코드를 작성해 보겠습니다. 복사해서 붙여넣기만 하면 끝!

먼저 플러그인으로 목차를 만드는 과정을 살펴보겠습니다.

방법 1: 플러그인을 사용하여 목차 만들기

1단계: 목차의 목차 생성 및 설정

WordPress에는 목차를 만들기 위한 많은 무료 플러그인이 있습니다. LuckyWP 목차 는 사용자 정의가 가능하고 아름다운 결과를 제공하기 때문에 선택합니다. 그러나 이 플러그인에는 설정이 상당히 많아 처음에는 혼란스러울 수 있습니다. 따라서 시간을 절약하려면 지침을 따르십시오.

LuckyWP 목차 는 무료 플러그인이며 wordpress.org에서 사용할 수 있습니다. 대시보드에 플러그인을 설치하고 활성화하기만 하면 됩니다 .

그런 다음 설정 > 목차 로 이동하면 설정 화면이 표시됩니다.

여기에 주의해야 할 4가지 탭이 있습니다: 일반, 모양, 자동 삽입, 머리글 처리 . 목차 표시를 설정하고 사용자 정의하는 데 사용되는 탭입니다. 기타 는 복잡하고 중요하지 않은 설정이 있는 탭이므로 무시해도 됩니다.

이 단계에서는 일반 탭에서 작업합니다.

이 섹션에는 많은 설정이 있습니다. 시간을 절약하려면 아래의 중요한 부분에 집중해야 합니다.

• 번호 매기기: 제목에 번호를 매 깁니다 . 다음 옵션 중에서 하나를 선택해야 합니다. 숫자 없음, 10진수(중첩), 로마 숫자(중첩) .

나는 Decimal number (nested) 를 선택하므로 내 목차는 다음과 같습니다.

• 제목: 목차의 제목입니다. 기본값은 Contents 입니다.

목차에 큰 영향을 미치지 않으므로 나머지 설정은 기본값으로 두겠습니다.

변경 사항 저장을 클릭하여 완료합니다. 그래서 우리는 TOC의 일반 설정을 완료했습니다. 다음 단계로 넘어갑시다.

2단계: 게시물에 목차 삽입

게시물에 목차를 삽입하는 방법에는 자동 삽입과 수동 삽입의 두 가지가 있습니다.

자동 삽입이란 모든 게시물에 목차가 자동으로 추가되는 것을 의미합니다. 이 방법은 많은 시간과 노력을 절약하지만 일부 게시물에 TOC를 삽입하려는 경우에는 작동하지 않습니다.

수동으로 삽입한다는 것은 게시물에 TOC를 포함하려면 해당 게시물에 직접 TOC를 삽입해야 한다는 의미입니다. 시간이 더 오래 걸리고 실수할 수 있습니다.

두 가지 방법을 자세히 소개합니다. 당신은 당신에게 맞는 옵션을 선택할 수 있습니다.

자동 삽입

탭 자동 삽입 > 사용으로 이동합니다. 플러그인은 기본적으로 게시 를 선택합니다. 원하지 않으시면 다른 글 유형으로 변경하시면 됩니다.

위치 섹션에서 목차를 삽입할 위치를 선택합니다. 변경 사항 저장 을 클릭하는 것을 잊지 마십시오!

따라서 선택한 게시물 유형의 모든 게시물에는 목차가 있습니다.

수동으로 삽입

소리를 수동으로 삽입하는 것은 복잡하지만 실제로는 매우 간단합니다. 처리 제목 탭으로 이동합니다. 거기에서 게시물 유형도 선택한 다음 변경 사항 저장 을 클릭합니다.

그런 다음 선택한 게시물 유형의 게시물 편집기로 이동하여 TOC 활성화 를 클릭합니다.

이제 TOC는 기본적으로 완료되었습니다. 또한 색상, 글꼴, 항목 크기 등의 스타일을 지정하여 더 예쁘게 만들 수도 있습니다. 다음 단계를 따르십시오.

3단계: 목차 표시 사용자 지정

목차 표시를 사용자 정의하는 두 가지 방법도 있습니다. 한 번에 모든 게시물에서 사용자 지정하고 각 게시물에서 개별적으로 사용자 지정합니다.

모든 게시물의 목차 사용자 지정

모양 탭으로 이동하여 모든 목차를 자세히 사용자 정의할 수 있습니다. 제목 글꼴 크기, 항목 글꼴 크기, 링크 색상 등과 같은 많은 설정이 있습니다.

모든 설정을 알 필요는 없으며 원하는 항목에만 집중하면 됩니다.

예를 들어 파란색과 현재 제목 글꼴 크기가 마음에 들지 않습니다. 포스트와 더 잘 어울리도록 색상을 짙은 회색과 작은 크기로 변경하고 싶습니다. 따라서 제목 글꼴 크기, 항목 글꼴 크기, 링크 색상 을 사용자 지정하고 나머지 설정은 아래 이미지와 같이 유지합니다.

사용자 정의 후 내 목차는 다음과 같습니다.

이제 훨씬 더 조화롭게 보입니다.

그러나 다른 게시물에 다른 목차를 갖고 싶을 수도 있습니다. 아래로 스크롤하여 각 게시물에서 목차를 사용자 정의하는 방법을 읽으십시오.

각 게시물의 목차 사용자 지정

이 작업도 간단하고 빠릅니다. 먼저 게시물 편집기로 이동하여 목차 > 사용자 지정을 선택합니다.

목차 사용자 정의 팝업이 나타납니다. 위와 같이 익숙한 탭이 보일 것입니다. 그들은 General, Appearance 및 Misc입니다. .

Appearance 탭으로 이동하여 플러그인의 Dashboard 에서 편집과 같이 일부 설정을 변경합니다. 저장 을 클릭하여 완료하십시오!

이제 목차를 커스터마이징한 최종 결과를 보자.

두 가지 사용자 정의 방법 모두 매우 예쁘고 상세한 목차를 제공합니다. 따라서 원하는 방식을 자유롭게 선택할 수 있습니다.

이제 목차를 만드는 코드를 사용하는 방법을 살펴보겠습니다.

방법 2: 코드를 사용하여 목차를 만듭니다.

1단계: 게시물 목차 만들기

모양 > 테마 > 편집기 > functions.php 로 이동 합니다 .

그런 다음, functions.php 파일에 다음 코드를 추가하여 게시물에 목차를 삽입합니다.

참고: 이 코드는 목차에 2개의 제목 수준만 추가 하는 것입니다 .

 함수 create_toc($html) {
    $toc = '';
    if (is_single()) {
        if (!$html) $html을 반환합니다.
        $dom = 새로운 DOMDocument();
        libxml_use_internal_errors(사실);
        $dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors();
        $toc = '<div class="toc-bound">
            <div class="toc-ctr">
                목차
            </div>
            <ul class="toc">';
        $h2_status = 0;
        $h3_status = 0;
        $i = 1;
        foreach($dom->getElementsByTagName('*') as $element) {
            if($요소->태그이름 == 'h2') {
                if($h3_status){
                    $toc .= '</ul>';
                    $h3_status = 0;
                    }
                 if($h2_status){
                    $toc .= '</li>';
                    $h2_status = 0;
                  }
                  $h2_status = 1;
                  $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a>';
                  $element->setAttribute('id', 'toc-' . $i);
                  $i++;
            }elseif($요소->태그이름 == 'h3') {
                if(!$h3_status){
                    $toc .= '<ul class="toc-sub">';
                    $h3_status = 1;
                }
                $toc .= '<li><a href="' . get_the_permalink() . '#toc-' . $i . '">' . $element->textContent . '</a></li>';
                $element->setAttribute('id', 'toc-' . $i);
                $i++;
            }
        }
        if($h3_status){
            $toc .= '</ul>';
        }
        if($h2_status){
            $toc .= '</li>';
        }
        $toc .= '</ul></div>';
        $html = $dom->saveHTML();
    }
    반환 $toc . $html;
}
add_filter('the_content', 'create_toc');

설명:

코드를 삽입한 후 업데이트 파일 을 클릭하는 것을 잊지 마십시오.

결과는 다음과 같습니다.

물론 스타일을 조금 바꿔야 합니다. 우리는 모든 코더가 가장 좋아하는 도구인 CSS를 사용할 것입니다.

2단계: CSS를 사용하여 사용자 지정

CSS로 사용자 지정하려면 테마 편집기 에서 style.css 파일로 이동합니다. 거기에서 원하는 대로 TOC를 사용자 지정하기 위해 직접 작성한 코드를 삽입해야 합니다.

예를 들어 목차의 색상과 강도를 사용자 지정하고 싶기 때문에 다음 코드를 삽입합니다.

 .toc-bound {
    배경색: #619162;
    색상: #fff;
}
.toc-ctr {
    border-bottom: 1px 솔리드 #fff;
    패딩: 10px;
    글꼴 크기: 20px;
    텍스트 변환: 대문자;
}
ul.toc {
    목록 스타일 유형: 없음;
    패딩: 10px;
    패딩 왼쪽: 25px;
}
.toc 리 {
    색상: #fff;
}
ul.toc > 리 {
    글꼴 크기: 18px;
    글꼴 두께: 700;
    패딩: 5px 0;
}
ul.toc-sub {
    목록 스타일 유형: 없음;
}
ul.toc-sub li {
    글꼴 두께: 200;
}

파일 업데이트 를 클릭하여 저장하는 것을 잊지 마십시오.

최종 결과는 다음과 같습니다.

결론적으로 플러그인을 사용하고 코딩을 하면 똑같은 목차를 얻을 수 있습니다. 당신이 만족하는 한 어떤 옵션도 선택할 수 있습니다.

마지막 말

보시다시피 WordPress 게시물에서 목차를 만드는 것은 전혀 복잡하지 않습니다. 튜토리얼을 따라하시면 ​​아름다운 목차를 보실 수 있을 것입니다. 좋은 목차는 게시물을 보다 명확하고 전문적으로 만듭니다. 따라서 시청자는 블로그를 읽을 때 더 친근한 경험을 할 수 있습니다.

질문이 있는 경우 아래 의견란에 질문을 남겨주세요.