WordPress đã là hệ thống quản lý nội dung phù hợp cho các nhà phát triển và không phải nhà phát triển để nhanh chóng xây dựng và tạo các trang web tuyệt đẹp.
Sử dụng kiến trúc microservice, trong đó phần phụ trợ quản lý nội dung tách biệt với giao diện người dùng, cho phép kiểm soát tối đa cả hai “phần cuối”. Vấn đề phân tách này là những gì mà các hệ thống quản lý nội dung không đầu, bao gồm cả các giải pháp WordPress không đầu, cố gắng giải quyết.
Với cách tiếp cận không có đầu, các doanh nghiệp có quyền kiểm soát chi tiết hơn đối với phần phụ trợ quản lý nội dung. Họ cũng có thể tự do sử dụng bất kỳ giao diện người dùng nào mà họ lựa chọn, bao gồm cả React, Vue, Angular, v.v.
Hướng dẫn này sẽ khám phá chi tiết về WordPress không có đầu và tất cả về nó, khi nào và tại sao bạn nên cân nhắc sử dụng nó. Cuối cùng, chúng ta sẽ khám phá việc tạo môi trường WordPress không đầu, xây dựng giao diện người dùng với Vue.js và triển khai WordPress không đầu bằng Kinsta.
WordPress không đầu là gì?
WordPress là một ứng dụng nguyên khối trong đó phần phụ trợ và phần giao diện người dùng được gắn chặt với nhau. Phần phụ trợ là nơi quản lý đi kèm, nơi bạn có thể tạo, chỉnh sửa, thêm và xóa nội dung, bao gồm cả việc thay đổi cấu hình giao diện. Ngược lại, frontend có nhiệm vụ hiển thị nội dung cho người dùng.
WordPress không đầu là thuật ngữ được sử dụng để mô tả WordPress được tách rời. Phần phụ trợ (quản lý) tách biệt với phần giao diện người dùng của WordPress CMS. Bạn có thể phát triển và quản lý giao diện người dùng như một ứng dụng độc lập với bất kỳ khung giao diện người dùng nào bạn chọn.
Ưu và nhược điểm của WordPress không đầu
Tiếp theo, chúng ta sẽ khám phá những ưu và nhược điểm của WordPress không đầu để bạn hiểu rõ hơn về khái niệm này.
Ưu điểm
Đầu tiên, chúng ta sẽ bắt đầu bằng cách khám phá những ưu điểm.
Hiệu suất siêu nhanh
Trong thời đại của các ứng dụng hoạt động siêu nhanh như hiện nay, trang web của bạn không nên mất quá vài giây để tải và tránh mất người truy cập. Vì giao diện người dùng được tách biệt với WordPress và có thể được phát triển với hiệu suất cao và khả năng mở rộng bằng cách sử dụng các công cụ giao diện người dùng hiện đại, việc sử dụng phương pháp WordPress không đầu sẽ mang lại lợi ích to lớn cho trải nghiệm người dùng tổng thể trên trang web của bạn.
Kiểm soát dạng hạt
Việc chọn kiến trúc không đầu cho phép bạn kiểm soát nhiều hơn đối với bố cục thiết kế, cách trình bày nội dung và cách người dùng tương tác với giao diện người dùng của ứng dụng của bạn. Nó cũng cho phép nội dung phụ trợ của bạn được bảo mật và truy cập từ một vị trí trung tâm.
Tăng khả năng mở rộng
Mở rộng quy mô WordPress đôi khi có thể phức tạp vì bạn không có toàn quyền kiểm soát tất cả các thành phần và mã hỗ trợ WordPress, chủ yếu nếu bạn không phải là nhà phát triển. Nhưng với sự tách biệt của WordPress, thật dễ dàng để chia tỷ lệ từng phần một cách riêng biệt và bạn có thể dễ dàng phát hiện phần nào cần mở rộng quy mô.
An ninh chặt chẽ hơn
Chúng ta không thể nhấn mạnh đến lợi ích bảo mật của WordPress không đầu vì WordPress đã tách rời có lợi ích bảo mật cao chống lại tin tặc và các cuộc tấn công DDoS. Cách tiếp cận WordPress không đầu khiến tin tặc khó truy cập vào dữ liệu phụ trợ nhạy cảm của bạn vì nó tách biệt với giao diện người dùng của bạn, trang web giao diện người dùng.
Thiết kế nhẹ
Bạn sẽ có nhiều quyền kiểm soát hơn đối với cấu trúc và bố cục của thiết kế giao diện người dùng của mình. Ngoài ra, bạn có thể làm việc trên giao diện người dùng tự do hơn và thiết kế tùy chỉnh; nhờ các lệnh gọi API REST, bạn sẽ có thể tận dụng các công cụ web hiện đại và triển khai chúng trên giao diện người dùng.
Xuất bản nội dung đa kênh
Vì WordPress không đầu sử dụng hệ thống dựa trên API để giao tiếp nội dung của bạn với giao diện người dùng, bạn có thể hiển thị nội dung của mình ở bất kỳ đâu và trên bất kỳ nền tảng nào, bao gồm máy tính để bàn, trang web, ứng dụng dành cho thiết bị di động và kiosk màn hình cảm ứng. Cũng có thể sử dụng đầy đủ các thiết bị Thực tế tăng cường, Thực tế ảo và Internet of Things để hiển thị và trình bày nội dung của bạn đến từ hệ thống dựa trên API.
Nhược điểm
Chúng ta sẽ tìm hiểu sâu hơn về nhược điểm của không có đầu, nhưng nhược điểm chính của nó là:
- Tách phần phụ trợ và giao diện người dùng giúp bạn có thêm tải khi quản lý các phiên bản trang web khác nhau.
- Có thể tốn kém để triển khai vì nó cần thêm thành viên trong nhóm của bạn và thêm vốn để chạy các phiên bản khác nhau.
- Cung cấp nội dung của bạn trên các nền tảng khác nhau có thể gây ra trải nghiệm không nhất quán cho người dùng của bạn nếu nội dung không được trình bày nhất quán trên tất cả các nền tảng.
Khi WordPress không có đầu có thể không phải là lựa chọn tốt nhất
Vì WordPress không có đầu là một sự đổi mới đáng kinh ngạc với những lợi ích tuyệt vời, nên có một số điều bạn cần lưu ý khi quyết định có nên sử dụng nó hay không.
- WordPress không có đầu rất tốn kém để duy trì. Bạn sẽ duy trì hai phiên bản khác nhau của một trang web từ cơ sở hạ tầng đến nhiều nhà phát triển.
- Headless WordPress không hỗ trợ tất cả các tính năng của WordPress. Ví dụ: các tính năng tuyệt vời của WordPress như trình chỉnh sửa WYSIWYG và bản xem trước trực tiếp sẽ không hoạt động khi sử dụng giao diện người dùng riêng biệt.
- Sẽ tốn kém hơn khi thiết lập một WordPress không có đầu. Do đó, hãy luôn lưu ý đến chi phí gia tăng của nó.
Ai nên sử dụng WordPress không đầu?
Dưới đây là các trường hợp phù hợp nhất mà bạn có thể yêu cầu WordPress không đầu:
- Bạn nên sử dụng WordPress không đầu nếu tính bảo mật của trang web là mối quan tâm hàng đầu và tối quan trọng đối với công ty của bạn.
- Tiếp theo, nếu trang web của bạn không cần nâng cấp và cập nhật thường xuyên, đó sẽ là một dấu hiệu tuyệt vời cho thấy bạn cần sử dụng thiết lập không cần đầu.
- Tiếp theo, nếu bạn muốn có một thiết kế tùy chỉnh mà một chủ đề WordPress sẽ không dễ dàng làm được, bạn muốn tạo thêm gia vị cho giao diện người dùng của trang web bằng một thiết kế độc đáo. Sau đó, WordPress không đầu là lựa chọn tiếp theo của bạn.
- Cuối cùng, nếu bạn đang xây dựng một trang web có tuổi thọ ngắn hoặc một trang demo cho các bài thuyết trình và hướng dẫn, thì bạn có thể thử cách tiếp cận không cần đầu.
Ai nên tránh sử dụng WordPress không đầu
Dưới đây là một số trường hợp sử dụng WordPress không có đầu không phải là một lựa chọn tốt:
- Khi trang web của bạn chỉ dựa vào các plugin và chức năng cụ thể kiểm soát và hoạt động tốt nhất với giao diện người dùng của ứng dụng, bạn nên gắn bó với WordPress trừ khi các plugin cung cấp các tùy chọn dựa trên API để sử dụng dữ liệu.
- Giả sử bạn không quan tâm đến việc viết mã trang web của mình hoặc trang web của bạn yêu cầu bảo trì hàng ngày và bạn không thuê một chuyên gia để bảo trì định kỳ do ngân sách của bạn thấp. Trong trường hợp đó, WordPress là một lựa chọn phù hợp cho bạn.
- Nếu bạn không phải là một nhà phát triển dày dạn kinh nghiệm và muốn tạo và quản lý trang web của mình một mình, bạn nên sử dụng WordPress.
Cách tạo WordPress không đầu (Xây dựng ứng dụng)
Phần này sẽ khám phá việc xây dựng và phát triển một blog tin tức với WordPress không đầu cho phần phụ trợ và Vue 3 làm giao diện người dùng giao diện người dùng.
Thiết lập WordPress không đầu với Devkinsta
Chúng tôi sẽ phát triển WordPress không đầu với DevKinsta, một môi trường phát triển cục bộ WordPress phổ biến để thiết kế, phát triển và triển khai các trang web WordPress từ sự thoải mái trên máy cục bộ của bạn.
DevKinsta miễn phí vĩnh viễn và mang lại cho bạn những lợi ích tuyệt vời cũng như sự thoải mái trong việc phát triển và xây dựng WordPress với nó.
Bạn có thể tải xuống và cài đặt DevKinsta từ trang web chính thức và làm theo hướng dẫn trong tài liệu để bắt đầu.
Đăng kí để nhận thư mới
Vì chúng tôi đã cài đặt DevKinsta, chúng tôi sẽ mở nó và làm theo bước bên dưới để thiết lập WordPress không đầu đầu tiên của chúng tôi.
Trên bảng điều khiển DevKinsta, hãy tạo một trang WordPress mới bằng Nginx, MySQL và bất kỳ phiên bản WordPress nào có sẵn. Ngoài ra, bạn có thể nhập một phiên bản WordPress hiện có hoặc tạo một phiên bản WordPress tùy chỉnh từ bảng điều khiển.
Tiếp theo, đặt tên, tên người dùng quản trị viên và mật khẩu cho phiên bản WordPress mới tạo của bạn, sau đó nhấp vào Tạo và sao chép chi tiết trong khi DevKinsta tạo một phiên bản WordPress mới trong máy cục bộ của bạn.
Tiếp theo, nhấp vào Open Site để mở phiên bản WordPress mới tạo của bạn trên trình duyệt mặc định của bạn.
Cuối cùng, bạn có thể đăng nhập vào bảng điều khiển quản trị bằng cách truy cập liên kết http://headless-wordpress-news-blog.local/wp-admin
và nhập thông tin đăng nhập quản trị viên mà bạn đã nhập khi tạo phiên bản mới.
Lưu ý rằng chúng tôi đã thiết lập cục bộ WordPress không đầu của mình với URL http://headless-wordpress-news-blog.local
với giao diện người dùng được lưu trữ cục bộ tại http://news-blog.local
và chúng tôi sẽ sử dụng nó xuyên suốt hướng dẫn.
Định cấu hình WordPress không đầu của chúng tôi
Tiếp theo, sau khi đăng nhập thành công vào bảng điều khiển WordPress, bạn có thể tiếp tục cài đặt bất kỳ plugin và cấu hình nào mà bạn chọn.
Chúng tôi sẽ vô hiệu hóa hoàn toàn chủ đề cho hướng dẫn này và chỉ truy cập nội dung thông qua điểm cuối dựa trên API REST của WordPress bằng cách cài đặt plugin Chuyển hướng trang web đơn giản và thiết lập nó.
Đi tới Plugin> Thêm mới và tìm kiếm Chuyển hướng trang web đơn giản, cài đặt và kích hoạt nó:

Tiếp theo, nhấp vào Cài đặt plugin và nhập URL dựa trên giao diện người dùng của bạn (ví dụ: http://news-blog.local
), nhấp vào tùy chọn Cài đặt nâng cao và thêm các đường dẫn sau – /wp-admin
, /wp-login.php
và /wp-json
– vào phần Loại trừ Đường dẫn.
Cuối cùng, bật Plugin bằng cách chọn Đã bật trong menu thả xuống Trạng thái chuyển hướng :

… Và đó là nó!
Ngoài ra, nếu API JSON của bạn không được bật khi bạn truy cập http://headless-wordpress-news-blog.local/wp-json
theo mặc định, bạn có thể bật nó bằng cách mở Permalinks trong Cài đặt WordPress và chọn Tên bài đăng hoặc bất kỳ một trong những lựa chọn khác của bạn ngoại trừ Đồng bằng :

Bây giờ khi bạn truy cập http://headless-wordpress-news-blog.local/wp-json
, nó sẽ hiển thị cho bạn dữ liệu JSON như bên dưới:
Cần lưu trữ hàng đầu, nhanh chóng và an toàn cho trang web thương mại điện tử mới của bạn? Kinsta cung cấp các máy chủ nhanh như chớp và hỗ trợ đẳng cấp thế giới 24/7 từ các chuyên gia WooCommerce. Kiểm tra các kế hoạch của chúng tôi
{ "name": "Headless WordPress News Blog", "description": "Just another WordPress site", "url": "http://headless-wordpress-news-blog.local", "home": "http://headless-wordpress-news-blog.local", "gmt_offset": "0", "timezone_string": "", "namespaces": [ "oembed/1.0", "wp/v2", "wp-site-health/v1" ], "authentication": [ ], "routes": { "/": { "namespace": "", "methods": [ "GET" ], "endpoints": [ { "methods": [ "GET" ], "args": { "context": { "default": "view", "required": false } } } ], ...
Thiết lập Vue.js (Giao diện người dùng)
Chúng tôi sẽ sử dụng công cụ phát triển web Vite để tạo ứng dụng Vue 3 của chúng tôi để kết nối với WordPress không đầu. Bạn có thể đọc thêm về các công cụ phát triển Vue 3 và Vite.
Trong bài viết này, chúng tôi sẽ xây dựng một blog tin tức. Tất cả quản lý nội dung phụ trợ của dự án sẽ được phát triển và lưu trữ với WordPress không đầu của chúng tôi bằng Devkinsta.
Nhập cùng với các lệnh đơn giản sau:
npm init @vitejs/app news-blog cd news-blog npm install npm run dev
Nếu bạn đang gặp sự cố với khoảng trắng trong tên người dùng của mình, hãy thử sử dụng:
npx create-vite-app news-blog
Lưu ý rằng chúng tôi đã định cấu hình ứng dụng Vue 3 của mình để nghe http://news-blog.local
, nhưng bạn có thể sử dụng http://localhost:3000
mặc định.
Cuối cùng, mở cơ sở mã Vue 3 của bạn bằng bất kỳ trình chỉnh sửa mã nào bạn chọn. Chúng ta sẽ sử dụng VSCode, và chúng ta hãy bắt đầu sử dụng mã.
Sử dụng API WordPress
Chúng tôi đã tiếp tục phát triển phần còn lại của ứng dụng Vue để tiết kiệm thời gian đọc cho bạn, nhưng bạn có thể tiếp tục sao chép kho lưu trữ từ GitHub của tôi.
Thành phần bài đăng ứng dụng hiển thị
Đoạn mã bên dưới cho thấy cách chúng tôi triển khai WordPress REST API với phiên bản Vue của chúng tôi để hiển thị tất cả các bài đăng từ WordPress không có đầu:
<template> <section> <div class="padding-top"> <div class="container inner-padding-top"> <div class="row"> <div class="col-md-12 col-sm-12-col-xs-12 text-center"> <h2 class="lead-title text-uppercase"> Latest Backend Dev. Articles </h2> <h3 class="article-subtitle"> Latest Backend Dev. Articles curated daily by the community. </h3> </div> </div> <div class="row mb-1 mt-5"> <post v-for="(post, i) in posts" :key="i" :post="post" /> </div> </div> </div> <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5"> <Button link="/posts" class="col p-3">More Articles</Button> </div> </section> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ posts: (state) => { return [...state.post.posts].slice(0, 22) }, }), }, } </script>
Hiển thị thành phần bài đăng đơn
Đoạn mã hiển thị cách chúng tôi truy xuất một bài đăng với WordPress REST API với WordPress không đầu và hiển thị nó trong phiên bản Vue của chúng tôi:
<template> <div class="card single"> <div class="card-head pl-3 pr-3 pt-3"> <h1 class="title">{{ post.title || '' }}</h1> <div class="d-flex"> <div class="author d-flex pr-3 pb-4"> <div class="profile mr-2"></div> <a :href="'/authors/' + post.author.slug" class="subtitle is-6"> {{ post.author.name }} </a> </div> <div class="date_created"> <small class="text-muted"> <li class="fa fa-calendar"></li> <time :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')" >{{ $moment(post.date).format('MMMM Do YYYY') }}</time > </small> </div> </div> </div> <div class="block-image pl-3 pr-3 pt-2 mb-3"> <img v-lazy-load :data-src="image" class="card-img-top img-fluid" :alt="post.title" /> </div> <div class="tags absolute"> <a v-for="category in post.categories" :key="category.id" :href="'/categories/' + category.slug" class="btn-tag" > {{ category.title }} </a> </div> </div> </template> <script> import Vue from 'vue' export default { name: 'SinglePost', props: { post: { type: [Object, Array], default: () => {}, }, }, } </script>
Dưới đây là cửa hàng thực hiện lệnh gọi API tới API WordPress không đầu cho các nội dung phụ trợ:
export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts` ) const data = await response.json() if (data) { commit('setPosts', data) } return data } }, async getPost({ commit }, id) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}` ) const data = await response.json() if (data) { commit('setPost', data) } return data } }, }
Triển khai WordPress không đầu với Kinsta
Cuối cùng, việc triển khai WordPress không đầu của bạn được thực hiện rất dễ dàng với DevKinsta bằng cách sử dụng dịch vụ lưu trữ Kinsta.
Để triển khai WordPress không cần đầu của bạn cho Kinsta, hãy nhấp vào nút Đẩy để phân giai đoạn trên bảng điều khiển DevKinsta của bạn và đăng nhập vào Kinsta bằng thông tin đăng nhập của bạn. Bạn có thể tạo một tài khoản Kinsta mới để lấy thông tin đăng nhập của mình.
Bạn có thể tìm hiểu cách thực hiện các thay đổi đối với môi trường dàn dựng để triển khai WordPress không cần đầu của mình đến các dịch vụ lưu trữ Kinsta chỉ bằng một cú nhấp chuột.
Cuối cùng, bạn có thể triển khai phiên bản Vue.js của mình cho bất kỳ nhà cung cấp dịch vụ lưu trữ đám mây nào mà bạn chọn. Đảm bảo cập nhật điểm cuối WordPress không đầu của bạn cho phù hợp để kiểm tra ứng dụng của bạn trong môi trường sản xuất trực tiếp.
Bản tóm tắt
WordPress không có đầu và những lợi ích mà nó đi kèm sẽ tồn tại trong một thời gian. Sự phổ biến của nó sẽ chỉ tiếp tục phát triển khi ngày càng có nhiều nhà phát triển và chủ sở hữu trang web hiểu được những mặt trái của một lựa chọn không cần đầu.
Trong hướng dẫn này, chúng tôi đã giới thiệu cho bạn những lợi ích, ưu và nhược điểm của WordPress không đầu và chúng tôi đã chỉ cho bạn cách xây dựng và triển khai WordPress không đầu đầu tiên của bạn với DevKinsta. Bây giờ bạn đang trên đường triển khai WordPress không cần đầu của mình.
Mẹo của bạn để triển khai một trang WordPress không có đầu là gì? Hãy chia sẻ chúng trong phần bình luận!
Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:
- Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
- Tích hợp Cloudflare Enterprise.
- Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
- Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.
Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.