Cách tạo khối Gutenberg tùy chỉnh trong WordPress (Cách dễ dàng)

Bạn có muốn tạo một khối Gutenberg tùy chỉnh cho trang web WordPress của mình không? Sau khi cập nhật WordPress 5.0, bạn cần sử dụng các khối để tạo nội dung trong trình chỉnh sửa khối WordPress mới.

Other :

WordPress cung cấp một số khối hữu ích mà bạn có thể sử dụng khi viết nội dung. Nhiều plugin WordPress cũng đi kèm với các khối riêng mà bạn có thể sử dụng.

Tuy nhiên, đôi khi bạn có thể muốn tạo khối Gutenberg tùy chỉnh của riêng mình để thực hiện một số việc cụ thể.

Nếu bạn đang tìm kiếm một giải pháp dễ dàng để tạo các khối Gutenberg tùy chỉnh cho trang web WordPress của mình, thì bạn đang ở đúng nơi.

Trong hướng dẫn từng bước này, chúng tôi sẽ chỉ cho bạn cách dễ dàng để tạo một khối WordPress tùy chỉnh cho Gutenberg.

Creating a custom WordPress block for Gutenberg

Lưu ý : Bài viết này dành cho người dùng trung gian. Bạn sẽ cần phải làm quen với HTML và CSS để tạo các khối Gutenberg tùy chỉnh.

Bước 1: Bắt đầu

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

Đó là một plugin WordPress cho phép bạn tạo các khối tùy chỉnh từ bảng điều khiển quản trị của mình mà không gặp nhiều rắc rối.

Block Lab WordPress Plugin

Để cài đặt plugin, bạn có thể làm theo hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách cài đặt plugin WordPress.

Khi plugin được kích hoạt, bạn có thể tiến hành bước tiếp theo là tạo khối tùy chỉnh đầu tiên của mình.

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

Vì lợi ích của hướng dẫn này, chúng tôi sẽ xây dựng một khối ‘lời chứng thực’.

Trước tiên, hãy chuyển đến Block Lab »Thêm mới từ thanh bên trái của bảng điều khiển quản trị của bạn.

Trên trang này, bạn cần đặt tên cho khối của mình. Bạn có thể viết bất kỳ tên nào bạn chọn trong hộp văn bản “Nhập tên khối ở đây”.

Enter Custom Block Name

Chúng tôi sẽ đặt tên cho khối tùy chỉnh của mình: Lời chứng thực.

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

Sên sẽ được tự động điền dựa trên tên khối của bạn, vì vậy bạn không cần phải thay đổi nó. Tuy nhiên, bạn có thể viết tối đa 3 từ khóa trong trường văn bản Từ khóa để có thể dễ dàng tìm thấy khối của bạn.

Custom Block Properties

Bây giờ chúng ta hãy thêm một số trường vào khối của chúng ta. Bạn có thể thêm các loại trường khác nhau như văn bản, số, email, URL, màu sắc, hình ảnh, hộp kiểm, nút radio, v.v.

Chúng tôi sẽ thêm 3 trường vào khối lời chứng thực tùy chỉnh của mình: một trường hình ảnh cho hình ảnh của người đánh giá, một hộp văn bản cho tên người đánh giá và một trường văn bản cho văn bản lời chứng thực.

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

Image Field Options

Điều này sẽ mở ra một số tùy chọn cho trường. Chúng ta hãy xem xét từng người trong số họ.

  • Nhãn trường : Bạn có thể sử dụng bất kỳ tên nào bạn chọn cho nhãn trường. Hãy đặt tên trường đầu tiên của chúng ta là Hình ảnh người đánh giá.
  • Tên trường : Tên trường sẽ được tạo tự động dựa trên nhãn trường. Chúng tôi sẽ sử dụng tên trường này trong bước tiếp theo, vì vậy hãy đảm bảo rằng nó là duy nhất cho mọi trường.
  • Loại trường : Tại đây bạn có thể chọn loại trường. Chúng tôi muốn trường đầu tiên của chúng tôi là một hình ảnh, vì vậy chúng tôi sẽ chọn Hình ảnh từ menu thả xuống.
  • Vị trí Trường : Bạn có thể quyết định xem bạn muốn thêm trường vào trình chỉnh sửa hay trình kiểm tra.
  • Văn bản trợ giúp : Bạn có thể thêm một số văn bản để mô tả trường. Điều này không bắt buộc nếu bạn đang tạo khối này cho mục đích sử dụng cá nhân của mình.

Bạn cũng có thể nhận được một số tùy chọn bổ sung dựa trên loại trường bạn chọn. Ví dụ: nếu bạn chọn một trường văn bản, thì bạn sẽ nhận được các tùy chọn bổ sung như văn bản giữ chỗ và giới hạn ký tự.

Bạn có thể nhấp vào nút Đóng trường sau khi hoàn tất với trường hình ảnh.

Thực hiện theo quy trình trên, hãy thêm 2 trường khác cho khối lời chứng thực của chúng tôi bằng cách nhấp vào nút + Thêm trường .

Final Custom Block Fields

Trong trường hợp bạn muốn sắp xếp lại các trường, thì bạn có thể làm điều đó bằng cách kéo chúng bằng cách sử dụng biểu tượng bánh hamburger ở bên trái của mỗi nhãn trường.

Để chỉnh sửa hoặc xóa một trường cụ thể, bạn cần di chuột qua nhãn trường để có các tùy chọn chỉnh sửa và xóa.

Khi bạn đã hoàn tất, hãy nhấp vào nút Xuất bản , hiển thị ở phía bên phải của trang, để lưu khối Gutenberg tùy chỉnh của bạn.

Bước 3: Tạo mẫu khối

Mặc dù bạn đã tạo khối WordPress tùy chỉnh ở bước cuối cùng, nhưng nó sẽ không hoạt động cho đến khi bạn tạo một mẫu khối có tên là block-certificatemonials.php và tải nó lên thư mục chủ đề hiện tại của bạn.

Create a Block Template

Tệp mẫu khối sẽ cho plugin biết cách hiển thị các trường khối của bạn bên trong trình chỉnh sửa. Plugin sẽ tìm kiếm tệp mẫu và sau đó sử dụng nó để hiển thị nội dung khối.

Nếu bạn không có tệp này, thì nó sẽ hiển thị lỗi thông báo “Không tìm thấy khối tệp mẫu / block-secure.php”.

Hãy tạo tệp mẫu của khối của chúng tôi.

Đầu tiên, hãy tiếp tục và tạo một thư mục trong màn hình của bạn và đặt tên cho nó là các khối . Bạn sẽ tạo tệp mẫu khối của mình bên trong thư mục này và sau đó tải nó lên thư mục chủ đề WordPress hiện tại của bạn.

Để tạo tệp mẫu, bạn có thể sử dụng trình soạn thảo văn bản thuần túy như Notepad.

Mỗi khi bạn thêm trường mới vào khối tùy chỉnh của mình, bạn cần thêm mã PHP sau vào tệp mẫu khối của mình:

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

Chỉ cần nhớ thay thế add-your-field-name-here bằng tên trường.

Ví dụ: tên của trường đầu tiên của chúng tôi là reviewer-image, vì vậy chúng tôi sẽ thêm dòng sau vào tệp mẫu:

<?php block_field( 'reviewer-image' ); ?>

Đơn giản phải không? Hãy làm tương tự cho các trường còn lại của chúng ta:

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

Tiếp theo, chúng tôi sẽ thêm một số thẻ HTML vào đoạn mã trên cho mục đích tạo kiểu.

Ví dụ: bạn có thể bọc hình ảnh người đánh giá bên trong thẻ img để hiển thị hình ảnh. Nếu không, WordPress sẽ hiển thị URL hình ảnh không như bạn muốn, phải không?

Bạn cũng có thể thêm tên lớp vào các thẻ HTML của mình và bọc mã bên trong vùng chứa div để tạo kiểu cho nội dung khối của bạn (chúng ta sẽ thực hiện trong bước tiếp theo này).

Vì vậy, đây là mã cuối cùng của chúng tôi cho mẫu khối của chúng 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>

Cuối cùng, đặt tên cho tệp là block-secure.php và lưu nó bên trong thư mục blocks.

Bước 4: Tạo kiểu cho Khối tùy chỉnh của bạn

Bạn muốn tạo kiểu cho khối tùy chỉnh của mình? Bạn có thể làm điều đó với sự trợ giúp của CSS.

Mở một trình soạn thảo văn bản thuần túy như Notepad và thêm mã sau:

.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 khi hoàn tất, hãy đặt tên cho tệp là block-secure.css và lưu nó trong thư mục blocks.

Bước 5: Tải tệp mẫu khối lên thư mục chủ đề

Bây giờ, hãy tải thư mục khối chứa tệp mẫu khối tùy chỉnh của chúng tôi lên thư mục chủ đề WordPress của chúng tôi.

Để làm điều đó, bạn cần kết nối với trang web WordPress của mình bằng ứng dụng FTP. Để được trợ giúp, bạn có thể xem hướng dẫn của chúng tôi về cách tải tệp lên trang WordPress của bạn bằng FTP.

Sau khi bạn đã kết nối, hãy chuyển đến thư mục / wp-content / themes /. Từ đây, bạn cần mở thư mục chủ đề hiện tại của mình.

Enter Theme folder using FTP

Bây giờ tải lên thư mục khối , chứa tệp mẫu khối và tệp CSS, vào thư mục chủ đề của bạn.

Sau khi hoàn tất, bạn có thể tiến hành bước cuối cùng để kiểm tra khối tùy chỉnh của mình.

Lưu ý : Plugin Block Lab cho phép bạn tạo các khối theo chủ đề cụ thể. Nếu bạn thay đổi chủ đề WordPress của mình, thì bạn cần sao chép thư mục khối vào thư mục chủ đề mới của mình.

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

Đã đến lúc kiểm tra khối lời chứng thực tùy chỉnh của chúng tôi. Bạn có thể thực hiện việc này bằng cách chuyển đến Trang » Thêm Mới để tạo một trang mới.

Tiếp theo, nhấp vào biểu tượng Thêm khối (+) và tìm kiếm khối Lời chứng thực. Khi bạn tìm thấy nó, hãy nhấp vào nó để thêm khối tùy chỉnh vào trình chỉnh sửa trang của bạn.

Add Custom Block to Page Editor

Bây giờ bạn có thể thêm lời chứng thực vào trang này bằng cách sử dụng khối tùy chỉnh của mình. Để thêm nhiều lời chứng thực hơn, bạn luôn có thể chèn các khối lời chứng thực mới.

Sau khi hoàn tất, bạn có thể xem trước hoặc xuất bản trang để kiểm tra xem nó có hoạt động bình thường hay không.

Đó là tất cả! Bạn đã tạo thành công khối WordPress tùy chỉnh đầu tiên cho trang web của mình.

Bạn có biết rằng bạn có thể tiết kiệm thời gian với các khối có thể sử dụng lại trong trình chỉnh sửa của mình không? Hãy xem hướng dẫn của chúng tôi về cách dễ dàng tạo các khối có thể sử dụng lại trong trình chỉnh sửa khối WordPress và sử dụng chúng trên các trang web khác.

Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tạo chủ đề WordPress tùy chỉnh mà không cần viết bất kỳ mã nào.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

Free Download Cách tạo khối Gutenberg tùy chỉnh trong WordPress (Cách dễ dàng) :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress