Tự xây dựng chức năng Block cho WordPress

Tự xây dựng chức năng Block cho WordPress

Block (Khối) là những thành phần nhỏ trong website. Có thể là một khối HTML được chèn trong nội dung bài viết, sidebar, header, footer.

Chức năng block này thường được chèn bằng shortcode. Trong bài viết này, tôi sẽ hướng dẫn bạn cách tự xây dựng chức năng Block cho WordPress giúp bạn linh động hơn trong việc trang trí website của mình.

Trong bài viết này, tôi sẽ sử dụng thêm plugin Advanced Custom Fields để tạo thêm field. Cho nên trước khi đi vào thực hành, bạn hãy cài plugin này trước.

Bước 01: Tạo Post Type mới cho WordPress

Đầu tiên, bạn hãy tạo một Post Type tên là Block, hoặc bất kỳ tên nào mà bạn muốn. Còn cách tạo Post Type như thế nào bạn nên tham khảo bài viết Custom Post Type trong WordPress toàn tập

Dưới đây là code tham khảo:

Bước 02: Tạo Custom Fields để lưu nội dung Block

Bạn vào menu “Custom Fields” => Tạo Field Group mới, tôi tạm đặt tên là “Block“.

Trong đó bạn tạo ra 2 field: Shortcode và Nội dung.

  • Shortcode: Đây là field text để hiển thị tên shortcode để người dùng biết để chèn vào vị trí cần chèn.

Lưu ý: Field này chỉ để hiển thị, không cần nhập liệu cho nên phần Required bạn để là No

  • Nội dung: Đây là field textarea để lưu nội dung của block. Có thể sẽ là text, html, css, javascript, shortcode khác

Chú ý Field Name, đây là tham số sẽ dùng để gọi ra.

Cuối cùng, ở khu vực Location vui lòng chọn Post Type Block vừa tạo ở bước trên.

Sau khi tạo xong Custom Fields, bạn truy cập Block => Thêm Block mới, bạn sẽ thấy nội dung như sau:

Bước 03: Viết shortcode để hiển thị nội dung Block

Tôi giả sử shortcode tôi tạo ra như sau: [block id="12"]

Trong đó: 12 chính là ID của Block. Như vậy tôi sẽ viết Shortcode có tham số. Để tìm hiểu rõ hơn về Shortcode, hãy tham khảo bài Shortcode trong WordPress từ A đến Z

Tham khảo code sau:

Tôi sử dụng qua hook filter the_content để hiển thị được shortcode khác trong nội dung Block.

Bước 04: Hiển thị tên Shortcode trong Field shortcode

Bạn còn nhớ field shortcode tôi đã hướng dẫn bạn tạo ở trên chứ? Giờ tôi sẽ dùng Javascript để can thiệp và hiển thị tên shortcode vào field đó.

Trước tiên, bạn tạo một Block mới và lưu lại. Tiếp theo, bạn xác định ID HTML của field đó.

Chúng ta sẽ dùng ID này để đưa vào Javascript. (Nếu bạn không có kiến thức về Javascript bạn nên tìm hiểu lại)

Tiếp theo, bạn chèn đoạn code sau vào file functions.php của theme bạn đang dùng

Trong đoạn code trên, tôi thực hiện 3 việc:

  • Disable text field (Không cho sửa)
  • Chèn tên shortcode vào text field (Trong đó ID của Block tự động lấy)
  • Đổi sang màu đỏ cho nổi bật (Bạn có thể chuyển sang màu khác

Bước 05: Hiển thị tên Shortcode trong trang danh sách Block

Tôi sẽ thực hiện việc thêm cột Shortcode trong trang danh sách Block

Bạn chèn đoạn code sau vào file functions.php của theme bạn đang dùng:

Bạn để ý 2 hook manage_blocks_posts_columnsmanage_blocks_posts_custom_column, bạn thay blocks thành slug Post Type của bạn.

Trong đoạn code trên, tôi có dùng hàm unset($columns['date']) để xoá cột thời gian.

Kết luận

Trên đây, tôi đã hướng dẫn bạn cách tự tạo chức năng Block cho WordPress đơn giản. Nếu bạn có kiến thức lập trình bạn có thể viết thêm các chức năng cho Block của mình.

Nếu bất kỳ có câu hỏi nào, bạn hãy comment dưới bài viết này.

[Total: 1   Average: 5/5]

THAM GIA NHÓM HỖ TRỢ

 
Lập trình web PHP (hoangan.net)
Nhóm Công khai · 1 thành viên
Tham gia nhóm
 

Hoàng An

Tôi không phải là 1 chuyên gia lập trình, cũng không phải là 1 chuyên gia SEO. Với niềm đam mê với CNTT, tôi có thể biến ý tưởng thành sản phẩm và thích chia sẻ kiến thức cho người khác. Nếu có duyên, mời bạn đến với khoá học của tôi

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 *