VUE로 WordPress 플러그인 구축

이 튜토리얼은 진보적 인 JavaScript 프레임 워크 인 vue.js를 사용하여 최신 WordPress UI를 구축하는 방법을 보여줍니다. Fetch API를 통해 WordPress REST API와 상호 작용하는 VUE 인터페이스가있는 간단한 플러그인을 만들 것입니다. 주요 개념 :

이 안내서는 단축 코드를 등록하고 vue.js를 통합하고 엔드 포인트와 상호 작용하는 VUE 앱을 작성하여 최근 게시물을 표시하는 WordPress 플러그인을 작성합니다. 우리는 와 같은 수명주기 후크를 사용하여 VUE 인스턴스 생성 및 데이터를 가져 오는 것을 보여줍니다. 를 사용한 실시간 업데이트도 표시됩니다.

튜토리얼은 vue.js.

WordPress 플러그인 구축 :
• /wp-json/wp/v2/posts?filter[orderby]=date
플러그인 디렉토리 생성 :
• WordPress 내에서 폴더 만들기 (예 : ). mounted() setInterval()
: 폴더 내부에서 다음 초기 내용으로
• 를 만듭니다 :

레지스터 단축 코드 :

에이 코드를 추가하여 : 라는 단축 코드를 등록하려면이 코드를 추가하십시오.

이것은 vue.js 라이브러리와 사용자 정의 자바 스크립트 파일 (). 플러그인 활성화 :

WordPress Admin Dashboard를 통해 플러그인을 활성화하십시오.

1. 테스트 단축 코드 : 를 게시물이나 페이지에 추가하여 바로가 코드를 테스트합니다. vueplugin wp-content/plugins
통합 vue.js :

2. vueplugin.php : vueplugin.php이 코드를 사용하여 플러그인 디렉토리에서

   를 작성하십시오.

   <code class="language-php"><?php
   /*
   Plugin Name: Latest Posts
   Description: Latest posts shortcode with Vue.js
   Version: 1.0
   */</code>

3. 이 vue 인스턴스는 게시물을 가져오고 목록에 표시하고 5 초마다 업데이트됩니다.

   검증 : "구성 요소가 장착 된"및 페치 된 게시물에 대한 브라우저의 개발자 콘솔을 확인하십시오. 스크립트도 페이지 소스에도 포함되어야합니다. vueplugin.php latestPosts

   결론 : 이 강화 된 자습서는 동적 인 실시간 사용자 경험을 위해 vue.js를 WordPress 플러그인에 통합하는 완전하고 작동하는 예제를 제공합니다. 특정 테마에 필요한 경우 경로와 스타일을 조정해야합니다. 원래 입력의 FAQ는 개정 된 튜토리얼 내에서 적절하게 다루기 때문에 생략되었습니다.

위 내용은 VUE로 WordPress 플러그인 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!