워드프레스 GeneratePress 플러그인 없이 관련글 추가방법 1

워드프레스 목차 만들기 차일드테마 수동 코드 이용방법 – TOC

by

워드프레스 운영하면서 너무 많은 플러그인을 사용하면 충돌이 발생하거나 웹페이지 속도가 저하되기 때문에 최대한 플러그인 없이 운영할려고 하는데 이게 생각보다 쉽지 않은거 같습니다. 우선 관련글이나 목차 정도만 플러그인을 사용하지 않는정도로만 이용해볼려고 스터디를 해보면서 공유를 해봅니다.

Easy Table of Contents 플러그인
Easy Table of Contents 플러그인

우선 워드프레스에서 대표적인 목차 플러그인은 Toc라고 하여 검색하면 나오는데 Table Of Content의 줄인말입니다.

우선 수동으로 워드프레스 목차를 만들기 위해서는 테마를 수정하는 방법을 가장 권장합니다.

노랗 목차 보이기

워드프레스 테마에 목차 만들기

/wp-content/themes/사용중인테마/

단일 게시물에만 적용

  • 파일: single.php
  • 내용: 글 본문 위나 아래에 목차 코드를 추가합니다.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="table-of-contents">
        <h2>목차</h2>
        <ul>
            <!-- 목차 항목은 자동 생성 코드 또는 수동으로 작성 -->
        </ul>
    </div>
    <?php the_content(); ?>
<?php endwhile; endif; ?>

페이지에만 적용

  • 파일: page.php
  • 목차 코드를 동일한 방식으로 추가합니다.

글, 페이지 모든 콘텐츠에 적용

  • 파일: functions.php
  • the_content 필터를 사용하여 목차를 자동 삽입합니다.

2. functions.php로 목차 자동 삽입 (더 효율적)

functions.php 파일에 코드를 추가하여 목차를 자동으로 삽입할 수 있으며 우선 이 방식은 테마 파일을 직접 수정하지 않고 모든 글에 동적으로 목차를 추가합니다.

/wp-content/themes/사용중인테마/functions.php

위 경로에 이동하여 아래 코드를 추가해줍니다.

function add_table_of_contents($content) {
    if (is_single() || is_page()) { // 글이나 페이지에만 적용
        $toc = '<div id="table-of-contents">';
        $toc .= '<h2>목차</h2><ul>';

        // 본문에서 제목(h2, h3 등)을 찾아 목차 생성
        preg_match_all('/<h([2-3])>(.*?)<\/h\1>/', $content, $matches, PREG_SET_ORDER);
        foreach ($matches as $match) {
            $id = sanitize_title($match[2]);
            $toc .= '<li><a href="#' . $id . '">' . $match[2] . '</a></li>';
            $content = str_replace($match[0], '<h' . $match[1] . ' id="' . $id . '">' . $match[2] . '</h' . $match[1] . '>', $content);
        }

        $toc .= '</ul></div>';

        // 목차를 본문 상단에 삽입
        $content = $toc . $content;
    }
    return $content;
}
add_filter('the_content', 'add_table_of_contents');

3. 목차 스타일링 추가

/wp-content/themes/사용중인테마/style.css

목차 스타일링은 CSS 파일에 추가합니다.

#table-of-contents {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
}
#table-of-contents h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}
#table-of-contents ul {
    list-style: none;
    padding: 0;
}
#table-of-contents li {
    margin-bottom: 5px;
}
#table-of-contents a {
    text-decoration: none;
    color: #0073aa;
}
#table-of-contents a:hover {
    text-decoration: underline;
}

ckarhfh 테마 파일을 직접 수정하면, 테마 업데이트 시 수정 내용이 사라질 수 있기 때문에 이를 방지하려면 차일드 테마(Child Theme)를 사용하는 것이 좋습니다.

차일드 테마란?

차일드 테마는 원본 테마(부모 테마)를 기반으로 커스터마이징할 수 있는 테마입니다. 부모 테마가 업데이트되어도 차일드 테마의 수정 내용은 유지됩니다.

차일드 테마 폴더 생성

wp-content/themes/

우선 사용중인테마-child라는 폴더를 만드는데 예를 들어 부모 테마가 twentytwentyfour라면 폴더명은 twentytwentyfour-child로 설정합니다.

그리고 다음 폴더 안에 style.css 파일을 생성하고 아래 코드를 추가합니다.

/*
Theme Name: TwentyTwentyFour Child
Template: twentytwentyfour
Version: 1.0
Description: TwentyTwentyFour 테마를 기반으로 하는 차일드 테마
Author: 사용자 이름
*/

@import url("../twentytwentyfour/style.css"); /* 부모 테마의 스타일을 가져옴 */

    Theme Name: 차일드 테마의 이름 (마음대로 지정 가능)

    Template: 부모 테마 폴더 이름 (정확히 입력해야 함)

    @import: 부모 테마의 스타일을 차용 (필수)

    다음 차일드 테마 폴더에 functions.php 파일을 생성하고 아래 코드를 추가합니다.

    <?php
// 부모 테마의 스타일을 불러오기
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

    부모 테마의 CSS를 차일드 테마에 적용하도록 설정한 뒤 차일드 테마를 활성화합니다.

    • 워드프레스 관리자 페이지로 이동합니다.
    • 외모 > 테마로 들어갑니다.TwentyTwentyFour Child 테마가 목록에 나타납니다.
    • 활성화 버튼을 눌러 차일드 테마를 사용합니다.

    차일드 테마의 functions.php 파일에 아래 코드를 추가하여 목차를 자동으로 삽입하도록 설정합니다.

    function add_table_of_contents($content) {
    if (is_single() || is_page()) { // 글이나 페이지에만 적용
        $toc = '<div id="table-of-contents">';
        $toc .= '<h2>목차</h2><ul>';

        // 본문에서 제목(h2, h3 등)을 찾아 목차 생성
        preg_match_all('/<h([2-3])>(.*?)<\/h\1>/', $content, $matches, PREG_SET_ORDER);
        foreach ($matches as $match) {
            $id = sanitize_title($match[2]);
            $toc .= '<li><a href="#' . $id . '">' . $match[2] . '</a></li>';
            $content = str_replace($match[0], '<h' . $match[1] . ' id="' . $id . '">' . $match[2] . '</h' . $match[1] . '>', $content);
        }

        $toc .= '</ul></div>';

        // 목차를 본문 상단에 삽입
        $content = $toc . $content;
    }
    return $content;
}
add_filter('the_content', 'add_table_of_contents');

    다음 차일드 테마의 style.css 파일에 목차 스타일을 추가합니다.

    #table-of-contents {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
}
#table-of-contents h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}
#table-of-contents ul {
    list-style: none;
    padding: 0;
}
#table-of-contents li {
    margin-bottom: 5px;
}
#table-of-contents a {
    text-decoration: none;
    color: #0073aa;
}
#table-of-contents a:hover {
    text-decoration: underline;
}

    또한 functions.php나 single.php 파일을 수정하기 전에 백업 파일을 만들어 두세요. 오류가 생기면 사이트가 작동하지 않을 수 있습니다.

    수정 파일 요약

    1. CSS 스타일링: /wp-content/themes/사용중인테마/style.css
    2. 목차 자동 삽입: /wp-content/themes/사용중인테마/functions.php
    3. 특정 파일 수정 (단일, 페이지):
      • single.php: 단일 게시물용
      • page.php: 페이지용

    Leave a Comment