Divi 및 ACF를 사용하여 CTA에 동적 URL을 추가하는 방법

웹사이트 구조를 만들 때 여러 페이지, 게시물 및 프로젝트에 동일한 CTA를 포함하고 싶을 가능성이 높습니다. 물론 URL을 가까이에 두고 이동하면서 복사하여 붙여넣을 수 있지만 이것이 반드시 가장 쉬운 방법은 아닙니다. 페이지, 게시물 및 프로젝트 생성을 시작하기 전에 필요한 모든 URL 목록을 설정하고, 기본값을 설정하고, 생성하는 새 항목에 기본값을 사용할 수 있습니다.

어떤 이유로 특정 페이지, 게시물 또는 프로젝트에서 URL이 다른 경우 전체 필드 기본값에 적용하지 않고 항목 자체 내에서 URL을 변경할 수 있습니다. URL에 첨부된 기본값은 새 페이지, 게시물 또는 프로젝트를 만들 때 시작하는 데 도움이 됩니다. 이 튜토리얼에서는 그곳에 가는 방법을 단계별로 보여드릴 것입니다!

가자!

튜토리얼 개요

• 이 접근 방식은 페이지, 게시물 및 프로젝트 추가를 시작하기 직전에 사용자 정의 필드 그룹을 새 웹사이트에 추가하는 경우 가장 잘 작동합니다.
• WordPress 웹 사이트에 고급 사용자 정의 필드 플러그인 설치
• 플러그인 내에서 모든 페이지, 게시물 및 프로젝트에 표시될 필드 그룹을 설정할 수 있습니다.
• 웹사이트 전체에 필요할 수 있는 모든 가능한 URL에 대해 별도의 URL 필드를 만듭니다.
• 각 필드에 기본값을 할당합니다. 이 기본값은 각 새 페이지, 게시물 또는 프로젝트에 자동으로 나타납니다.
• 기존 페이지, 게시물 및 프로젝트에서 값은 백엔드를 입력하고 기본 URL을 저장한 후에만 나타납니다.
• Divi 디자인 전반에 걸쳐 URL 필드를 동적 링크 콘텐츠(페이지, 게시물, 프로젝트, 템플릿)로 사용
• 필드 설정에서 기본 URL을 변경하면 이전 기본 URL이 이전 기본값을 상속한 페이지, 게시물 및 프로젝트에 계속 적용됩니다.

1. ACF 플러그인 설치 및 활성화

가장 먼저 해야 할 일은 웹사이트에 고급 사용자 정의 필드 플러그인을 설치하는 것입니다. 여기에서 플러그인을 다운로드하거나 WordPress 대시보드에서 검색할 수 있습니다. 플러그인을 설치한 후 바로 시작할 수 있도록 활성화해야 합니다.

2. 모든 게시물, 페이지 및 프로젝트에 필드 그룹 설정

이제 ACF 플러그인이 설치되면 URL 필드 그룹을 생성할 차례입니다. 이 그룹에는 페이지, 게시물 및 프로젝트에서 여러 번 사용할 모든 CTA가 포함됩니다. WordPress 대시보드 > 사용자 정의 필드 > 새로 추가로 이동합니다 .

그룹에 제목을 지정하고 규칙을 설정하여 계속하십시오. 필드 그룹이 웹사이트의 모든 게시물 유형에 표시되도록 하고 있습니다. 그러나 링크가 하나의 특정 게시물 유형에만 표시되도록 하려면 필요에 맞게 규칙을 조정할 수 있습니다.

다음과 같은 경우 이 필드 그룹을 표시합니다.

• 포스트 유형 – 같음 – 포스트 또는
• 게시물 유형 – 같음 – 페이지 또는
• 게시물 유형은 다음과 같습니다. – 프로젝트

3. 기본값으로 다른 URL 필드 추가

계속해서 다른 URL 필드를 추가하겠습니다. 앞에서 언급했듯이 게시물 유형에서 여러 번 사용하는 각 URL에 대해 별도의 URL 필드가 필요합니다. 작동 방식을 설명하기 위해 세 가지 다른 URL 필드를 추가합니다. 필드 중 하나는 방문자를 Divi 갤러리 랜딩 페이지로 리디렉션하고, 두 번째 필드는 방문자를 연락처 페이지로, 나머지 필드는 사용자를 회원 영역으로 리디렉션합니다.

사람들을 Divi 갤러리 방문 페이지로 리디렉션하는 CTA로 시작한다고 가정해 보겠습니다. 새 필드를 추가하고 인식할 수 있는 필드 이름을 지정합니다. 그렇게 하면 일단 Divi 빌더 안에 들어가면 올바른 URL을 선택하는 데 혼란이 없습니다.

계속해서 필드 설정을 아래로 스크롤하고 필드 유형으로 'URL'을 선택합니다.

다음이자 마지막으로 해야 할 일은 필드에 기본값을 추가하는 것입니다. 여기에 CTA가 리디렉션할 URL을 배치합니다. 이 기본값을 추가하는 즉시 추가하는 각 새 페이지, 게시물 및 프로젝트에 자동으로 적용됩니다.

웹사이트에 필요한 각 CTA 필드에 대해 위의 단계를 반복합니다. 이 특정 예에서는 두 개의 추가 필드를 생성한다는 의미입니다. 연락처 페이지에 한 번, 회원 영역에 한 번.

모든 URL 필드가 추가되면 필드 그룹에 대한 모든 변경 사항을 저장해야 합니다.

4. 동적 URL에 대한 링크 버튼 링크

이제 게시물, 페이지 또는 프로젝트를 입력할 때 하단에 URL 필드 그룹이 표시됩니다. 어떤 이유로든 특정 페이지, 게시물 또는 프로젝트에서 다른 URL을 사용하려는 경우 필드에 다른 URL을 추가할 수 있습니다. 추가한 URL은 작업 중인 특정 페이지, 게시물 또는 프로젝트에만 적용됩니다. 필드 그룹의 핵심에서 기본 URL은 필드를 생성할 때 추가한 것과 여전히 동일합니다.

기본 URL을 사용하는 경우 Visual Builder로 전환하여 디자인의 버튼을 올바른 URL에 연결하십시오.

Divi 버튼에 동적 URL을 추가하는 것은 정말 간단합니다. 페이지에서 찾을 수 있는 버튼을 열고 링크 설정으로 이동한 다음 동적 콘텐츠 아이콘을 클릭합니다.

동적 아이콘을 클릭하면 선택할 동적 콘텐츠 목록이 표시됩니다. 해당 목록에는 다른 URL 필드도 표시됩니다. 연결하려는 올바른 URL 필드를 선택하십시오.

페이지의 각 버튼에 대해 단계를 반복합니다. 어떤 이유로든 페이지, 게시물 또는 프로젝트의 URL이 변경되면 해당 특정 페이지, 게시물 또는 프로젝트로 돌아가서 백엔드에서 URL 동적 콘텐츠를 변경할 수 있습니다.

템플릿에 동적 URL을 추가하는 경우에도 동일한 접근 방식이 적용됩니다. 예를 들어 블로그 게시물 템플릿의 버튼에 동적 URL을 추가하려는 경우 웹사이트의 테마 빌더로 이동하여 게시물 본문 템플릿 편집기를 열 수 있습니다.

계속해서 버튼 모듈 설정을 열고 링크 설정으로 이동하여 동적 콘텐츠 아이콘을 클릭합니다.

CTA와 일치하는 URL 동적 콘텐츠를 선택할 수 있는 드롭다운 메뉴가 다시 표시됩니다.

동적 URL도 추가한 후 모든 테마 빌더 변경 사항을 변경했는지 확인하십시오!

마지막 생각들

이 게시물에서는 동적 URL을 생성하고 웹사이트의 각 페이지, 게시물 또는 프로젝트에서 사용할 수 있도록 하는 방법을 보여주었습니다. ACF 플러그인과 함께 Divi의 동적 콘텐츠를 사용했습니다. 기본값을 설정하고 해당 URL 값을 CTA에 적용할 수 있었습니다. 이 튜토리얼은 Divi로 웹사이트를 만들 때 가능한 한 효율적으로 만들 수 있도록 하는 데 중점을 둡니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.