Tin tức và phân tích của tất cả các thiết bị di động
Blogs

Cách thêm hiệu ứng thay đổi màu nền trong WordPress

Bạn có muốn thêm hiệu ứng mượt mà vào việc thay đổi màu nền cho trang web WordPress của mình không? Bạn có thể đã thấy trên một số trang web phổ biến rằng màu nền của một khu vực cụ thể hoặc toàn bộ trang web sẽ tự động thay đổi 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 sự tương tác với trang web của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm hiệu ứng thay đổi màu nền trong WordPress.

Thêm hiệu ứng thay đổi màu nền trong WordPress

Hiệu ứng mịn trên sự thay đổi màu nền là gì?

Với hiệu ứng thay đổi màu nền, bạn có thể tự động chuyển đổi giữa các màu nền khác nhau. Sự thay đổi được thực hiện từ từ thông qua các màu khác nhau cho đến khi đạt được màu cuối cùng. Nó trông như thế này:

Hoạt hình cho hiệu ứng thay đổi màu sắc

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 mượt mà dễ chịu cho mắt.

Chúng ta hãy xem làm thế nào bạn có thể thêm hiệu ứng thay đổi màu nền mượt mà này vào bất kỳ chủ đề WordPress nào.

Thêm hiệu ứng để thay đổi màu nền WordPress

Trong hướng dẫn này, thêm mã vào các tệp WordPress của bạn. Nếu bạn chưa có, hãy xem hướng dẫn của chúng tôi để sao chép và dán mã trong WordPress.

Đầu tiên, xác định lớp CSS cho khu vực bạn muốn thay đổi. Bạn có thể làm điều đó với công cụ kiểm tra trong trình duyệt của bạn. Chỉ cần di chuột qua khu vực bạn muốn thay đổi và nhấp chuột phải để chọn Công cụ kiểm tra.

Tìm kiếm lớp CSS

Bước tiếp theo là mở trình soạn thảo văn bản đơn giản trên máy tính của bạn và tạo một tệp mới. Bạn nên lưu tệp này dưới dạng wpb-background-guide.js trên máy tính để bàn của bạn.

Sau đó chèn đoạn mã sau vào tệp JS của bạn:

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 mã 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 sẽ đề cập đến trong mã. Chúng tôi cũng thêm bốn màu. Hiệu ứng nền mềm mại của chúng tôi bắt đầu với màu đầu tiên, sau đó thay đổi sang màu tiếp theo và tiếp tục với các màu đó.

Đừng quên lưu các thay đổi của bạn vào tệp.

Sau đó tải tệp wpb-bg-guide.js lên thư mục / js / của chủ đề WordPress của bạn qua FTP. Nếu chủ đề của bạn không chứa thư mục js, hãy tạo một thư mục.

Khi bạn đã tải lên tệp JavaScript của mình, đã đến lúc tải nó lên WordPress.

Bạn nên thêm đoạn mã sau vào tệp tin.php của chủ đề.

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' );

Mã này tải chính xác tệp JavaScript và tập lệnh jQuery phụ thuộc mà bạn cần để mã này hoạt động.

Đây là những gì bạn có thể truy cập trang web của họ để xem hoạt động. Bạn sẽ thấy hiệu ứng thay đổi màu nền mượt mà trên khu vực bạn đang nhắm mục tiêu.

Có nhiều cách khác để sử dụng màu nền WordPress để thu hút sự chú ý của người dùng hoặc làm nổi bật nội dung của bạn. Ví dụ: thử:

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng thêm hiệu ứng mượt mà vào thay đổi màu nền trong WordPress. Bạn cũng có thể muốn xem danh sách các plugin xây dựng trang web WordPress tốt nhất của chúng tôi mà bạn có thể thử.

Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter y Facebook.

Khuyến Khích: