Bạn có muốn thêm hiệu ứng thay đổi màu nền mượt mà 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 trong đó màu nền của một khu vực cụ thể hoặc toàn bộ trang web sẽ 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 sự tham gia trên 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 mượt mà trong WordPress.
<img title = "Thêm hiệu ứng thay đổi màu nền mượt mà trong WordPress" src = "https: // blog-techies.com/wp-content/uploads/2020/03/bgcolorchangewp.png" alt = "Thêm hiệu ứng thay đổi màu nền mượt mà trong WordPress” width=”550″ height=”340″ class=”alignnone size-full wp-image-50813″/>
Hiệu ứng thay đổi màu nền mịn là gì?
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 xảy ra từ từ đi 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:
<img title = "Hoạt ảnh thay đổi màu" src = "https: // blog-techies.com/wp-content/uploads/2020/03/bganimate.gif" alt = "Hoạt ảnh thay đổi màu” width=”550″ height=”231″ class=”alignnone size-full wp-image-50814″/>
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.
Như đã nói, chúng ta hãy xem làm thế nào để 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 mượt mà trong WordPress
Hướng dẫn này yêu cầu bạn thêm mã vào các tệp WordPress của mình. Nếu bạn chưa từng 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 mã trong WordPress.
Trước tiên, bạn cần tìm ra lớp CSS của khu vực 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ụ 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.
<img title = "Tìm lớp CSS" src = "https: // blog-techies.com/wp-content/uploads/2020/03/findcssclass.png" alt = "Tìm lớp CSS” width=”550″ height=”303″ class=”alignnone size-full wp-image-50810″/>
Tiếp theo, bạn cần viết 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 trỏ đến khu vực widget ở phía dưới có "tiêu đề trang" của lớp CSS.
Trong bước tiếp theo, bạn cần mở trình soạn thảo văn bản đơn giản trên máy tính của mình 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.
Tiếp theo, bạn cần thêm đoạn mã sau vào tệp JS của mình:
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 muốn trỏ đế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 sẽ bắt đầu từ màu đầu tiên, sau đó chuyển sang màu tiếp theo và tiếp tục qua các màu này.
Đừng quên lưu các thay đổi của bạn vào tệp.
Tiếp theo, bạn cần tải tệp wpb-bg-guide.js lên thư mục / js / của chủ đề WordPress của bạn 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.
<img title = "uploadjs" src = "https://cdn3.wpbeginner.com/wp-content/uploads/2018/02/uploadjs.png" alt = "Tải lên tệp javascript của bạn” width=”550″ height=”278″ class=”alignnone size-full wp-image-50811″/>
Sau khi tải lên tệp JavaScript của bạn, đã đế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.
Đó là nó, bây giờ bạn có thể truy cập trang web của họ để 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 bạn 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 cho nội dung của bạn nổi bật. Ví dụ: bạn có thể thử:
- Thêm hình nền vào toàn màn hình
- Thêm hình nền video cho toàn màn hình
- Màu nền ngẫu nhiên trên mỗi lần tải trang
- Thêm hiệu ứng thị sai cho bất kỳ chủ đề WordPress nào
- Thiết kế bài viết cá nhân với nền tảng khác nhau
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 thay đổi màu nền mượt mà 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 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.
