Cách tạo khối Gutenberg tùy chỉnh trong WordPress

Bạn có muốn tạo khối Gutenberg tùy chỉnh để sử dụng cho WordPress site của mình?

Sau khi nâng cấp lên phiên bản WordPress 5.0, bạn sẽ phải sử dụng các khối để sáng tạo nội dung.

WordPress cung cấp cho bạn các khối rất hữu ích. Một số plugin cũng cung cấp cho bạn các khối tuyệt vời.

Tuy nhiên, có đôi lúc bạn muốn tạo các khối riêng để sử dụng cho các mục đích cụ thể nào đó.

Nếu bạn đang tìm kiếm giải pháp để tạo khối Gutenberg tùy chỉnh thì bài viết này dành cho bạn.

Trong bài viết này tôi sẽ chia sẻ cách đơn giản nhất để tạo khối Gutenberg tùy chỉnh trong WordPress.

Lưu ý: Bài viết này dành cho các bạn đã có một ít kiến thức về HTML, CSS. Vì tôi sẽ sử dụng các đoạn mã HTML và CSS để tạo ra các khối Gutenberg tùy chỉnh.

Bước 1: Chuẩn bị trước khi tạo khối Gutenberg tùy chỉnh

Việc đầu tiên bạn cần làm là cài đặt và kích hoạt plugin  Block Lab.

Plugin này cho phép bạn tạo các khối tùy chỉnh ngay trong khu vực quản trị. Nó cho việc tạo khối tùy chỉnh trở nên đơn giản hơn.

block lab

Nếu bạn chưa biết cách cài đặt plugin, hãy đọc lại bài viết Hướng dẫn cài đặt và quản lý plugin trong WordPress.

Sau khi kích hoạt plugin, bạn hãy chuyển sang bước tiếp theo.

Bước 2: Tạo một khối mới

Trong khuôn khổ bài viết này, tôi sẽ tạo một khối Testimonials để làm ví dụ. Bạn có thể tạo bất kỳ khối nào theo nhu cầu, sở thích của mình.

Việc đầu tiên bạn cần làm là truy cập vào Block Lab » Add New ở phía bên trái của khu vực quản trị WordPress.

Trên trang này, bạn cần đặt tên cho khối. Bạn có thể nhập bất cứ tên gì mà mình muốn vào hộp văn bản “Enter block name here”.

add new block

Tôi đặt tên cho khối Gutenberg tùy chỉnh của mình là Testimonials.

Ở phía bên phải của trang, bạn sẽ nhìn thấy các thuộc tính của khối. Tại đây bạn có thể chọn biểu tượng cho khối, chọn chuyên mục cho khối từ Category xổ xuống.

Plugin sẽ tự động điền slug dựa vào tên mà bạn đã đặt cho khối. Tuy nhiên, bạn có thể tạo tới 03 từ khóa trong trường Keywords để thuận lợi cho việc tìm kiếm.

block lab properties

Giờ hãy thêm một số trường khác cho khối của bạn. Bạn có thể thêm các trường khác nhau như: Văn bản (Text), Số (Number), Email, URL, màu sắc (Color), hình ảnh (Image), Hộp kiểm (Checkbox), Radio Button và nhiều thứ khác.

Tôi sẽ thêm 03 trường cho khối tùy chỉnh của mình: Một trường Image cho ảnh của người đánh giá, một Textbox chứa tên của người đánh giá, một trường Textarea để chứa văn bản chứng nhận.

Nhấp vào nút + Add Field để chèn trường đầu tiên.

add fields image in block lab

Có một số các tùy chọn của trường, chúng ta cùng tìm hiểu:

  • Field Label (Nhãn trường): Bạn có thể sử dụng bất kỳ tên nào mà bạn muốn cho nhãn trường. Ở đây tôi đặt tên là Reviewer Image.
  • Field Name (Tên trường): Trường này sẽ được tạo tự động dựa trên Field Label. Chúng ta sẽ sử dụng Field Name ở bước tiếp theo. Vì vậy hãy đảm bảo rằng nó là duy nhất.
  • Field Type (Kiểu trường): Tại đây bạn có thể chọn kiểu của trường. Vì tôi muốn trường đầu tiên là một ảnh nên tôi chọn kiểu trường là Image từ menu xổ xuống.
  • Field Location (Vị trí trường): Bạn có thể quyết định vị trí mà mình muốn thêm trường và trình chỉnh sửa hoặc trình kiểm tra.
  • Help Text: Bạn có thể thêm mô tả cho trường. Điều này không cần thiết nếu bạn tạo khối tùy chỉnh để sử dụng với mục đích cá nhân.

Bạn cũng có thể thấy một số tùy chọn bổ sung tùy theo trường mà bạn đã chọn. Ví dụ: Nếu bạn trường Text, bạn sẽ nhìn thấy các tùy chọn bổ sung như Placeholder Text và Character Limit.

Bạn có thể nhấp vào nút Close Field sau khi đã xong việc với trường Image.

Lặp lại các bước trên để thêm hai trường khác là Reviewer Name và Testimonial Text bằng cách nhấp vào nút  + Add Field.

after add field in block lab

Trong trường hợp bạn muốn sắp xếp lại thứ tự các trường, bạn chỉ cần nhấp vào biểu tượng ba gạch phía bên trái của nhãn trường để kéo và thả chúng.

Để chỉnh sửa hoặc xóa một trường nào đó, bạn hãy rê chuột lên nó. Tùy chọn Edit và Delete sẽ xuất hiện.

Sau khi thực hiện xong, hãy nhấp nút Publish phía bên phải của trang để lưu lại khối Gutenberg tùy chỉnh của bạn.

Bước 3: Tạo Block Template

Mặc dù bạn đã tạo một khối tùy chỉnh nhưng nó vẫn chưa thể hoạt động cho đến khi bạn tạo một Block Template tên là block-testimonials.php và upload nó vào thư mục WordPress Theme hiện hành.

create a block template

Tập tin Block Template sẽ nó cho plugin cách hiển thị các trường của khối trong trình biên tập. Plugin sẽ căn cứ và tập tin khuôn mẫu để dùng nó hiển thị nội dung khối.

Nếu không có tập tin này, bạn sẽ nhìn thấy một thông báo lỗi “Template file blocks/block-testimonials.php not found”.

Vì vậy hãy tạo tập tin khuôn mẫu của khối để mọi thứ hoạt động một cách chính xác.

Trước tiên bạn hãy tạo một thư mục trên màn hình máy tính và đặt tên là blocks. Bạn sẽ tạo tập tin Block Template trong thư mục này, sau đó upload nó lên thư mục cài đặt WordPress Theme hiện hành.

Bạn có thể sử dụng Notepad để tạo tập tin khuôn mẫu cho khối.

Mỗi khi thêm một trường mới vào khối tùy chỉnh, bạn cần thêm mã PHP vào tập tin Block Template:

<?php block_field( ‘add-your-field-name-here’ ); ?>

Nhớ thay add-your-field-name-here bằng tên trường của bạn.

Ví dụ: Tên trường đầu tiên của tôi là reviewer-image, nên dòng code tôi sẽ thêm vào tập tin Block Template sẽ là:

<?php block_field( ‘reviewer-image’ ); ?>

Rất đơn giản đúng không? Thực hiện tương tự cho các trường còn lại.

<?php block_field( ‘reviewer-image’ ); ?>
<?php block_field( ‘reviewer-name’ ); ?>
<?php block_field( ‘testimonial-text’ ); ?>

Tiếp theo bạn cần thêm một vài thẻ HTML để định dạng cho khối.

Ví dụ: Bạn có thể để ảnh của người đánh giá bên trong thẻ img. Nếu không WordPress sẽ hiển thị URL của ảnh. Điều này không đúng theo ý muốn của chúng ta.

Bạn cũng có thể thêm một lớp names và đặt nó bên trong thẻ div để định dạng kiểu cho nội dung của khối.

Bên dưới là đoạn code dành cho Block Template của tôi:

<div class=”testimonial-block clearfix”>
<div class=”testimonial-image”>
<img src =”<?php block_field( ‘reviewer-image’ ); ?>”>
</div>
<div class=”testimonial-box”>
<h4><?php block_field( ‘reviewer-name’ ); ?></h4>
<p><?php block_field( ‘testimonial-text’ ); ?></p>
</div>
</div>

Bạn hãy lưu lại tập tin vào thư mục blocks và đặt tên cho nó là block-testimonials.php.

Bước 4: Định dạng kiểu cho khối tùy chỉnh của bạn

Bạn có thể sử dụng CSS để định dạng kiểu cho khối tùy chỉnh của mình.

Mở trình chỉnh sửa văn bản thuần túy như Notepad và thêm đoạn code bên dưới vào:

.testimonial-block {
width: 100%;
margin-bottom: 25px;
}
.testimonial-image {
float: left;
width: 25%;
padding-right: 15px;
}
.testimonial-box {
float: left;
width: 75%;
}
.clearfix::after {
content: “”;
clear: both;
display: table;
}

Sau đó lưu lại với tên là block-testimonials.css trong thư mục blocks.

Bước 5: Upload tập tin Block Template vào thư mục cài đặt WordPress Theme

Giờ hãy upload thư mục blocks – thư mục chứa tập tin Block Template vào thư mục cài đặt WordPress Theme trên máy chủ web.

Để thực hiện điều này bạn cần sử dụng FTP hoặc trình quản lý tập tin File Manager của cPanel kết nối đến website của mình.

Để tìm hiểu thêm chi tiết cách upload tập tin lên website bằng cách sử dụng FTP, bạn hãy đọc lại bài viết này.

Sau khi kết nối, bạn hãy truy cập vào thư mục /wp-content/themes/. Tại đây, bạn cần mở thư mục WordPress Theme mà mình đang dùng.

Giờ hãy upload thư mục blocks chứa tập tin Block Template và tập tin CSS vào thư mục Theme hiện hành.

Sau khi xong, bạn có thể thực hiện bước tiếp theo để kết thúc quá trình tạo khối tùy chỉnh.

Lưu ý: Block Lab cho phép bạn tạo khối tùy chỉnh để sử dụng cho theme. Vì thế khi thay đổi WordPress Theme, bạn cần copy thư mục blocks vào thư mục Theme mới của bạn.

Bước 6: Kiểm tra khối mới của bạn

Đây là lúc bạn cần kiểm tra xem thử khối tùy chỉnh mà mình vừa tạo có hoạt động chính xác hay không. Bạn có thể thực hiện điều này bằng cách truy cập vào Pages » Add New để tạo một trang mới.

Tiếp theo, bạn hãy nhấp vào biểu tượng Add Block (+) và tìm khối Testimonials. Khi bạn đã tìm thấy khối, hãy nhấp vào nó để chèn vào trình tạo trang.

Bạn có thể chèn nhiều khối Testimonials vào trang của mình. Sau khi xong, bạn hãy nhấp nút Preview để xem trước hoặc nhấp nút Publish để xuất bản và xem nó hoạt động như thế nào.

Tôi hy vọng bài viết này sẽ giúp bạn biết cách tạo khối Gutenberg tùy chỉnh để sử dụng cho WordPress site của mình.

Nếu bạn thấy bài viết hữu ích đừng quên Like và Share.

Hẹn gặp lại bạn trong bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận