워드프레스 뉴스페이퍼 테마 목차 사용하기

워드프레스에서는 무료 또는 유료 목차 플러그인을 사용하여 목차를 표시할 수 있습니다. 뉴스, 블로그 사이트에 많이 사용되는 뉴스페이퍼 테마에서는 자체적으로 목차 기능을 제공합니다. 싱글 포스트 템플릿에서 Single Post Table of Content 엘리먼트(모듈)를 사용하여 목차를 표시할 수 있습니다.

워드프레스 목차 플러그인

워드프레스에서는 다양한 무료 목차 플러그인과 유료 플러그인이 있습니다. 무료 목차 플러그인의 경우 최근 Easy Table of Contents(쉬운 목차) 플러그인이 많이 사용되고 있습니다.

목차 플러그인을 생각하고 있다면 Easy Table of Contents가 무난할 것 같습니다. 깔끔하고 커스텀도 비교적 쉬운 편입니다. 다만, 목차 고정 기능 등을 원하는 경우에는 유료 버전을 고려할 수 있습니다.

워드프레스 목차(TOC) 플러그인

워드프레스 뉴스페이퍼 테마 목차 사용하기

뉴스페이퍼(Newspaper)는 뉴스, 매거진, 블로그 사이트에 많이 사용되는 인기 워드프레스 테마 중 하나입니다. 이 테마를 사용하면 퀄리티 높은 뉴스 또는 블로그 사이트를 비교적 수월하게 만들 수 있습니다.

목차 기능은 일반적으로 테마에 포함되어 있지 않지만, 뉴스페이퍼에서는 서드파티 플러그인을 사용하지 않고 싱글 포스트 템플릿에 목차 기능을 추가할 수 있습니다.

포스트 템플릿을 만들려면 Newspaper » Plugins에서 tagDiv Cloud Library를 설치하여 활성화해야 합니다.

tagDiv Cloud Library 플러그인이 활성화되어 있다면 Cloud templates » Single templates에서 싱글 포스트 템플릿을 새로 생성하거나 기존 템플릿을 수정하여 목차를 추가할 수 있습니다.

수정하려는 경우에는 해당 템플릿 위에 마우스를 올리고 세 개 점을 클릭한 다음, Edit with TD Composer를 클릭합니다.

새로 만들고 싶은 경우에는 플러스(+) 아이콘을 클릭한 다음, 사전 디자인된 템플릿(Pre-designed Templates) 화면에서 마음에는 드는 템플릿을 선택합니다. 현재 151개의 싱글 포스트 템플릿이 제공됩니다.

템플릿 편집 페이지에서 왼쪽의 Add Element(엘리먼트 추가) 버튼을 클릭합니다.

table로 검색하여 Single Post Table of Contents 모듈을 선택한 다음, 끌어다 원하는 곳에 추가할 수 있습니다.

예를 들어, 사이드바에 끌어도 놓을 수 있습니다.

왼쪽의 설정 패널에서 적절히 설정합니다. 예를 들어, Table of conents 라벨을 '목차' 등 한글로 변경할 수 있고, 타이틀 태그의 HTML 태그(예: H3)를 지정할 수 있습니다. 글자 크기 등 다양한 옵션이 제공됩니다.

사이드바에서 목차를 고정하고 싶은 경우 컬럼 설정에서 Sticky(붙박이) 옵션을 체크하도록 합니다.

Sticky 옵션을 선택해도 사이드바가 고정되지 않을 수 있습니다. 네이버 카페에서 이와 관련하여 질문이 올라온 적이 있는데요. 그런 경우 CSS를 사용하여 강제로 고정하는 코드를 추가할 수 있습니다.

예시 CSS 코드:

.td_block_wrap.tdb_single_toc.tdi_73.td-pb-border-top.td_block_template_1 {
position: fixed;
top: 10px;
left: 10px;
max-width: 250px;
}

상기 코드는 예시일 뿐입니다. 실제 CSS 선택자는 실제 사이트에 따라 다릅니다.

마치며

이상으로 워드프레스 뉴스페이퍼 테마에서 목차 기능을 활성화하는 방법에 대하여 살펴보았습니다. 외부 목차 플러그인을 사용할 필요 없이 테마의 기능만으로 목차(TOC)를 표시할 수 있으므로 Newspaper 테마를 사용하는 경우 플러그인을 설치하는 대신 본문에서 설명하는 방법으로 목차를 추가하는 것을 고려해 보시기 바랍니다.

뉴스페이퍼 테마는 다양한 블로그/매거진 관련 모듈을 제공하므로 비교적 수월하게 퀄리티 높은 뉴스, 웹진, 블로그 사이트를 구축할 수 있습니다. 하지만 속도면에서는 GeneratePress 테마와 비해 느린 편이고 트래픽도 많이 소모합니다(참고).

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)