Bật custom background cho theme WordPress

Giới thiệu về Custom Background trong WordPress

Trong thế giới WordPress, việc tùy chỉnh giao diện là một yếu tố quan trọng để tạo ra một trang web độc đáo và phản ánh đúng bản sắc thương hiệu. Một trong những cách dễ nhất và hiệu quả nhất để tùy chỉnh giao diện là sử dụng hình nền tùy chỉnh (custom background). Hình nền tùy chỉnh cho phép bạn thêm hình ảnh, màu sắc hoặc họa tiết vào phía sau nội dung trang web, tạo ra một diện mạo thu hút và chuyên nghiệp.

Bài viết này sẽ hướng dẫn bạn cách bật và sử dụng tính năng custom background trong theme WordPress của bạn, cũng như khám phá các tùy chọn cấu hình và những lưu ý quan trọng.

Tại sao nên sử dụng Custom Background?

Việc sử dụng hình nền tùy chỉnh mang lại nhiều lợi ích cho trang web của bạn:

Tăng tính thẩm mỹ: Hình nền tùy chỉnh giúp trang web trở nên hấp dẫn và thu hút hơn.
Xây dựng thương hiệu: Bạn có thể sử dụng hình ảnh hoặc màu sắc liên quan đến thương hiệu của mình để củng cố nhận diện thương hiệu.
Tạo sự độc đáo: Hình nền tùy chỉnh giúp trang web của bạn khác biệt so với hàng ngàn trang web khác.
Cải thiện trải nghiệm người dùng: Một hình nền phù hợp có thể cải thiện trải nghiệm người dùng bằng cách làm cho trang web trở nên dễ nhìn và dễ đọc hơn.

Bật Custom Background trong Theme WordPress

Để bật tính năng custom background trong theme WordPress, bạn cần chỉnh sửa file functions.php của theme. Hãy cẩn thận khi chỉnh sửa file này, vì một lỗi nhỏ có thể làm hỏng trang web của bạn. Luôn sao lưu file trước khi chỉnh sửa.

Dưới đây là các bước thực hiện:

Truy cập vào file functions.php: Bạn có thể truy cập file này thông qua trình chỉnh sửa theme trong WordPress dashboard (Appearance > Theme Editor) hoặc thông qua FTP.

Thêm code sau vào file functions.php:


      function mytheme_custom_background_setup() {
        add_theme_support( 'custom-background', apply_filters( 'mytheme_custom_background_args', array(
          'default-color'      => 'ffffff',
          'default-image'      => '',
          'default-repeat'     => 'repeat',
          'default-position-x' => 'left',
          'default-attachment' => 'scroll',
        ) ) );
      }
      add_action( 'after_setup_theme', 'mytheme_custom_background_setup' );

Lưu file functions.php: Sau khi thêm code, hãy lưu lại file.

Giải thích code:

add_theme_support( 'custom-background', ... ): Đây là hàm quan trọng để kích hoạt tính năng custom background.
'default-color' => 'ffffff': Đặt màu nền mặc định là trắng (#ffffff). Bạn có thể thay đổi thành màu khác.
'default-image' => '': Không có hình nền mặc định. Bạn có thể chỉ định một hình ảnh mặc định nếu muốn.
'default-repeat' => 'repeat': Hình nền sẽ được lặp lại theo chiều ngang và chiều dọc.
'default-position-x' => 'left': Hình nền sẽ được căn trái.
'default-attachment' => 'scroll': Hình nền sẽ cuộn theo trang.

Tùy chỉnh Custom Background trong WordPress Dashboard

Sau khi bạn đã bật tính năng custom background trong theme, bạn có thể tùy chỉnh hình nền thông qua WordPress dashboard.

Truy cập vào Appearance > Customize: Trong WordPress dashboard, di chuyển đến Appearance > Customize.
Tìm Custom Background: Trong Customizer, bạn sẽ thấy tùy chọn “Background Image” hoặc “Colors & Backgrounds” (tùy thuộc vào theme của bạn).
Tải lên hình ảnh hoặc chọn màu sắc: Tại đây, bạn có thể tải lên hình ảnh bạn muốn sử dụng làm hình nền hoặc chọn một màu sắc cho hình nền.
Tùy chỉnh các tùy chọn: Bạn có thể tùy chỉnh các tùy chọn như lặp lại hình ảnh (repeat), vị trí hình ảnh (position) và cách hình ảnh được đính kèm (attachment).
Publish: Sau khi bạn đã hài lòng với hình nền, hãy nhấp vào nút “Publish” để lưu các thay đổi.

Các Tùy Chọn Cấu Hình Nâng Cao

Ngoài các tùy chọn mặc định, bạn có thể tùy chỉnh custom background một cách nâng cao hơn bằng cách sử dụng filter trong WordPress. Ví dụ:

Thay đổi các giá trị mặc định: Bạn có thể sử dụng filter mytheme_custom_background_args để thay đổi các giá trị mặc định của custom background.
Thêm CSS tùy chỉnh: Bạn có thể thêm CSS tùy chỉnh để kiểm soát cách hình nền hiển thị trên trang web của bạn.
Sử dụng JavaScript: Bạn có thể sử dụng JavaScript để tạo hiệu ứng hình nền động hoặc tương tác.

Ví dụ: Thay đổi màu nền mặc định

Để thay đổi màu nền mặc định thành màu xanh lam, bạn có thể thêm đoạn code sau vào file functions.php:


  function mytheme_custom_background_args_filter( $args ) {
    $args['default-color'] = 'ADD8E6';
    return $args;
  }
  add_filter( 'mytheme_custom_background_args', 'mytheme_custom_background_args_filter' );

Ví dụ: Thêm CSS tùy chỉnh

Bạn có thể thêm CSS tùy chỉnh vào file style.css của theme để kiểm soát cách hình nền hiển thị. Ví dụ:


  body {
    background-size: cover; /* Phủ toàn bộ màn hình */
    background-attachment: fixed; /* Giữ hình nền cố định khi cuộn trang */
  }

Lưu Ý Quan Trọng Khi Sử Dụng Custom Background

Khi sử dụng custom background, hãy lưu ý những điều sau:

Chọn hình ảnh phù hợp: Chọn hình ảnh có độ phân giải cao và phù hợp với nội dung của trang web. Tránh sử dụng hình ảnh quá lớn vì có thể làm chậm tốc độ tải trang.
Đảm bảo độ tương phản: Đảm bảo rằng văn bản trên trang web có độ tương phản đủ so với hình nền để dễ đọc.
Kiểm tra trên nhiều thiết bị: Kiểm tra hình nền trên nhiều thiết bị khác nhau (máy tính để bàn, máy tính bảng, điện thoại di động) để đảm bảo nó hiển thị tốt trên tất cả các thiết bị.
Tối ưu hóa tốc độ tải trang: Sử dụng các công cụ tối ưu hóa hình ảnh để giảm kích thước file hình ảnh mà không làm giảm chất lượng.

Kết luận

Custom background là một công cụ mạnh mẽ để tùy chỉnh giao diện trang web WordPress của bạn. Bằng cách sử dụng các bước và lưu ý trong bài viết này, bạn có thể dễ dàng thêm hình nền tùy chỉnh vào trang web của mình và tạo ra một diện mạo độc đáo và chuyên nghiệp. Hãy thử nghiệm với các tùy chọn khác nhau để tìm ra hình nền phù hợp nhất với thương hiệu và nội dung của bạn.

Tài liệu tham khảo

Để tìm hiểu thêm về custom background trong WordPress, bạn có thể tham khảo các tài liệu sau:

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa