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ư 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.
Xem thêm cho Blogger: Chia sẻ 16 hiệu ứng button đẹp cho website
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
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.
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:
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:
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
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.
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:
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:
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ụ:
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.
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
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.
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.
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.
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.
Tiếp đó bạn click vào nút Use Visual Builder.
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
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.Nguồn: thuthuatwp
Facebook