앵커를 이용하여 게시물이나 페이지의 특정위치로 이동하게 하는 플러그인들(앵커 링크를 쉽게 구성할 수 있도록 도와주는 플러그인들 : Scroll to Anchor, TinyMCE Advanced, WP Anchor Header)

 

독자들 중 일부는 참을성이 없으며, 긴 텍스트를 건너 뛰고 즉시 요약본을보고 싶어 하는 경우가 있습니다.  또는 콘텐츠의 어떤 부분은 이미 잘 알고 있어 다음 단계로 넘어가야하는 경우가 있습니다. 이런 경우 사용할 수 있는 것이 앵커 링크를 쉽게 구성할 수 있도록 도와주는 플러그인입니다. 

아래에서는 Scroll to Anchor 플러그인 을 이용하여 구성하는 방법과 TinyMCE Advanced 플러그인 을 이용하여 구성하는 방법을 설명할 것입니다.   How to Create Anchor Links in WordPress (4 Easy Methods) 에서는  Gutenberg editor 를 이용하는 방법도 설명하고 있으니 자신에게 편리한 방법으로 이용하세요.  저는 기존에 TinyMCE Advanced 플러그인 을 사용하고 있어서 이 방법이 더 쉽게 느껴져 이 플러그인을 주로 사용하고 있습니다.  

 

Scroll to Anchor 플러그인

Scroll to Anchor plugin

개요

이 플러그인은 게시물이나 페이지에서 앵커를 만드는 데 도움이되며 앵커 링크를 클릭하면 부드러운 스크롤 애니메이션을 제공합니다.

  • 버전: 0.6.0
  • 글쓴이: Bego Mario Garde
  • 최근 업데이트: 4 개월 전에
  • 요구되는 워드프레스 버전: 4.0 또는 이상
  • 호환되는 버전: 4.9.8.
  • 활성 설치: 10,000+
  • WordPress.org 플러그인 

 

설정

플러그인을 설치 및 활성화한후, 워드프레스 관리자 페이지에서 [설정] -> [읽기]로 이동하시면 중간에 기존에는 없던 Scroll to Anchor Settings 부분이 새로 생성된 것을 확인할 수 있습니다. 이곳에서 설정을 해주세요. 

속도가 너무 빠르거나 느린 경우 [설정]> [읽기] 에서 속도를 변경할 수 있습니다 .

Scroll to Anchor Settings

중간에 [Display anchor(s) in front end] 부분은 check하지 마세요. check 하시면 아래의 이미지의 분홍색과 같이 “Anchor:사용법”과 앵커 텍스트의 링크가 연결된 위치라는 표시되어 처음 접하는 구독자에게 혼돈을 줄 수 있습니다. 

Scroll to Anchor plugin_사용법_Display anchor in front end

사용법

좀 더 편리하게 플러그인을 사용할 수 있도록 게시글 및 페이지에 대한 클래식 비주얼 편집기의 툴바에 아래와 같이 앵커 아이콘이 추가됩니다.  

Scroll to Anchor plugin_사용법

새로운 앵커를 추가하는 것은 텍스트 통로를 표시하거나 텍스트의 원하는 위치에 커서를 놓은 후에 해당 아이콘을 클릭하는 것입니다. 팝업 창이 앵커의 이름을 물어보고 텍스트에 단축 코드를 삽입합니다.이 단축 코드는 자동으로 프론트 엔드의 올바른 HTML로 바뀝니다. 새 앵커를 삽입 할 때마다 개별 CSS 클래스 이름을 추가 할 수 있습니다. 필요하지 않으면 필드를 비워 두십시오.

앵커가 추가되면 링크 할 수 있습니다 : 텍스트 추가 및 선택 (예 : “요약으로 이동”), 도구 모음에서 링크 아이콘을 클릭하고 # 기호와 같이 파운드 기호 앞에 앵커 이름을 입력하십시오 . 요약 . 그게 다야.

링크에는 공백이 포함될 수 없지만 어쨌든 앵커 이름에 공백을 사용할 수 있습니다. 앵커의 이름을 Summary Chapter 2 처럼 지정하면 해당 앵커에 대한 링크 가 # summary-chapter-two 로 변경되었음을 알 수 있습니다.

 

 

TinyMCE Advanced 플러그인

구성이 쉬어서 좋으나 스크롤이 너무 느린 단점이 있습니다. (또한, 스크롤 속도를 올릴 수 있는 선택지가 없습니다.)

TinyMCE 고급 WordPress 플러그인

TinyMCE 고급 WordPress 플러그인

주의사항 Scroll to Anchor 플러그인은 앵커로 한글을 사용할 수 있으나 TinyMCE는 한글 대신을 영어를 사용해야만 합니다. 

1 단계

앵커를 click하였을때 이동하고자 하는 위치에 커서를 갖다놓습니다. 그런 다음 상단의 버튼에서 “Insert”를 클릭하고 “Anchor”를 선택하세요(또는 바로가기 아이콘중 앵커아이콘을 선택하세요.) 

앵커 추가

앵커 추가

2 단계

1 단계에서 지정한 앵커 이름을 입력하고 “확인”을 클릭하십시오.이 플러그인을 사용하면 시각적 편집기보기를 벗어날 필요가 없기 때문에 시간을 절약 할 수 있습니다. HTML을 사용하여 수동으로 작업하는 경우 비주얼 편집기와 텍스트 편집기 (HTML)보기간을 오가면 확인하세요. 

앵커 ID

앵커 ID

 

3 단계

플러그인을 설치하고 활성화 한 후 게시물로 이동하여 앵커 텍스트에 하이퍼 링크를 만듭니다. 링크에 URL, 게시물 또는 페이지로 링크하는 대신 그 앞에 #가 ​​붙은 앵커 이름(#+앵커)을 입력해주시거나 2단계를 먼저 수행한 경우에는 예시되는 앵커들중에 선택 지정해줍니다. 

앵커 이름 추가

앵커 이름 추가

앵커를 미리 만들어 놓은 경우, 앵커를 선택(지정)하여 사용할 수 있어 편리합니다. 

TinyMCE _앵커 링크를 쉽게 구성

 

 

참고자료 : 1.  How to Create Anchor Links in WordPress (4 Easy Methods)