Làm cách nào để tùy chỉnh một khối trong WordPress?

wordpress 5. 0 đã hết hạn và cùng với đó là trình chỉnh sửa dựa trên khối mới, Gutenberg. Ngay khi mở hộp, nó chứa nhiều lựa chọn khối hợp lý mà bạn có thể sử dụng trên các trang và bài đăng của mình. Tuy nhiên, vì đây là WordPress nên luôn có chỗ cho nhiều chức năng tùy chỉnh hơn

Nói cách khác, có thể xây dựng các khối tùy chỉnh của riêng bạn. Để làm như vậy, bạn sẽ cần biết ít nhất một chút về viết mã, nhưng bản thân quá trình này tương đối đơn giản. Ngoài ra, việc tạo các khối tùy chỉnh cho chức năng bạn muốn sử dụng lại có thể giúp bạn tiết kiệm rất nhiều thời gian trong quá trình thực hiện

Ghi chú. Khi kiểm tra trình chỉnh sửa Gutenberg hoặc tạo các khối tùy chỉnh, hãy đảm bảo thực hiện các thay đổi trong môi trường dàn dựng hoặc cục bộ, chẳng hạn như Cục bộ. Nhấp vào đây để tìm hiểu thêm về thử nghiệm WordPress 5. 0

Đối với bài viết này, tôi sẽ nói thêm một chút về trạng thái hiện tại của Block Editor. Sau đó, tôi sẽ giới thiệu cách tạo khối mới theo cách thủ công và giới thiệu cho bạn một số plugin có thể đơn giản hóa quy trình. Chúng ta hãy đi đến đó

Tại sao bạn có thể cần tạo các khối tùy chỉnh cho trình chỉnh sửa WordPress mới

Tất nhiên, các khối là trung tâm của chức năng của trình chỉnh sửa mới. Ý tưởng là bạn có thể thêm các khối ở bất cứ đâu bạn muốn và sắp xếp chúng theo hàng và cột. Đây là giao diện của trình chỉnh sửa khi không trang điểm

Đây là những gì bạn sẽ thấy khi thêm khối mới vào một trong các bài đăng hoặc trang của mình

Mặc dù chức năng của mỗi khối là khác nhau, nhưng việc thêm và chỉnh sửa chúng thường hoạt động giống nhau. Vấn đề là hiện tại, Trình chỉnh sửa khối vẫn còn tương đối mới – vì vậy việc lựa chọn các khối theo ý của bạn hiện không quá ấn tượng

Tất nhiên, bộ sưu tập các khối có sẵn cho bạn chắc chắn sẽ tăng theo thời gian. Lõi của WordPress sẽ thêm các yếu tố mới và các nhà phát triển plugin sẽ điền vào chỗ trống (như họ thường làm). Trên thực tế, đã có một số plugin thêm khối mới vào Trình chỉnh sửa khối, bao gồm Khối nguyên tử và Khối có thể xếp chồng

Tuy nhiên, nếu có một khối cụ thể mà bạn muốn sử dụng nhưng không thể tìm thấy, bạn chỉ có một tùy chọn duy nhất – tạo một khối tùy chỉnh mà bạn có thể sử dụng với Gutenberg Editor

Cách tạo khối tùy chỉnh theo cách thủ công (trong 2 bước)

Block API của Gutenberg Editor là công cụ bạn sẽ cần. Trong phần này, tôi sẽ giúp bạn thiết lập plugin mới để thêm khối vào trình chỉnh sửa của bạn. Để làm như vậy, tất cả những gì bạn cần là hai tệp (và một số mã)

Bước 1. Tạo một plugin để gọi các tệp khối của bạn

Cách rõ ràng nhất để tạo khối Trình chỉnh sửa Gutenberg tùy chỉnh là thiết lập plugin 'xếp hàng' hoặc gọi tập lệnh khối của bạn và thêm chúng vào trình chỉnh sửa

Để bắt đầu, hãy truy cập trang web của bạn qua SFTP bằng ứng dụng khách như FileZilla. Khi bạn đã vào, hãy điều hướng đến thư mục root WordPress của bạn và vào thư mục wp-content/plugins. Bên trong, bạn sẽ tìm thấy các thư mục cho tất cả các plugin trên trang web của mình

Bây giờ, nhấp chuột phải vào bất cứ nơi nào bạn muốn trong thư mục và tạo một thư mục mới. Tôi sẽ gọi của tôi là test-block, nhưng của bạn có thể liên quan đến bạn

Mở thư mục, tạo plugin mới. php (có thể đặt tên phù hợp hơn), sau đó mở tệp trống và thêm đoạn mã sau

Điều này tạo ra một chức năng để liệt kê tập lệnh khối của bạn – test-block.js, trong trường hợp này. Tất nhiên, tệp này chưa tồn tại (nhưng sẽ sớm có)
Ngoài ra, chức năng này cũng bao gồm hai phụ thuộc tập lệnh – wp-blocks và wp-editor. Cái trước xử lý đăng ký khối giữa các chức năng khác, trong khi wp-editor bao gồm một số thành phần cơ bản mà bạn có thể cần, chẳng hạn như Rich Text
Bước 2. Đăng ký khối của bạn và cấu hình các thuộc tính của nó
Khi tệp PHP đã sẵn sàng, đã đến lúc thiết lập tệp JavaScript test-block.js. Hãy tiếp tục và tạo tệp này trong cùng thư mục plugin với plugin.php
Khi tệp đã sẵn sàng, hãy mở tệp đó bằng trình soạn thảo văn bản và chuẩn bị viết mã. Ví dụ này là một khối rất đơn giản để cho phép bạn thêm hộp văn bản có đường viền vào các trang của mình



/* This section of the code registers a new block, sets an icon and a category, and indicates what type of fields it'll include. */
 
wp.blocks.registerBlockType('brad/border-box', {
  title: 'Simple Box',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {type: 'string'},
    color: {type: 'string'}
  },
 
/* This configures how the content and color fields will work, and sets up the necessary elements */
 
  edit: function(props) {
    function updateContent(event) {
      props.setAttributes({content: event.target.value})
    }
    function updateColor(value) {
      props.setAttributes({color: value.hex})
    }
    return React.createElement(
      "div",
      null,
      React.createElement(
        "h3",
        null,
        "Simple Box"
      ),
      React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
      React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
    );
  },
  save: function(props) {
    return wp.element.createElement(
      "h3",
      { style: { border: "3px solid " + props.attributes.color } },
      props.attributes.content
    );
  }
})
Như bạn có thể thấy, điều này sử dụng JavaScript với React để thiết lập mọi thứ. Tôi cũng đã thêm một số nhận xét vào mã, nhưng để tóm tắt, nó đăng ký và định cấu hình các thuộc tính khối cơ bản. Sau phần đầu tiên, tôi đã định cấu hình cách thức hoạt động của các trường. Ví dụ này bao gồm trường văn bản và bộ chọn màu cho đường viền
Sau khi lưu tệp test-block.js, hãy kích hoạt plugin từ bên trong WordPress
Tiếp theo, mở Block Editor và thêm một khối mới để kiểm tra xem nó hiển thị như thế nào
Đây là giao diện của khối trông như thế nào
Khối đơn giản này bao gồm các nguyên tắc cơ bản quan trọng nhất để đưa vào các dự án của riêng bạn. Tất nhiên, bạn có thể tạo các khối đơn giản hoặc phức tạp tùy ý, nhưng nói chung, đây là tất cả những gì bạn cần để xuất bản một khối
Tuy nhiên, đến giai đoạn xuất bản sẽ yêu cầu bạn phát triển kỹ năng viết mã của mình. Ví dụ: bạn sẽ muốn cải thiện JavaScript của mình, vì Trình chỉnh sửa khối sử dụng rộng rãi ngôn ngữ này. Đó là một chút thay đổi so với việc chủ yếu làm việc với PHP, nhưng bạn có thể làm một số thứ tuyệt vời không kém và có thể hơn thế nữa
2 plugin bạn có thể sử dụng để tạo các khối tùy chỉnh
Học cách tạo các khối tùy chỉnh theo cách thủ công là điều tuyệt vời nếu bạn muốn hiểu cách API khối hoạt động. Tuy nhiên, có những plugin WordPress bạn có thể sử dụng để giúp bạn tạo khối nhanh hơn. Đây là hai ứng cử viên hàng đầu
1. khối phòng thí nghiệm



Nói một cách đơn giản, Block Lab cho phép bạn tạo các khối tùy chỉnh trực tiếp từ bảng điều khiển WordPress của mình. Plugin cho phép bạn thiết lập bao nhiêu khối tùy thích và bạn có thể đặt tên, danh mục, biểu tượng, mô tả và cho biết những trường bạn muốn đưa vào cho từng khối
Tuy nhiên, hãy lưu ý rằng bạn vẫn cần thực hiện một số mã hóa nhẹ để thiết lập mẫu của từng khối. Mặc dù vậy, bạn có thể bỏ qua hầu hết các công việc đăng ký từng khối và liệt kê tập lệnh của nó
2. khối lười biếng
Nếu bạn không muốn xử lý bất kỳ mã nào, Lazy Blocks có thể phù hợp với bạn. Plugin này cho phép bạn tạo các khối tùy chỉnh bằng cách sử dụng danh sách các thành phần dựng sẵn, bao gồm các trường văn bản, mật khẩu và hình ảnh, cũng như bộ chọn màu và ngày, trong số những thứ khác
Lựa chọn các yếu tố có thể sử dụng đủ rộng để bạn có thể kết hợp một số khối thú vị, nhưng nếu bạn muốn tạo thứ gì đó có tính đặc biệt cao, bạn có thể sẽ được phục vụ tốt hơn với giải pháp nâng cao hơn
Phần kết luận
Nếu bạn đã sử dụng WordPress được một thời gian, rất có thể bạn đã cố gắng mở rộng chức năng của Trình chỉnh sửa Cổ điển hiện tại bằng các plugin. Tạo các phần tử Trình chỉnh sửa khối tùy chỉnh cũng giống như vậy, chỉ có điều là có các công cụ và ngôn ngữ mới để tận dụng. Trong mọi trường hợp, việc mở rộng những gì trình chỉnh sửa có thể làm có rất nhiều tiềm năng giúp công việc của bạn dễ dàng hơn, vì vậy bạn nên khám phá các tùy chọn của mình
Bạn có thể rút gọn quy trình tạo khối Trình chỉnh sửa khối tùy chỉnh thành hai bước
Tạo một plugin gọi JavaScript của khối của bạn
Sử dụng tệp JavaScript để đăng ký khối mới của bạn và đặt thuộc tính của nó
Và hãy nhớ, luôn sử dụng môi trường thử nghiệm như Địa phương để thử nghiệm một cách an toàn khỏi trang web trực tiếp của bạn
Cái gì tiếp theo?
Tạo và kiểm tra các khối Gutenberg tùy chỉnh của bạn với Local miễn phí
Tìm hiểu thêm về Địa phương tại đây
Bạn có bất kỳ câu hỏi nào về cách thiết lập các khối Block Editor tùy chỉnh không?