3 cách tạo alert bar trong WordPress dễ dàng

2 ngày ago, Hướng dẫn WordPress, 1 Views
3 cách tạo alert bar trong WordPress dễ dàng

3 Cách Tạo Alert Bar Trong WordPress Dễ Dàng

Alert bar, hay còn gọi là thông báo nổi bật, là một công cụ hữu ích để thu hút sự chú ý của khách truy cập vào những thông tin quan trọng trên trang web WordPress của bạn. Ví dụ, bạn có thể sử dụng alert bar để thông báo về chương trình khuyến mãi, thông báo bảo trì, hoặc cung cấp liên kết đến những nội dung quan trọng.

Có nhiều cách để tạo alert bar trong WordPress, từ việc sử dụng plugin đến việc tùy chỉnh code. Trong bài viết này, chúng tôi sẽ giới thiệu 3 cách dễ dàng để tạo alert bar, phù hợp với nhiều trình độ kỹ thuật khác nhau.

1. Sử Dụng Plugin WordPress

Đây là cách đơn giản nhất và phổ biến nhất để tạo alert bar. Có rất nhiều plugin miễn phí và trả phí cung cấp các tính năng tùy chỉnh mạnh mẽ.

Lợi Ích Khi Sử Dụng Plugin

  • Dễ dàng cài đặt và sử dụng, không cần kiến thức code.
  • Nhiều plugin cung cấp các tùy chọn thiết kế đa dạng.
  • Một số plugin tích hợp sẵn tính năng A/B testing.

Một Số Plugin Alert Bar Phổ Biến

Dưới đây là một vài plugin được đánh giá cao và dễ sử dụng:

  • Hello Bar: Plugin phổ biến với nhiều tùy chọn tùy chỉnh, bao gồm cả A/B testing. Phiên bản miễn phí có giới hạn tính năng.
  • Notification Bar: Plugin đơn giản và dễ sử dụng, với các tùy chọn cơ bản như thay đổi màu sắc, văn bản và liên kết.
  • WPFront Notification Bar: Một plugin mạnh mẽ với nhiều tùy chọn tùy chỉnh, bao gồm khả năng hiển thị alert bar dựa trên loại trang, bài viết hoặc người dùng.

Hướng Dẫn Cài Đặt và Sử Dụng Plugin (Ví dụ: Notification Bar)

  1. Cài đặt plugin: Trong trang quản trị WordPress, đi đến “Plugins” -> “Add New”. Tìm kiếm “Notification Bar” và cài đặt plugin có tên “Notification Bar by SeedProd”.
  2. Kích hoạt plugin: Sau khi cài đặt, kích hoạt plugin.
  3. Truy cập cài đặt plugin: Đi đến “Settings” -> “Notification Bar” để truy cập trang cài đặt.
  4. Tùy chỉnh alert bar:
    • Nhập văn bản bạn muốn hiển thị.
    • Thêm liên kết (tùy chọn).
    • Chọn màu sắc cho nền và văn bản.
    • Chọn vị trí hiển thị (trên cùng hoặc dưới cùng).
  5. Kích hoạt alert bar: Đảm bảo tùy chọn “Enable Notification Bar” được chọn.
  6. Lưu cài đặt: Nhấn nút “Save Settings”.

Sau khi lưu cài đặt, alert bar sẽ hiển thị trên trang web của bạn.

2. Sử Dụng Theme Options (Nếu Theme Hỗ Trợ)

Một số theme WordPress cao cấp tích hợp sẵn tính năng alert bar trong phần “Theme Options” hoặc “Theme Customizer”. Nếu theme của bạn có tính năng này, bạn có thể dễ dàng tạo alert bar mà không cần cài đặt thêm plugin.

Ưu Điểm Của Việc Sử Dụng Theme Options

  • Không cần cài đặt thêm plugin, giảm tải cho trang web.
  • Tích hợp hoàn hảo với thiết kế theme.
  • Dễ dàng tùy chỉnh trong phần “Theme Options” hoặc “Theme Customizer”.

Cách Kiểm Tra Theme Options

  1. Trong trang quản trị WordPress, đi đến “Appearance” -> “Customize”.
  2. Tìm kiếm các tùy chọn liên quan đến “Header”, “Top Bar” hoặc “Alert Bar”.
  3. Nếu bạn thấy các tùy chọn này, theme của bạn có thể hỗ trợ alert bar.

Ví dụ: Tùy Chỉnh Alert Bar Trong Theme Astra

Astra là một theme WordPress phổ biến, cung cấp nhiều tùy chọn tùy chỉnh, bao gồm cả alert bar (thường được gọi là “Top Bar”).

  1. Đi đến “Appearance” -> “Customize”.
  2. Chọn “Header” -> “Top Bar”.
  3. Bạn có thể tùy chỉnh nội dung, màu sắc, liên kết và vị trí của alert bar.
  4. Sau khi tùy chỉnh, nhấn nút “Publish” để lưu thay đổi.

Lưu ý: Các tùy chọn có thể khác nhau tùy thuộc vào theme bạn đang sử dụng. Tham khảo tài liệu của theme để biết thêm chi tiết.

3. Tùy Chỉnh Code (Cho Người Dùng Nâng Cao)

Nếu bạn có kiến thức về HTML, CSS và PHP, bạn có thể tạo alert bar bằng cách tùy chỉnh code của theme. Cách này cho phép bạn kiểm soát hoàn toàn thiết kế và chức năng của alert bar.

Ưu Điểm Của Việc Tùy Chỉnh Code

  • Kiểm soát hoàn toàn thiết kế và chức năng.
  • Không phụ thuộc vào plugin hoặc theme.
  • Tối ưu hóa hiệu suất trang web.

Các Bước Thực Hiện

  1. Tạo file CSS: Tạo một file CSS mới (ví dụ: alert-bar.css) và thêm các quy tắc CSS để tạo kiểu cho alert bar.
  2. Thêm HTML: Thêm đoạn HTML sau vào file header.php của theme (thường nằm trong thư mục /wp-content/themes/your-theme/): 
    <div id="alert-bar">
  <p>Đây là thông báo quan trọng! <a href="#">Tìm hiểu thêm</a></p>
</div>
  3. Nhúng CSS: Thêm đoạn code sau vào file functions.php của theme để nhúng file CSS: 
    function custom_alert_bar_styles() {
  wp_enqueue_style( 'alert-bar', get_stylesheet_directory_uri() . '/alert-bar.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_alert_bar_styles' );
  4. Tùy chỉnh CSS: Chỉnh sửa file alert-bar.css để thay đổi màu sắc, kích thước, font chữ và các thuộc tính khác của alert bar.

Ví Dụ File CSS (alert-bar.css)

#alert-bar {
  background-color: #f0ad4e;
  color: #fff;
  padding: 10px;
  text-align: center;
  position: relative; /* Để có thể sử dụng position: sticky; */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* Đảm bảo alert bar luôn hiển thị trên các phần tử khác */
}

#alert-bar p {
  margin: 0;
}

#alert-bar a {
  color: #fff;
  text-decoration: underline;
}

Lưu Ý Quan Trọng

  • Sao lưu file header.php và functions.php trước khi chỉnh sửa.
  • Sử dụng child theme để tránh mất các tùy chỉnh khi cập nhật theme.
  • Nếu bạn không chắc chắn, hãy nhờ đến sự trợ giúp của một nhà phát triển WordPress chuyên nghiệp.

Kết Luận

Việc tạo alert bar trong WordPress không hề khó khăn. Tùy thuộc vào trình độ kỹ thuật và nhu cầu của bạn, bạn có thể chọn một trong ba cách trên. Sử dụng plugin là cách đơn giản nhất, theme options là lựa chọn tốt nếu theme của bạn hỗ trợ, và tùy chỉnh code cho phép bạn kiểm soát hoàn toàn. Chúc bạn thành công!

, , , ,

..