HomeHướng dẫn WordPress

Cách tạo button đẹp mắt trong WordPress thậm chí nếu bạn không biết code

Like Tweet Pin it Share Share Email

a2hosting_vps

Bạn đang muốn tạo button đẹp mắt trong WordPress?

Rõ ràng, tạo một button không dễ trong WordPress chứ chưa nói đến tạo một button đẹp mắt và lôi cuốn.

Bạn cần phải biết code HTML và CSS nếu muốn tạo button đẹp mắt.

Nhưng bạn lại không biết tì gì về code. Mình cũng vậy. Không thạo lắm code CSS. 

Nhưng trên blog của mình, mình vẫn có button rất đẹp và bắt mắt như thế này:

tạo button trong wordpress 14

Như bạn đã đoán ra, có nhiều plugin ngoài kia giúp bạn dễ dàng tạo button đẹp mắt.

Với những plugin này, tạo button đẹp mắt không mất quá nhiều thời gian và công sức.

Trong bài viết này, bạn sẽ biết được những plugin phổ biến giúp bạn tạo button mà không cần biết code.

Cách bạn tạo button trong WordPress

Dưới đây là một vài cách tạo button trong WordPress:

  • Sử dụng button builder dựa trên shortcode
  • Sử dụng button builder không dựa trên shortcode
  • Sử dụng HTML/CSS
  • Sử dụng plugin page builder

Như mục tiêu bài này đề ra chúng ta sẽ tạo nút đẹp mắt mà không động tay vào code. Do vậy giải pháp sử dụng HTML/CSS mình sẽ gạch ra.

Chúng ta chỉ tập trung 3 giải pháp còn lại.

Nhưng giải pháp này thực ra đều dùng plugin cả. Phân chia như vậy dựa trên cơ chế và bản chất của plugin.

Đầu tiên chúng ta sẽ tạo nút sử dụng một plugin theo button builder dựa trên shortcode

Cách tạo nút trong WordPress với MaxButton

Plugin MaxButtons làm việc theo cơ chế sau:

Bạn tạo và thiết kế plugin ở một màn hình. Sau đó trong WordPress Editor bạn sẽ nhúng button bạn vừa tạo. Plugin sẽ có icon ở thanh công cụ của WordPress Editor để giúp bạn dễ dàng chèn button.

Plugin sẽ sinh shortcode cho button bạn tạo. Do vậy nếu bạn deactivate plugin toàn bộ button sẽ mất. Bạn cần lưu ý tới vấn đề này khi sử dụng plugin có sinh shortcode.

Bây giờ, đây là cách tạo button sử dụng plugin MaxButton:

Đầu tiên bạn cần cài đặt và activate plugin.

Ngay sau khi plugin được kích hoạt, đi tới MaxButtons -> Add New để tạo mới một button. 

tạo button trong wordpress 1

Bạn sẽ thấy nhiều tùy chọn. Nhưng đây là những thông tin bạn cần thiết lập

Button Name: tên của nút - cái này khách ghé thăm trang web sẽ không nhìn thấy - chỉ dùng cho việc quản lý trong WordPress Dashboard.

URL: trang đích khi click vào button

Text: nhãn trên button.

Bạn có thể thay đổi font, màu sắc và nhiều tùy chọn khác cho button nếu thích. Bạn có thể nhìn thấy những thay đổi ở phía phải:

tạo button trong wordpress 2

Ngay khi bạn đã hài lòng với giao diện của nút, click vào nút Save ở trên cùng để lưu nút lại.

Tiếp đó, bạn đi tới bài viết cần bổ sung nút. Bạn sẽ nhìn thấy icon Add Button ở WordPress editor:

tạo button trong wordpress 3

Click vào icon này một hộp thoại xổ ra. Bạn chọn button bạn muốn chèn. Và click vào nút Insert Button into Editor

tạo button trong wordpress 4

Lúc này bạn có thể thay đổi lại text và URL của button nếu muốn. Tiếp theo, click vào nút Add to Editor để chèn nút.

tạo button trong wordpress 6

Click vào Preview Changes để xem nút như thế nào khi truy cập trên trang web.

Nếu bạn yêu thích có icon trong nút thì đây là tin buồn:

Plugin MaxButton không có tính năng icon trong phần button builder.

Tuy nhiên, bạn có thể sử dụng Font Awesome. Như bên dưới mình chèn mã icon giỏ hàng lấy từ trang web của Font Awesome:

tạo button trong wordpress 7

Cách bổ sung nút trong WordPress sử dụng plugin Forget About Shortcode Buttons

Như tên gọi, plugin này sẽ tạo nút nhưng không sử dụng shortcode. Do vậy nếu bạn deactivate plugin trong tương lai, button mà bạn tạo ra vẫn còn đó.

Đây là cách tạo button:

Đầu tiên bạn cài đặt và activate plugin Forget About Shortcode Buttons.

Ngay khi plugin được kích hoạt, bạn sẽ tạo button ngay trong WordPress Editor.

Chỉ cần click vào nút Insert Button trên thanh công cụ:

tạo button trong wordpress 15

Lúc này, bạn chỉ cần nhập vào text, URL và chỉnh sửa một số tùy chọn khác về mặt giao diện.

tạo button trong wordpress 16

So với plugin MaxButton plugin này có thêm phần icon. Do vậy bạn có thể thêm icon nếu thích

tạo button trong wordpress 17

Nếu bạn định sử dụng lại button mà bạn vừa thiết kế, bạn click vào biểu tượng cái đĩa mềm để lưu button thành template.

tạo button trong wordpress 18

Khi mọi thứ xong xuôi, click Insert.

Vì plugin này không dựa vào shortcode, nên bạn có thể thấy giao diện nút như thế nào ngay trong khung Visual.

tạo button trong wordpress 19

Một vài plugin khác để tạo button trong WordPress:

Nếu hai plugin chưa làm bạn hài lòng, bạn có thể sử dụng thử dùng những plugin sau:

Button Builder - Nó có button pack thiết kế sẵn giúp bạn nhanh chóng có nút như ý muốn

Mango Button - có một vài kiểu nút mặc định

ShortCode Ultimate - Bộ shortcode phổ biến nhất cho WordPress - Dĩ nhiên nó cũng có shortcode cho tạo nút. Đây là plugin mình hay dùng trong quá khứ.

Tạo button sử dụng Page Builder Plugin

Những ngày này, plugin Page Builder ngày càng được sử dụng phổ biến. Một vài plugin page builder phổ biến có thể kể tên như: Visual Composer, Divi Builder, Beaver Builder, Thrive Content Builder.

Các page builder trên thường có module tên là button. Thuật ngữ có thể khác nhau giữa các plugin nhưng về cơ bản giống nhau. 

Các pagebuilder thường khá phức tạp. Bạn cần thời gian đọc tài liệu để nắm được cách sử dụng. 

Tuy vậy, ở đây mình sẽ demo nhanh cách tạo nút sử dụng Divi Builder. 

Đầu tiên bạn đi tới trang Dashboard của Elegant Themes để tải về plugin ở dạng file zip.

Xem thêm: Elegant Themes giảm 20% trọn bộ theme và plugin​

Sau đó bạn cài đặt và kích hoạt plugin.

Bây giờ bạn đi tới bài viết bạn cần thêm nút. Click vào nút Use Divi Builder. 

tạo button trong wordpress 8

​Tiếp đó bạn click vào nút Use Visual Builder.

tạo button trong wordpress 11

Bây giờ bạn có thể tận hưởng tính năng thiết kế button theo kiểu WYSIWYG. Bạn sẽ nhìn thấy mọi thay đổi khi bạn tự tay thiết kế nút. Tham khảo thêm module button trong Divi Builder

tạo button trong wordpress 13

Lời kết

Đó là tất cả.

Bạn đã biết những plugin phổ biến hiện giờ trong việc tạo nút đẹp mắt cho website.

Nếu bạn không dùng page builder, bạn có thể sử dụng plugin miễn phí như Max Button.

Trong trường hợp bạn đang sử dụng page builder, bạn không cần phải cài thêm plugin tạo nút. Tính năng tạo nút chắc chắn sẽ có trong page builder.

Nếu bạn còn biết plugin nào hay trong việc tạo nút. Hãy chia sẻ cho mình và mọi người biết ở phần bình luận bên dưới.

Khóa học WordPress tốt nhất cho BEGINNER

Bình luận (1)

Trả lời

Mình rất vui khi bạn đã quyết định để lại comment. Chú ý tất cả comment đều được kiểm duyệt cẩn thận nên đừng cố spam hoặc quảng cáo. Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Name. Xin cảm ơn.

Địa chỉ email của bạn sẽ không được tiết lộ Trường đánh dấu * là bắt buộc

Share This
Kyna đồng giá nhiều khóa học chỉ từ 199k. Click để xem chi tiết
Scroll Up