Divi에서 사용자 정의 필드와 동적 콘텐츠를 사용하여 설교 레이아웃을 만드는 방법

설교에 접근하고 듣는 능력은 모든 교회 웹사이트의 중요한 부분입니다. 그리고 디비의 새로운 Church Layout Pack이 출시되면서 다이나믹한 컨텐츠로 설교 레이아웃을 구축하는 방법을 알려드릴 수 있으면 좋겠다는 생각이 들었습니다. 이를 위해 고급 사용자 정의 필드 플러그인을 사용하여 게시물의 백엔드에서 업데이트할 수 있는 그룹 사용자 정의 필드를 생성하겠습니다. 그리고 Divi의 동적 콘텐츠 기능을 사용하여 게시물 콘텐츠를 채우기 위해 해당 사용자 정의 필드를 끌어오는 레이아웃을 디자인하는 방법을 보여 드리겠습니다. 모든 것이 끝나면 시각적 빌더를 배포할 필요 없이 사용자 정의 필드의 직관적인 UI를 사용하여 백엔드에서 업데이트할 수 있는 동적 콘텐츠가 포함된 멋진 설교 레이아웃을 갖게 될 것입니다.

시작하자.

필요한 것

이 튜토리얼에서는 다음이 필요합니다.

• 디비 테마
• 고급 사용자 정의 필드 플러그인
• Church 레이아웃 팩의 교회 블로그 레이아웃(Divi Builder에서 액세스 가능)

설교 레이아웃 미리보기

다음은 우리가 구축할 레이아웃을 살펴보겠습니다. 이 레이아웃의 장점은 대부분의 콘텐츠가 동적 콘텐츠를 사용하여 백엔드의 사용자 정의 필드에서 생성된다는 것입니다.

고급 사용자 정의 필드 플러그인으로 사용자 정의 필드 생성

고급 사용자 정의 필드(ACF) 플러그인을 사용하면 사용자 정의 필드를 쉽게 그룹화하여 게시물이나 페이지에서 동적 콘텐츠로 사용할 수 있습니다. 날짜 선택기, Wysiwyg 편집기 및 oEmbed와 같은 여러 필드 유형을 지원하여 사용자 정의 필드를 정말 쉽게 업데이트할 수 있습니다. 이는 클라이언트가 사용자 정의 필드를 사용하여 사이트를 업데이트할 수 있는 보다 직관적인 UI를 제공하는 데 매우 유용합니다.

ACF 플러그인을 설치하고 활성화했으면 WordPress 대시보드 및 사용자 정의 필드 > 새로 추가로 이동합니다.

새 필드 그룹 추가

새 그룹을 설정하려면 새 필드 그룹에 제목을 지정하십시오.

위치 섹션(또는 토글) 아래에서 Post Type이 Post 대신 "Project"와 같도록 설정을 변경합니다. 이것은 기본적으로 플러그인이 Divi에 내장된 프로젝트 게시물 유형에만 이 사용자 정의 필드 그룹을 표시하도록 지시합니다(원하는 경우 게시물로 남겨둘 수도 있습니다. 귀하의 선택).

그런 다음 설정 섹션으로 스크롤하여 다음을 업데이트합니다.

위치: 높음(내용 후)

이 위치 설정은 게시물 또는 페이지의 백엔드 편집기에서 사용자 정의 필드 그룹의 위치를 ​​결정합니다.

필드 그룹에 사용자 정의 필드 추가

이제 그룹이 생성되고 설정되었으므로 그룹에 사용자 정의 필드를 추가할 차례입니다.

스피커 사용자 정의 필드

첫 번째 사용자 정의 필드에는 사용자가 설교를 위해 연사를 입력할 수 있는 장소를 추가해 보겠습니다. 새 필드를 추가하려면 "필드 추가" 버튼을 클릭하고 다음을 입력합니다.

필드 레이블: 스피커
필드 이름: 스피커
필드 유형: 선택
선택(한 줄에 각각 입력): 담임목사, 부목사, 청년목사, 초청연사

설교 제목 사용자 정의 필드

다음으로, 설교 제목에 대한 사용자 정의 필드를 추가하십시오.

필드 레이블: 설교 제목
필드 이름: sermon_title
필드 유형: 텍스트
자리 표시자 텍스트: 설교 제목

설교 날짜 사용자 정의 필드

그런 다음, 설교 날짜에 대한 사용자 정의 필드를 추가하십시오. 이것은 백엔드에서 새 날짜를 쉽게 추가할 수 있도록 날짜 선택기 필드 유형을 갖도록 설정할 것입니다.

필드 레이블: 설교 날짜
필드 이름: sermon_date
필드 유형: 날짜 선택기
디스플레이 형식: F j, Y
반환 형식: F j, Y
주 시작 날짜: 월요일

설교 설명 사용자 정의 필드

다음으로, 설교 설명을 위한 사용자 정의 필드를 추가하십시오. 이를 통해 사용자는 시각적 빌더를 열지 않고도 Wysiwyg 편집기를 사용하여 게시물의 내용을 업데이트할 수 있습니다.

필드 레이블: 설교 설명
필드 이름: sermon_description
필드 유형: Wysiwyg 편집기

설교 오디오 삽입 사용자 정의 필드

다음으로, oEmbed 필드 유형을 사용하여 설교 오디오 임베딩을 위한 사용자 정의 필드를 추가하십시오. 이렇게 하면 백엔드에 포함된 오디오 URL을 업데이트하여 설교의 오디오 포함을 포함할 수 있습니다.

필드 레이블: 설교 오디오 임베딩
필드 이름: sermon_audio_embed
필드 유형: oEmbed

설교 오디오 URL 사용자 정의 필드

다음으로, 설교 오디오 URL에 대한 사용자 정의 필드를 추가하여 URL을 사용하여 모듈 내의 링크를 채우고 파일에 대한 다운로드 링크를 생성할 수 있도록 합니다.

필드 레이블: 설교 오디오 URL
필드 이름: sermon_audio_url
필드 유형: URL

괜찮은. 사용자 정의 필드가 필드 그룹에 추가되면 필드 그룹을 저장하는 것을 잊지 마십시오. 이제 포스트 전체에 걸쳐 동적 콘텐츠로 사용할 사용자 정의 현장 설교 콘텐츠에 대한 설교 레이아웃 생성을 시작할 수 있습니다.

새 프로젝트 만들기

WordPress 대시보드에서 프로젝트 > 새로 추가로 이동합니다. 그런 다음 설교의 제목이 되어야 하는 프로젝트의 제목을 입력하십시오(그러나 그것은 당신에게 달려 있습니다). 그런 다음 클릭하여 Divi Builder를 사용합니다. divi 빌더 상단에 사용자 정의 필드 그룹이 표시됩니다.

이제 이 게시물에 특정한 설교 정보로 사용자 정의 필드를 채우십시오.

연사: 담임목사(드롭다운 메뉴에서 선택)
설교제목: 새로운 피조물(또는 당신이 원하는 것)
설교 날짜: 날짜 선택기에서 날짜 선택
설교 설명: WYSIWYG 편집기를 사용하여 설교 설명을 입력하십시오.
설교 오디오 삽입: 미디어 플레이어에 삽입하려는 미디어 파일의 URL을 입력합니다.
설교 오디오 URL: 미디어 파일의 URL을 입력합니다(클릭 시 즉시 다운로드하려면 zip 파일이어야 함).

그런 다음 프로젝트에 추천 이미지를 추가합니다. 이것은 설교 레이아웃의 오디오 플레이어에 사용되는 이미지로 사용됩니다.

프로젝트에 새로운 미리 만들어진 레이아웃 추가하기

이제 Visual Builder를 사용하려면 클릭하십시오.

(참고: 현재 백엔드 빌더는 동적 콘텐츠를 지원하지 않으므로 시각적 빌더를 배포해야 합니다. 더 많은 백엔드 빌더 기능으로 레이아웃을 사용자 지정하려면 시각적 빌더를 배포하고 와이어프레임 모드를 클릭하기만 하면 됩니다.)

그런 다음 미리 만들어진 레이아웃 선택 옵션을 클릭합니다. 라이브러리에서 불러오기 팝업에서 교회 레이아웃 팩을 선택한 다음 클릭하여 교회 블로그 페이지 레이아웃을 사용합니다.

레이아웃이 페이지에 로드되면 레이아웃에서 두 번째, 네 번째, 다섯 번째 섹션을 삭제합니다. 이제 레이아웃에는 맨 위 머리글 섹션, "최신 설교" 섹션 및 맨 아래 바닥글 섹션의 세 섹션만 있어야 합니다.

다음으로 두 번째 섹션에서 블로그 모듈을 삭제합니다.

다음 내용을 포함하도록 "최신 설교" 텍스트 모듈을 업데이트하십시오.

<h3>Description</h3>

그런 다음 해당 텍스트 모듈을 복제하고 "지금 듣기"로 내용을 업데이트합니다.

설교 레이아웃 동적 콘텐츠 추가

설교 설명

이제 섹션에 대한 동적 설교 오디오 콘텐츠를 구축할 준비가 되었습니다. 우선 "Description"이라는 제목의 텍스트 모듈 바로 아래에 설교 설명을 추가할 것입니다. 그렇게 하려면 새 텍스트 모듈을 추가하십시오. 콘텐츠 입력 상자 위로 마우스를 가져간 다음 동적 콘텐츠 아이콘을 클릭합니다.

그런 다음 드롭다운 목록에서 설교 설명 사용자 정의 필드를 선택하십시오.

설정을 저장합니다.

이제 설교 설명이 동적 콘텐츠로 표시됩니다. 이는 백엔드 편집기 화면의 설교 설명 입력 상자에 추가한 내용이 프로젝트 페이지에 동적으로 업데이트됨을 의미합니다.

오디오 모듈 및 오디오 임베딩

"지금 듣기"라는 제목의 텍스트 모듈 아래에 새 오디오 모듈을 추가합니다. 그런 다음 다음 동적 콘텐츠로 텍스트 콘텐츠를 업데이트합니다.

제목: 설교 제목(사용자 정의 필드)
아티스트 이름: 스피커(사용자 정의 필드)
앨범 이름: 설교 날짜(사용자 정의 필드)

우리는 주로 오디오 모듈 내의 동적 콘텐츠 배치에 관심이 있기 때문에 레이블은 중요하지 않습니다. 설교 제목, 연사, 설교 날짜는 많은 작업 없이 오디오 모듈에 잘 표시됩니다.

오디오 모듈의 커버 아트 이미지의 경우 이미지 미리보기 영역에 마우스를 가져갈 때 동적 콘텐츠 아이콘을 클릭하여 동적 콘텐츠를 추가하고 추천 이미지를 선택합니다.

이제 백엔드에서 추천 이미지로 설정한 것이 무엇이든 자동으로 설교 오디오의 표지 이미지를 채웁니다.

레이아웃 디자인을 더 잘 일치시키려면 설정을 저장하고 섹션 설정에서 배경 카테고리 텍스트를 마우스 오른쪽 버튼으로 클릭하고 "배경 복사"를 선택하여 하단 섹션의 배경을 복사합니다.

이제 오디오 모듈 설정을 열고 배경 카테고리 텍스트를 마우스 오른쪽 버튼으로 클릭하고 "배경 붙여넣기" 옵션을 클릭하여 배경을 오디오 모듈 배경 설정에 붙여넣습니다.

그런 다음 디자인 설정으로 이동하여 다음을 업데이트합니다.

텍스트 방향: 왼쪽
맞춤 여백: 0px 하단

이제 설교 오디오 플레이어를 완성하기 위해 남은 것은 실제 오디오 플레이어 내장입니다. 현재 오디오 모듈에 내장된 오디오 입력 상자는 동적 콘텐츠를 지원하지 않으므로(앞으로 그럴 것이라고 확신합니다) 작은 해결 방법을 수행할 것입니다. 우리는 새로운 텍스트 모듈을 만들고 동적 콘텐츠를 사용하여 오디오 파일 임베드를 추가할 것입니다. 그리고 WordPress가 사용자 정의 필드에서 생성된 단축 코드를 인식하는 방식 때문에 기본 오디오 플레이어가 표시됩니다.

이렇게 하려면 오디오 모듈 아래에 텍스트 모듈을 추가한 다음 사용자 정의 필드 "Sermon Audio Embed"를 동적 콘텐츠로 추가합니다. 단축 코드가 작동하도록 원시 HTML 활성화를 확인하십시오.

이제 사용자 정의 여백을 사용하여 오디오 모듈 내부에 오디오 플레이어를 배치할 수 있습니다. 디자인 탭으로 이동하여 다음을 업데이트합니다.

사용자 정의 여백(데스크톱): -40px 위쪽, 280px 왼쪽, 60px 오른쪽
사용자 정의 여백(태블릿): 0px 왼쪽, 0px 오른쪽

다운로드 링크

사용자가 오디오 파일을 다운로드하는 것이 도움이 되는 경우가 있습니다. 이를 더 쉽게 하기 위해 오디오 파일에 대한 링크를 게시물에 추가할 수 있습니다. 이를 위해 동적 콘텐츠를 사용하여 설교 제목과 오디오 URL로 안내문 모듈을 채울 것입니다.

오디오 모듈 아래에 광고 문구 모듈을 추가하고 다음과 같이 콘텐츠를 업데이트합니다.

제목: 설교 제목(사용자 정의 필드)
아이콘: 스크린샷 참조
제목 링크 URL: 설교 오디오 URL(사용자 정의 필드)

클릭 가능한 링크처럼 보이도록 광고 문구의 스타일을 지정하려면 다음을 업데이트하세요.

아이콘 색상: rgba(33,50,94,0.86)
이미지/아이콘 배치: 왼쪽
제목 글꼴 스타일: U
제목 밑줄 색상: rgba(33,50,94,0.86)
제목 텍스트 색상: rgba(33,50,94,0.86)
제목 줄 높이: 2em
콘텐츠 너비: 100%

링크를 다운로드로 더욱 인식하기 쉽게 만들기 위해 "(다운로드)"라고 읽는 입력란에 추가 텍스트가 있는 광고 제목을 차지하는 설교 제목 동적 콘텐츠를 편집할 수 있습니다.

제목에 설교 제목과 메타 추가하기

마지막 단계로 프로젝트/포스트 제목 섹션이 연사 이름 및 설교 날짜와 함께 게시물 제목에 동적 콘텐츠를 사용하고 있는지 확인합시다. 이렇게 하려면 전체 너비 헤더 모듈 설정을 열고 다음을 업데이트하십시오.

제목: 설교 제목(사용자 정의 필드)
소제목 텍스트: 스피커(사용자 정의 필드)
(참고: 스피커 동적 콘텐츠의 경우 입력 전에 "by:"를 입력합니다.)
버튼 #1 링크 텍스트: 삭제
버튼 #2 링크 텍스트: 삭제
내용: 설교 날짜(사용자 정의 필드)

이제 디자인 탭으로 이동하여 사용 중인 맞춤 패딩을 꺼냅니다.

다음은 최종 결과입니다.

이제 앞으로 해야 할 일은 레이아웃을 Divi 라이브러리에 저장하여 향후 설교 포스트에 사용하기만 하면 됩니다. 또한 모든 프로젝트에서 사용할 수 있는 사용자 지정 필드 그룹이 있으므로 Visual Builder를 열지 않고도 백엔드에서 사용자 지정 필드 정보를 간단히 업데이트할 수 있습니다.

또한, 설교를 프로젝트로 저장하여 쉽게 필터링할 수 있는 포트폴리오를 만들어 설교를 전시할 수 있습니다!

마지막 생각들

이 튜토리얼이 동적 콘텐츠에 대해 더 많은 정보를 제공하고 고급 사용자 정의 필드 플러그인과 함께 사용하여 설교를 위한 강력한 레이아웃을 만드는 방법을 설명하는 데 도움이 되기를 바랍니다. 모든 것을 설정하는 데 시간이 걸릴 수 있지만 그만한 가치가 있습니다. 물론 이 동일한 프로세스를 사용하여 다양한 게시물 유형에 대한 모든 종류의 동적 콘텐츠를 만들 수 있습니다. 아래 의견에 질문이 있으면 알려주십시오. 귀하의 의견을 기다리겠습니다.

건배!