위지윅

WYSIWYG 필드는 WordPress의 서식 있는 텍스트 편집기를 마스터 애드온으로 빌드하는 사용자 지정 위젯에 넣습니다 위젯 빌더니다. 편집자는 굵게,기울임꼴, 링크,목록 및 게시물을 작성할 때 사용하는 것과 동일한 도구 모음 인 미디어 추가 버튼을 얻습니다. 위젯은 포맷 된 HTML 을 수신하고 하나의 토큰으로 인쇄합니다. 일반 Textarea 가 포맷을 평평하게하는 모든 텍스트 영역에 대한 필드입니다.

WYSIWYG 는 무료 버전의 위젯 빌더에서 사용할 수 있는 필드 중 하나입니다. 무료 플러그인에는 제한된 위젯 빌더가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.

WYSIWYG 필드가 하는 일 #

• 시각적 및 코드 탭과 미디어 추가 버튼이 있는 Elementor의 위젯 패널에 서식 있는 텍스트 편집기를 추가합니다.
• 편집자가 HTML로 작성한 내용을 저장합니다.
• 등의 토큰을 통해 인쇄합니다 {{ member_bio }}는, 워드 프레스가 콘텐츠를 게시 필터링하는 방식을 필터링.
• 형식을 유지합니다: 단락, 굵게, 기울임꼴, 링크, 목록 및 제목이 모두 렌더링됩니다.
• 마크업을 포함할 수 있는 기본 값을 사용하므로 새 위젯에 작업된 예가 표시됩니다.

건축업자에게 새로운? 읽기 위젯 빌더 개요 일단 위젯을 열어놓고 돌아오세요.

시작하기 전에 #

• Elementor가 설치되어 활성화된 WordPress입니다.
• Elementor 용 마스터 애드온이 설치되고 활성화되었습니다. The 설치 가이드 설정을 다룹니다.
• 위젯 빌더에서 열린 위젯. 이 가이드의 예는 “팀 구성원” 위젯입니다: 이름과 역할에 대한 텍스트 필드, 그리고 이름이 지정된 WYSIWYG 필드입니다 member_bio 전기를 위해.

WYSIWYG 필드를 추가하는 방법 #

1. 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
2. 에 섹션을 추가합니다 콘텐츠 탭, 예를 들어 “회원”.
3. 유형 wysi 왼쪽의 필드 검색 상자에.
4. 드래그 위지윅 섹션으로. 필드의 연필을 클릭하여 설정을 엽니다.

WYSIWYG 필드 옵션 설명 #

• 라벨: elementor의 편집기 위에 있는 텍스트, 예를 들어 “Bio”입니다. 필드는 “콘텐츠”라는 레이블로 시작됩니다.
• 이름: 필드의 고유 ID 및 토큰 이름. 예를 들어 문자,숫자 및 밑줄만 사용합니다 member_bio.
• 설명: elementor 의 편집기 아래에 표시된 힌트. “두 개 또는 세 개의 문장. 굵게,링크 및 목록은 괜찮습니다.”와 같은 기대치를 설정하는 데 사용합니다
• 기본값: 시작 내용. 이것은 일반 텍스트 상자이므로 HTML 을 직접 입력하십시오. 예를 들어 a 가있는 단락 strong 태그와 링크.

라벨 블록 는 기본적으로 여기에 있으며,이는 당신이 원하는 것입니다: 편집기는 패널의 전체 너비가 필요합니다. 나가기 선택기 텍스트 블록이 CSS 값이 아니므로 비어 있습니다.

나머지 공통 설정은 다음을 포함한 다른 필드에서와 같이 작동합니다 조건 다른 필드가 설정된 경우에만 영역이 나타나야 하는 경우.

우리의 테스트에서 빌더 내부의 필드 카드는 작은 미리보기 편집기에서 원시 HTML 로 기본값을 보여주었습니다. 그것은 단지 빌더 자신의 미리보기 일뿐입니다. Elementor 는 포맷 된 텍스트와 동일한 기본값을 렌더링합니다.

템플릿에 있는 내용을 인쇄합니다 #

하나의 토큰은 전체 지역을 배치합니다. 스타일링 할 수있는 컨테이너에 감싸고 빈 필드가 길 잃은 래퍼를 남기지 않도록 보호하십시오:

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

편집기가 작성한 태그를 대상으로 CSS 패널에서 영역 스타일 지정:

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

추가하지 마십시오 raw WYSIWYG 토큰으로. plain 토큰은 이미 포맷을 렌더링하고, 그리고 raw 안전 필터만 제거합니다.

필터가 보관하고 떨어뜨리는 것 #

값은 WordPress 가 게시물 콘텐츠에 사용하는 것과 동일한 필터를 거칩니다. 테스트,제목, 단락, strong, em, 목록, 링크, 심지어 인라인까지 style 속성은 변경되지 않고 전달되었습니다. 안 iframe 가 제거되었고, 스크립트 태그는 실행되지 않고 제거되었다.

클라이언트에 위젯을 건네주기 전에 알아야 할 한 가지 세부 사항: 코드 탭을 통해 스크립트 태그가 붙여졌을 때 태그가 제거되었지만 그 안에있는 JavaScript 는 일반 텍스트로 페이지에 머물러 있었기 때문에 바이오 중간에 코드 줄이 나타났습니다. 아무것도 경고하지 않습니다. 편집자에게 텍스트를 붙여 넣으라고하고,삽입하지 말고,길 잃은 문자가 페이지에 나타나면 코드 탭을 확인하십시오.

Elementor에서 WYSIWYG 컨트롤을 사용하세요 #

페이지에 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 필드는 레이블 아래에 전체 편집기를 표시합니다: 미디어 추가,비주얼 및 코드 탭,문단 형식 드롭다운,굵게, 기울임꼴,밑줄, 목록,링크 버튼 및 전체 화면.

편집자는 게시물에 자신이 하는 방식을 작성합니다. 미리보기는 초점이 편집기를 떠나자마자 업데이트됩니다. The 코드 탭에는 붙여넣은 형식을 정리하는 데 유용한 기본 HTML이 표시됩니다.

다음은 앞쪽 끝에 완성된 카드로, 굵은 문구, 링크 및 목록이 모두 필드에서 나옵니다:

일반적인 사용 사례 #

• 팀원 약력 및 저자 상자.
• 목록이나 굵은 문구가 필요한 기능 또는 서비스 설명입니다.
• 인용문과 귀속 라인이 포함된 증언 기관.
• 카드, 상자 또는 패널 위젯의 긴 형식의 텍스트 영역입니다.

WYSIWYG 분야와 함께 일하기 위한 팁 #

• 실제 마크업으로 기본값을 지정하세요. 그런 다음 편집자는 지역에서 기대하는 콘텐츠 종류를 확인하고 서식 렌더링을 알 수 있습니다.
• 설명에서 길이를 설정합니다. “두 개 또는 세 개의 문장” 나중에 레이아웃 수정을 많이 저장합니다.
• 텍스트가 아닌 태그의 스타일을 지정하세요. 규칙 p, a 그리고 ul 래퍼 클래스 내부에서는 편집자가 작성하는 모든 내용을 일관되게 유지합니다.
• 토큰을 보호하세요 {% if %} 따라서 빈 필드는 페이지에 빈 래퍼를 남기지 않습니다.
• 일반 텍스트만? 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 텍스트 영역 필드 더 가볍습니다. 붙여넣은 마크업이나 삽입 조각의 경우 다음을 사용하십시오 코드 필드.

자주 묻는 질문 #

감싸는 #

WYSIWYG 필드를 콘텐츠 섹션에 삭제하고 명확한 라벨, 유용한 설명 및 실제 마크업이 포함된 기본 값을 제공한 다음 토큰을 안에 인쇄합니다 {% if %} CSS 패널에서 태그를 보호하고 스타일을 지정합니다. 편집자는 이미 알고 있는 도구 모음을 얻고 위젯은 깔끔한 형식의 HTML 을 얻습니다. 일반 텍스트의 경우 다음을 사용하십시오 텍스트 영역 필드, 붙여넣은 조각의 경우 코드 필드, 그리고 확인 가격 각 계획에 포함된 내용입니다.