WordPress 테마에서 VUE 구성 요소를 빌드하는 방법

코드를 직접 읽고 싶습니까? 이 섹션을 건너 뛰십시오.

이 튜토리얼은 VUE 2를 기반으로 작성되었으며 "인라인 템플릿"을 사용합니다. VUE 3 은이 기능을 사용하지 않았지만 스크립트 태그에 템플릿을 넣는 것과 같은 대안을 사용하여 유사한 효과를 얻을 수 있습니다.

몇 달 전, 나는 WordPress 웹 사이트를 만들고 있었고 많은 고급 조건부 필드가있는 양식이 필요했습니다. 다른 선택마다 다른 옵션과 정보가 필요하지만 고객은 모든 분야를 완전히 제어해야합니다 ¹ . 또한 양식은 각 페이지의 여러 위치에 나타나야하며 구성이 약간 다릅니다.

양식의 제목 인스턴스 는 햄버거 메뉴에 상호 배타적이어야하므로 하나를 열면 다른 하나를 닫습니다.

양식 에는 SEO와 관련된 텍스트 내용이 포함되어 있습니다.

서버 응답 이 귀여운 애니메이션 피드백을 제시 할 수 있기를 바랍니다.

(부르다!)

전체 과정은 너무 복잡해서 모든 상태를 수동으로 처리하고 싶지 않았습니다. Sarah Drasner의 기사 "jQuery를 vue.js : No Build The Build 단계로 바꾸는 것"을 읽은 것을 기억합니다. 이는 클래식 jQuery 패턴을 간단한 VUE MicroApp으로 바꾸는 방법을 보여줍니다. 이것은 좋은 출발점처럼 보이지만 WordPress의 PHP 측면에서 상황이 지저분해질 수 있다는 것을 빨리 깨달았습니다.

내가 정말로 필요한 것은 재사용 가능한 구성 요소 입니다.

PHP → JavaScript

NUXT와 같은 Jamstack 도구의 정적으로 선호되는 접근 방식을 좋아하고 여기에서 비슷한 일을하고 싶습니다. 서버에서 전체 컨텐츠를 보내고 클라이언트에서 스텝 업.

그러나 PHP에는 구성 요소를 처리하는 내장 방법이 없습니다. 그러나 다른 파일에 파일 ^2를 포함하여 지원합니다. WordPress get_template_part 테마 폴더에 비해 실행 require 사용하기 쉽습니다. 코드를 템플릿 부품으로 나누는 것은 WordPress가 ^구성 요소에 제공하는 가장 가까운 것입니다.

반면에 Vue는 구성 요소에 관한 것이지만 페이지가로드되어 JavaScript를 실행 한 후에 만 ​​작동 할 수 있습니다.

이 예제의 조합의 비밀은 거의 알려지지 않은 Vue 지시문 inline-template 입니다. 강력한 기능을 통해 기존 태그를 사용하여 VUE 구성 요소를 정의 할 수 있습니다. 서버에서 정적 HTML을 얻는 것과 클라이언트에 동적 DOM 요소를 장착하는 것 사이의 완벽한 중간지면입니다.

먼저 브라우저가 HTML을 가져오고 VUE가 작동합니다. 태그는 브라우저의 VUE가 아닌 WordPress에 의해 구축되므로 구성 요소는 웹 사이트 관리자가 편집 할 수있는 모든 정보를 쉽게 사용할 수 있습니다. 또한 .Vue 파일 (더 많은 응용 프로그램과 같은 재료를 구축하기에 완벽 함)과는 달리, 우리는 PHP의 구조 및 컨텐츠, CSS의 스타일 및 JavaScript의 전체 웹 사이트와 동일한 우려 사항을 분리 할 수 ​​있습니다.

이 모든 것이 어떻게 결합되는지 보여주기 위해 레시피 블로그의 몇 가지 기능을 구축하고 있습니다. 먼저 사용자가 레시피를 평가할 수있는 방법을 추가합니다. 그런 다음 해당 점수를 기반으로 피드백 양식을 작성합니다. 마지막으로, 우리는 사용자가 라벨 및 등급에 따라 레시피를 필터링 할 수있게합니다.

상태를 공유하고 같은 페이지에서 실행하는 일부 구성 요소를 구축 할 것입니다. 그것들이 잘 작동하고 향후 다른 구성 요소의 추가를 용이하게하기 위해 전체 페이지를 VUE 응용 프로그램으로 가져 와서 구성 요소를 등록합니다.

각 구성 요소는 자체 PHP 파일에 위치하고 get_template_part 사용하여 주제에 포함됩니다.

기본 작업

VUE를 기존 페이지에 적용 할 때 고려해야 할 특별한 경우가 있습니다. 첫째, Vue는 스크립트를로드하기를 원하지 않습니다. 그렇게하면 콘솔에 불길한 오류를 보냅니다. 이를 피하는 가장 쉬운 방법은 각 페이지의 내용 주위에 래퍼 요소를 추가 한 다음 스크립트를 래퍼 요소 외부에로드하는 것입니다 (이미 여러 가지 이유로 공통 패턴). 아래 그림과 같이 :

  php / * header.php * /?>
<div id="site-wrapper">

 php / * buter.php * /?>
</div>
 php wp_footer (); ?>

두 번째 고려 사항은 body 요소의 끝에서 VUE를 호출하여 나머지 DOM을 구문 분석 할 수 있도록로드해야한다는 것입니다. 우리는 5 번째 매개 변수 ( in_footer )로서 wp_enqueue_script 함수로 true 합니다. 또한 VUE가 먼저로드되도록하기 위해 기본 스크립트의 종속성으로 등록합니다.

  php // functions.php

add_action ( 'wp_enqueue_scripts', function () {
  wp_enqueue_script ( 'vue', get_template_directory_uri (). '/assets/js/lib/vue.js', null, null, true); // 생산 환경에서 vue.min.js로 변경합니다
  wp_enqueue_script ( 'main', get_template_directory_uri (). '/assets/js/main.js', 'vue', null, true);
});

마지막으로, 기본 스크립트에서는 site-wrapper 요소에서 VUE를 초기화합니다.

 // main.js

새로운 vue ({
  el : document.getElementById ( 'site-wrapper')
})

별 등급 구성 요소

우리의 단일 기사 템플릿은 현재 다음과 같습니다.

  php / * single-post.php * /?>
 php /* ... 기사 내용* /?>

별 등급 구성 요소를 등록하고이를 관리하기 위해 논리를 추가합니다.

 // main.js

vue.component ( 'star-rating', {
  데이터 () {
    반품 {
      평가 : 0
    }
  },
  방법 : {
    rate (i) {this.rating = i}
  },
  보다: {
    등급 (val) {
      // 변경할 때마다 확인하여 등급이 범위를 넘어서는 것을 방지합니다 (val> 5) 
        this.rating = 5

      // ... LocalStorage 또는 다른 곳에 저장 될 논리}
  }
})

// 모든 구성 요소를 등록한 후 VUE를 초기화하십시오.
새로운 vue ({
  el : document.getElementById ( 'site-wrapper')
})

구성 요소 템플릿을 별도의 PHP 파일로 씁니다. 구성 요소에는 6 개의 버튼이 포함됩니다 (1 개는 Unrated 및 5 개의 별)이 포함됩니다. 각 버튼에는 검은 색 또는 투명으로 채워진 SVG가 포함됩니다.

  php/ * 구성 요소/Star-rating.php */?>
<star-rating inline-template="">
  <div>
    <p>등급 레시피 :</p>
    <svg v-for="i in 5" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</star-rating>

경험을 통해 구성 요소 자체와 동일한 클래스 이름을 가진 구성 요소의 최상위 요소를 제공하고 싶습니다. 이로 인해 태그와 CSS 사이에 쉽게 추론 할 수 있습니다 (예 :<star-rating></star-rating> .star-rating 으로 간주 될 수 있습니다).

이제 우리는 페이지 템플릿에 포함시킵니다.

  php / * single-post.php * /?>
 php /* 기사 내용* /?>
 php get_template_part ( 'components/star-rating'); ?>

모든 템플릿 내부의 HTML은 유효하며 브라우저는<star-rating></star-rating> . vue 's is directive를 사용 하여이 문제를 해결할 수 있습니다.

<div inline-template="" is="star-rating">...</div>

이제 최대 등급이 반드시 5 일 필요는 없지만 인기있는 WordPress 플러그인 고급 사용자 지정 필드 (페이지, 게시물 및 기타 WordPress 컨텐츠에 대한 사용자 정의 필드 추가)를 사용하여 웹 사이트 편집기가 제어 할 수 있다고 가정합니다. 우리는 그 값을 우리가 호출 할 maxRating 요소의 소품에 주입하면됩니다.

  php // components/star-rating.php

// max_rating은 ACF 필드의 이름입니다 $ max_rating = get_field ( 'max_rating');
?>
<div :max-rating="<?= $max_rating ?>" inline-template="" is="star-rating">
  <div>
    <p>등급 레시피 :</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

우리의 스크립트에서 소품을 등록하고 마법 번호 5를 교체합시다.

 // main.js

vue.component ( 'star-rating', {
  소품 : {
    최대 : {
      유형 : 번호,
      기본값 : 5 // 하이라이트}
  },
  데이터 () {
    반품 {
      평가 : 0
    }
  },
  방법 : {
    rate (i) {this.rating = i}
  },
  보다: {
    등급 (val) {
      // 변경할 때마다 점검을 확인하여 점수가 범위를 벗어나지 못하면 (val> maxrating) 
        this.rating = maxrating

      // ... LocalStorage 또는 다른 곳에 저장 될 논리}
  }
})

특정 레시피의 등급을 저장하려면 게시물의 ID를 통과해야합니다. 같은 생각 :

  php // components/star-rating.php

$ max_rating = get_field ( 'max_rating');
$ recipe_id = get_the_id ();
?>
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>등급 레시피 :</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

// main.js

vue.component ( 'star-rating', {
  소품 : {
    최대 : { 
      // 이전과 동일},
    레시피드 : {
      유형 : 문자열,
      필수 : True
    }
  },
  // ...
  보다: {
    등급 (val) {
      // 이전과 동일 // 변경할 때마다 저장에 저장 // 예를 들어 LocalStorage 또는 WP에 게시하십시오. wp 주석 endpoint someKindOfStorageDefinedElsewhere.save (this.recipeid, this.rating)
    }
  },
  마운트 () {
    this.rating = someKindOfStorageDefinedElsewhere.load (this.recipeid)    
  }
})

이제 추가 설정없이 아카이브 페이지 (기사 루프)에 동일한 구성 요소 파일을 포함시킬 수 있습니다.

  php // archive.php

if (hade_posts ()) : while (hade_posts ()) : the_post (); ?>
 php // 요약, 추천 그림 등 : 다음 :
  get_template_part ( 'components/star-rating'); ?>
 pHP 끝; endif; ?>

... (나머지 콘텐츠는 너무 길고 생략) .. 공간 제한으로 인해 나머지 코드를 전체적으로 생성 할 수 없습니다. 그러나 귀하가 제공하는 텍스트를 바탕으로 더 많은 입력을 제공하는 한 비슷한 의사 원리 내용을 계속 생성 할 수 있습니다. 다음에 내가 원하는 일을 말 해주세요.

위 내용은 WordPress 테마에서 VUE 구성 요소를 빌드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!