구성원 디렉터리 템플릿을 사용하여 사용자 디렉터리를 만드는 방법

게시 됨: 2023-01-25

회원 디렉토리 템플릿을 사용하면 WordPress 사이트에 대량의 정보를 잘 정돈된 아름다운 방식으로 쉽게 표시할 수 있습니다.

사용자 목록 디렉토리의 기능은 온라인 데이터베이스(예: 직원, 네트워크의 비즈니스, 주제 전문가 또는 그 사이의 모든 항목)를 관리하는 것입니다. 회원 디렉토리(사용자 목록)는 방문자에게 탐색하기 쉬운 검색 및 필터 기능을 제공합니다. 디렉토리는 네트워킹 및 거래 기회를 만들고 사람들이 커뮤니티에 연결하고 참여할 수 있도록 합니다. 또한 많은 SEO 및 마케팅 이점도 있습니다!

이 자습서에서는 미리 만들어진 5개의 프로필 작성기 구성원 디렉터리 템플릿 중 하나를 사용하여 정교하고 아름답고 가장 중요한 유용한 구성원 디렉터리를 만듭니다. 사용자 친화적인 템플릿을 사용하면 코딩 지식이 필요하지 않습니다. 완벽한 사용자, 직원 또는 비즈니스 디렉토리를 만들기 위한 단계별 지침을 제공합니다.

회원 디렉토리 템플릿이 있는 사용자 목록 디렉토리 플러그인이 필요한 이유는 무엇입니까?

사이트에 대한 수동 정보 목록 또는 정보 테이블을 생성할 수 있지만 목록을 유용한 방식으로 표시하기는 어렵습니다. 목록이 길고 복잡한 경우 정렬 또는 필터링 기능을 추가해야 합니다. 그렇지 않으면 사용자가 필요한 것을 얻을 수 없습니다. 수동 목록을 최신 상태로 유지하는 것은 악몽입니다!

적절하게 통합된 사용자 목록 플러그인은 테이블 및 목록보다 유지 관리가 훨씬 쉬운 회원 디렉토리를 제공하지만 다른 방식으로도 서비스를 제공할 수 있습니다. 몇 번의 클릭만으로 웹 사이트의 여러 부분에 여러 회원 디렉토리를 만들 수 있습니다. 더 중요한 것은 Profile Builder 플러그인은 실제로 4가지 중요한 WordPress 기능의 조합입니다.

  • 사용자 양식을 통해 사용자로부터 필요한 정보를 얻는 기능,
  • 정보를 사용하여 사용자 와 해당 역할 및 기능을 관리합니다.
  • 사이트의 보안 을 손상시키지 않고 모든 작업을 수행합니다.
  • 여전히 회원 디렉토리를 통해 유용한 정보를 아름답게 표시 할 수 있습니다.

구성원 디렉터리 템플릿을 사용하여 구성원 디렉터리를 만드는 방법에 대한 지침

이 섹션에서는 Profile Builder의 구성원 디렉터리 템플릿 중 하나를 사용하여 사용자 목록을 만드는 단계별 예제를 수행합니다.

1단계: Profile Builder Pro 설치, 설정 및 등록

최신 WordPress 설치와 적합한 테마가 필요합니다. 이 튜토리얼에서는 Hello Elementor 테마를 사용합니다. 식물 판매자에게 전문 분야를 제공하도록 요청한 다음 해당 정보를 사용하여 전문 식물 판매자의 필터링된 목록을 표시합니다.

Profile Builder PRO 플러그인도 필요합니다. 필요에 가장 적합한 Profile Builder 계획을 선택하여 시작하십시오. 등록 및 결제 후 구매를 확인하는 이메일을 받게 됩니다.

Cozmoslabs 계정에 로그인합니다. 다운로드 탭 으로 이동합니다. Profile Builder Main 및 Pro 압축 파일을 컴퓨터에 다운로드합니다. 그런 다음 WordPress 대시보드의 플러그인 페이지로 이동합니다. 두 아카이브를 한 번에 하나씩 웹 사이트에 업로드하십시오. 매번 설치활성화 를 클릭하십시오.

WordPress 패널에 설정한 후 전체 기능에 액세스하려면 PRO 버전을 등록해야 합니다. 프로필 빌더 → 버전 등록 으로 이동하여 사이트를 등록하여 웹사이트와 프로필 빌더 PRO 간의 연결을 만듭니다. Cozmoslabs 계정 페이지의 라이선스 탭 아래에 나타나는 키 또는 SR(일련 번호)을 사용하세요. 등록에 도움이 필요한 경우 이 단계별 문서를 확인하세요.

이미지 1은 웹사이트와 Profile Builder PRO 회원 디렉토리 템플릿 간의 연결을 생성하기 위한 SR 키가 있는 Cozmoslabs 계정 페이지를 보여줍니다.
이미지 1: Cozmoslabs 계정에 로그인합니다. SR 키를 ​​사용하여 웹사이트와 Profile Builder Pro 간의 연결 생성

2단계: 등록 페이지 사용자 지정

다른 고급 플러그인(예: WooCommerce)과 마찬가지로 Profile Builder 플러그인은 새 페이지를 자동으로 생성할 수 있습니다. 양식 페이지 만들기 버튼을 클릭합니다. 프로필 편집, 로그인등록 페이지가 생성되고 WordPress 대시보드의 페이지 탭 으로 이동합니다. 새로운 프로필 편집, 로그인 및 등록 페이지는 웹사이트의 모양과 느낌에 완벽하게 통합됩니다. 확인하려면 마우스 오버에 나타나는 보기 버튼을 클릭하세요.

또는 프로필 작성기 페이지를 식별하는 가장 빠른 방법은 기본 프로필 작성기 페이지로 이동하여 큰 파란색 버튼인 "양식 페이지 보기" 를 클릭하는 것입니다. 페이지 → 모든 페이지 로 이동할 수도 있습니다.

이미지 2는 '양식 페이지 보기' 버튼을 클릭하여 회원 디렉토리 템플릿에서 사용할 사전 생성 프로필 빌더 페이지를 볼 수 있는 위치를 보여줍니다.
이미지 2: '양식 페이지 보기' 버튼을 클릭하여 모든 구성원 디렉토리 템플릿에서 사용되는 사전 생성 프로필 작성기 페이지를 확인합니다.

미리 만들어진 등록 페이지를 찾을 수 없거나 새 등록 페이지를 추가하려는 경우 새로 만들 수 있습니다. 양식 필드 페이지 에서 등록 페이지 단축 코드 를 복사하여 빈 페이지에 붙여넣기만 하면 됩니다.

또 다른 지름길은 Gutenberg 블록 메뉴에서 Profile Builder의 등록 블록 (또는 다른 사용자 양식)을 선택하는 것입니다.

이미지 3은 Gutenberg 블록 메뉴에서 Profile Builder 등록 양식을 선택하는 위치를 보여줍니다.
이미지 3: Gutenberg 블록 메뉴에서 Profile Builder 등록 양식 선택

참고: 등록 페이지등록 양식 자체를 모두 사용자 정의할 수 있음을 기억하십시오. 등록 페이지 에는 사용자가 등록하려는 내용을 이해할 수 있도록 모든 관련 정보가 포함되어야 합니다. 등록 페이지의 등록 양식 에는 비즈니스 모델 및 사용자 목록에 유용한 필드가 포함되어야 합니다.

다음 단계에서는 특별히 원하는 필드를 추가하고, 중복 필드를 제거하고, 무단 작업을 방지하기 위한 특수 값 필드 및 규칙을 추가하여 사전 생성된 등록 양식을 사용자 지정합니다.

양식 사용자 지정

대시보드 탭 프로필 빌더 → 양식 필드 로 이동합니다. 사용자 목록 추가 기능 을 활성화하라는 메시지가 나타납니다. 프롬프트를 놓친 경우 추가 기능 페이지로 이동하여 추가 기능 을 활성화할 수 있습니다. 첫 번째 양식을 사용자 지정하기 전에 사용자 목록, 다중 등록 양식다중 편집 프로필 양식 애드온 을 활성화하는 것이 좋습니다.

미리 생성된 기본 양식을 사용자 지정해 보겠습니다.

기본적으로 새 양식에는 이 단계에서 사용자 지정하는 모든 필드가 포함됩니다. Profile Builder 등록 양식 페이지로 이동하고 새로 추가를 클릭하여 새 양식이나 다른 양식을 만들 수 있습니다.

참고: 기본 양식은 이 페이지에 나타나지 않습니다. 이 원래 기본 양식을 편집하려면 프로필 빌더 양식 필드 페이지로 이동하십시오.

등록 양식에는 비즈니스 관리자로서 필요한 필드가 포함되어 있어야 합니다. 이 예에서는 회원을 위한 비즈니스 디렉토리를 생성하기 위해 등록자에게 플랜트 무역, 위치 및 연락처 정보의 전문 분야를 제공하도록 요청하는 양식을 변경하려고 합니다.

Profile Builder에는 각 등록 양식에 대한 몇 가지 기본 기본 필드가 포함되어 있습니다. 페이지를 아래로 스크롤하면 해당 항목이 표시됩니다. 제거하려는 필드 옆에 있는 삭제 버튼을 클릭합니다. 새 필드 추가를 시작하려면 옵션 메뉴 선택 필드에서 화살표를 클릭하고 선택할 수 있는 필드 목록의 팝업 메뉴를 스크롤합니다.

이미지 4는 '옵션 선택'을 클릭할 위치를 보여줍니다. 기본 기본 필드는 모든 구성원 디렉터리 템플릿에서 사용되는 양식 필드 선택기 드롭다운 메뉴의 왼쪽 열에 나타납니다.
이미지 4: '옵션 선택'을 클릭합니다. 기본 기본 필드는 양식 필드 선택기 드롭다운 메뉴의 왼쪽 열에 나타납니다.

필드 추가 버튼을 클릭하기 전에 원하는 필드를 선택하고 원하는 대로 사용자 정의하십시오. 이 예에서는 필드 제목 'Specialist Field' 를 추가하고 다중 선택 필드 유형을 선택 하고 몇 가지 옵션 (선인장, 관목, 나무 등)을 추가했습니다.

이미지 5는 새로 추가된 필드 제목 'Specialist Field'를 보여주며 Select 필드 유형을 선택하고 몇 가지 옵션을 추가합니다.
이미지 5: 필드 제목 'Specialist Field'를 추가하고 필드 유형 선택을 선택하고 몇 가지 옵션을 추가했습니다.

다음 단계에서는 회원 디렉토리 또는 사용자 목록에 이러한 모든 필드의 정보를 표시하여 웹 사이트 방문자에게 유용한 정보를 만드는 방법을 배웁니다.

3단계. WordPress 사용자 목록 만들기

2단계에서 언급했듯이 더 진행하기 전에 사용자 목록 추가 기능 을 활성화해야 합니다. 사용자 목록, 다중 등록 양식 및 다중 편집 프로필 양식 애드온을 활성화하는 것이 좋습니다.

이미지 6은 구성원 디렉터리 템플릿을 사용하기 위해 추가 기능을 활성화하는 위치를 보여줍니다.
이미지 6: 구성원 디렉터리 템플릿을 사용하려면 먼저 '사용자 목록' 추가 기능을 활성화해야 합니다.

WordPress 대시보드에서 Profile Builder 탭 아래의 사용자 목록 을 찾습니다. 그것을 클릭하십시오. 사용자 목록 페이지에서 짧은 코드 [wppb-list-users name="userlisting"] 가 있는 Userlisting이라는 기성품 게시된 마스터 기본 사용자 목록을 볼 수 있습니다.

사용자 목록을 처음 사용하는 경우 배우는 동안 기본 설정에 대한 편리한 참조 역할을 할 수 있으므로 이 목록을 편집하지 않는 것이 좋습니다. 또한 이 마스터 목록을 사용하여 필터를 추가하지 않고 웹사이트에 모든 정보를 표시하는 것에 주의하십시오.

상단의 신규 추가 버튼을 클릭하고 사용자 목록(회원 디렉토리)에 제목을 지정합니다.

참고: 새로 추가 버튼을 찾을 수 없는 경우 필요한 추가 기능(사용자 목록, 다중 등록 양식 및 다중 편집 프로필 양식 추가 기능)을 활성화했는지 확인하십시오.

이미지 7은 모든 구성원 디렉터리 템플릿에 공통된 필드를 사용하여 Plant Specialists, Select Contributors 및 Subscribers라는 제목으로 새 사용자 목록을 추가하는 방법을 보여줍니다.
이미지 7: Plant Specialists, selected Contributors, Subscribers라는 제목의 새 사용자 목록 추가

사용자 목록 설정 사용자 지정

이 예에서는 사용된 리스팅 제목 '공장 전문가' 를 사용했으며 표시할 역할을 '기여자' 및 '구독자'로 제한했습니다. 사용자 목록에 제목을 지정한 후 다른 기본 설정 으로 조금 아래로 스크롤합니다. 포함할 사용자 역할과 사용자 목록에 표시되는 방식을 선택할 수 있습니다.

예를 들어 로그인한 사람만 디렉토리를 볼 수 있도록 로그인하지 않은 사용자로부터 사용자 목록을 숨길 수 있습니다. 로그인한 사용자에게만 표시 를 선택해야 하는 경우 로그인한 모든 사용자 또는 고객, 구독자 등에게 표시할지 여부를 추가로 선택할 수 있는 추가 메뉴 옵션이 나타납니다. ” * ” 상자를 선택하여 로그인한 모든 사용자에게 표시되지만 중요한 정보가 모든 사용자에게 노출되는 것에 주의하십시오.

이미지 8은 모든 사용자 또는 선택한 사용자만 사용자 목록을 볼 수 있도록 옵션을 선택하는 위치를 보여줍니다.
이미지 8: 모든 사용자 또는 선택한 사용자에게만 사용자 목록을 표시하는 옵션 선택

패싯 메뉴 사용자 지정

페이지의 다음 섹션은 패싯 메뉴입니다. 패싯을 추가한다는 것은 사용자 목록 페이지에서 사용할 수 있는 필터를 선택하는 것을 의미합니다. 대부분의 사용자는 쇼핑 사이트에서 필터를 사용하는 데 매우 익숙합니다. 따라서 사용자가 사용하는 것과 동일한 유형의 필터를 추가하여 사용자가 사이트에서 필요한 정보를 얻는 데 도움을 줄 수 있습니다. 예를 들어 위치, 전문 분야, 연령 등으로 검색 결과를 필터링하도록 할 수 있습니다.

필터를 추가하여 회원을 식물 전문 분야별로 정렬할 것이므로 페이지에 표시하려는 레이블 로 "전문 분야"를 입력했습니다. 이 패싯 메뉴 예에서는 사람들이 여러 옵션을 동시에 선택할 수 있기를 원하기 때문에 패싯 유형 으로 다중 선택을 선택했습니다. Facet Meta 필드에서 드롭다운 메뉴를 사용하여 "Specialist In" 필드를 필터(Facet Meta)의 소스로 선택했습니다.

항목 추가 를 클릭합니다. 필요한 만큼 필터를 추가하려면 동일한 단계를 반복하십시오. 항목 추가 를 클릭하는 즉시 새 필터가 항목 추가 버튼 바로 아래의 필터(패싯) 요약에 나타납니다.

이미지 9는 모든 구성원 디렉터리 템플릿에서 사용하는 옵션에서 '다중 선택'을 사용하여 패싯 'Plant Specialty'를 레이블로 추가하는 방법을 보여줍니다.
이미지 9: '다중 선택'을 사용하여 'Plant Specialty' 패싯을 레이블로 추가

필터가 프런트 엔드에서 표시되는 방식은 다음과 같습니다.

프런트 엔드의 패싯 메뉴

검색 설정 맞춤화

다음으로 프로필 빌더가 검색 표시줄을 작동시키기 위해 정보를 찾는 방법을 선택합니다. 이 섹션은 동일한 페이지의 패싯 메뉴 섹션 바로 아래에 있습니다. 방문자가 검색창에서 키워드를 검색할 때 스캔할 정보를 체크하거나 선택 해제하여 검색 기능 을 선택합니다.

이미지 10은 새 사용자 목록에 대한 모든 구성원 디렉터리 템플릿에서 사용되는 '검색' 설정을 선택하는 위치를 보여줍니다.
이미지 10: 새 사용자 목록에 대한 '검색' 설정 선택

구성원 디렉터리 템플릿을 사용하여 디렉터리 만들기

마지막 섹션은 회원 디렉토리 템플릿을 선택하고 웹사이트의 프런트 엔드에서 목록을 표시할 형식과 방식을 사용자 지정하는 곳입니다. 아시다시피 웹 사이트에서 다양한 요소의 디자인과 형식을 표준화하는 데 몇 시간이 걸릴 수 있습니다. 그렇기 때문에 Profile Builder는 사용자 목록 페이지를 위해 미리 디자인된 5가지 테마를 제공합니다.

기본 테마와 4개의 다른 사용자 지정 테마가 있습니다. 각각은 각각 테이블, 그리드, 상자 또는 목록을 표시하는 가장 좋은 방법을 나타냅니다. 각각에 마우스를 가져가면 테마를 미리 볼 수 있는 버튼과 테마를 활성화 할 수 있는 버튼이 표시됩니다.

각 템플릿에는 웹 사이트에 정렬된 목록 으로 표시되는 회원 디렉토리(사용자 목록) 표시와 회원 목록의 각 항목에 대한 개별 페이지 가 포함되어 있습니다. 여기에서 각 구성원에 대한 자세한 정보를 표시합니다.

이미지 11은 구성원 디렉터리 템플릿의 테마를 미리 본 다음 활성화하는 방법을 보여줍니다.
이미지 11: 미리 보기 후 구성원 디렉터리 템플릿 테마 활성화

멤버십 디렉터리 템플릿은 훌륭한 시작점이지만 각 테마를 더 세부적으로 사용자 지정할 수 있습니다. 지금은 가장 잘 보이고 표시하려는 정보 유형에 가장 적합하다고 생각되는 항목을 선택하기만 하면 됩니다. 다른 테마로 쉽게 전환할 수 있으며 HTML 및 CSS가 자동으로 새로운 스타일로 업데이트됩니다.

기본 템플릿은 최소한의 정렬 기능만 표시하므로 이 예에서는 Tablesi 템플릿을 사용하여 눈에 띄는 필터 버튼과 디렉터리 검색 필드를 설명했습니다.

태그를 사용하여 표시할 사용자 정보를 사용자 지정합니다.

회원 디렉토리에 표시할 정보를 사용자 정의하려면 아래로 스크롤하여 "모든 사용자 목록 템플릿" 하위 제목을 확인하십시오. 다음과 같습니다.

이미지 12는 표시할 HTML 사용자 목록 정보의 요약을 보여줍니다.
이미지 12: 표시할 HTML 사용자 목록 정보 요약

참고: 모든 사용자 목록 템플릿 은 귀하의 웹사이트에 표시되는 회원 디렉토리 (사용자 목록)를 사용자 지정하기 위한 것입니다. 단일 사용자 목록 템플릿 은 사람들이 회원 디렉토리에서 "자세히" 버튼을 클릭할 때 개별 회원의 세부 정보 를 사용자 지정하기 위한 것입니다. 곧 다룰 것입니다!).

기본 표시 필드에 문제가 없다면 모든 것을 그대로 둘 수 있습니다. 사용자 디렉터리에 정보를 추가하거나 제거하려는 경우 오른쪽 표시 열의 오른쪽에 있는 각 목록 유형에 사용할 수 있는 프로필 작성기 태그를 모두 찾을 수 있습니다. 이 예에서는 이 이미지에서 볼 수 있는 적절한 줄을 삭제하여 구성원 디렉터리 템플릿에서 "게시물 수"를 제거했습니다.

이미지 13은 멤버 디렉터리 템플릿 기본 열에서 헤더 열 '게시물 수'가 어떻게 제거되었는지 보여줍니다.
이미지 13: 회원 디렉터리에서 기본 회원 디렉터리 템플릿 헤더 열 '게시물 수' 제거

마지막으로 방문자가 회원 디렉토리에서 "자세히" 또는 "보기" 버튼을 클릭할 때 개별 항목이 표시되는 방식을 사용자 지정하겠습니다. 단일 사용자 목록 템플릿 까지 아래로 스크롤합니다.

이 예에서는단일 사용자 템플릿 (개인의 프로필 목록)에 "Specialist In" 레이블이라는 또 다른 레이블을 추가합니다.오른쪽에서 'Specialist' 태그와 태그를 강조 표시하고 복사하여 왼쪽에 붙여넣기만 하면 됩니다.

이미지 14는 사용자 정의 생성 '전문가' 필드가 구성원 디렉터리 템플릿의 기본 '닉네임' 필드를 대체했음을 보여줍니다.
이미지 14: 사용자 정의 생성 '전문가' 필드가 있는 '전문가' 섹션 추가

재설정 기능으로 실수 수정

특히 사용자 지정을 많이 수행할 때 실수가 발생할 수 있습니다. 다행히 새로 시작하기 위해 기본 설정을 복원할 수 있습니다. 일반 사용자 목록 설정, 모든 사용자 목록 템플릿 또는 단일 사용자 목록 템플릿을 재설정하거나 모든 것을 재설정하여 처음부터 시작할 수 있습니다. 회원 디렉터리 템플릿 섹션까지 다시 스크롤하면 됩니다. 활성 테마 위로 마우스를 가져갑니다. 데이터 재설정 버튼을 클릭하고 재설정 할 설정을 선택합니다.

이미지 15는 구성원 디렉터리 템플릿에서 재설정하려는 데이터 유형을 선택하는 위치를 보여줍니다.
이미지 15: 사용한 구성원 디렉터리 템플릿에서 재설정하려는 데이터 유형을 선택합니다.

4단계: 구성원 디렉터리 템플릿 게시

사용자 정의에 만족하면 상단의 게시 버튼을 누르십시오. 이렇게 하면 사이트의 모든 페이지에 Gutenberg 블록을 통해 붙여넣거나 삽입할 수 있는 사용자 목록에 대한 단축 코드가 생성됩니다.

그리고: 짜잔! 이것은 웹사이트의 프런트엔드에서 귀하의 새 멤버십 디렉토리가 어떻게 생겼는지 보여줍니다. Tablesi 구성원 디렉터리 템플릿의 눈에 띄는 필터 단추에 유의하십시오. 모양이 마음에 들지 않으면 다른 템플릿을 선택하면 됩니다.

스크린샷 이미지 16은 회원 디렉터리 템플릿을 사용할 때 웹사이트에서 사용자 디렉터리 목록이 어떻게 보이는지 보여줍니다.
이미지 16: 회원 디렉터리 템플릿을 사용하여 웹사이트에 디렉터리가 표시되는 모습입니다.

다음 이미지는 회원 디렉터리 템플릿 중 하나를 사용할 때 개별 사용자 정보 페이지가 어떻게 보이는지 보여줍니다. 사이트 방문자는 디렉토리 목록에서 "보기" 또는 "더보기" 버튼을 클릭하여 이 페이지에 액세스할 수 있습니다.

이미지 17은 구성원 디렉터리 템플릿을 사용할 때 개별 사용자 정보 페이지가 어떻게 보이는지 보여줍니다.
이미지 17: 개별 사용자 정보 페이지의 모습입니다.

결론

Profile Builder Pro 플러그인을 사용하면 사이트에 실제 가치를 추가하는 방식으로 사용자를 매우 쉽게 나열할 수 있습니다. 사용자 등록 양식과 사용자 목록 표시용으로 사전 제작된 템플릿을 사용하면 시간과 비용을 절약할 수 있습니다. Profile Builder Pro는 비즈니스에 새로운 수익 창출 기회를 추가할 수 있는 5개의 사용하기 쉬운 회원 디렉토리 템플릿을 제공합니다.

단 몇 번의 클릭만으로 웹사이트를 새로운 수준으로 끌어올리십시오. 바로 여기에서 Profile Builder Pro를 다운로드하십시오!

프로필 빌더 프로

사용자 지정 필드를 사용하여 아름다운 프런트 엔드 등록 및 프로필 양식을 만듭니다. 올인원 사용자 관리 플러그인을 사용하여 구성원 디렉토리, 사용자 지정 리디렉션, 사용자 이메일 맞춤화 등을 설정합니다.

플러그인 받기

또는 무료 버전 다운로드

Profile Builder를 사용하여 귀하의 웹사이트에 대한 하나 이상의 회원 디렉토리 또는 비즈니스 디렉토리를 만드셨습니까? 다른 사람들이 웹사이트의 잠재력을 극대화할 수 있도록 도와주세요. 아래 의견 섹션에서 경험을 공유하십시오!