워드프레스 앵커로 본문 바로가기 링크 및 버튼 만들기 (+HTML)

1. 들어가며

웹사이트에서 방문자가 원하는 정보를 신속하게 찾을 수 있도록 돕는 것은 사용자 경험(UX) 향상의 핵심 요소입니다. 특히 콘텐츠가 많은 사이트에서는 사용자가 특정 위치로 바로 이동할 수 있도록 하는 기능이 필요합니다. 워드프레스에서는 이러한 기능을 구현하기 위해 앵커 링크(Anchor Link) 를 사용할 수 있습니다. 앵커 링크를 활용하면 웹페이지 내 특정 구역으로 바로 이동하는 링크를 만들 수 있어 사용자 편의성 증대 및 이탈률 감소 에 효과적입니다.

이번 포스팅에서는 워드프레스에서 앵커 링크(본문 바로가기 링크)를 만드는 2가지 방법 에 대해 알아보겠습니다.

---

2. 워드프레스 앵커 링크란?

앵커 링크(Anchor Link) 란 HTML의 <a> 태그를 활용하여 같은 페이지 내 특정 위치로 이동할 수 있도록 만든 바로가기 링크입니다. 기본적인 하이퍼링크와 유사하지만, 웹페이지 내 특정 구역으로 이동 하는 기능을 수행한다는 점에서 차이가 있습니다.

📌 앵커 링크 특징

• 페이지 내에서 특정 위치로 바로 이동 가능
• 사용자의 탐색 효율성을 높여 UX 향상
• 목차 기능과 유사한 역할 수행
• 블록 편집기 또는 HTML 코드를 활용하여 설정 가능

---

3. 워드프레스 앵커 링크 활용 예시

워드프레스에서 앵커 링크는 다양한 방식으로 활용할 수 있습니다.

✅ 콘텐츠 내 특정 섹션으로 이동하는 버튼 ✅ 긴 글에서 원하는 정보로 빠르게 이동하는 목차 기능 ✅ FAQ(자주 묻는 질문) 페이지에서 특정 질문으로 바로 이동하는 링크 ✅ 페이지 내 이동이 필요한 인터랙티브 요소(예: 구매 버튼, 할인 코드 배너 등)

아래에서 앵커 링크를 설정하는 두 가지 방법을 단계별로 알아보겠습니다.

---

4. 워드프레스 본문 바로가기 링크 만들기 (앵커 링크 생성)

워드프레스에서 앵커 링크를 만드는 방법은 크게 블록 편집기 를 활용하는 방법과 HTML 코드 를 직접 입력하는 방법으로 나뉩니다.

4.1 블록 편집기에서 본문 바로가기 링크 만들기

1) 도착 위치 설정하기

1. 워드프레스 편집기로 이동하여 앵커를 추가할 위치를 선택합니다.
2. 원하는 블록(예: 제목, 문단, 여백 블록 등)을 선택합니다.
3. 우측 블록 설정 탭에서 "고급" 옵션을 클릭 합니다.
4. HTML 앵커 입력란에 이동할 위치의 ID를 입력 합니다. (예: anchor-section)

📝 예시: anchor-section이라는 ID를 설정했다면, 해당 위치로 이동하는 링크를 만들 때 #anchor-section을 사용하면 됩니다.

2) 출발 위치 설정하기

1. 본문 바로가기 버튼을 추가할 위치로 이동합니다.
2. + 블록 추가 버튼을 클릭하고 버튼 블록 을 삽입합니다.
3. 버튼을 클릭한 후 링크 추가 아이콘(🔗) 을 클릭합니다.
4. URL 입력란에 #을 붙여서 설정한 ID를 입력 합니다. (예: #anchor-section)
5. 설정이 완료되면 미리보기를 통해 정상적으로 이동하는지 확인합니다.

✅ 출발 위치(버튼) 설정 예시

[본문 바로가기] 버튼을 추가하고 링크를 `#anchor-section`으로 설정

✅ 도착 위치(앵커) 설정 예시

해당 위치의 블록 설정에서 HTML 앵커 입력란에 `anchor-section` 입력

4.2 HTML 코드로 본문 바로가기 링크 만들기

블록 편집기를 사용하지 않고 HTML 코드를 직접 입력하여 앵커 링크를 설정할 수도 있습니다.

1) 출발 위치 코드 작성

<p><a href="#ANCHOR2" data-type="internal" data-id="#ANCHOR2">본문 바로가기</a></p>

2) 도착 위치 코드 작성

<p id="ANCHOR2">이곳이 바로가기 도착 지점입니다.</p>

📌 다양한 HTML 요소에 적용 가능 ✅ 제목 태그 사용

<h2 id="ANCHOR2">이곳이 도착 위치입니다.</h2>

✅ 여백을 앵커로 지정

<div style="height:50px" aria-hidden="true" id="ANCHOR2" class="wp-block-spacer"></div>

---

5. 마치며

이번 포스팅에서는 워드프레스에서 본문 바로가기 링크(앵커 링크)를 만드는 방법 에 대해 알아보았습니다.

✅ 블록 편집기를 활용하는 방법 ✅ HTML 코드로 직접 설정하는 방법

앵커 링크는 방문자가 원하는 정보를 빠르게 찾을 수 있도록 도와 UX를 향상 시키는 중요한 기능입니다. 그러나 과도한 사용은 오히려 사용자 경험을 해칠 수 있으므로, 필요한 곳에 적절히 배치하는 것이 중요합니다.

이제 직접 설정해보면서 사이트 내 탐색 경험을 한 단계 높여보세요! 😊