코드

코드 필드는 마스터 애드온으로 빌드하는 사용자 지정 위젯에 작은 코드 편집기를 넣습니다 위젯 빌더. 편집자는 결제 제공자가 나눠주는 HTML 배지와 같은 스니펫을 붙여넣고 필드는 줄 번호와 구문 강조 표시로 읽을 수 있도록 유지합니다. 산문으로 입력하지 않고 붙여넣어야 하는 마크업 필드입니다.

코드는 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.

Code 필드가 하는 일 #

• Elementor의 위젯 패널에 줄 번호와 강조 표시가 포함된 코드 편집기를 추가합니다.
• HTML 및 CSS 에서 JSON,SVG 및 PHP 에 이르기까지 선택한 언어로 하이라이트.
• 텍스트로 붙여넣은 모든 것을 저장합니다.
• 등의 토큰을 통해 인쇄합니다 {{ badge_markup }}, 허용된 HTML 렌더링 및 스크립트 태그가 삭제되도록 WordPress 자체 게시물 콘텐츠 필터로 정리되었습니다.
• 가 있습니다 raw 스니펫이 그대로 꺼져야 하는 드문 경우를 필터링합니다.

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

시작하기 전에 #

• Elementor가 설치되어 활성화된 WordPress입니다.
• Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
• 위젯 빌더에서 열린 위젯. 이 가이드의 예는 “신뢰 배지” 위젯입니다: 제목에 대한 텍스트 필드와 이름이 지정된 코드 필드입니다 badge_markup 그것은 제공자의 배지 HTML을 취합니다.

Code 필드를 추가하는 방법 #

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

코드 필드 옵션 설명 #

• 라벨: elementor 에서 편집기 위의 텍스트,예를 들어 “배지 마크업”.
• 이름: 필드의 고유 ID 및 토큰 이름. 예를 들어 문자,숫자 및 밑줄만 사용합니다 badge_markup.
• 설명: elementor 의 편집기 아래에 표시된 힌트. “지불 또는 리뷰 제공자가 제공하는 HTML 붙여 넣기.”와 같이 필드가 기대하는 것을 말하기 위해 사용하십시오
• 언어: 강조 모드. 목록에는 HTML,CSS, SASS,SCSS, JavaScript,JSON, LESS,Markdown, PHP,Python, MySQL,SQL, SVG,Text, Twig 및 Typescript 가 있습니다. HTML 이 기본값입니다.

언어는 강조표시만 변경합니다. 편집기가 붙여넣을 수 있는 내용을 제한하지 않으며,값이 인쇄되는 방식도 변경하지 않습니다.

패널에는 기본값이 없고 이 필드에 대한 높이 설정이 없으므로 편집기는 항상 표준 높이에서 비어 있는 상태로 열립니다. 켜기 라벨 블록 따라서 라벨은 편집기 옆을 쥐는 대신 편집기 위에 위치합니다.

공통 설정 아래에서도 찾을 수 있습니다 라벨 표시, 분리기 그리고 조건는, 다른 분야와 동일한 일을 합니다 떠납니다 선택기 비어 있음: 붙여넣은 조각은 CSS 값이 아닙니다.

템플릿에 코드를 인쇄하세요 #

스니펫이 떨어져야 할 곳에 토큰을 놓고 빈 필드가 포장지를 남기지 않도록 보호하십시오:

<div class="tb">
  <p class="tb-heading">{{ tb_heading }}</p>
  {% if badge_markup %}
  <div class="tb-badges">{{ badge_markup }}</div>
  {% endif %}
</div>

평소와 같이 CSS 패널에서 래퍼를 스타일링합니다. 스니펫 자체는 제공자가 준 클래스를 모두 가져오므로 간격과 정렬을 제어하기 위해 자신만의 래퍼 클래스를 추가할 가치가 있습니다.

토큰이 벗겨내는 것 #

값은 WordPress 가 게시물 콘텐츠에 사용하는 것과 동일한 필터를 거칩니다. 게시물에 허용되는 태그는 붙여 넣기 된 것으로 나옵니다: div, span, a, img 그리고 나머지는.스크립트 태그와 iframe 은 제거됩니다.

클라이언트에 위젯을 건네주기 전에 한 가지 세부 사항을 알 가치가 있습니다. 테스트에서 붙여 넣은 스크립트 태그가 제거되었지만 그 안에있는 JavaScript 는 일반 텍스트로 페이지에 남아 있었기 때문에 방문자는 위젯 중간에 코드 줄을보고 경고하지 않습니다. 초안 페이지에서 제공자의 스니펫을 한 번 테스트하고 편집자에게 마크 업 만 붙여 넣으라고 지시하십시오.

원시 필터 #

추가 raw 토큰에는 붙여넣은 내용, 포함된 스크립트 및 iframe이 정확히 인쇄됩니다:

{{ badge_markup|raw }}

우리의 테스트에서 그 버전은 iframe 을 유지하고 스크립트를 실행했습니다. 그것은 당신이 제어하는 임베드에 유용하고,다른 모든 곳에서 위험합니다. 왜냐하면 위젯을 편집 할 수있는 사람은 누구나 페이지에서 JavaScript 를 실행할 수 있기 때문입니다. 해당 페이지의 모든 편집자가 필터링되지 않은 HTML 로 이미 신뢰할 수있는 경우에만 사용하고,위젯 클라이언트가 터치하는 일반 토큰을 유지하십시오.

템플릿 엔진도 허용됩니다 trim, upper 그리고 lower 일반 텍스트의 짧은 부분에 때때로 유용한 토큰입니다.

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

페이지에 위젯을 추가하거나 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 필드는 레이블 아래에 어두운 편집기 블록으로 표시되며,옆면에 줄 번호가 표시됩니다. 클릭하자마자 스니펫과 미리보기 업데이트를 붙여넣습니다.

편집기는 작은 창이므로 그 안에 긴 조각이 스크롤됩니다. 붙여넣기에는 괜찮고 읽기에는 덜 좋습니다; 손으로 편집할 계획이라면 조각이 더 넓은 곳에 쓰십시오.

다음은 세 개의 붙여넣은 배지 블록으로 제작된 프런트 엔드의 완성된 위젯입니다:

일반적인 사용 사례 #

• 공급자가 HTML로 배포하는 결제, 검토 및 신뢰 배지입니다.
• 스키마 또는 구조화된 데이터 블록 편집기는 페이지당 붙여넣어야 합니다.
• 마크업으로 붙여진 작은 SVG 아이콘 또는 로고.
• 위젯의 스크립트를 읽는 짧은 CSS 또는 JSON 조각입니다.

코드 필드 작업을 위한 팁 #

• 설명에 무엇을 붙여넣어야 하는지 말해 보세요. 편집자는 빈 편집자에게서 필드가 무엇을 기대하는지 알 수 없습니다.
• 토큰을 보호하세요 {% if %}. 그렇지 않으면 사용하지 않은 필드가 페이지에 빈 래퍼를 남깁니다.
• 실제 공급자 스니펫을 한 번 테스트합니다. 그렇게 필터에서 살아남는 부품을 알아내는 거죠.
• 유지하다 raw 신뢰할 수 있는 편집자에게만 해당됩니다. 일반 토큰은 클라이언트 사이트의 안전한 기본값입니다.
• 마크업이 아닌 서식이 지정된 텍스트? 를 이용하세요 WYSIWYG 필드 그래서 편집자는 코드 대신 시각적 편집기를 얻습니다.

자주 묻는 질문 #

감싸는 #

콘텐츠 섹션에 코드 필드를 삭제하고, 언어를 선택하고, 붙여넣을 내용을 설명하는 설명을 작성하고, 토큰을 인쇄하세요 {% if %} 경비. 클라이언트 사이트를 위한 일반 토큰을 유지하고 도달하십시오 raw 신뢰할 수 있는 편집기로만 가능합니다. 마크업 대신 서식 있는 텍스트는 다음을 참조하세요 WYSIWYG 필드, 그리고 확인 가격 각 계획에 포함된 내용입니다.