Bạn có muốn thêm hiệu ứng thay đổi màu nền mượt mà trên trang web WordPress của mình không? Bạn có thể đã thấy trên một số trang web nổi tiếng, nơi hình nền của một khu vực cụ thể hoặc toàn bộ trang web tự động chuyển từ màu này sang màu khác. Hiệu ứng đẹp mắt này có thể giúp bạn thu hút sự chú ý của người dùng và cải thiện mức độ tương tác trên trang web của bạn.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách dễ dàng thêm hiệu ứng thay đổi màu nền mượt mà trong WordPress.
Hiệu ứng thay đổi màu nền WordPress là như thế nào?
Hiệu ứng thay đổi màu nền mượt mà cho phép bạn tự động chuyển đổi giữa các màu nền khác nhau. Sự thay đổi diễn ra từ từ qua các màu khác nhau cho đến khi nó đạt đến màu cuối cùng. Nó trông như thế này:
Kỹ thuật này được sử dụng để thu hút sự chú ý của người dùng với các hiệu ứng nhẹ nhàng dễ chịu.
Bây giờ, chúng ta hãy cũng xem các thiết lập hình nền đổi màu trong WordPress nhé.
Thêm hiệu ứng thay đổi màu nền trong WordPress
Hướng dẫn này yêu cầu bạn thêm code vào các file WordPress của mình. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của chúng tôi về cách sao chép và dán code trong WordPress .
Đầu tiên, bạn cần tìm ra lớp CSS của khu vực mà bạn muốn thay đổi. Bạn có thể thực hiện việc này bằng cách sử dụng công cụ Kiểm tra trong trình duyệt của mình. Chỉ cần đưa chuột đến khu vực bạn muốn thay đổi và nhấp chuột phải để chọn công cụ Kiểm tra.
Tiếp theo, bạn cần viết ra lớp CSS mà bạn muốn nhắm mục tiêu. Ví dụ, trong ảnh chụp màn hình ở trên, chúng tôi muốn nhắm mục tiêu khu vực tiện ích con ở dưới cùng có lớp CSS ‘page-header’.
Trong bước tiếp theo, bạn cần mở một trình soạn thảo văn bản thuần túy trên máy tính của mình và tạo một file mới. Bạn cần lưu file này dưới dạng wpb-background-tutorial.js trên màn hình của mình.
Tiếp theo, bạn cần thêm mã sau vào bên trong file JS của mình:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
jQuery(function($){ $('.page-header').each(function(){ var $this = $(this), colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function(){ var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); }); |
Nếu bạn nghiên cứu đoạn code này, bạn sẽ nhận thấy rằng chúng tôi đã sử dụng lớp CSS mà chúng tôi muốn nhắm mục tiêu trong code. Chúng tôi cũng đã thêm bốn màu. Hiệu ứng hình nền chuyển màu của chúng ta sẽ bắt đầu từ màu đầu tiên, sau đó chuyển sang màu tiếp theo và tiếp tục chuyển động qua các màu này.
Đừng quên lưu các thay đổi của bạn.
Tiếp theo, bạn cần tải tệp wpb-bg-tutorial.js lên thư mục / js / theme WordPress của mình bằng FTP . Nếu chủ đề của bạn không có thư mục js bên trong, thì bạn cần tạo một thư mục.
Sau khi tải lên file JavaScript của bạn, đã đến lúc tải nó trong WordPress.
Bạn cần thêm đoạn code sau vào file functions.php của theme.
|
1
2
3
4
|
function wpb_bg_color_scripts() { wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); |
Đoạn mã này tải đúng tệp JavaScript và tập lệnh jQuery phụ thuộc mà bạn cần để nó hoạt động.
Bây giờ, bạn có thể truy cập trang web của mình để xem nó hoạt động. Bạn sẽ nhận thấy hiệu ứng thay đổi màu nền mượt mà trong khu vực mà bạn đã nhắm mục tiêu.
Có nhiều cách khác để sử dụng hình nền trong WordPress để thu hút sự chú ý của người dùng hoặc làm cho nội dung của bạn trở nên nổi bật. Ví dụ, bạn có thể thử:
- Thêm hình nền toàn màn hình
- Thêm hình nền video toàn màn hình
- Hình nền ngẫu nhiên trên mỗi lần tải trang
- Thêm hiệu ứng parallax vào bất kỳ theme WordPress nào
- Tạo kiểu cho từng bài đăng với các hình nền khác nhau.
Chúng tôi hy vọng bài viết này đã giúp bạn hiểu cách dễ dàng thêm hiệu ứng thay đổi màu nền mượt mà trong WordPress. Bạn cũng có thể muốn xem danh sách của chúng tôi về các plugin tạo trang WordPress tốt nhất nên thử.
Nếu bạn thích bài viết này, vui lòng đăng ký YouTube Channel của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.
