티스토리 블로그 카테고리별 맞춤 버튼 자동 생성 방법

블로그를 운영하다 보면 특정 주제의 글을 읽고 있는 독자에게 그와 관련된 더 깊은 정보를 담은 페이지를 안내하고 싶을 때가 많으실 거예요. 하지만 매번 새로운 글을 쓸 때마다 HTML 편집기에 들어가서 버튼 코드를 직접 넣는 작업은 생각보다 번거롭고 실수하기도 쉽습니다. 나중에 링크 주소라도 바뀌면 수백 개의 글을 일일이 수정해야 하는 난감한 상황이 벌어질 수도 있고요. 그래서 오늘은 카테고리 URL 주소만 인식해서 지정한 위치에 자동으로 버튼을 띄워주는 버튼 자동 생성 자바스크립트 코드를 소개해 드리려고 합니다.

이 방법을 활용하면 한 번의 설정만으로 블로그 전체 카테고리에 맞는 안내 버튼을 효율적으로 관리할 수 있습니다. 쾌적한 블로그 운영을 위해 꼭 필요한 기능이니 차근차근 적용해 보세요.

티스토리 카테고리별 버튼 자동 생성 방법

단순히 코드를 복사해서 붙여넣는 것만으로도 내 블로그의 전문성을 높여주는 맞춤형 버튼을 만들 수 있습니다. 왜 이 기능이 필요한지부터 실제 코드 적용법까지 자세히 알아볼까요?

1. 카테고리별 맞춤형 버튼이 왜 필요할까요?

방문자가 더 오래 머무는 블로그(UX 개선)
독자가 현재 읽고 있는 주제와 밀접한 연관이 있는 페이지로 자연스럽게 안내하면, 블로그 내 다른 글들도 더 많이 읽게 되어 체류 시간이 늘어나는 효과가 있습니다.
검색 엔진이 좋아하는 구조(SEO 최적화)
구글이나 네이버 같은 검색 엔진은 관련 있는 콘텐츠끼리 촘촘하게 연결된 내부 링크 구조를 선호합니다. 카테고리별 버튼을 통해 자연스러운 흐름을 만들어주면 SEO 점수에도 긍정적인 영향을 줍니다.
운영 시간을 아껴주는 효율성
수많은 포스팅을 하나하나 수정할 필요가 없습니다. 스킨 편집에서 코드 한 줄만 수정하면 해당 카테고리의 모든 글에 실시간으로 반영되니까요.

2. 자바스크립트 기반 자동 버튼 생성 코드

아래 코드는 현재 페이지의 주소를 확인해서 운영자가 미리 설정한 카테고리 이름이 포함되어 있다면, 원하는 위치(div 태그)에 버튼을 짜잔 하고 나타내 줍니다.

<div id="category-button-area"></div>

<style>
  /* 버튼 기본 스타일 */
  .custom-category-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #4a6bff;
    color: #ffffff !important;
    border-radius: 30px;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(74, 107, 255, 0.3);
    margin: 10px 0;
  }
  .custom-category-btn:hover {
    background-color: #3a5bef;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(74, 107, 255, 0.4);
  }
</style>

<script>
  (function() {
    document.addEventListener("DOMContentLoaded", function() {
      // 1. 현재 페이지의 전체 URL 가져오기
      const currentUrl = window.location.href;
      
      // 2. 버튼 설정 (카테고리 경로 키워드, 이동할 링크, 버튼 텍스트)
      const configs = [
        {
          keyword: "/category/SEO",
          link: "https://openipc.kr/seo-guide",
          text: "애드센스 최적화 바로가기"
        },
        {
          keyword: "/category/Adsense",
          link: "https://openipc.kr/adsense-tip",
          text: "애드센스 코드 적용 방법"
        }
      ];

      // 3. 출력할 대상 요소 찾기
      const targetContainer = document.getElementById("category-button-area");
      if (!targetContainer) return;

      // 4. URL 매칭 확인 및 버튼 생성
      configs.forEach(function(cfg) {
        if (currentUrl.indexOf(cfg.keyword) !== -1) {
          const btn = document.createElement("a");
          btn.href = cfg.link;
          btn.className = "custom-category-btn";
          btn.innerText = cfg.text;
          btn.target = "_blank"; // 새창 열기
          
          targetContainer.appendChild(btn);
        }
      });
    });
  })();
</script>