WordPress에서 앵커 링크를 만드는 방법

게시 됨: 2020-08-17

긴 게시물을 작성할 때 다른 섹션으로 분리할 수 있으면 사용자 친화적입니다. 사용자가 콘텐츠의 특정 부분을 건너뛰고 기사에서 위아래로 이동하여 필요한 정보를 읽을 수 있도록 도와줍니다.

이 게시물에서는 WordPress에서 앵커 링크를 만드는 방법에 대해 설명합니다. 앵커 링크를 만들고 싶다면 이 게시물을 꼼꼼히 읽어야 합니다.

내용물
1 앵커 링크란 무엇입니까?
2 WordPress에서 앵커 링크를 수동으로 만드는 방법은 무엇입니까?
3 HTML에서 앵커 링크를 만드는 방법
4 제목을 앵커 링크로 자동으로 추가하는 방법

앵커 링크란 무엇입니까?

앵커 링크를 사용하면 게시물의 특정 부분으로 이동할 수 있습니다. 이 링크의 도움으로 게시물의 특정 위치에서 원하는 부분으로 이동할 수 있습니다.

앵커 링크가 기사에서 목차 를 만드는 역할을 한다는 것을 눈치채셨을 것입니다. 긴 조각을 다른 섹션으로 분리하는 것이 도움이 됩니다. 앵커 링크는 name 속성이나 ID 속성으로 생성할 수 있습니다.

앵커 링크는 기본적으로 특정 제목으로 바로 이동합니다. 그러나 부드러운 스크롤 경험을 위해 변경할 수 있습니다.

WordPress에서 앵커 링크를 만드는 방법을 배우기 전에 앵커 링크의 긍정적인 측면과 부정적인 측면을 살펴보십시오.

장점

그것은 더 나은 사용자 경험을 만듭니다. 게시물이 길면 전체 콘텐츠를 읽고 스크롤하는 데 오랜 시간이 걸립니다. 그러나 앵커 링크가 있는 경우 독자는 특정 섹션으로 이동하여 콘텐츠를 읽을 수 있습니다.

게시물에 앵커 링크를 만든 경우 SERP 목록 에 앵커 링크가 표시되는 경우가 여러 번 있습니다. 결과적으로 사용자가 검색 결과에 첨부된 흥미로운 것을 볼 수 있으므로 사이트의 CTR이 증가합니다.

단점

사용자가 사이트에 머문 평균 시간 을 줄입니다. 다른 섹션의 도움으로 콘텐츠가 분리되면 사용자는 시간을 낭비하지 않고 원하는 섹션으로 이동하는 것을 선호합니다.

웹사이트가 광고 수익 으로 운영되는 경우 노출과 클릭이 줄어들 수 있습니다. 그 대가로 사이트 수익에 영향을 미칩니다.

WordPress에서 앵커 링크를 수동으로 만드는 방법은 무엇입니까?

앵커 링크를 만들기 전에 기억해야 할 두 가지 사항이 있습니다.

  1. 앵커 텍스트 앞에 # 기호 를 추가합니다.
  2. 대상 텍스트에 id 속성 을 추가합니다.

자세히 논의해 보겠습니다.

1단계: 앵커 링크 생성

먼저 앵커 링크를 생성할 텍스트, 이미지 또는 버튼을 선택해야 합니다.

링크 삽입 옵션을 선택한 후 클릭하십시오.

앵커 링크 만들기
앵커 링크 만들기

일반적으로 링크할 게시물이나 페이지의 URL을 유지합니다. 그러나 앵커 링크를 만들려면 #을 접두사로 사용하고 사용자가 이동하려는 섹션의 키워드를 사용하세요.

입력 버튼을 클릭하여 링크를 생성합니다.

앵커 링크에 키워드를 포함하고 하이픈을 사용하여 단어를 구분해야 합니다. 게다가 긴 앵커 링크를 만들지 않도록 하는 것이 가장 좋습니다.

링크를 만든 후에는 링크를 클릭해도 편집기에서 작동하지 않는 것을 볼 수 있습니다. 앵커 링크를 아이디로 추가해야 하기 때문입니다.

2단계: 대상 섹션에 ID 속성 추가

사용자가 앵커 링크를 클릭할 때 이동하려는 부분으로 이동합니다. 대상 섹션은 제목 블록, 단락 블록 또는 기타 블록이 될 수 있습니다.

대상 섹션이 제목인 경우 제목 블록을 선택하고 오른쪽의 블록 설정 을 엽니다. 고급 탭 아래에 HTML 앵커 필드 가 표시됩니다.

ID 속성 추가
ID 속성 추가

HTML 앵커 필드에는 앵커 링크를 생성하는 데 사용한 텍스트를 추가해야 합니다. 이 경우 접두사 # 를 추가하지 마십시오.

게시물을 저장한 후 앵커 링크를 클릭하면 원하는 섹션으로 이동합니다.

이제 제목 블록에 앵커 ID를 추가하는 방법을 알게 되었습니다. 앞서 논의한 바와 같이 블록은 다른 블록과 유사한 단락일 수도 있습니다. 다른 블록의 경우 먼저 블록 설정을 열어야 합니다. HTML로 편집을 클릭하면 해당 블록의 HTML 코드를 편집할 수 있습니다. 단락, 테이블 블록 등에 대한 <p>,<table>과 같은 HTML 속성이 각각 표시됩니다.

 <p></p>

앵커를 ID 속성에 추가해야 합니다. 그러나 접두사 #를 추가하지 않도록 주의하십시오. 이 매체는 제목 블록에서 수행한 것과 유사해야 합니다.

화면에 예기치 않거나 잘못된 콘텐츠가 표시되면 HTML로 변환을 클릭합니다. 변경 사항을 저장하면 시작할 준비가 된 것입니다.

또한 사용자를 다른 페이지의 앵커 링크로 보낼 수 있습니다. 이를 위해 아래 예와 같이 HTML 앵커가 있는 URL 을 추가해야 합니다.

 example.com/desiredpage#desired-anchor

HTML에서 앵커 링크를 만드는 방법

위에서 수행한 단계와 유사합니다. 먼저 # 접두사<a href=””> 태그를 사용하여 앵커 링크를 생성해야 합니다.

 <a href="#anchor-link-example">Example of Anchor Link</a>

링크를 만든 후 사용자를 보낼 대상 섹션까지 아래로 스크롤합니다. 이 섹션은 제목, 단락과 같은 HTML 요소일 수 있습니다.

HTML 태그에서 id 속성은 # 접두사가 없는 앵커 링크를 포함해야 합니다.

 < p >Destination of Anchor Link</p>

단락 태그의 경우의 예입니다. 비슷한 방식으로 다른 HTML 요소에 id 속성을 추가할 수 있습니다.

제목을 앵커 링크로 자동으로 추가하는 방법

블로거들은 모든 게시물에 대해 계속해서 앵커 링크를 만드는 데 드는 시간과 노력을 절약할 수 있기 때문에 이를 선호합니다. 다른 플러그인은 WordPress에서 테이블을 만드는 데 유용합니다.

다음은 사이트에 권장되는 테이블 플러그인 목록입니다.

WordPress를 위한 최고의 무료 테이블 플러그인

플러그인 중 하나를 설치하고 활성화하십시오. 그런 다음 플러그인의 설정을 테스트하여 게시물의 제목을 목차에 자동으로 앵커 링크로 추가합니다.

결론

이 게시물이 WordPress에서 앵커 링크를 만드는 방법을 아는 데 도움이 되었기를 바랍니다.

추가 읽기

  1. WordPress를 다시 설치하는 방법
  2. WordPress에서 HTML을 편집하는 방법
  3. WordPress에 메타 설명을 추가하는 방법