Select2 필드는 마스터 애드온으로 구축된 사용자 지정 위젯에 검색 가능한 드롭다운을 추가합니다 위젯 빌더. 편집자는 목록을 필터링하기 위해 입력하고 Show Multiple 을 켜면 한 번에 여러 옵션을 선택할 수 있습니다. 긴 옵션 목록이나 하나의 답변만으로는 충분하지 않은 태그 스타일 선택에 사용하십시오.
Select2 는 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.
Select2 필드가 수행하는 작업 #
- Elementor의 위젯 패널에 검색 상자가 포함된 드롭다운을 추가합니다.
- Show Multiple off 를 사용하면 편집기가 하나의 옵션을 선택하고 템플릿이 해당 옵션의 키를 가져옵니다.
- 다중 표시를 켜면 편집기는 이동식 태그로 표시되는 다양한 옵션을 선택하고 템플릿은 a로 인쇄하는 키 목록을 얻습니다
{% for %}루프. - 각 옵션에는 키와 레이블이 있습니다. 편집자는 레이블을 보고 HTML 은 항상 키를 받습니다.
아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫째. 검색이 없는 짧은 단일 선택 목록의 경우 일반 필드 선택 는 더 간단하다.
시작하기 전에 #
- Elementor가 설치되어 활성화된 WordPress입니다.
- Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
- 위젯 빌더에서 열린 위젯. 이 가이드의 예는 프로젝트 제목에 대한 텍스트 필드와 두 개의 Select2 필드가 있는 “포트폴리오 카드” 위젯입니다: 프로젝트 유형(하나의 선택) 및 프로젝트 태그(여러 선택).
Select2 필드를 추가하는 방법 #
- 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
- 에 콘텐츠 탭, 아직 없는 섹션 추가.
- 유형
select왼쪽의 필드 검색 상자에. 선택 하 고 Select2 올라와. - 드래그 선택2 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.
새 Select2 필드는 Show Multiple이 켜져 있고 세 가지 샘플 옵션이 있는 상태로 시작됩니다 (Select2 필드)value-1 에 value-3). 템플릿을 작성하기 전에 자신의 것으로 교체하십시오.
Select2 필드 옵션 설명 #
다음은 단일 선택을 위해 설정된 프로젝트 유형 필드입니다:
- 라벨 는 Elementor 의 컨트롤 옆에 있는 텍스트,예를 들어 “Project Type”입니다.
- 이름 는 필드의 고유 ID (문자,숫자 및 밑줄만) 입니다. 또한 템플릿에서 사용하는 토큰이기도 합니다
project_type된다{{project_type}}. - 설명 elementor 에서 컨트롤 아래에 나타납니다. “하나의 카테고리를 선택하세요.”와 같은 짧은 힌트에 사용합니다
- 여러 개를 표시하시겠습니까? 하나의 픽 (아니오) 과 많은 픽 (예) 사이를 전환합니다. 그러면 템플릿이 받는 내용이 변경되므로 HTML 을 작성하기 전에 결정하십시오.
- 옵션 는 선택 항목의 목록입니다. 왼쪽 상자는 템플릿이 얻는 키입니다 (
branding,web). 오른쪽 상자는 편집자가 보는 라벨 (브랜딩,웹 디자인) 입니다. 더하기 아이콘을 사용하여 행을 추가하고 빨간색 십자가를 사용하여 행을 제거합니다. - 기본값 위젯이 페이지에 처음 추가될 때 선택되는 항목입니다. 싱글 모드에서는 일반 드롭다운입니다. 비워 두면 첫 번째 옵션이 선택됩니다.
Project Tags 는 Show Multiple 을 켠 상태에서 동일한 옵션을 사용합니다. 기본값 상자는 태그 선택기가 되므로 두 개 이상의 옵션을 미리 선택할 수 있습니다. 비워 두면 첫 번째 옵션이 미리 선택됩니다.
기본 값 목록에 옵션을 편집한 후에도 이전 샘플 옵션이 계속 표시되면 을 클릭합니다 설정 저장 그리고 다시 밭을 열어라.
기본값 아래에서는 대부분의 필드에서 공유되는 공통 설정을 찾을 수 있습니다: 라벨 표시, 라벨 차단, 반응 제어, 동적 지원, 프런트엔드 사용 가능, 구분 기호, 조건 및 제어 클래스. 레이블 블록은 제어가 태그의 전체 패널 너비를 가져오기 때문에 여러 필드에 대해 켤 가치가 있습니다.
템플릿에서 Select2 값을 사용합니다 #
값을 인쇄하는 방법은 Show Multiple에 따라 다릅니다.
단일 모드: 키를 인쇄합니다 #
단일 Select2는 다른 토큰과 마찬가지로 작동합니다. {{project_type}} 선택한 키를 인쇄하므로 텍스트로 사용하거나 CSS 클래스를 빌드할 수 있습니다:
<article class="portfolio-card type-{{project_type}}">
<span class="card-type">{{project_type}}</span>브랜딩을 선택하면 렌더링됩니다 type-branding 그리고 branding. 당신은 또한 그것을 비교할 수 있습니다: {% if project_type == 'web' %}...{% endif %}.
다중 모드: 키를 반복합니다 #
여러 개의 Select2에는 목록이 있습니다 {{project_tags}} 자체 인쇄에 아무것도. 대신 그것을 통해 루프:
<ul class="card-tags">
{% for tag in project_tags %}
<li class="card-tag">{{ tag }}</li>
{% endfor %}
</ul>루프는 선택한 각 옵션에 대해 편집자가 선택한 순서대로 한 번씩 실행됩니다. 그 안에, {{ tag }} 는 하나의 키이며 다음과 같은 필터가 있습니다 {{ tag|upper }} 일도. 그만큼 나뭇가지 구문 가이드 템플릿 엔진이 지원하는 모든 것을 나열합니다.
코드 편집기 옆에 있는 문서 패널에는 모든 필드에 대한 토큰이 나열됩니다. 복사하기 {{project_tags}} 단일 필드에는 괜찮지만 다중 필드에는 여전히 루프가 필요합니다.
클릭 설정 저장 템플릿이 완료되면.
Elementor 에서 Select2 컨트롤을 사용합니다 #
페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 두 Select2 컨트롤 모두 기본값이 이미 선택된 상태로 콘텐츠 탭에 나타납니다.
다중 컨트롤에서 태그 뒤의 더하기 버튼이나 빈 공간을 클릭하고 입력을 시작합니다. 입력하면 목록이 좁아지고 Enter 는 강조 표시된 옵션을 추가합니다. 각 태그에는 작은 십자가가있어 제거됩니다.
단일 컨트롤은 자체 검색 상자가 있는 드롭다운을 엽니다. 옵션을 선택하거나 현재 값 옆에 있는 십자가를 사용하여 지웁니다.
캔버스는 바로 업데이트됩니다. 패널에 라벨 (웹 디자인,소셜 미디어) 이 표시되고 카드는 키를 인쇄합니다 (웹 디자인,소셜 미디어)web, social):
페이지에 라벨 텍스트가 필요한 경우 키를 표시할 수 있을 만큼 읽을 수 있도록 만들거나 템플릿에 매핑하십시오:
{% for tag in project_tags %}
<li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}일반적인 사용 사례 #
- 포트폴리오, 사례 연구 및 팀 카드에 대한 태그 또는 서비스.
- 와 같은 CSS 클래스를 추가하는 카테고리 또는 스타일 선택기입니다
type-web. - 검색을 통해 스크롤이 저장되는 국가, 산업 또는 아이콘 세트와 같은 긴 목록입니다.
- 가격 또는 제품 카드의 기능 목록을 목록 항목으로 반복합니다.
Select2 필드와 함께 작업하기 위한 팁 #
- Show Multiple 을 먼저 결정하세요. 나중에 바꾸면 바뀐다는 뜻입니다
{{field}}루프로, 또는 그 반대로 둥글게. - 공백 없이 소문자로 키를 씁니다(Write keys in 소문자)
social,web). 그들은 클래스 이름과 비교에 결국. - 위젯 사용 후 키 이름 바꾸기 하지 마세요. 이전 키를 이미 저장한 페이지는 새 키와 일치하지 않습니다.
- 예를 들어 키로 출력을 스타일링합니다
.type-web .card-type { ... }. - 드롭다운 대신 몇 가지 아이콘 버튼을 사용하세요 필드 선택.
자주 묻는 질문 #
Select2 필드는 무료인가요?
아니요. Select2는 Widget Builder의 Pro 필드 중 하나이므로 Master Addons Pro를 위젯에 추가하려면 먼저 활성화해야 합니다.
여러 Select2에서 선택한 모든 값을 어떻게 표시합니까?
필드 위로 루프: {% for tag in project_tags %}{{ tag }}{% endfor %}, 어디 project_tags 는 필드의 이름입니다. 루프는 선택한 옵션 당 한 번 실행됩니다.
Select2 토큰이 아무것도 인쇄하지 않는 이유는 무엇입니까?
Show Multiple is 아마도 on. 다중 필드는 리스트를 보유하고,그리고 {{field_name}} 목록을 인쇄할 수 없습니다. a 를 사용합니다 {% for %} 한 가지 선택으로 충분하면 반복하거나 다수 표시 끄기를 켭니다.
템플릿에 옵션 레이블이나 키가 있나요?
열쇠. 옵션인 경우 web 웹 디자인 레이블이 있고 템플릿이 가져옵니다 web. 라벨을 인쇄하려면 읽을 수 있는 키를 사용하거나 매핑하십시오 {% if %}.
Select 와 Select2 의 차이점은 무엇입니까?
둘 다 키와 레이블 옵션을 사용합니다. Select2 는 검색 상자를 추가하고 Show Multiple 로 여러 픽을 한 번에 보유할 수 있습니다. 짧은 단일 선택 목록에는 Select 를 사용합니다.
감싸는 #
Select2 필드를 추가하고 키와 레이블을 설정하고 HTML을 작성하기 전에 하나의 선택과 많은 선택 중에서 선택하십시오. 단일 값 인쇄 {{field_name}} 그리고 여러 개를 반복합니다 {% for %}. 선택 목록이 아닌 필드 그룹을 반복하려면 다음을 참조하세요 리피터 필드, 그리고 확인 가격 각 계획에 포함된 내용입니다.
