Bạn có muốn tạo một Plugin WordPress khối Gutenberg đơn giản?

Không phải tất cả chúng ta đều yêu thích WordPress? Nền tảng này đã thành công rực rỡ kể từ khi thành lập, với các nhà phát triển liên tục bổ sung các tính năng mới. Một trong những tính năng nổi bật trong thời gian gần đây là WordPress Block Editor, tên mã Gutenberg.

Gutenberg cung cấp cho người dùng WordPress một cách mới thú vị để xuất bản nội dung và tùy chỉnh trang web của họ. Nó cực kỳ dễ sử dụng, đây là một tin tuyệt vời cho người mới bắt đầu cũng như các nhà phát triển. Nếu bạn đang sử dụng phiên bản mới nhất của WordPress, bạn đã quen thuộc với trình chỉnh sửa khối và khái niệm khối.

Theo mặc định, trình chỉnh sửa khối WordPress đi kèm với một số khối cho phép bạn bao gồm văn bản, hình ảnh, trích dẫn, âm thanh, video, nhúng, v.v. Bên cạnh đó, có rất nhiều tiện ích bổ sung Gutenberg cho phép bạn mở rộng trình chỉnh sửa mà không bị hỏng một giọt mồ hôi.

Tuy nhiên, bạn có thể có một nhu cầu cụ thể khiến bạn phải tạo các khối tùy chỉnh của riêng mình. Trong bài viết này, chúng tôi sẽ giới thiệu cho bạn cách tạo khối Gutenberg tùy chỉnh để đáp ứng nhu cầu cụ thể của bạn.

Không cần phải lo lắng gì thêm, hãy bắt đầu vì có rất nhiều điều để học hỏi.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn

Sau đó trở lại lý do tại sao chúng ta ở đây. 

Dù sao thì khối là gì?

Các khối coi các đoạn văn, tiêu đề, phương tiện và nhúng là các thành phần mà khi kết hợp với nhau, tạo nên nội dung được lưu trữ trong cơ sở dữ liệu WordPress, thay thế khái niệm văn bản truyền thống bằng phương tiện và các mã ngắn tích hợp sẵn.

Trước đây, người dùng WordPress dựa vào văn bản và mã ngắn để thêm nội dung. Gutenberg sử dụng khối. Trình chỉnh sửa mới cho phép bạn sử dụng các đơn vị khối để tạo bố cục phong phú và linh hoạt, dễ quản lý. Hiện tại, bạn có thể sử dụng trình chỉnh sửa khối cho các bài đăng và trang, nhưng có những kế hoạch tích cực để thực hiện hỗ trợ chỉnh sửa trang web đầy đủ trong tương lai.

Làm việc với các khối làm cho việc tạo nội dung trong WordPress trở nên khá mới mẻ. Ngoài ra, nhiều plugin hiện có hỗ trợ trình chỉnh sửa mới và đi kèm với các khối sẵn sàng sử dụng giúp dễ dàng thêm nội dung từ các plugin đã nói. Trình chỉnh sửa cho phép bạn kéo và thả các khối vào một trang để bạn có thể nhấn nút xuất bản nhanh hơn.

Cũng giống như một trình tạo trang được tích hợp trực tiếp vào WordPress.

Nếu bạn quen thuộc với trình tạo trang chẳng hạn như Elementor, có thể bạn đã quen với khái niệm xây dựng trang kéo và thả. Gutenberg là một nỗ lực để tích hợp hoàn toàn việc xây dựng trang web kéo và thả vào lõi WordPress.

Vì vậy, hãy đến với phần hay nhất của bài viết hôm nay. Chúng ta hãy học cách tạo một khối đơn giản. Bạn có thể thực hiện việc này theo cách thủ công hoặc sử dụng các plugin như Khối tùy chỉnh Genesis (trước đây là BlockLab), Khối lười biếng ou ACF. Tạo các khối tùy chỉnh là một chút kỹ thuật, vì vậy với mục đích của bài viết hôm nay, chúng tôi sẽ sử dụng một plugin.

Cách tạo một khối tùy chỉnh (sử dụng Khối tùy chỉnh genesis)

Sẽ dễ dàng hơn để đi theo lộ trình plugin vì việc tạo các khối Gutenberg tùy chỉnh từ đầu đòi hỏi bạn phải hiểu rõ về HTML, CSS, PHP và quan trọng nhất là javaScript. Bạn cũng sẽ cần hiểu về React.

Đối với phần tiếp theo, chúng tôi sẽ sử dụng Khối tùy chỉnh của Genesis. Phiên bản miễn phí của nó có sẵn trong kho lưu trữ WordPress chính thức, có nghĩa là chúng ta có thể cài đặt nó trong bảng điều khiển quản trị WordPress.

Cài đặt các khối tùy chỉnh của Genesis

Đăng nhập vào bảng điều khiển quản trị WordPress của bạn và điều hướng đến Tiện ích mở rộng> Thêm, như hình dưới đây.

Sau đó nhập " Khối tùy chỉnh Genesis trong hộp tìm kiếm từ khóa và nhấp chuột trên nút cài đặt bây giờ

Sau đó, hoạt động plugin giúp bạn bắt đầu

Tiếp theo, hãy tạo một khối tùy chỉnh mới. Với mục đích minh họa, hãy tạo một lời kêu gọi hành động (CTA) tùy chỉnh mà chúng tôi sẽ thêm vào cuối mỗi bài viết mà chúng tôi xuất bản. Phần tốt nhất là bạn có thể sử dụng lại các khối để giúp bạn không phải tạo lặp đi lặp lại các khối giống nhau.

Trong menu quản trị WordPress của bạn, điều hướng đến Khối tùy chỉnh> Thêm mới, như chúng tôi làm nổi bật bên dưới.

Thao tác này sẽ đưa bạn đến trang sau, nơi bạn sẽ tìm thấy tất cả các tùy chọn để tạo khối tùy chỉnh (trong trường hợp của chúng tôi là CTA):

Dưới đây là một vài từ để giải thích những gì bạn thấy trong ảnh chụp màn hình ở trên. Bắt đầu từ đầu, bạn có nó.

Khu vực chỉnh sửa chính:

  • Xây dựng - Bạn có thể sẽ dành nhiều thời gian ở đây để thiết kế khối tùy chỉnh của mình. các Builder cho phép bạn thêm tiêu đề, các trường, slug, từ khóa, danh mục và xem trước khối tùy chỉnh của mình. Bạn sẽ học cách thêm các trường.
  • Trình chỉnh sửa mẫu - Sau khi thiết kế khối tùy chỉnh của bạn (tức là thêm các trường khác nhau), bạn sẽ cần tạo một mẫu khối (đọc, thêm một số mã) trong người chỉnh sửa mô hình. Chúng tôi sẽ tìm hiểu thêm khi chúng tôi thiết kế CTA.
  • Xem trước trình chỉnh sửa - Nó cho phép bạn xem trước khối tùy chỉnh trong trình chỉnh sửa khối WordPress.
  • Xem trước giao diện người dùng - Tại đây, bạn có thể xem trước khối tùy chỉnh sẽ trông như thế nào trên trang web của mình.
  • EditorField - Sẽ hiển thị các trường trong khu vực chỉnh sửa chính của bài đăng hoặc trang (bạn biết đấy, giống như bạn thấy các bài đăng thông thường của mình trong trình chỉnh sửa WordPress)
  • InspectorField - Hiển thị trường trong thanh bên phải bên dưới Trình kiểm tra khối.

Tùy chọn thanh bên

  • Làm việc cực nhọc - Nó được điền tự động dựa trên tiêu đề bạn đặt cho khối tùy chỉnh của mình. Điều này rất quan trọng khi tạo mô hình khối.
  • Biểu tượng - Tùy chọn này cho phép bạn thêm một biểu tượng vào khối tùy chỉnh của mình.
  • Phân loại - Nó cho phép bạn chỉ định một danh mục cho khối tùy chỉnh của mình. Bạn có thể phân loại khối tùy chỉnh của mình bằng cách sử dụng một trong các danh mục được tích hợp sẵn hoặc bạn có thể tạo một danh mục hoàn toàn mới.
  • Từ khóa - Thêm tối đa ba từ khóa có liên quan vào khối tùy chỉnh của bạn để mọi người có thể dễ dàng tìm thấy nó trong bộ chọn khối.
  • Mở các trường khối theo một phương thức thay vì hiển thị tại chỗ - Kích hoạt nếu bạn muốn mở các trường trong một phương thức. Điều này rất hữu ích nếu bạn có một khối tùy chỉnh với nhiều trường.
  • Bài loại - Chọn (các) hộp để cho phép khối tùy chỉnh của bạn được hiển thị trên mỗi loại bài đăng. Ví dụ: nếu bạn bỏ chọn Bài đăng, khối sẽ không xuất hiện trên bất kỳ bài đăng nào.

Tạo một khối tùy chỉnh

Bây giờ bạn đã hiểu rõ hơn về giao diện người dùng và chức năng của từng phần, hãy bắt tay vào làm.

Trong Builder- Người xây dựng -, đặt tiêu đề thích hợp cho khối tùy chỉnh của bạn. Chúng tôi sẽ chọn CTA cho cái này như hình dưới đây.

Trước khi thêm các trường mới, hãy thêm một biểu tượng, từ khóa và chọn một danh mục cho khối tùy chỉnh như được hiển thị bên dưới.

Để làm được điều đó, hãy thêm một số trường vào khối tùy chỉnh của chúng tôi. Đối với khối CTA mẫu của chúng tôi, chúng tôi sẽ chỉ thêm ba trường theo thứ tự sau: hình ảnh, một số văn bản và trường tệp cho phép mọi người tải xuống ebook.

Đọc cũng: Các plugin 5 WooC Commerce để chỉnh sửa hàng loạt sản phẩm của bạn

Thêm trường khối

Trong phần Các trường biên tập viênClick vào biểu tượng Dấu cộng (+) để thêm trường đầu tiên như hình dưới đây.

tạo một plugin WordPress khối

Tiếp theo, hãy thêm một trường hình ảnh. Trong thanh bên, hãy đặt Loại trường đang bật Hình ảnh và đặt các tùy chọn khác. Ngoài ra, hãy xem xét slug vì chúng ta sẽ sử dụng nó khi tạo mô hình khối.

tạo một plugin WordPress khối

Sau đó, thêm các trường văn bản và tệp theo cách tương tự.

tạo một plugin WordPress khối

Chuyển sang Trình chỉnh sửa mẫu > Đánh dấu.

Ở đây chúng tôi sẽ thiết kế khối tùy chỉnh của chúng tôi sẽ trông như thế nào trên trang web của bạn. Trình chỉnh sửa mô hình chấp nhận HTML, CSS và các slugs trường (mà bạn phải đặt giữa 2 dấu ngoặc vuông). Nếu bạn cần sử dụng ngôn ngữ PHP, bạn có thể tạo mẫu bằng cách sử dụng Phương pháp lập mô hình PHP

Đừng lo lắng, rất dễ dàng.

trong người chỉnh sửa mô hình, Dưới tab đánh dấu, thêm mã sau:

<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>

Khi bạn viết mã của mình, bạn sẽ nhận thấy rằng người chỉnh sửa mô hình Các slugs trường tự động hoàn thành (ví dụ: {{image-field}}) cho bạn.

Sau đó vào phần CSS để thêm các kiểu đơn giản với mã sau:

.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}

.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;

}
tạo một plugin WordPress khối

Bạn có thể tùy chỉnh các kiểu này theo ý muốn,

Bấm vào xuất bản :

tạo một plugin WordPress khối

Để xem khối tùy chỉnh mới của bạn đang hoạt động, hãy quay lại bảng điều khiển quản trị WordPress của bạn và tạo một bài đăng như bạn thường làm, nhấp vào Cộng (+) để thêm một khối mới và chọn khối tùy chỉnh mới của bạn, như chúng tôi đánh dấu bên dưới.

tạo một plugin WordPress khối

Tiếp theo, điền vào khối tùy chỉnh của bạn như mong muốn và đăng tin nhắn của bạn:

Bây giờ, nếu chúng ta kiểm tra khối CTA tùy chỉnh mới của mình trên giao diện người dùng, thì đây là những gì chúng ta thấy.

CTA tùy chỉnh của chúng tôi ở ngay đó! Xin đừng lo lắng về khả năng thiết kế của chúng tôi - tất nhiên, trong tình huống thực tế, bạn sẽ dành nhiều thời gian hơn một chút để tùy chỉnh khối của mình. Nhưng chúng tôi hy vọng bạn đã học được điều gì đó ở đây.

Các tài nguyên được đề xuất khác

Chúng tôi cũng mời bạn tham khảo ressources bên dưới để có nhiều quyền sở hữu và kiểm soát hơn đối với trang web và blog của bạn.

Kết luận

Xây dựng các khối tùy chỉnh không phải là một nhiệm vụ dễ dàng. Nhưng vơi plugin WordPress chẳng hạn như Khối tùy chỉnh Genesis và Khối lười biếng, trong số những người khác, cho dù bạn là người mới bắt đầu hay không, bạn sẽ thành công trong việc tạo chúng. Từ cơ bản nhất đến phức tạp tùy theo nhu cầu của bạn.

Đó là nó cho bài viết này hướng dẫn bạn cách thêm phông chữ tùy chỉnh vào trang web WordPress. Chúng tôi mời bạn thử. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, vui lòng cho chúng tôi biết trong vòng ý kiến.

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Trong khi chờ đợi, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.   

...