Hướng dẫn chèn hiệu ứng thay đổi màu nền mịn trên WordPress

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

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

Hiệu ứng này cho phép bạn tự động chuyển đổi giữa các màu nền khác nhau. Sự chuyển đổi diễn ra từ màu đầu tiên cho đến màu cuối cùng. Nó trông thế này này:

Kỹ thuật này sử dụng các hiệu ứng nhẹ nhàng để thu hút sự chú ý của người dùng bằng cách làm dịu mắt.

Hòm hòm rồi đó, giờ hãy cùng xem làm sao để thêm hiệu ứng thay đổi màu nền mịn này trên WordPress nha!

Chèn hiệu ứng thay đổi màu nền mịn trong WordPress

Hướng dẫn này yêu cầu bạn phải thêm các đoạn mã vào trong các file WordPress của mình. Nếu bạn chưa từng thực hiện điều này trước đây, thì hãy xem hướng dẫn của chúng tôi về cách sao chép và dán mã trong WordPress.

Trước 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ể làm điều này bằng cách sử dụng công cụ Inspect trong trình duyệt của bạn. 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 Inspect.

Tiếp theo, bạn cần viết ra lớp CSS mà bạn hướng đến. Ví dụ: trong ảnh trên, chúng tôi muốn nhắm đến khu vực widget ở chân trang có lớp CSS ’page-header’.

Sau đó, bạn cần mở trình soạn thảo văn bản trên máy tính của mình và tạo một tệp mới. Bạn cần lưu tệp này dưới dạng wpb-background-guide.js trên desktop.

Tiếp tục, bạn cần nhập đoạn code sau vào tệp JS của mình:

123456789101112 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 để ý, bạn sẽ nhận thấy rằng chúng tôi đã sử dụng lớp CSS mà chúng tôi hướng đến ở trong đoạn mã. Chúng tôi cũng đã chèn thêm bốn màu khác nhau. Hiệu ứng nền mịn của chúng tôi sẽ bắt đầu từ màu đầu tiên, sau đó chuyển sang màu tiếp theo và tiếp tục lặp đi lặp lại các màu này.

Đừng quên lưu lại các thay đổi của bạn.

Tiếp theo, bạn cần tải tệp wpb-bg-guide.js lên thư mục /js/ của theme WordPress của bạn bằng FTP. Nếu theme của bạn chưa chứa sẵn thư mục js, thì bạn phải tạo mới.

Sau khi tải lên tệp JavaScript, đã đến lúc chạy nó trong WordPress.

Bạn cần thêm đoạn code sau vào file functions.php trong theme của mình

1234 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 code này chạy đúng file JavaScript và tập lệnh jQuery phụ thuộc mà bạn cần để mã này hoạt động.

Ok rồi, bây giờ bạn có thể truy cập trang web của mình để xem nó. Bạn sẽ nhận thấy hiệu ứng thay đổi màu nền mịn ở chỗ mà bạn muốn.

Có nhiều cách khác để sử dụng màu 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 nổi bật lên. Bạn có thể thử:

Chúng tôi hy vọng bài viết này đã cung cấp cho bạn cách đơn giản để chèn hiệu ứng thay đổi màu nền mịn trong WordPress. Bạn cũng có thể muốn xem danh sách các plugin xây dựng trang WordPress tốt nhất của chúng tôi.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

+