Thêm nút bấm vào menu header WordPress

Thêm Nút Bấm (Button) vào Menu Header WordPress: Hướng Dẫn Chi Tiết

Menu header là một phần quan trọng của bất kỳ trang web WordPress nào, đóng vai trò điều hướng người dùng đến các phần khác nhau của trang. Thêm một nút bấm (button) vào menu header có thể là một cách tuyệt vời để làm nổi bật các lời kêu gọi hành động (call-to-action – CTA) quan trọng, chẳng hạn như đăng ký, liên hệ hoặc mua hàng. Bài viết này sẽ hướng dẫn bạn qua nhiều cách để thêm nút bấm vào menu header WordPress, từ các phương pháp đơn giản nhất đến các phương pháp phức tạp hơn đòi hỏi một chút kiến thức về code.

Phương Pháp 1: Sử Dụng Plugin Menu

Đây là cách dễ dàng nhất và được khuyến nghị cho người mới bắt đầu. Có rất nhiều plugin WordPress miễn phí và trả phí cho phép bạn thêm các loại mục khác nhau vào menu của mình, bao gồm cả nút bấm.

Plugin Menu Miễn Phí:

Một số plugin miễn phí phổ biến bao gồm:

Menu Icons
Max Mega Menu
WPFront Menu Editor

Các plugin này thường cho phép bạn thêm các biểu tượng và tùy chỉnh nhãn của các mục menu. Một số cũng có thể hỗ trợ thêm các lớp CSS tùy chỉnh, cho phép bạn tạo kiểu cho nút bấm của mình.

Plugin Menu Trả Phí:

Các plugin trả phí thường cung cấp nhiều tính năng hơn, bao gồm:

Mega Menu
UberMenu
QuadMenu

Các plugin này thường cung cấp các tùy chọn tùy chỉnh nâng cao hơn, chẳng hạn như khả năng thêm các hình ảnh, video và các nội dung động vào menu của bạn.

Ví dụ: Sử Dụng Plugin “Menu Icons”

Chúng ta sẽ xem xét ví dụ về cách sử dụng plugin “Menu Icons” để thêm nút bấm vào menu.

Cài đặt và Kích hoạt Plugin: Trong bảng điều khiển WordPress của bạn, điều hướng đến “Plugins” -> “Add New” và tìm kiếm “Menu Icons”. Cài đặt và kích hoạt plugin.
Truy cập Menu Editor: Đi đến “Appearance” -> “Menus”.
Chọn Menu: Chọn menu bạn muốn thêm nút bấm vào (thường là menu header).
Thêm Liên Kết Tùy Chỉnh: Thêm một “Custom Link” vào menu. Nhập URL mong muốn cho nút bấm của bạn vào trường “URL”. Nhập văn bản bạn muốn hiển thị trên nút bấm vào trường “Link Text”.
Chọn Biểu Tượng: Nhấp vào mục menu bạn vừa tạo. Bạn sẽ thấy một tùy chọn để chọn một biểu tượng. Chọn biểu tượng phù hợp hoặc chọn “No Icon” nếu bạn chỉ muốn một nút bấm văn bản.
Lưu Menu: Nhấp vào “Save Menu”.

Mặc dù plugin “Menu Icons” không trực tiếp thêm chức năng “nút bấm”, nó cho phép bạn tạo kiểu cho liên kết menu để trông giống như một nút bấm bằng CSS tùy chỉnh (xem phần sau).

Phương Pháp 2: Thêm Lớp CSS Tùy Chỉnh và Code CSS

Phương pháp này đòi hỏi một chút kiến thức về CSS, nhưng cho phép bạn kiểm soát hoàn toàn giao diện của nút bấm. Bạn có thể thêm một lớp CSS tùy chỉnh vào mục menu và sau đó sử dụng CSS để tạo kiểu cho lớp đó để trông giống như một nút bấm.

Bật Lớp CSS trong Menu: Trong bảng điều khiển WordPress của bạn, đi đến “Appearance” -> “Menus”. Ở góc trên bên phải của màn hình, nhấp vào “Screen Options”. Đánh dấu vào hộp “CSS Classes”.
Thêm Lớp CSS Tùy Chỉnh: Chọn menu bạn muốn thêm nút bấm vào. Thêm một “Custom Link” vào menu. Nhập URL mong muốn cho nút bấm của bạn vào trường “URL”. Nhập văn bản bạn muốn hiển thị trên nút bấm vào trường “Link Text”. Nhấp vào mục menu bạn vừa tạo. Bạn sẽ thấy một trường “CSS Classes (optional)”. Nhập một lớp CSS tùy chỉnh vào trường này, ví dụ: “menu-button”.
Thêm CSS Tùy Chỉnh: Có nhiều cách để thêm CSS tùy chỉnh vào trang web WordPress của bạn:
- WordPress Customizer: Đi đến “Appearance” -> “Customize” -> “Additional CSS”. Đây là cách được khuyến nghị.
- Theme’s style.css: Bạn có thể chỉnh sửa tệp style.css của chủ đề con (child theme) của bạn. Không chỉnh sửa trực tiếp tệp style.css của chủ đề chính vì những thay đổi của bạn sẽ bị ghi đè khi chủ đề được cập nhật.
- Plugin CSS tùy chỉnh: Có rất nhiều plugin cho phép bạn thêm CSS tùy chỉnh một cách dễ dàng.

Viết Code CSS: Thêm code CSS sau vào trình tùy biến CSS hoặc tệp style.css của chủ đề con của bạn:


.menu-item a.menu-button {
  background-color: #4CAF50; /* Màu nền */
  color: white; /* Màu chữ */
  padding: 10px 20px; /* Khoảng cách xung quanh chữ */
  text-align: center; /* Căn giữa chữ */
  text-decoration: none; /* Loại bỏ gạch chân */
  display: inline-block; /* Hiển thị như một khối trực tuyến */
  border-radius: 5px; /* Bo tròn góc */
  border: none; /* Loại bỏ đường viền */
  cursor: pointer; /* Con trỏ chuột */
}

.menu-item a.menu-button:hover {
  background-color: #3e8e41; /* Màu nền khi di chuột qua */
}

Điều chỉnh các giá trị màu sắc, padding, border-radius, v.v. theo sở thích của bạn.

Lưu Menu và Xem Trang Web: Lưu menu của bạn và xem trang web của bạn để xem nút bấm mới của bạn.

Phương Pháp 3: Sử Dụng Theme Functions (functions.php)

Phương pháp này phức tạp hơn và yêu cầu kiến thức về PHP. Bạn sẽ cần chỉnh sửa tệp functions.php của chủ đề con (child theme) của bạn. Không chỉnh sửa trực tiếp tệp functions.php của chủ đề chính vì những thay đổi của bạn sẽ bị ghi đè khi chủ đề được cập nhật.

Tạo Chủ Đề Con (Child Theme): Nếu bạn chưa có chủ đề con, hãy tạo một chủ đề con. Đây là cách an toàn nhất để tùy chỉnh chủ đề của bạn mà không sợ mất các thay đổi khi chủ đề được cập nhật.
Chỉnh sửa tệp functions.php của Chủ Đề Con: Mở tệp functions.php của chủ đề con của bạn.
Thêm Code PHP để Lọc Menu: Thêm code PHP sau vào tệp functions.php của bạn:
```
function add_button_to_menu($items, $args) {
  if ($args->theme_location == 'primary') { // Thay 'primary' bằng vị trí menu của bạn
    $button_html = 'Nút Bấm'; // Thay đổi URL và văn bản
    $items .= $button_html;
  }
  return $items;
}
add_filter('wp_nav_menu_items', 'add_button_to_menu', 10, 2);
    
```
Trong code này:
- 'primary' là vị trí menu mà bạn muốn thêm nút bấm vào. Thay thế nó bằng vị trí menu thực tế của bạn. Bạn có thể tìm thấy vị trí menu trong “Appearance” -> “Menus”.
- 'https://example.com' là URL bạn muốn nút bấm dẫn đến. Thay thế nó bằng URL thực tế của bạn.
- 'Nút Bấm' là văn bản bạn muốn hiển thị trên nút bấm. Thay thế nó bằng văn bản thực tế của bạn.
- menu-button và menu-button-link là các lớp CSS bạn có thể sử dụng để tạo kiểu cho nút bấm của mình (xem Phương Pháp 2).
Thêm CSS Tùy Chỉnh (tùy chọn): Sử dụng Phương Pháp 2 để thêm CSS tùy chỉnh để tạo kiểu cho nút bấm của bạn bằng cách sử dụng các lớp CSS menu-button và menu-button-link.
Lưu tệp functions.php và Xem Trang Web: Lưu tệp functions.php của bạn và xem trang web của bạn để xem nút bấm mới của bạn.

Lưu Ý Quan Trọng

Sao lưu Trang Web: Trước khi thực hiện bất kỳ thay đổi nào đối với trang web WordPress của bạn, đặc biệt là khi chỉnh sửa code, hãy sao lưu trang web của bạn. Điều này sẽ giúp bạn khôi phục trang web của mình nếu có điều gì đó không ổn.
Sử Dụng Chủ Đề Con (Child Theme): Luôn luôn sử dụng chủ đề con (child theme) khi tùy chỉnh chủ đề WordPress của bạn. Điều này sẽ ngăn chặn các thay đổi của bạn bị ghi đè khi chủ đề được cập nhật.
Kiểm tra Trên Thiết Bị Di Động: Đảm bảo rằng nút bấm của bạn hiển thị tốt trên các thiết bị di động. Sử dụng CSS responsive để điều chỉnh kích thước và vị trí của nút bấm cho phù hợp với màn hình nhỏ hơn.

Kết Luận

Thêm nút bấm vào menu header WordPress là một cách hiệu quả để làm nổi bật các lời kêu gọi hành động quan trọng và cải thiện trải nghiệm người dùng. Bài viết này đã trình bày ba phương pháp khác nhau để thực hiện điều này, từ các phương pháp đơn giản sử dụng plugin đến các phương pháp phức tạp hơn đòi hỏi kiến thức về code. Chọn phương pháp phù hợp nhất với trình độ kỹ năng và nhu cầu của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa