Cách tạo nút chứa Dynamic link dùng custom fields

Trong một số trường hợp, bạn có thể sẽ cần đến tính năng Dynamic link cho các button (nút) trên website của bạn để hiển thị các đường dẫn khác nhau cho từng bài đăng khác nhau. Ví dụ như các nút download tài liệu chẳng hạn. Sử dụng custom fields là một trong những cách để giúp bạn làm việc này rất đơn giản. Bạn chỉ cần lưu các đường link và từng fields trong mỗi bài viết, sau đó, chúng sẽ được tự động hiển thị chính xác ra mỗi button (nút) trên từng bài viết mà bạn cần.

Để cho bạn dễ hình dung hơn, ở đây mình có một trang web về review các theme WordPress. Trong mỗi bài viết review về một theme nào đó, mình đều có các nút chứa các đường link khác nhau dẫn đến các trang demo và download riêng. Chúng chính là các dynamic link mà mình nhắc đến.

Ví dụ các nút chứa dynamic link.

Vậy, hãy cùng tìm hiểu cách tạo các nút đó nhé.

Chuẩn bị

Công cụ đầu tiên mà mình nhắc tới sẽ là plugin Meta Box. Plugin này sẽ giúp bạn tạo custom fields nhanh chóng, dễ dàng. Nếu bạn chưa từng làm việc với plugin Meta Box, thì bạn có thể tìm hiểu thêm về nó tại bài viết này của mình.

Nếu bạn ưa thích việc tạo custom fields trên một giao diện trực quan (UI) thì Meta Box Builder sẽ là công cụ tiếp theo mà mình đề xuất bạn nên dùng để có giao diện như vậy ngay trong dashboard. Đây là một extension cao cấp của plugin Meta Box. Bạn có thể mua extension này riêng lẻ hoặc mua các gói của Meta Box để có giá tối ưu nhất.

Nếu bạn đang sử dụng Elementor hoặc Beaver Builder, bạn chỉ cần kích hoạt các extension tích hợp tương ứng cho các page builder này của Meta Box. Với những page builder khác như Oxygen hoặc Bricks thì bạn không cần làm gì cả.

Trong trường hợp bạn không sử dụng bất kỳ page builder nào, bạn có thể sẽ cần đến MB Views.

Trong bài này, mình sẽ hướng dẫn chi tiết cách tạo các nút chứa dynamic link bằng hai cách là:

  • Cách 1: sử dụng các website builder như Oxygen, Beaver Builder và Bricks; và
  • Cách 2: không sử dụng bất kì website builder nào cả.

Video

Tạo custom fields cho URL

Đầu tiên, chúng ta sẽ cần phải tạo custom fields để lưu URL cho từng bài đăng. Nếu như bạn đã có sẵn Meta Box Builder thì bạn sẽ có một giao diện (UI) trong backend để tạo custom fields một cách trực quan. Còn nếu bạn chưa có thì bạn có thể vào Online Generator để tạo field, sau đó copy code của những field đó.

Các field này khá đơn giản, bạn chỉ cần chọn field type là URL và không cần thiết lập đặc biệt gì khác.

Chọn field type là URL và không cần thiết lập đặc biệt gì khác.

Sau khi tạo xong các field này, bạn chỉ cần vào các bài viết, và sẽ thấy các field hiển thị. Lúc này, bạn có thể thêm các đường link vào từng bài viết.

Tạo button khi không sử dụng Page Builder

Phần này sẽ dành cho những người không sử dụng page builder để tạo website. Extension MB Views của Meta Box sẽ giúp bạn tạo một button (nút) dễ dàng hơn bằng việc sử dụng shortcode.

Bạn vào menu Views và tạo một view mới với đoạn code sau:

<a class="wp-block-button__link" href="{{ post.view_demo }}">
    View demo
</a>
<a class="wp-block-button__link" href="{{ post.download }}">
    Download
</a>

Trong đó, view_demodownload là ID của các custom fields mà chúng ta đã tạo ở trên. Đồng thời, mình đang dùng theme eStar, nên mình phải sử dụng class wp-block-button__link để tạo các nút. Đây là class mặc định của theme.

Cái view này sẽ tạo ra một shortcode như bạn thấy trong hình dưới đây. Bạn chỉ cần sao chép và nhúng nó vào bất kì đâu bạn muốn đặt button.

Bạn lấy shortcode trong View và nhúng nó vào bất kì đâu bạn muốn đặt button.

Ví dụ, mình đã dán shortcode này vào một sidebar trên trang bài viết chi tiết và thấy các nút hiển thị như này.

Cách hiển thị nút sau khi dán shortcode vào sidebar trên trang bài viết chi tiết.

Bạn lưu ý đây là hiển thị mặc định của theme. Bạn có thể style lại các button tùy ý bằng CSS nhé.

Tạo các nút chứa Dynamic Link dùng Oxygen

Mình đã tạo trước một template bằng Oxygen cho các bài đăng trên blog.

Mình sẽ thêm hai nút ngay dưới hình ảnh đại diện của bài đăng. Tuy nhiên, trước khi tạo nút, bạn nên tạo các cột để chia layout cho đẹp.

Thêm hai nút dưới hình ảnh đại diện của bài đăng bằng Oxygen.

Khi tạo button, ở cuối phần URL, có một nút để liên kết đến các dữ liệu được lưu sẵn. Bạn click vào nút đấy, sau đó chọn Meta / custom fields ở trong phần Post. Ở phần Meta Key, bạn tìm và chọn ID của field mà bạn muốn liên kết dữ liệu với button mình muốn nhé.

Kết nối nút với Custom fields của Meta Box để tạo dynamic link.

Về cơ bản, đến đây là button đã xong tạm rồi đấy. Bạn chỉ cần style lại một chút cho nó đẹp hơn thôi.

Style lạ cho button đẹp hơn.

Mình cũng đã tạo thêm một nút khác, liên kết nó với một field nữa và style nó khác đi một chút. Thế nên bây giờ mình đã có 2 button với 2 style khác nhau trong trang bài viết rồi này. Các đường link trong các button ở mỗi bài viết cũng khác nhau.

Các dynamic được tạo bởi Oxygen and custom fields của Meta Box.

Tạo các nút chứa Dynamic Link dùng Beaver Builder

Trên một website khác, mình cũng có sẵn một template tạo bằng Beaver Builder giống như template đã tạo bằng Oxygen. Tương tự, mình cũng sẽ tạo các nút nằm ngay dưới phần ảnh đại diện.

Trước khi tạo nút, chúng ta cũng cần tạo cột để tạo layout cho đẹp. Beaver Builder cũng có một phần thiết lập tên là Link để thêm một đường dẫn cố định cho button. Tuy nhiên, để lấy các URL từ các field của Meta Box thì bạn nhấp vào biểu tượng dấu cộng như hình dưới đây.

Kết nối custom fields của Meta Box với nút trong Beaver Builder để tạo dynamic link.

Sau đó, bạn sẽ thấy một tùy chọn là Meta Box Field trong danh sách thả xuống. Bạn click vào Connect để chọn kết nối với các field của Meta Box với nút đang tạo.

Vào Connect để chọn kết nối với các field của Meta Box với nút đang tạo.

Sau đó, chọn tên field (field chứa URL) bạn muốn để kết nối.

Cuối cùng, bạn chỉ cần tạo kiểu cho nút là được rồi.

Để tạo thêm một nút nữa, mình sao chép nút này luôn để tiết kiệm thời gian, sau đó kết nối lại với một field khác và style lại là xong.

Kết nối lại nút với custom fields khác trong Beaver Builder để tự động lấy dữ liệu.

Bây giờ, bạn vào một bài viết và sẽ thấy các nút chứa các đường dẫn khác nhau đúng như mình muốn.

Bạn vào một bài viết và sẽ thấy các nút chứa các đường dẫn khác nhau đúng như mình muốn.

Tạo các nút chứa Dynamic Link dùng Bricks

Công cụ website builder cuối cùng mà mình sẽ hướng dẫn trong bài viết này sẽ là Bricks. Mình vẫn sử dụng template và tạo các nút ở vị trí tương tự như đã làm với 2 page builder ở trên. Cũng theo cách tương tự, mĩnh vẫn thêm một container để tạo khung với 4 cột trước sau đó mới thêm các nút.

Khác với hai page builder kia, Bricks có một danh sách các kiểu đường dẫn cho button để bạn chọn. Ở đây mình muốn đường dẫn là dữ liệu được lấy từ field được tạo bởi Meta Box, nên nó sẽ là loại dữ liệu động (dynamic). Vì vậy, mình sẽ chọn Dynamic Data.

Chọn Dynamic data trong Bricks để kết nối nút với custom field của Meta Box

Sau đó, bạn sẽ thấy một danh sách các lựa chọn, trong đó có Meta Box đi kèm với tên của các custom fields. Bạn chọn field mà bạn muốn là được.

Chọn field mà bạn muốn trong các lựa chọn.

Ngay sau khi chọn field, Bricks sẽ hiển thị đường dẫn được lưu trong field tương ứng của bài viết / trang mà bạn đang xem trước này. Như vậy, bạn có thể dễ dàng kiểm tra xem dữ liệu đó có chính xác là cái bạn muốn hay không.

Bricks hiển thị url được lưu trong field tương ứng của bài viết / trang mà bạn đang xem trước.

Công việc còn lại của bạn chỉ là tạo kiểu cho button (nút) cho đẹp hơn thôi.

Tạo kiểu cho button bằng việc sử dụng Bricks

Khi bạn đã hoàn tất việc làm đẹp cho nút đó, bạn có thể sao chép nó để tạo thêm một nút mới tương tự. Ở nút mới này, bạn sẽ cần thay đổi nguồn của dữ liệu, tức là chọn lại field ở phần Dynamic Data, và style lại cho nút này khác đi (nếu muốn).

Tạo nút mới sau đó style lại trong Bricks.

Cuối cùng, vào một bài đăng và bạn sẽ thấy kết quả như ý này.

Các nút chứa dynamic link được tạo bởi Bricks và custom fields của Meta Box

Lời cuối

Trên đây chỉ là những mẹo nhỏ giúp tạo nút (button) để có dynamic link sao cho phù hợp với nội của các bài viết hoặc các trang trên website của bạn. Ngoài ra, qua bài viết này, mình cũng muốn giới thiệu với các bạn một ứng dụng nho nhỏ của custom fields và sự kết hợp của nó với các page builder sẽ có hiệu quả như thế nào. Hy vọng những nội dung này sẽ có ích với các bạn.

Nếu có bất kỳ câu hỏi nào, hãy để lại bình luận cho chúng mình ở phần comment nhé. Và đừng quên theo dõi các bài viết của chúng mình thường xuyên nha!

Để lại bình luận

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 *