선택2

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 2 필드를 선택합니다 는 일반 셀렉트의 더 큰 형제: 입력할 수 있는 드롭다운으로,사용자가 한 번에 여러 옵션을 선택할 수 있는 선택적 다중 모드입니다. 마스터 애드온 내부 위젯 빌더는, 네이티브 드롭다운이 나쁘게 처리하는 경우를 다룹니다 검색이 필요한 긴 옵션 목록 태그 스타일 선택 한 가지 답변으로는 충분하지 않습니다.

일반 선택과 마찬가지로 Select2 옵션 값이 바로 연결됩니다 조건 다른 컨트롤을 표시하거나 숨기기 위해 나뭇가지 구문 템플릿 엔진 위한 {% if %} 마크업을 확인합니다. 두 가이드 모두 설정과 제한 사항을 다룹니다.

단일 선택 모드는 다음과 동일하게 작동합니다 필드 선택: 템플릿이 하나의 키를 받습니다. Multiple 을 켜면 값이 키 배열이 되어 템플릿이 이를 읽는 방법이 변경됩니다. 그 스위치가 이 문서의 핵심입니다.

Select2 필드가 수행하는 작업 #

• 검색 가능한 드롭다운을 렌더링합니다 elementor 패널에서; 사용자는 옵션 목록을 필터링하기 위해 입력합니다.
• 열쇠 하나를 가지고 있습니다 단일 모드에서 정의된 옵션 중에서 일반 선택과 동일한 계약입니다.
• 키 배열을 보유합니다 다중 옵션이 켜져 있으면 컨트롤에 이동식 태그로 표시됩니다.
• 토큰이나 루프를 통해 템플릿을 공급합니다, 해당 모드에 따라.
• 키와 레이블 쌍을 사용합니다 정의하므로 템플릿은 항상 안정적인 슬러그와 함께 작동합니다.

위젯을 처음 구축했다면 다음부터 시작하세요 위젯 빌더 개요 첫번째.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• 위젯 빌더 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 편집자가 하나 이상의 범주로 각 인스턴스에 태그를 지정하는 포트폴리오 카드 위젯입니다: 브랜딩,웹, 인쇄,모션.

Select2 필드를 추가하는 방법 #

찾기 선택2 위젯 빌더 편집기 왼쪽에 있는 필드 패널에서. 다른 선택 필드와 함께 있습니다.

아래의 섹션으로 드래그하세요 콘텐츠 탭. 일단 착지하면 필드의 옵션이 왼쪽에 열리고 첫 번째 결정은이 컨트롤이 하나의 값을 선택하는지 아니면 많은 값을 선택하는지입니다. 템플릿을 터치하기 전에 두 모드가 서로 다른 마크업을 원하기 때문에이를 정하십시오.

Select2 필드 옵션 설명 #

• 라벨: elementor의 컨트롤 옆에 표시된 텍스트, 예를 들어 “Categories”.
• 이름: 예를 들어 필드, 문자, 숫자 및 밑줄에 대한 고유 식별자입니다 selected_tags.
• 옵션: 키와 레이블 쌍으로 선택. 키는 템플릿이 보는 슬러그입니다 (branding, web); 라벨은 드롭다운의 단어입니다.
• 여러: 모드 스위치. 끄기,사용자는 하나의 옵션을 선택합니다. 켜짐,컨트롤은 여러 픽을 받아들이고 값은 키의 배열이 됩니다.
• 기본값: 위젯이 페이지에 처음 삭제될 때 선택된 키입니다.
• 설명, 라벨 표시, 분리기: 표준 디스플레이 설정과 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하기 위한 조건이 더 아래에 있습니다.

Select2를 템플릿에 연결하세요 #

싱글 모드에서는 Select 와 똑같이 취급합니다. 토큰은 선택한 키를 인쇄하므로 수정자 클래스와 비교는 평소와 같이 작동합니다:

<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}

다중 모드에서 값은 an입니다 키 배열, 그리고 평원 {{ selected_tags }} 유용한 것을 인쇄하지 않습니다. template has to loop:

<div class="card-tags">
  {% for tag in selected_tags %}
  <span class="tag tag--{{ tag }}">{{ tag }}</span>
  {% endfor %}
</div>

• selected_tags 는 밭의 이름.
• tag 는 당신이 발명한 루프 변수이다; 무엇이든 부르세요.
• 사이의 블록 {% for %} 그리고 {% endfor %} 선택한 키당 선택한 순서대로 한 번씩 인쇄됩니다.

모드 불일치를 조심하세요. 베어 토큰으로 작성된 템플릿은 Multiple;을 활성화한 후에도 계속 “작동”합니다. 이는 단지 빈 자리,오류 없음,콘솔에 아무것도 렌더링하지 않습니다. Select2 값이 사라지는 것처럼 보이면 Multiple 이 켜져 있는지 확인하고 템플릿은 여전히 단일 키를 기대합니다. 그 불일치는 대개 원인입니다.

Elementor 에서 Select2 컨트롤을 사용합니다 #

Elementor 의 페이지에 사용자 정의 위젯을 추가하고 페이지가 이미 열려 있으면 편집기를 다시로드합니다. 컨트롤은 검색 상자가있는 드롭 다운으로 렌더링됩니다. 타이핑을 시작하고 이동하면서 목록을 필터링하십시오.

Multiple on 을 사용하면 각 픽은 컨트롤 내부의 작은 태그가 되며 x 로 제거할 수 있습니다. 추가하거나 제거할 때마다 루프가 다시 렌더링되므로 카드의 배지가 컨트롤을 실시간으로 추적합니다.

일반적인 사용 사례 #

• 카테고리 및 태그 피커 카드 및 포트폴리오 항목에 배지 행을 렌더링합니다.
• 긴 옵션 목록 검색이 스크롤보다 나은 국가, 산업 또는 글꼴 페어링 선택과 같은 것입니다.
• 기능 체크리스트 선택한 각 키는 가격 열에서 한 줄을 인쇄합니다.
• 필터바 위젯 선택한 키가 JS 필터 스크립트의 데이터 속성이 됩니다.
• 소셜 프로필 선택기 각 키는 루프의 아이콘과 링크에 매핑됩니다.

Select2 필드와 함께 작업하기 위한 팁 #

• 템플릿을 작성하기 전에 모드를 결정하십시오. 단일 모드는 토큰을 원하고, 다중 모드는 루프를 원합니다; 그들은 상호 교환이 불가능합니다.
• 절대 다중 값을 직접 인쇄하지 마십시오. {{ selected_tags }} 배열에서는 유용한 것이 아무것도 생성되지 않습니다; 오직 {% for %} 루프가 키에 도달합니다.
• 열쇠는 민달팽이를 유지하고 라벨은 단어를 유지합니다. 루프는 키를 인쇄하므로 배지 텍스트가 사람에게 친숙해야 하는 경우 키를 표시할 수 있도록 만들거나 매핑하십시오 {% if %} 루프 내부의 블록.
• 빈 다중 선택 루프는 0번 반복됩니다. 래퍼 div는 여전히 렌더링되므로 래핑하세요 {% if selected_tags %} 빈 픽이 마크업을 남기지 않아야 하는 경우.
• 짧은 목록에는 일반 선택을 사용하세요. 서너 개의 고정 된 변종은 검색이 필요하지 않습니다; Select2 는 더 긴 목록과 멀티 픽에서 그 자리를 얻습니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 Select2 필드는 네이티브 드롭다운이 할 수 없는 두 가지 작업을 다룹니다: 긴 목록을 검색하고 한 번에 여러 값을 선택합니다. 단일 모드 계약을 머릿속에 유지하고 토큰을 통해 하나의 키를 누른 다음 a로 전환합니다 {% for %} 다중이 진행되는 순간을 반복합니다. 드롭다운이 아닌 아이콘 버튼 선택에 대해서는 다음을 참조하세요 필드 선택. 나머지 부분을 탐색하세요 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.