Sử dụng WordPress làm CMS không đầu

Lần đầu tiên tôi nghe nói về cách tiếp cận CMS không đầu trong một cuộc nói chuyện mà tôi đã xem từ Twin Cities Drupal. Tôi thích ý tưởng về sự phân tách mối quan tâm giữa việc tạo nội dung và xem nội dung đó.

Tôi đã trải qua một cách dễ dàng một máy chủ có thể đi xuống, lấy ra tất cả các trang web trên đó, dẫn đến phút hoặc giờ hoảng loạn tim (có 24 trên tôi). Tôi cũng đã thấy cách một trang web dựa trên CMS nguyên khối có thể bị tổn hại về an ninh và mất rất nhiều nỗ lực để sửa chữa (điều đó đã khiến tôi mất hơn hai ngày làm việc chưa thanh toán).

Tôi đã thấy những lợi ích của CDN (mạng phân phối nội dung) có thể lưu trữ tệp hình ảnh, âm thanh và video của bạn trên máy chủ được tối ưu hóa để phân phối nhanh và có thể sao chép các tệp đó trên toàn thế giới để phân phối nhanh tới những khu vực đó nếu cần. Điều gì sẽ xảy ra nếu toàn bộ trang web của bạn có thể hưởng lợi từ phương pháp này?

Bạn sẽ cần…

● Máy tính có kết nối internet (obvs)
● Trình chỉnh sửa mã (Mã Atom hoặc VS)
● Một dòng lệnh shell / terminal
● Đã cài đặt phiên bản Node.js gần đây (bạn có thể tải xuống và cài đặt tại đây)
● Trang web WordPress để tải nội dung. Nếu bạn không có, bạn có thể sử dụng nền tảng WordPress.com hoặc gói xây dựng Heroku này.
● Các tệp nguồn từ GitHub.

Bắt đầu

WordPress ra khỏi hộp với API REST và đó là những gì chúng ta sẽ sử dụng để truy vấn dữ liệu của bạn. Vì vậy, chúng tôi không thực sự cần bất cứ điều gì khác! Trang web hiển thị của chúng tôi hoàn toàn tách biệt với trang nội dung của chúng tôi, vì vậy chúng tôi sẽ không cần các chủ đề WordPress hoặc bất kỳ tùy chỉnh nào khác bên ngoài một vài plugin (tùy chọn). Mặc dù tất nhiên bạn có thể thêm chúng nếu bạn muốn.

Ngoại lệ là nếu bạn cần các trường meta tùy chỉnh cho các khu vực nội dung bổ sung. Có thể bạn đang sử dụng Trường tùy chỉnh nâng cao để làm như vậy; bạn có thể thêm dữ liệu đó vào WordPress API bằng cách cài đặt plugin này.

Sử dụng trình tạo trang web tĩnh

Sử dụng WordPress như một CMS không đầu: Màn hình khởi động Gatsby

Màn hình khởi động mặc định của Gatsby

Bây giờ chúng ta có nguồn nội dung của mình, hãy tìm nạp dữ liệu và hiển thị nó bằng trình tạo trang web tĩnh. Vũ khí của tôi trong lĩnh vực này là Gatsby, một trình tạo trang web tĩnh tuyệt vời được xây dựng với JavaScript.

Nếu bạn đang tìm kiếm một cách tốt để xây dựng các kỹ năng JavaScript của mình và tìm hiểu React bằng cách bị kẹt vào một số mã, tôi khuyên bạn nên thử Gatsby để làm như vậy. Tôi đã học được rất nhiều bằng cách chơi với nó.

Đầu tiên, hãy cài đặt một công cụ dòng lệnh cho phép chúng ta tạo các trang Gatsby:

npm install -global gatsby-cli

Bây giờ, điều hướng đến thư mục mà bạn muốn giữ trang web của mình và chạy lệnh này:

gatsby blog mới

Điều này sẽ tạo ra một thư mục mới gọi là 'blog' và cài đặt Gatsby và các phụ thuộc của nó vào thư mục này. Mở thư mục này trong trình soạn thảo văn bản yêu thích của bạn. Có thể có rất nhiều tệp ở đó. Đừng lo lắng, chúng tôi sẽ chỉ chỉnh sửa trực tiếp gatsby-config.js, gatsby-node.js tệp và src thư mục, là nơi các mẫu của chúng tôi hoạt động.

Lấy nội dung của chúng tôi

Bước đầu tiên chúng tôi muốn thực hiện là tìm nạp nội dung của chúng tôi từ API của trang web WordPress.

Để làm điều đó, chúng ta sẽ cài đặt gatsby-source-wordpress, một plugin được viết sẵn cho WordPress. Điều này minh họa một trong những lý do chính khiến tôi thích Gatsby – bạn có thể lấy dữ liệu từ nhiều nguồn khác nhau. Rất nhiều trình tạo trang web tĩnh bị hạn chế sử dụng các tệp Markdown nhưng Gatsby rất linh hoạt.

Hệ sinh thái plugin của Gatsby rất trưởng thành. Có vô số cách viết sẵn để nhận dữ liệu của bạn và rất nhiều chức năng thông minh khác hữu ích.

Để cài đặt plugin, hãy thay đổi thư mục đầu tiên vào trang Gatsby mới của bạn bằng cách sử dụng lệnh sau: cd blog.

Bây giờ chạy lệnh này: npm install –save gatsbysource-wordpresS.

Khi đã xong, đã đến lúc mở tệp gatsby-config.js. Bạn sẽ thấy rằng đã có một số thiết lập cơ bản tại chỗ mà Gatsby cung cấp cho chúng tôi theo mặc định. Chúng tôi sẽ xây dựng trên đó để định cấu hình plugin của chúng tôi tại đây:

module.exports = {
 siteMetadata: {
  tiêu đề: 'Gatsby Default Starter',
 },
 bổ sung: [
  'gatsby-plugin-react-helmet',
  {
   resolve: "gatsby-source-wordpress",
   options: {
    baseUrl: "my-wordpress-site.com",
    protocol: "https",
    hostingWPCOM: false,
    useACF: true,
    searchAndReplaceContentUrls: {
     sourceUrl: "https://my-wordpress-site.com",
     replacementUrl: "https://my-static-site.com",
    }
   },
  },
 ],
}

Nó có hoạt động không?

Bạn có thể kiểm tra bằng cách mở thiết bị đầu cuối, nhập gatsby phát triển và xem điều gì xảy ra. Được cảnh báo! Ngay cả khi bạn đã cài đặt đúng, bạn vẫn sẽ nhận được một số cảnh báo – đây có thể là Gatsby đang tìm nội dung bạn chưa viết.

Bạn hiện có thể xem gatsby-starter-default trong trình duyệt.

http: // localhost: 8000 /

Xem GraphiQL, một IDE trong trình duyệt, để khám phá dữ liệu và lược đồ của trang web của bạn.

http: // localhost: 8000 / ___ graphql

Lưu ý rằng xây dựng phát triển không được tối ưu hóa. Để tạo bản dựng sản xuất, hãy sử dụng gatsby build.

Nếu Gatsby mặc định starer (phải) không phải là những gì bạn đang nhận được, kiểm tra trang web WordPress của bạn không phải là trên một tên miền phụ, rằng nó chắc chắn bằng cách sử dụng HTTPS hoặc HTTP và rằng bạn có cùng trong cài đặt của bạn.

Bây giờ chúng ta có thể vào http: // localhost: 8000 / và xem trang Gatsby của chúng ta!

Chúng tôi có thể truy vấn dữ liệu của mình không?

Bạn có thể nhận thấy rằng không có nội dung WordPress ở đây. Điều này là bởi vì chúng tôi đã không nói với Gatsby phải làm gì với nó. Trước khi chúng tôi làm điều đó, chúng ta hãy kiểm tra xem chúng tôi đã thực sự có nội dung của chúng tôi có sẵn cho Gatsby không. Để làm điều đó, hãy truy cập url này:

http: // localhost: 8000 / ___ graphql

Công cụ tích hợp này được gọi là GraphiQL và là một sức mạnh bí mật khác của Gatsby.

GraphQL tương tự như REST: đó là một cách để truy vấn dữ liệu. Nhưng với GraphQL, bạn có thể tương tác với dữ liệu của mình dễ dàng hơn nhiều. GraphiQL (một IDE trực quan cho GraphQL) có thể cho chúng ta thấy một số thủ thuật này. Trên bảng điều khiển bên trái, hãy thử gõ như sau:

{
 allWordpressPost {
  cạnh {
   nút {
    ID
    sên
    trạng thái
    bản mẫu
    định dạng
   }
  }
 }
}

Điều này có thể trông hơi giống JSON nhưng không phải vậy. Đó là một ngôn ngữ truy vấn mới mà tôi nghĩ một ngày nào đó sẽ thay thế phần lớn REST như một cách giao tiếp với các API.

Bạn đã nhận được gì khi nhấn ctrl + enter trong GraphiQL? Bạn hy vọng sẽ thấy các bài đăng và trang WordPress của bạn ở phía bên phải của màn hình.

Chúng tôi thực sự sẽ sử dụng truy vấn này trong bước tiếp theo của chúng tôi, vì vậy hãy giữ nó tiện dụng! Bạn có thể muốn xem những dữ liệu khác mà bạn có thể nhận được với GraphiQL trong khi bạn đang ở đây. Nếu bạn muốn làm điều đó, hãy thử di chuyển con trỏ xung quanh và nhập ctrl + dấu cách và / hoặc ctrl + enter. Điều đó sẽ tiết lộ các nhóm nội dung khác.

Bây giờ, chúng tôi có nội dung trong Gatsby. Tiếp theo, chúng ta cần hiển thị nó.

Hiển thị các bài đăng của chúng tôi

Sử dụng WordPress làm CMS không đầu: Màn hình phát triển Gatsby 404

Gatsby phát triển trang 404 hiển thị tất cả các bài đăng trên WordPress của chúng tôi

Trong bước tiếp theo, chúng ta sẽ sử dụng gatsby-node.js tập tin.

gatsby-node.js là một tệp bạn có thể sử dụng để tương tác với "Node API" của Gatsby. Tại đây, bạn có thể kiểm soát cách trang web của bạn được tạo và tạo trang, bài đăng và hơn thế nữa.

Chúng tôi sẽ viết một số hướng dẫn ở đây để cho Gatsby biết phải làm gì với dữ liệu của chúng tôi:

const path = require (`path`);

exports.createPages = ({graphql, boundActionCreators})
=> {
 const {createPage} = boundActionCreators
 return new Promise ((giải quyết, từ chối) => {
  graphql (
   `
   {
    allWordpressPost {
     cạnh {
      nút {
       ID
       sên
       trạng thái
       bản mẫu
       định dạng
      }
     }
    }
   }
  `
 ) .then (result => {
   if (result.errors) {
    console.log (result.errors)
    từ chối (result.errors)
   }

   const postTemplate = path.resolve (`./src/templates/
post.js`)

   result.data.allWordpressPost.edges.forEach (cạnh => {
    tạo trang({
     đường dẫn: `/ $ {edge.node.slug} /`,
     thành phần: postTemplate,
     bối cảnh: {
      id: edge.node.id,
     },
    })
   })
   giải quyết()
  })
 })
}

Mã này tạo các trang từ truy vấn GraphQL của chúng tôi và cho mỗi trang, nó sẽ sử dụng một mẫu mà chúng tôi đã xác định (/src/templates/post.js). Vì vậy, tiếp theo, chúng ta cần phải tạo tập tin đó!

Tạo mẫu bài đăng

Bên trong thư mục / src /, tạo một thư mục có tên là các mẫu và một tệp bên trong được gọi là post.js. Thêm vào đó mã này:

nhập Phản ứng từ 'phản ứng'
nhập khẩu mũ bảo hiểm từ 'phản ứng mũ bảo hiểm'

class postTemplate mở rộng React.Component {
 render () {
  const post = this.props.data.wordpressPost;
  const slug = this.props.data.wordpressPost.slug;

  trở về (
   

)  } } xuất trang mặc địnhTemplate truy vấn const xuất khẩu = graphql`  truy vấn currentPost ($ id: String!) {   wordpressPost (id: {eq: $ id}) {    chức vụ    Nội dung    sên   }   trang web {    siteMetadata {     chức vụ    }   } }

Điều này sử dụng một truy vấn GraphQL khác nhau để lấy dữ liệu về bài đăng cụ thể mà nó được cung cấp bởi gatsbynode.js , sau đó sử dụng React để hiển thị ra trình duyệt.

Nếu bạn muốn xem nhanh danh sách tất cả các bài đăng của mình, bạn có thể nhập http: // localhost: 8000 / a vào thanh địa chỉ của trình duyệt. Thao tác này sẽ đưa bạn đến trang 404 phát triển, liệt kê tất cả các bài đăng của bạn. Click vào một để truy cập vào nó!

Bước tiếp theo

Chúng tôi đã trầy xước bề mặt của cách sử dụng WordPress như một CMS không đầu và tôi hy vọng tôi đã giới thiệu cho bạn một số khái niệm và công cụ thú vị mà bạn có thể sử dụng và thử nghiệm trong tương lai.

Có rất nhiều điều cho câu chuyện này và các đồng nghiệp của tôi và tôi đã viết blog về nó rộng rãi tại Indigo Tree. Tôi cũng đã viết nhiều hơn trên blog cá nhân của tôi, Delicious Reverie.

Hãy giữ liên lạc với tôi qua những kênh đó và trên Twitter để nghe những phát triển thú vị hơn trong thế giới CMS không đầu!

Bài viết này đã được xuất bản lần đầu trong ấn bản 308 của mạng lưới, tạp chí bán chạy nhất thế giới dành cho nhà thiết kế và nhà phát triển web. Mua số phát hành 308 tại đây hoặc là Đăng ký tại đây.

Những bài viết liên quan:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *