Nếu bạn đang sử dụng WordPress để tạo một trang thông tin điện tử, hoặc một trang báo mạng, có thể người đọc sẽ thấy website của bạn chứa quá nhiều thông tin. Họ sẽ không kiên nhẫn “mò kim đáy bể” trên website của bạn, họ cần thông tin quan trọng ngay và luôn! Vậy làm thế nào để làm nổi bật những tin quan trọng đó? Bạn cần tạo news ticker cho trang WordPress của mình.
Trong bài viết này, chúng mình sẽ giải thích news ticker là gì, tại sao cần sử dụng chúng, và làm thế nào để tạo news ticker trong WordPress. Chỉ mất 5 phút đọc bài thôi là bạn đã biết cách sở hữu một công cụ đắc lực rồi đấy!
Trước hết hãy cùng chúng mình xem news ticker là gì nhé:
News ticker là gì?
Khi xem thời sự bạn có để ý những dòng tin chạy ở phía dưới màn hình không? News ticker trên các website WordPress cũng giống như vậy. Bạn có thể bắt gặp news ticker trên header, footer hay sidebar của các website này.
News ticker phổ biến như vậy vì sự tiện lợi của nó. Người xem chỉ cần lướt qua news ticker là đã biết thông tin nào quan trọng trên các trang báo mạng và tạp chí online rồi. Trên mỗi news ticker sẽ gồm nhiều mẩu tin, gọi là các tick. Click vào các tick khác nhau thì bạn sẽ được dẫn đến các bài viết khác nhau.
Chẳng hạn như gif dưới đây, cuộn tin Breaking News đang chạy trên header chính là news ticker, còn các mẩu tin nhỏ bên trong nó là các tick. Trông đơn giản nhưng bắt mắt và hiệu quả, đúng không nào?
Tại sao cần sử dụng news ticker?
News ticker có rất nhiều lợi ích cho trang WordPress của bạn:
- Với trang báo và tạp chí online, news ticker giúp làm nổi bật các thông tin quan trọng và đáng chú ý nhất.
- Với portfolio, chúng thu hút sự chú ý của nhà tuyển dụng vào các kinh nghiệm làm việc và thành tựu nổi bật của bạn.
- Với các kiểu website khác, news ticker trở thành điểm nhấn, khiến website của bạn trở nên thu hút và chuyên nghiệp hơn đáng kể.
Bạn thấy không, news ticker là một công cụ rất lợi hại cho mọi trang WordPress đấy! Chưa kể là tạo news ticker còn rất dễ nữa. Cùng bắt tay vào việc luôn nhé!
Làm thế nào để thêm news ticker vào WordPress
Có rất nhiều cách để thêm news ticker.
Bạn có thể sử dụng một theme có sẵn news ticker, đây gọi là cách “không làm mà vẫn có ăn”. Nhưng nhớ là đọc kĩ hướng dẫn của theme trước khi tạo news ticker nhé!
Đối với những ai sử dụng theme không có sẵn news ticker, bạn có thể sử dụng một page builder hoặc plugin.
Trong bài viết này, mình sẽ sử dụng một plugin gọi là Ditty News Ticker. Plugin này miễn phí, dễ sử dụng và dễ tùy chỉnh. Bạn chỉ cần cài đặt và kích hoạt plugin này trên Dashboard là được.
Bây giờ thì thực hiện 3 bước đơn giản để tạo một news ticker thật “xịn xò” nhé!
Bước 1: Tạo news ticker mới
Đầu tiên, vào News Ticker > Add New
Bạn sẽ được dẫn đến một màn hình cài đặt. Tại đây sẽ có 5 tabs mà bạn cần lưu ý: Add Title, Shortcode, Ticker Mode, Ticker Type và Global Settings. Đây là những tab dùng để điều chỉnh và hiển thị news ticker của bạn đấy!
Bạn có thấy hoang mang vì nhiều tab phải ghi nhớ quá không? Yên tâm, mình sẽ hướng dẫn ngắn gọn và đơn giản thôi nhé!
Trước hết, bạn cần gõ tên của news ticker vào ô Add Title. Tên thường được hiển thị phía trên news ticker, nên hãy để tên thật ngắn gọn và thu hút để gây ấn tượng với người xem.
Tiếp theo, chọn Ticker Type. Tại đây, bạn có thể thêm nội dung của news ticker cùng với link URL (nếu có) ở ô Ticker Text.
Như mình đã nói ở phần mở đầu, một news ticker thường bao gồm nhiều tick, tức là các mẩu tin nhỏ. Khi muốn thêm một tick, click dấu (+), còn nếu muốn xóa một tick đi, click (x).
Bước 2: Điều chỉnh news ticker
Chỉ tạo mới news ticker là chưa đủ, bạn còn phải làm nó bắt mắt hơn nữa.
Đầu tiên, chọn Ticker Mode để điều chỉnh kiểu hiển thị của news ticker. Có 3 chế độ hiển thị news ticker là Scroll (kiểu cuộn tin), Rotate (kiểu xoay tròn) và List (kiểu danh sách). Scroll là chế độ thường được sử dụng nhất, tuy nhiên bạn cứ chọn cái nào phù hợp với website của mình là được.
Khi đã chọn xong chế độ hiển thị, bạn còn cần phải điều chỉnh hiệu ứng của news ticker nữa.
Ví dụ như mình đã chọn chế độ Scroll, nên mình sẽ điều chỉnh hiệu ứng cuộn tin. Hai thông số cần chú ý nhất là Scroll Speed (tốc độ cuộn tin) và Tick Space (khoảng cách giữa các tick). Việc điều chỉnh các thông số này không có công thức nào để làm theo cả, mà bạn phải thử một vài lần mới biết như thế nào là hợp nhất với website của mình.
Bên cạnh đó, mình còn chọn ô Pause on mouse over để news ticker dừng chuyển động khi con trỏ chuột di đến một tick bất kỳ. Việc này sẽ giúp người xem tin thấy thuận tiện hơn rất nhiều đấy!
Ngoài ra, khi click Global Settings, bạn sẽ thấy một số lựa chọn tùy chỉnh khác. Ví dụ, chọn ô Display title nếu bạn muốn hiển thị tên của news ticker, hoặc chọn Hide ticker if no ticks exist nếu bạn muốn ẩn news ticker đi khi không có mẩu tin nào.
Bây giờ news ticker của bạn đã sẵn sàng để hiển thị rồi đấy!
Bước 3: Hiển thị news ticker
Bây giờ cùng quay lại tab Shortcode mà mình đã nhắc ở phía trên nhé:
Bạn chèn đoạn code này ở đâu thì news ticker sẽ hiển thị ở đó, bất kì vị trí nào: footer, post, sidebar, …
Thông thường chúng ta sẽ để news ticker trên header, footer hoặc sidebar. Cá nhân mình thích để news ticker ở sidebar, nên mình sẽ hướng dẫn cách hiển thị news ticker ở vị trí này nhé. Trước hết, mình chọn một page bất kỳ, sau đó chọn Preview > Customize > Widget.
Sau đó, chọn Sidebar > Add a Widget. Bạn sẽ thấy rất nhiều lựa chọn cho widget như Audio, Calendar,… Chọn Text, sau đó sẽ có một cửa sổ nhỏ ở góc trái màn hình để bạn thêm tên sidebar và paste đoạn code đã copy từ trước.
Phiên bản miễn phí của Ditty News Ticker không hỗ trợ tùy chỉnh màu sắc, font hay cỡ chữ của news ticker. Để tiến hành các tùy chỉnh nâng cao này, bạn còn một bước nhỏ nữa phải thực hiện. Nếu không thì news ticker của bạn trông sẽ không bắt mắt lắm như gif này:
Mình sẽ sử dụng CSS để “tút tát” lại cho news ticker này. Chọn Customize > Additional CSS.
Bạn có thấy một cửa sổ nhỏ để thêm code vào không? Mình sẽ đổi màu của news ticker thành màu xanh, vì theme mình đang dùng là Memory cũng có màu chủ đạo là xanh.
.mtphr-dnt-tick-contents a {
color: var(--main-color);
}
.mtphr-dnt-tick-contents a:hover {
color: #000;
}
Click Publish và xem thành quả của chúng ta nào:
Đây chỉ là một ví dụ đơn giản thôi. Bạn hoàn toàn có thể tạo một news ticker bắt mắt hơn cho website WordPress của mình đấy!
Lời cuối
Đây chính là toàn bộ hướng dẫn tạo news ticker trong WordPress bằng plugin Ditty News Ticker của mình. Mình đã cố gắng để phần hướng dẫn thật ngắn gọn và dễ hiểu, hi vọng là các bạn sẽ thấy bài viết này hữu ích.
Nếu bạn có bất kỳ băn khoăn hay thắc mắc nào, hãy để lại comment ở phía dưới cho chúng mình biết nhé! Chúng mình hoàn toàn có thể làm các tutorial cụ thể hơn về các tính năng nâng cao của plugin Ditty News Ticker này, hoặc là các cách khác để thêm news ticker mà không cần plugin. Vì vậy hãy theo dõi các bài viết sắp tới nhé!