WordPress에서 웹 구성 요소를 사용하면 생각보다 쉽습니다.-CSS 튜토리얼-php.cn

WordPress에서 웹 구성 요소를 사용하면 생각보다 쉽습니다.

이제 웹 구성 요소와 대화식 웹 구성 요소가 생각보다 사용하기가 더 쉽다는 것을 알게되었으므로 컨텐츠 관리 시스템, 즉 WordPress에 추가하는 방법을 살펴 보겠습니다.

그것들을 추가하는 세 가지 주요 방법이 있습니다. 먼저, 웹 사이트를 수동으로 입력하여 기본적으로 다른 HTML을 배치 할 수있는 모든 곳에 가젯이나 텍스트 블록에 직접 넣습니다. 둘째, 테마 파일에서 테마 출력으로 추가 할 수 있습니다. 마지막으로 커스텀 블록의 출력으로 추가 할 수 있습니다.

기사 시리즈

웹 구성 요소 파일로드

웹 구성 요소 추가 방법에 관계없이 다음을 보장해야합니다.

<li> 사용자 정의 요소에 대한 템플릿이 필요한 경우 사용할 수 있어야합니다. <li> 필요한 JavaScript는 올바르게 등록됩니다. <li> 우리가 필요한 캡슐화되지 않은 스타일이 등록됩니다.

대화식 웹 구성 요소에 대한 이전 기사에서 추가합니다.<zombie-profile></zombie-profile> 웹 구성 요소. Codepen의 코드를 확인하십시오.

첫 번째 요점을 봅시다. 일단 템플릿이 있으면 WordPress 테마의 Footer.php 파일에 추가하기 쉽지만 테마에 직접 추가하는 대신 wp_footer 에 연결하여 구성 요소의로드가 FUTER.PHP 파일과 독립적이므로 테마가 wp_footer 사용한다고 가정하면 대부분의 테마 가이 작업을 수행합니다. 시도 할 때 테마에 템플릿이 나타나지 않으면 테마의 wp_footer 가 buter.php 템플릿 파일에서 호출되는지를 두 번 확인하십시오.

  php 함수 diy_ezwebcomp_footer () {?>  php}
add_action ( 'wp_footer', 'diy_ezwebcomp_footer');

로그인 후 복사

다음은 구성 요소를 등록하는 JavaScript입니다. wp_footer 를 통해 JavaScript를 추가 할 수 있지만 등록은 JavaScript를 WordPress에 연결하는 권장 방법입니다. ezwebcomp.js (이 이름은 완전히 임의적 임)라는 파일에 JavaScript를 넣고 테마의 JavaScript 디렉토리에 파일을 배치하고 (functions.php 파일) 등록하십시오.

 wp_enqueue_script ( 'ezwebcomp_js', get_template_directory_uri (). '/js/ezwebcomp.js', '', '1.0', true);

로그인 후 복사

마지막 매개 변수가 true 로 설정되어 있는지 확인해야합니다. 즉, 엔딩 바디 태그 전에 JavaScript를로드합니다. 헤드에로드하면 HTML 템플릿을 찾을 수 없으며 매우 화가 나게됩니다 (많은 오류를 던지십시오).

웹 구성 요소를 완전히 캡슐화 할 수 있다면 다음 단계를 건너 뛸 수 있습니다. 그러나 (나와 같은)이 작업을 수행 할 수없는 경우 웹 구성 요소를 사용하는 곳 어디에서나 사용할 수 있도록 캡슐화되지 않은 스타일을 등록해야합니다. (JavaScript와 유사하게 바닥 글에 직접 추가 할 수 있지만 스타일을 등록하는 것이 권장되는 방법입니다). 그래서 우리는 CSS 파일을 등록합니다.

 wp_enqueue_style ( 'ezwebcomp_style', get_template_directory_uri (). '/ezwebcomp.css', '', '1.0', 'screen');

로그인 후 복사

이것은 너무 어렵지 않습니까? 관리자를 제외한 사용자가 사용할 수 있도록 계획하지 않으면 사용하려는 어느 곳에서나 추가 할 수 있습니다. 그러나 그것이 항상 그런 것은 아닙니다. 우리는 계속 발전 할 것입니다!

웹 구성 요소를 걸러 내지 마십시오

WordPress는 사용자가 유효한 HTML을 생성하고 Eddie 삼촌 에디 아에서 Shady AL에서 얻은 "재미있는"이미지를 편집자 (모든 방문자를 해킹하기위한 스크립트 포함)를 붙여 넣지 못하게하는 몇 가지 방법이 있습니다.

따라서 웹 구성 요소를 블록 또는 위젯에 직접 추가 할 때는 WordPress에서 내장 된 코드 필터링에주의해야합니다. 그것을 완전히 비활성화하면 Eddie 삼촌 (및 Shady Al)이 원하는대로 할 수 있지만 웹 구성 요소가 게이트를 통과 할 수 있도록 수정할 수 있습니다 (운 좋게도 Eddie 삼촌을 차단).

먼저 wp_kses_allowed 필터를 사용하여 필터링되지 않아야 할 요소 목록에 웹 구성 요소를 추가 할 수 있습니다. 그것은 우리가 컴포넌트를 화이트리스트에 올리는 것처럼, 필터 함수에 전달 된 허용 태그 배열에 추가하여 수행합니다.

 함수 add_diy_ezwebcomp_to_kess_allowed ($ the_allowed_tags) {
  $ the_allowed_tags [ 'zombie-profile'] = array ();
}
add_filter ( 'wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kes_allowed');

로그인 후 복사

우리<zombie-profile></zombie-profile> WordPress는 요소뿐만 아니라 속성을 필터링하기 때문에 구성 요소는 빈 배열을 추가합니다. 이는 또 다른 문제를 가져옵니다. slot 속성은 기본적으로 허용되지 않습니다. 따라서 사용해야 할 모든 요소에 대해 명시 적으로 허용해야하며, 따라서 사용자는이를 모든 요소에 추가하기로 결정할 수 있습니다. (잠깐만, 각 사용자와 6 번 검토하더라도 이러한 요소 목록도 다릅니다 ... 누가 알겠습니까?) 아래에서, 나는 slot true 로 설정했습니다.<span></span> ,,,<img alt="WordPress에서 웹 구성 요소를 사용하면 생각보다 쉽습니다." > 그리고<ul></ul> , 나는이 세 가지 요소를 넣었다<zombie-profile></zombie-profile> 구성 요소 슬롯.

 함수 add_diy_ezwebcomp_to_kess_allowed ($ the_allowed_tags) {
  $ the_allowed_tags [ 'zombie-profile'] = array ();
  $ the_allowed_tags [ 'span'] [ 'slot'] = true;
  $ the_allowed_tags [ 'ul'] [ 'slot'] = true;
  $ the_allowed_tags [ 'img'] [ 'slot'] = true;
  $ the_allowed_tags를 반환합니다.
}
add_filter ( 'wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kes_allowed');

로그인 후 복사

또한 다음 코드와 유사한 메소드를 사용하여 모든 허용 요소에서 slot 속성을 활성화 할 수도 있습니다.

 함수 add_diy_ezwebcomp_to_kess_allowed ($ the_allowed_tags) {
  $ the_allowed_tags [ 'zombie-profile'] = array ();
  foreach ($ the_allowed_tags as & $ tag) {
    $ tag [ '슬롯'] = true;
  }
  $ the_allowed_tags를 반환합니다.
}
add_filter ( 'wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kes_allowed');

로그인 후 복사

불행히도, 또 다른 가능한 문제가 있습니다. 슬롯의 모든 요소가 인라인/문구 요소 인 경우이 문제가 없을 수도 있지만 웹 구성 요소에 넣을 블록 레벨 요소가있는 경우 코드 편집기의 블록 파서와 충돌 할 수 있습니다. 당신은 내가하는 것보다 권투에 더 좋을지 모르지만 나는 항상 잃습니다.

내가 완전히 설명 할 수없는 이유로, 클라이언트 파서는 웹 구성 요소에 하나를 넣는 경우 인라인 요소 만 포함해야한다고 가정합니다.

또는

 또는 마지막 인라인/프레이즈 요소 후에 엔딩 웹 구성 요소 태그를 움직이는 다른 블록 레벨 요소. 더 나쁜 것은 WordPress Developer Manual의 메모에 따르면 현재 "클라이언트 파서를 대체 할 수 없습니다". 이것은 실망스럽고 웹 편집자가 이것을 배우도록해야하지만 해결 방법이 있습니다. 블록 편집기의 웹 구성 요소를 맞춤형 HTML 블록에 직접 배치하면 클라이언트 파서는 우리가 울부 짖고 보도에서 앞뒤로 흔들리고 코딩 할 수있는 능력에 의문을 제기하지 않을 것입니다.
 테마에 구성 요소를 추가하십시오
 HTML 블록 외부에서 업데이트되지 않는 한 테마 파일에서 아름다운 웹 구성 요소를 출력하는 것이 매우 쉽습니다. 우리는 다른 컨텍스트에서 추가하는 방식에 추가하고 템플릿, 스크립트 및 스타일이 설치되어 있다고 가정하면 상황이 작동합니다.
 그러나 웹 구성 요소에서 WordPress 게시물 또는 사용자 정의 게시물 유형의 콘텐츠를 출력한다고 가정 해 봅시다. 알다시피, 게시물을 작성 하고이 게시물은 구성 요소의 내용입니다. 이를 통해 WordPress 편집기를 사용하여 출력 할 수 있습니다.<zombie-profile></zombie-profile> 요소 아카이브. WordPress 편집기에 이미 그 중 하나를 입력했기 때문에 좋습니다.<zombie-profile></zombie-profile> 구성 요소 컨텐츠에 필요한 대부분의 UI :

<li> 게시물 제목은 좀비의 이름으로 사용할 수 있습니다.
<li> 게시물 컨텐츠의 정기 단락 블록은 좀비 진술에 사용될 수 있습니다.
<li> 추천 사진은 좀비의 프로필 사진에 사용할 수 있습니다.

 그것은 대부분의 콘텐츠입니다! 그러나 우리는 여전히 좀비 나이, 감염 날짜 및 관심 분야가 필요합니다. WordPress의 내장 사용자 정의 필드 기능을 사용하여 이러한 필드를 만들 것입니다.
 우리는 각 게시물 (예 : content.php)을 인쇄하는 프로세스의 템플릿 부분을 사용하여 웹 구성 요소를 출력합니다. 먼저, 우리는 열린 것을 인쇄 할 것입니다<zombie-profile></zombie-profile> 태그, 그런 다음 썸네일을 게시하십시오 (존재하는 경우).
<zombie-profile>  php // 포스트 기능이있는 사진이 있다면 ...
    if (has_post_thumbnail ()) {
      $ src = wp_get_attachment_image_url (get_post_thumbnail_id ()); <img  slot="profile-image" src="<?php%20echo%20%24src;%20?>" alt="WordPress에서 웹 구성 요소를 사용하면 생각보다 쉽습니다." >  php}
  ??></zombie-profile>
로그인 후 복사
 다음으로, 우리는 이름에 사용 된 제목을 인쇄합니다.
  php // 게시물 제목 필드가 존재하는 경우 ...
  if (get_the_title ()) {??>  php echo get_the_title ();
   php}
?>
로그인 후 복사
 내 코드에서, 나는이 필드들이 두 가지 이유로 인쇄하기 전에 존재하는지 여부를 테스트했습니다.

<li> 대부분의 경우 빈 필드 주변에 레이블과 요소를 숨기는 것이 좋은 프로그래밍 연습입니다.
<li> 빈 이름을 출력하게됩니다<span></span> (예를 들어, `），那么该字段将在最终的个人资料中显示为空，而不是使用我们Web组件内置的默认文本、图像等。（例如，如果你希望文本字段在没有内容时为空，你可以在自定义字段中输入空格，或者跳过代码中的).

 다음으로, 우리는 사용자 정의 필드를 가져 와서 그들이 속한 슬롯에 배치 할 것입니다. 다시 말하지만, 이것은 게시물 컨텐츠를 출력하기위한 주제 템플릿으로 이동합니다.
  php // Zombie age $ temp = get_post_meta (the_id (), 'age', true);
  if ($ temp) {??>  php echo $ temp;
     php}
  // 좀비 감염 날짜 $ temp = get_post_meta (the_id (), '감염 날짜', true);
  if ($ temp) {??>  php echo $ temp;
     php}
  // Zombie 관심 $ temp = get_post_meta (the_id (), 'mectoves', true);
  if ($ temp) {??>
로그인 후 복사
  php echo $ temp;
  php}?>
 WordPress Custom Fields를 사용하는 단점 중 하나는 특별한 형식을 수행 할 수 없다는 것입니다. 이 컨텐츠를 채우는 비 기술적 웹 편집기 목록의 각 관심 항목에 대해 작성해야합니다.<li> 태그 (예 : 20. ). (고급 사용자 정의 필드, 포드 또는 이와 유사한 플러그인과 같은보다 강력한 커스텀 필드 플러그인을 사용 하여이 인터페이스 제한을 해결할 수 있습니다.) 마지막으로 좀비 문과 엔딩을 추가합니다.<zombie-profile></zombie-profile> 상표.
  php $ temp = get_the_content ();
      if ($ temp) {??>  php echo $ temp;
       php}
    ?>
로그인 후 복사
 우리는 게시물 본문을 우리의 진술로 사용하기 때문에 콘텐츠를 둘러싼 단락 태그와 같은 추가 코드를 얻습니다. 사용자 정의 필드에 프로필 진술을 넣으면이를 완화 할 수 있지만 목적에 따라 예상/원하는 동작 일 수도 있습니다.
 그런 다음 각 게시물 만 게시하면 원하는만큼 많은 게시물/좀비 프로파일을 추가 할 수 있습니다!
 블록 파티 : 맞춤형 블록의 웹 구성 요소
 커스텀 블록을 만드는 것은 웹 구성 요소를 추가하는 좋은 방법입니다. 사용자는 원하는 필드를 작성하고 코드 나 기술 지식없이 웹 구성 요소의 마법을 얻을 수 있습니다. 또한 블록은 완전히 테마 독립적이므로 한 웹 사이트 에서이 블록을 사용한 다음 다른 WordPress 사이트에 설치할 수 있습니다. 웹 구성 요소가 작동하는 방식과 비슷합니다!
 사용자 정의 블록에는 PHP와 JavaScript의 두 가지 주요 부분이 있습니다. 또한 편집 경험을 향상시키기 위해 일부 CSS를 추가 할 것입니다.
 첫 번째는 PHP입니다.
 함수 ez_webcomp_register_block () {
  // 사용자 정의 블록을 작성하는 데 필요한 JavaScript를 등록합니다
  wp_register_script (
    'ez-webcomp',
    플러그인 _url ( 'block.js', __file__),
    배열 ( 'wp-blocks', 'wp-element', 'wp-editor'),
    filemtime (plugin_dir_path (__ file__). 'block.js')
  );

  // 등록 구성 요소의 CSS 파일 wp_register_style (
    'ez-webcomp',
    플러그인 _url ( 'ezwebcomp-style.css', __file__),
    정렬(),
    filemtime (plugin_dir_path (__ file__). 'ezwebcomp-style.css')
  );

  // 등록 커스텀 블록 레지스터 legrest_block_type ( 'ez-webcomp/zombie-profile', Array (
    // 우리는 이미 외부 스타일을 가지고 있습니다. 이들은 WordPress 편집기를 사용할 때만 사용됩니다.
    'editor_script'=> 'ez-webcomp',
  ));
}
add_action ( 'init', 'ez_webcomp_register_block');
로그인 후 복사
 CSS는 필요하지 않으며 좀비의 프로필 사진이 WordPress 편집기의 내용과 겹치는 것을 방지하는 데 도움이됩니다.
 /* 이미지의 너비와 높이를 설정합니다.
 * 마일리지가 다를 수 있으므로 필요에 따라 조정하십시오.
 * "PIC"은 Block.js*/의 편집기에 추가 된 클래스입니다.
#editor .pic img {
  너비 : 300px;
  높이 : 300px;
}
/*이 CSS는 올바른 공간이 이미지에 할당되도록합니다.
 * 이미지를 선택하기 전에 버튼이 크기를 조정하는 것을 방지합니다.
*/
#editor .pic buttonc.components-button {
  오버플로 : 가시;
  높이 : 자동;
}
로그인 후 복사
 우리가 필요로하는 JavaScript는 조금 더 복잡합니다. 가능한 한 단순화하고 가능한 한 액세스 할 수있게하려고 노력 했으므로 ES5를 사용하여 편집 필요성을 제거했습니다.
 코드 표시

 (함수 (블록, 편집기, 요소, 구성 요소) {
  // 요소를 생성하는 함수 var el = element.createElement;
  // 블록 필드의 프로세스 텍스트 입력 var richtext = editor.richtext;
  // 프로세스 업로드 이미지/미디어 var mediaupload = editor.mediaupload;

  // php의 register_block_type로 돌아갑니다
  blocks.registerblocktype ( 'ez-webcomp/zombie-profile', {
    제목 : '좀비 프로파일', // 블록 선택기 아이콘에 표시된 사용자 친화적 인 이름 : 'id-alt', // 블록 선택기 범주에 사용 된 아이콘 : '레이아웃',
    // 속성은 우리가 사용할 모든 다른 필드입니다.
    // 우리는 자신이 무엇인지, 블록 편집기가 데이터를 얻는 방법을 정의하고 있습니다.
    속성 : {
      이름: {
        // 컨텐츠 유형 : 'String',
        // 정보를 얻는 데 사용할 수있는 위치 : 'Text',
        // selector는 블록 편집기가 선택하고 내용을 얻는 방식입니다.
        // 블록 인스턴스에서 고유해야합니다.
        // IMG 또는 하나만있는 경우<p> 기타, 요소 선택기를 사용할 수 있습니다.
        선택기 : '.zname',
      },
      mediaid : {type : 'number',},
      mediaurl : {type : 'string', 출처 : '속성', 선택기 : 'img', 속성 : 'src',},
      age : {type : 'string', 출처 : 'text', 선택기 : '.age',},
      InfectDate : {type : 'date', source : 'text', selector : '. infection-date'},
      관심사 : {type : 'array', 출처 : 'children', 선택기 : 'ul',},
      문 : {type : 'array', 출처 : 'children', 선택기 : '. 스테이트',},
    },
    // 편집 함수는 블록 편집기에 컨텐츠를 표시하는 방법을 처리합니다.
    편집 : 함수 (props) {
      var attributes = props.attributes;
      var onselectimage = function (미디어) {
        return props.setattributes ({mediaurl : media.url, mediaid : media.id,});
      };
      // 반환 문은 편집기에 표시되는 내용입니다.
      // el ()은 요소를 생성하고 다른 속성을 설정합니다.
      엘 (el) (
        // 단순성을 위해 좀비 프로파일 웹 구성 요소 대신 DIV를 사용하십시오.
        'div',
        {className : props.className},
        // 좀비 el의 이름 (RichText, {
          Tagname : 'H2',
          인라인 : 사실,
          ClassName : 'Zname',
          자리 표시 자 : '좀비 이름…',
          값 : 속성, 이름,
          onchange : 함수 (value) {
            props.setattributes ({name : value});
          },
        }),
        엘자(
          // 좀비 프로필 사진 'div',
          {className : 'pic'},
          el (mediaupload, {
            onselect : onselectimage,
            허용 유형 : '이미지',
            값 : attributes.MediaId,
            렌더 : 함수 (obj) {
              엘 (el) (
                구성 요소 .Button,
                {
                  ClassName : attributes.MediaId?
                  OnClick : obj.open,
                },
                ! attributes.MediaId?
              );
            },
          })
        ),)
        // 우리는 블록 편집기에 좀비 시대의 el ( 'h3', {}, 'age') 제목을 포함합니다.
        // Age Field El (RichText, {
          tagname : 'div',
          ClassName : 'Age',
          자리 표시 자 : '좀비의 시대…',
          가치 : 속성, 지,
          onchange : 함수 (value) {
            props.setattributes ({age : value});
          },
        }),
        // 감염 날짜 제목 EL ( 'H3', {}, '감염 날짜'),
        // 감염 날짜 필드 EL (RichText, {
          tagname : 'div',
          ClassName : '감염 날짜',
          자리 표시 자 : '좀비 \'의 감염 날짜… ',
          값 : attributes.infectDate,
          onchange : 함수 (value) {
            props.setattributes ({infectionDate : value});
          },
        }),
        // Hobby Title EL ( 'H3', {}, 'mectoves'),
        // Hobby Field El (RichText, {
          Tagname : 'ul',
          //`enter '키를 누를 때마다 새 제품이 생성됩니다.</p>
로그인 후 복사
<li>
          멀티 린 : 'li',
          자리 표시 자 : '관심 목록 작성…',
          가치 : 속성.
          onchange : 함수 (value) {
            propss.setattributes ({관심사 : value});
          },
          ClassName : '관심사',
        }),
        // 좀비 문 제목 el ( 'h3', {}, 'statement'),
        // 좀비 문자 필드 el (richtext, {
          tagname : 'div',
          ClassName : "Statement",
          자리 표시 자 : '쓰기 진술…',
          값 : 속성, 스테이트,
          onchange : 함수 (value) {
            propss.setattributes ({state : value});
          },
        })
      );
    },
    // 데이터베이스에 컨텐츠를 저장하고 프론트 엔드에 표시합니다.
    // 여기에서 웹 구성 요소가 사용되는지 확인해야합니다.
    저장 : 함수 (props) {
      var attributes = props.attributes;
      엘 (el) (
        // WordPress에서 사용자 정의 요소를 사용하려면 몇 가지 추가 단계가 필요하므로 일반적인 div를 사용합니다.
        'div',
        {className : 'Zombie-Profile', ... 속성},
        // 인쇄하기 전에 모든 필드가 존재하는지 확인하십시오.
        attributes.name && el ( 'h2', {classname : 'zname'}, attributes.name),
        attributes.mediaurl && el ( 'img', {src : attributes.mediaurl, 슬롯 : 'profile-image'}),
        attributes.age && el ( 'div', {classname : 'age'}, attributes.age),
        attributes.infectDate && el ( 'div', {className : 'infection-date'}, attributes.infectDate),
        attributes.interests && el ( 'ul', {}, attributes.interests),
        attributes.statement && el ( 'div', {classname : 'state'}, attributes.statement)
      );
    },
  });
} (window.wp.blocks, wind
 웹 구성 요소에 연결합니다
 친절한 사람, 기사 작가 및 완전히 멋진 사람이 웹 사이트에 연결하여 웹 사이트에 사용할 수있는 템플릿을 만들면 좋지 않습니까? 글쎄, 그 사람은 사용할 수 없었습니다 (그는 자선 단체 나 무언가를 돕기 위해갔습니다). 그것은 github에 있습니다 :
 WordPress의 간단한 웹 구성 요소를 직접하십시오
 플러그인은 사용자 정의 웹 구성 요소를 등록하고, 구성 요소가 요구하는 스크립트 및 스타일을 등록하고, 필요한 사용자 정의 블록 필드의 예를 제공하며, 편집자에서 아름답게 스타일을 유지하는 인코딩 템플릿입니다. 다른 WordPress 플러그인을 수동으로 설치하는 것과 마찬가지로 /wp-content/plugins 의 새 폴더에 배치하고 특정 웹 구성 요소로 업데이트 한 다음 설치된 플러그인 화면의 WordPress에서 활성화하십시오.
 나쁘지 않아요?
 코드가 많은 것처럼 보이지만 실제로는 사용자 정의 웹 구성 요소를 등록하고 렌더링하기 위해 표준 워드 프레스 작업을 수행하고 있습니다. 또한 플러그인으로 패키지를 포장하기 때문에 WordPress 사이트에 넣고 만족할 때까지 좀비 프로파일을 게시 할 수 있습니다.
 밸런스 포인트는 WordPress 블록 편집기에서 구성 요소를 프론트 엔드로도 작동 시키려고 노력하고 있다고 생각합니다. 이 고려 사항이 없으면 코드가 적은 작업을 수행 할 수 있습니다.
 그럼에도 불구하고, 우리는 이전 게시물에서 만든 것과 동일한 구성 요소를 CMS에 성공적으로 배치하여 웹 사이트에 몇 가지 좀비 프로파일을 배치 할 수 있습니다. 웹 구성 요소 지식을 WordPress 블록과 결합하여 재사용 가능한 웹 구성 요소를위한 재사용 가능한 블록을 개발합니다.
 WordPress 웹 사이트를 위해 어떤 종류의 구성 요소를 구축 하시겠습니까? 나는 여기에 많은 가능성이 있다고 생각하며 결국 당신이 무엇을 만들 었는지 알고 싶습니다.