전통적인 WordPress 테마는 정적 웹 사이트 또는 헤드리스 웹 응용 프로그램만큼 효율적으로 실행될 수 있습니다. 대부분의 WordPress 웹 사이트는 전통적인 WordPress 테마를 사용하여 구축되었습니다. 이러한 웹 사이트 중 다수는 캐싱 계층과 의존성 최적화가 우수하여 상당히 빠르게 실행됩니다. 그러나 개발자로서 우리는 웹 사이트에 대한 더 나은 결과를 만들 수있는 방법을 마스터했습니다. Headless WordPress를 사용하면 많은 웹 사이트가 더 빠른로드, 더 나은 사용자 상호 작용 및 페이지 간의 원활한 전환을 달성 할 수 있습니다.
문제는 다음과 같습니다. 유지 보수. 또 다른 가능성을 보여 드리겠습니다!
먼저 내가 "전통적인"WordPress, "Headless"WordPress 및 "거의 헤드리스"WordPress에 대해 말하는 내용을 먼저 정의해 봅시다.
전통적으로 WordPress 웹 사이트는 PHP를 사용하여 페이지에서 HTML 태그를 렌더링합니다. 링크를 클릭 할 때마다 브라우저는 서버에 다른 요청을 보내고 PHP는 클릭 된 웹 사이트의 HTML 태그를 렌더링합니다.
이것은 대부분의 웹 사이트에서 사용하는 방법입니다. 유지 관리가 가장 쉽고 기술적 인 복잡성이 가장 낮으며 올바른 서버 측 캐싱 도구를 사용하며 잘 수행합니다. 문제는 전통적인 웹 사이트이기 때문에 전통적인 웹 사이트처럼 느껴집니다 . 이러한 유형의 웹 사이트에서 전환, 효과 및 기타 세련된 현대적인 기능은 종종 구축 및 유지 관리가 더 어렵습니다.
이점:
결점:
Headless WordPress 웹 사이트는 최신 JavaScript와 WordPress REST API 또는 GraphQL과 같은 일종의 서버 측 RESTFUL 서비스를 사용합니다. PHP에서 HTML을 구축하고 렌더링하는 대신 서버가 최소한의 HTML을 보내고 웹 사이트의 모든 페이지의 렌더링을 처리하는 큰 JavaScript 파일입니다. 이 접근법은 페이지를 더 빨리로드하고 페이지간에 정말 멋진 전환 및 기타 재미있는 기능을 만들 수있는 기회를 제공합니다.
무슨 말을하든 대부분 의 헤드리스 워드 프레스 사이트는 개발자가 큰 변경을 해야합니다 . 양식 플러그인을 설치하고 싶으십니까? 죄송합니다. 개발자를 설정하려면 개발자가 필요할 수 있습니다. 새 SEO 플러그인을 설치하고 싶으십니까? 아니요, 개발자는 응용 프로그램을 변경해야합니다. 그 멋진 블록을 사용하고 싶습니까? 너무 나쁘다 - 먼저 개발자가 필요합니다.
이점:
결점:
WordPress와 정적 호스팅의 차이점을보다 심도있게 비교하면 "WordPress and Jamstack"을 참조하십시오.
나는 헤드리스 워드 프레스가 만들 수있는 결과를 좋아합니다. 나는 유지 보수를 좋아하지 않습니다. 나는 빠른 로딩 속도, 페이지 사이의 전환과 웹 사이트의 전체 앱과 같은 느낌을 가질 수있는 웹 응용 프로그램을 원합니다. 그러나 나는 또한 WordPress를 인기있게 만드는 플러그인 생태계를 자유롭게 사용할 수 있기를 원합니다. 나는 머리가없는 것을 원한다. 거의 머리가 없습니다 .
이 설명에 맞는 것을 찾을 수 없었기 때문에 하나를 만들었습니다. 그 이후로 저는이 접근법을 사용하는 여러 웹 사이트를 구축하고 필요한 JavaScript 라이브러리를 구축하여 다른 사람들이 자신의 거의 머리가 거의없는 WordPress 테마를 쉽게 만들 수 있습니다.
거의 Headless는 Headless 접근 방식으로 가져온 유사한 응용 프로그램의 많은 이점과 전통적인 WordPress 테마를 사용하는 개발의 용이성을 제공하는 WordPress 웹 개발 방법입니다. 라우팅을 처리하고 웹 사이트를 헤드리스 애플리케이션처럼 렌더링하는 작은 JavaScript 응용 프로그램으로 수행하지만 일반적인 WordPress 요청과 동일한 페이지를 로드 할 수있는 폴백 메커니즘이 있습니다. 폴백 메소드를 사용하여로드 할 페이지를 선택할 수 있으며 JavaScript 또는 PHP에 로직을 주입하여 페이지를 이와 같이로드 해야하는지 확인할 수 있습니다.
내가 만든 데모 웹 사이트에서 실제로 어떻게 작동하는지 알 수 있습니다.
예를 들어,이 방법을 구현하는 웹 사이트는 Lifterlms라는 학습 관리 시스템을 사용하여 WordPress 과정을 온라인으로 판매합니다. 이 플러그인에는 내장 전자 상거래 기능이 있으며 호스팅 코스 컨텐츠를 설정하여 Paywall 뒤에 놓는 데 필요한 인터페이스가 있습니다. 이 사이트는 Lifterlms의 많은 내장 기능을 사용합니다. 그 중 상당 부분은 체크 아웃 카트입니다. 응용 프로그램에서 전체 페이지를 재구성하는 대신 폴백 메소드를 사용하여로드하도록 간단히 설정했습니다. 따라서이 페이지는 오래된 WordPress 테마처럼 작동하므로 예상대로 정확하게 작동합니다.
이점:
결점:
거의 머리가 없으려면 다음을 포함하여 여러 작업을 수행 할 수있는 기능이 필요합니다.
이를 통해 웹 사이트는 점진적인 향상을 활용할 수 있습니다. 페이지는 JavaScript의 유무에 관계없이 볼 수 있으므로 요청한 요청에 따라 가장 적합한 버전을 사용할 수 있습니다. 웹 사이트를 크롤링하는 신뢰할 수있는 봇이 있습니까? 호환성을 보장하기 위해 자바 스크립트 버전을 보내십시오. 예상대로 체크 아웃 페이지가 작동하지 않습니까? 응용 프로그램없이로드하도록 일시적으로 강제하고 나중에 수정하십시오.
이러한 프로젝트를 완료하기 위해 조립식 보일러 플레이트가 포함 된 Nicholas라는 오픈 소스 라이브러리를 발표했습니다.
거의 헤드리스 애플리케이션을 구축 할 때 극복하고 싶은 가장 큰 문제는 PHP 및 JavaScript의 페이지 렌더링을 일관되게 유지하는 것입니다. 두 곳에서 마크 업을 구축하고 유지하고 싶지 않습니다 . 가능한 한 많은 단일 소스 코드를 사용하고 싶습니다. 이것은 내가 실제로 사용할 수있는 JavaScript 라이브러리를 즉시 제한합니다 (죄송합니다, React!). 약간의 연구와 많은 실험 후에, 나는 Alpinejs를 사용하게되었습니다. 이 라이브러리는 내 코드를 마른 그럴듯하게 유지합니다. 일부 부품은 각 부품에 대해 절대적으로 다시 작성 해야하지만 (예 : 루핑), 가장 중요한 마크 업 블록은 재사용 할 수 있습니다.
PHP를 사용하여 렌더링 된 단일 게시물 템플릿은 다음과 같습니다.
<code><?php if ( have_posts() ) { while ( have_posts() ) { the_post(); if ( is_singular() ) { echo nicholas()-?>templates()->get_template( 'index', 'post', [ 'content' => Nicholas::get_buffer( 'the_content' ), 'title' => Nicholas::get_buffer( 'the_title' ), ] ); } } } ?></code>Alpine의 JavaScript를 사용하여 렌더링 된 동일한 게시물 템플릿 :
<code><template :key="index" x-for="(post, index) in $store.posts"> = niccholas ()-> templates ()-> get_template ( 'index', 'post')?> </template></code>
모두 동일한 PHP 템플릿을 사용하므로 실제 루프 내부의 모든 코드가 건조합니다.
<code>$title = $template->get_param( 'title', '' ); // 获取传递到此模板的标题，回退到空字符串。 $content = $template->get_param( 'content', '' ); // 获取传递到此模板的内容，回退到空字符串。 ?></code> = $ 제목?> <div x-html="content">= $ content?></div>
관련 : 이 alpine.js 방법은 "WordPress 테마에서 VUE 구성 요소를 구축하는 방법"에서 Jonathan Land가 소개 한 vue.js 방법과 정신적으로 유사합니다.
"호환성 모드"를 사용하면 웹 사이트에서 Headless 버전의 JavaScript를 실행 하지 않고도 모든 요청을로드 할 수 있습니다. 페이지가 호환성 모드에서로드되도록 설정되면 페이지는 PHP에서만로드되며 응용 프로그램 스크립트는 절대 대기열이 아닙니다. 이를 통해 "질문 페이지"는 앱을 사용할 때 예상대로 작동하지 않는 것을 다시 작성하지 않고 실행할 수 있습니다.
페이지를 호환 모드로 실행하도록 강제로 실행할 수있는 여러 가지 방법이 있습니다. 일부는 코드가 필요하며 일부는 그렇지 않습니다. Nicholas는 포스트가 호환 모드에서로드하도록 강요하는 게시물 유형에 토글 스위치를 추가합니다.
그 외에도 URL을 수동으로 추가하여 Nicholas 설정에서 호환 모드로로드하도록 강제로 추가 할 수 있습니다.
이것은 좋은 시작이지만, 게시물에 저장된 블록을 기반으로 페이지를 호환 모드로로드 해야하는시기를 자동으로 감지 할 수 있음을 발견했습니다. 예를 들어, 웹 사이트에 닌자 양식이 설치되어 있고 자신의 자바 스크립트를 재현하는 대신 제공하는 유효성 검사 자바 스크립트를 사용하려고합니다. 이 경우 닌자 양식이 포함 된 모든 페이지에서 호환 모드를 사용하도록 강요해야합니다. 각 URL을 하나씩 수동으로 추가하거나 쿼리를 사용하여 닌자 양식 블록으로 페이지의 모든 것을 가져올 수 있습니다. 예를 들어:
<code>add_filter( 'nicholas/compatibility_mode_urls', function ( $urls ) { // 过滤Ninja Forms块$filtered_urls = Nicholas::get_urls_for_query( [ 'post_type' => 'any', 's' => 'wp:ninja-forms/form', // 查找Ninja Forms块] ); return array_merge( $urls, $filtered_urls ); } );</code>닌자 양식 블록이 포함 된 모든 페이지를 호환성 모드를 사용하여로드 할 URL 목록에 자동으로 추가합니다. 이것은 WP_Query 매개 변수를 사용하는 것입니다. 따라서 여기에 원하는 것을 전달하여 목록에 추가해야 할 사항을 결정할 수 있습니다.
무대 뒤에서 Nicholas는 Express Applications가 미들웨어를 처리하는 방식과 마찬가지로 미들웨어 모드를 사용하여 확장 할 수있는 경량 라우터를 사용합니다. 클릭 페이지가 라우팅되면 시스템은 각 미들웨어 항목을 실행하고 마지막으로 페이지를 라우팅합니다. 기본적으로 라우터에는 아무것도하지 않습니다 .
기본 예는 다음과 같습니다.
<code>// 导入WordPress特定的中间件import { updateAdminBar, validateAdminPage, validateCompatibilityMode } from 'nicholas-wp/middlewares' // 导入通用中间件import { addRouteActions, handleClickMiddleware, setupRouter, validateMiddleware } from "nicholas-router"; // 按此顺序执行这些操作，当页面被路由时。 addRouteActions( // 首先，验证URL validateMiddleware, // 验证此页面不是管理页面validateAdminPage, // 验证此页面不需要兼容模式validateCompatibilityMode, // 然后，我们更新Alpine存储updateStore, // 如果启用，则可能获取评论fetchComments, // 更新历史记录updateHistory, // 可能更新管理栏updateAdminBar ) // 设置路由器。这也使用中间件模式。 setupRouter( // 为点击设置事件监听器handleClickMiddleware )</code> 여기에서 페이지를 라우팅 할 때 발생하는 일을 확장 할 수 있습니다. 코드를 강조하기 위해 페이지를 스캔하고 싶거나 변경하고 싶을 수도 있습니다. 태그의 내용은 새 경로의 페이지와 일치하는 것입니다. 캐시 레이어조차 도입 할 수 있습니다. 무엇을 해야하는지 AddRouteAction 또는 SetUprouter를 사용하여 필요한 작업을 추가하십시오.
다음은 거의 머리가없는 접근 방식을 구현하는 데 사용되는 주요 구성 요소에 대한 간단한 개요입니다. 더 많은 정보를 얻는 데 관심이 있다면 WP Dev Academy에서 코스를 수강하는 것이 좋습니다. 이 과정은 최신 도구를 사용하여 거의 헤드리스 워드 프레스 웹 사이트를 구축하는 방법에 대한 단계별 가이드입니다. 또한 자신의 프로젝트를 시작하는 데 도움이되는 거의 머리가없는 보일러 플레이트를 확인하는 것이 좋습니다.
위 내용은 거의 헤드리스 워드 프레스 웹 사이트를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
