Cài background cho WordPress

Trong bài viết này, Xichphong.com sẽ giới thiệu cho bạn 6 cách đơn giản để thêm ảnh nền vào website của mình.

Tại sao lại nên thêm ảnh nền cho website?

Thêm ảnh nền cho website sẽ giúp cho trang web của bạn thu hút được người xem, giữ chân được người xem.

Nó cũng giúp cá nhân hóa trang web theo thương hiệu mà bạn muốn. Bằng cách chọn sản phẩm đặc trưng mà bạn hướng đến để làm ảnh nền sẽ làm nổi bật website lên nhiều.

Ngoài ra, bạn cũng có thể thêm Video, slide hình ảnh để làm nền cho website giúp chuyển tải thông điệp mà bạn muốn.

Tuy nhiên Xichphong.com khuyên bạn nên thêm hình ảnh cá nhân hóa, truyền tải được thông điệp và không gây mất tập trung cho người đọc khi họ đọc bài viết trên blog của bạn.

Điều quan trọng nữa là hãy lựa chọn bức ảnh được tối ưu về dung lượng, thân thiện với dao diện trên điện thoại di động. Nếu không nó sẽ ảnh hưởng đến điểm SEO của WordPress.

Điều đó nói lên rằng, bạn nên chọn cách phù hợp nhất trong số nhiều cách thêm ảnh nền cho website. Chúng tôi sẽ cập nhật trong bài viết này các cách như sử dụng công cụ tùy chỉnh chủ đề WordPress, trình chỉnh sửa trang web, plugin, trình tạo chủ đề, v.v.

Dưới đây là tóm tắt 6 cách thêm ảnh nền cho website wordpress, bạn có thể bấm vào từng mục trong phụ lục để đi đến nội dung mà bạn quan tâm một cách nhanh nhất.

Cách 1. Thêm ảnh nền cho website sử dụng phương pháp chỉnh sửa giao diện WordPress

Hầu hết các giao diện WordPress đều hỗ trợ chức năng chỉnh sửa ảnh nền. Với chức năng này, bạn dễ dàng thêm ảnh nền cho website, chúng tôi đề xuất đây là lựa chọn ưu tiên nếu giao diện wordpress của bạn có hỗ trợ.

Tuy nhiên, nếu bạn không nhìn thấy menu tùy biến này thì có thể giao diện của bạn đã bật sẵn chế độ chỉnh sửa trang web đầy đủ. Chúng tôi sẽ đề cập đến phương pháp này ở đoạn tiếp theo.

Để sử dụng chức năng tùy biến, bạn vào Appearance » Customize trong trang chủ quản trị WordPress. Nó sẽ mở ra trình chỉnh sửa, bạn có thể chỉnh sửa dễ dàng và xem thay đổi trực tiếp ngay lập tức.

Một điều lưu ý là nó có thể khác nhau giữa các giao diện khác nhau. Ở bài viết này, chúng tôi sử dụng giao diện của Astra.

Nếu bạn sử dụng giao diện khác, bạn có thể tìm hướng dẫn hoặc có thể liên hệ với đội ngũ hỗ trợ của giao diện để tìm hiểu cách thêm ảnh nền cho website trong trường hợp bạn không tìm thấy tùy biến.

Với giao diện Astra, sau khi chọn menu tùy biến, bạn click vào global ở menu bên trái.

Sau đó, bạn chọn vào color

Tại đây, bạn có thể thay đổi màu giao diện, bao gồm cả màu nền. Bạn cũng có thể tùy chỉnh màu các liên kết, nội dung, tiêu đề, đường viền và hơn thế nữa.

Để thay đổi ảnh nền cho website bạn chọn vào site background –> chọn tab Image, rồi chọn vào select backgroud image, và chọn hình ảnh mà bạn muốn đưa vào làm nền.

Từ đây sẽ mở ra thư viện đa phương tiện của WordPress, nơi bạn có thể lựa chọn hình ảnh, video đã up lên sẵn hoặc có thể chọn 1 ảnh mới từ máy tính của bạn.

Sau khi chọn ảnh mà bạn muốn thì bấm vào nút select ở góc phải màn hình

Nó sẽ tắt của sổ này và bạn sẽ nhìn thấy thay đổi, hãy bấm vào nút Pushlic ở phía trên menu bên trái để lưu mọi thay đổi.

Thế là xong, bạn đã hoàn tất cách thứ nhất để thêm ảnh nền cho website wordpress. Hãy xem sự thay đổi trên website của bạn.

Cách 2. Thêm ảnh nền cho website sử dụng trình chỉnh sửa hoàn chỉnh.

Nếu bạn đang sử dụng giao diện  block-based WordPress, thì bạn hãy sử dụng phương pháp chỉnh sửa hoàn chỉnh (full site editor-FSE).

Trình chỉnh sửa trang đầy đủ sẽ cho phép bạn chỉnh sửa trang web thiết kế dạng khối(block). Nó giống như bạn sửa bài viết Blog hoặc thiết kế Website sử dụng các khối.

Ở hướng dẫn này, chúng tôi sử dụng giao diện WordPress 2022 mặc định. Để mở trình chỉnh sửa trang đầy đủ, bạn vào Appearance » Editor ở màn hình chính WordPress.

image. Bạn đang ở trình chỉnh sửa trang đầy đủ, bạn cần thêm 1 khối bìa vào trang để thêm hình nền vào.

Bấm vào dẫu ‘+’ ở phía trên và thêm khối bìa(cover block).

Kéo lên trên và bấm vào nút ‘Upload’ hoặc ‘Media Library’ ở khối bìa để thêm ảnh nền cho khối.

Cửa sổ WordPress media uploader sẽ hiện ra.

Bạn có thể chọn bất cứ ảnh nào mà bạn muốn làm nền cho trang web.

Sau khi chọn xong thì bấm vào nút Select

Hình ảnh bạn chọn đã được thêm vào khối bìa, bước tiếp theo là cài đặt nó trở thành ảnh nền của trang.

Để làm điều đó, bạn bấm vào biểu tượng List View ở phía trên ( biểu tượng có dấu 3 gạch ) để mở chế độ xem phác thảo như đầu trang và chân trang.

Sau đó, kéo thả các thành phần dưới khối bìa trong chế độ xem danh sách.

Khi tất cả chúng đã đúng vị trí thì hình ảnh của khối bìa sẽ là nền cho trang. Hãy xem hình ảnh bên dưới.

Sau đó, bạn có thể điều chỉnh ảnh nền bởi click chuột vào khối bìa và chọn vào biểu tượng hình bánh răng ở phía góc trên bên phải màn hình.

Bạn sẽ nhìn thấy lựa chọn để cố định ảnh nền, thay thế ảnh nền, điều chỉnh độ trong suốt, màu và các tính năng khác.

Sau đó bấm vào nút save. Thế là xong.

Cách 3. Thêm ảnh nền cho Website sử dụng công cụ wordpress theme build

Một cách nữa có thể tùy chỉnh ảnh nền cho website đó là sử dụng tiện ích WordPress theme builder.

Đây là một trong những plugin tốt nhất cho landing page và website. Với tính năng kéo thả nó giúp bạn dễ dàng tùy chỉnh thiết kế website mà không cần đến 1 dòng code nào.

Trong bài viết này, chúng tôi muốn nói đến công cụ SeedProd bản đầy đủ vì nó có tính năng xây dụng giao diện. Cúng có bản SeedProd để bạn thử hoàn toàn miễn phí.

Trước hết, bạn cần cài đặt và kích hoạt plugin SeedProd.

Sau khi plugin này được kích hoạt, bạn sẽ thấy nó ngay trên màn hình welcome của WordPress. Tiếp theo bạn nhập mã kích hoạt và click vào nút ‘Verify Key’.

Tiếp theo truy cập vào SeedProd » Theme Builder trên màn hình quản trị của wordpress.

Di chuyển lên trên và bấm chọn nút ‘Theme’.

SeedProd sẽ cung cấp cho bạn nhiều giao diện mẫu để bạn lựa chọn.

Bạn có thể di chuyển đến bất kỳ mẫu nào mà bạn thích rồi bấm vào nó. Chúng tôi sử dụng mẫu ‘Starter’ để làm minh họa trong bài viết này.

Từ đây, SeedProd sẽ tích hợp một mẫu khác như omepage, single post, single page, sidebar, header và hơn thế,

Để hình nền xuất hiện trên trang và các mẫu của giao diện, hãy di chuyển lên trên và chọn ‘Edit Design’ ở phía dưới Global CSS.

Ở màn hình tiếp theo, bạn sẽ thấy phần cài đặt của Global CSS mà bạn có thể thay đổi.

Bấm vào lựa chọn ‘Background’.

Sau đó bạn sẽ thấy lựa chọn hình nền.

Di chuyển lên trên và bấm vào nút ‘Use Your Own Image’ để tải ảnh của bạn hoặc bấm vào nút ‘Use a Stock Image’ để tìm kho hình ảnh mà bạn muốn sử dụng làm hình nền.

Thế là bạn đã thêm được ảnh nền bạn muốn, bạn có thể thấy nó hiển thị trực tiếp.

Ngoài ra, bạn có thể chỉnh sửa độ sáng, tối của hình nền bằng cách di chuyển thanh trượt ‘Dim Background’. gía trị càng lớn thì hình ảnh càng tối.

sau khi hoàn tất bạn bấm vào nút ‘Save’ ở phía trên và đóng cửa sổ CSS setting. Thế là xong cách thứ 3.

Cách 4. Thêm ảnh nền cho website bằng cách sử dụng tiện ích trên WordPress.

Sử dụng Plugin để thêm ảnh nền cho website linh hoạt hơn các lựa chọn trên WordPress.

Để bắt đầu, chúng ta cài đặt và kích hoạt plugin có tên Full Screen Background Pro.

Tiện ích này giúp bạn đặt các nền khác nhau cho bất kỳ bài viết, trang, danh mục nào và hơn thế nữa. Hơn nữa, nó tự động căn chỉnh vừa với màn hình trên giao diện điện thoại di động.

Sau khi kích hoạt, bạn chọn Appearance » Fullscreen BG Image để thay đổi cài đặt cho Plugin.

Bạn sẽ được yêu cầu nhập mã khóa sản phẩm. Mã này sẽ được cung cấp qua email khi bạn mua công cụ từ tài khoản WordPress của bạn.

Tiếp theo hãy bấm vào nút ‘Save Option’ để kích hoạt mã. Bây giờ thì bạn đã có thể bắt đầu thêm ảnh nền cho website của bạn một cách dễ dàng.

Ở trang cài đặt của tiện ích di, di chuột lên trên và bấm chọn ‘Add New Image’ .

Bây giờ bạn sẽ thấy màn hình tải hình nền lên.

Bấm nút ‘Choose Image’ để đưa ảnh mà bạn chọn lên, bạn sẽ thấy kết quả ngay trên màn hình.

Tiếp theo là đặt tên cho hình ảnh này. Tên này có thể sửa nên bạn có thể đặt tên bất kỳ. Cuối cùng bạn cần chọn nơi nào bạn muốn sử dụng nó để làm nền cho trang.

Khi bạn đã chọn xong nơi mà nó sẽ làm nền cho toàn trang, bài viết, danh mục hay kho lưu trữ hoặc bất cứ nơi nào thì bạn đừng quên bấm nút Save.

Bạn có thể thêm nhiều hình ảnh cho các khu vực khác nhau mà bạn muốn, bằng cách vào trang Appearance » Fullscreen BG Image và lặp lại quá trình này.

Nếu bạn đặt nhiều hơn 1 hình ảnh tổng thể cho bài viết, các trang, danh mục thì tiện ích sẽ bắt đầu hiển thị các hình nền dưới dạng trình chiếu(slidedeshow).

Bạn cũng có thể điều chỉnh thời gian nghỉ giữa các ảnh.

Thời gian được nhập ở đây được tính theo đơn vị là Mili giây. 1000 mili giây- 1 giây. Nếu bạn muốn đặt thời gian xuất hiện ảnh là 20 giây thì bạn phải đặt giá trị là 2000.

Sau đó thì hãy bấm nút ‘Save’ để hoàn tất.

Ảnh nền cho bài đăng, các trang và các danh mục.

Full Screen Background cũng có thể dùng để thêm ảnh nền cho bài viết, trang, danh mục, thẻ và hơn thế nữa.

Chỉ cần chỉnh sửa bài đăng/trang nơi bạn muốn hiển thị hình nền khác nhau. Ở màn hình chỉnh sửa bài viết, bạn sẽ thấy hộp thoại ‘Full Screen Background Image’ mới ở phía dưới phần chỉnh sửa bài viết.

Để sử dụng hình nền cho danh mục, bài viết và trang, bạn cần vào Appearance » Fullscreen BG Image và sau đó bấm vào nút ‘Add New Image’.

Sau đó tải hỉnh ảnh của bạn, bạn có thể chọn danh mục, bài viết, trang, kho lưu trữ an các lựa chọn khác từ menu xổ xuống có tên ‘Choose the context on which to display this image’.

Giả sử bạn muốn sử dụng hình nền cho trang danh mục. Bạn chỉ cần chọn ‘Categort tử menu xổ xuống.

Plugin này cũng có thêm các lựa chọn để hạn chế hình nền trong các danh mục, bài viết và trang cụ thể.

For example, if you want to add a custom background image for specific categories, then simply enter the category names under the ‘Select the Categories to restrict images to’ field.Ví dụ: nếu bạn muốn thêm hình nền tùy chỉnh cho các danh mục cụ thể, thì chỉ cần nhập tên danh mục trong trường ‘Select the Categories to restrict images to’.

Hãy nhớ bấm nút ‘Save’ để lưu lại các thay đổi của bạn.

Bây giờ thì bạn đã hoàn thành việc thêm ảnh cho các bài viết, trang, và danh mục cụ thể.

Cách 5. Thêm ảnh nền cho website bằng cách sử dụng CSS Hero.

CSS Hero là 1 plugin của WordPress cho phép bạn thực hiện bất cứ thay đổi nào trên giao diện mà không cần viết code.

Bạn có thể thêm ảnh nền cho website một cách nhanh chóng chỉ qua 1 vài bước đơn giản. Đầu tiên bạn phải cài đặt và kích hoạt CSS Hero. Hãy xem hướng dẫn cài đặt plugin WordPress ở bài viết khác của Xichphong.com.

Thế là bạn đã xong công việc cài đặt và kích hoạt tiện ích, bây giờ là lúc để bạn tùy chỉnh trang wen của bạn. Hãy mở trang chủ trên trình duyệt. Bạn sẽ thấy chữ ‘Customize with CSS Hero’ ở thanh quản trị.

Sau đó bạn bấm vào cái đường dẫn đó, bạn sẽ thấy lựa chọn CSS Hero được mở ra. Di chuyển chuột đến nơi mà bạn muốn thêm hình ảnh.

Khi bạn đã bấm vào vùng được chọn, bạn sẽ thấy lựa chọn ‘Background’ ở bảng bên trái.

Bấm vào dòng ‘Background’ để xem phần cài đặt thêm hình ảnh.

Ở đó, bấm vào nút ‘Image’. Bây giờ bạn chọn một hình ảnh từ Unsplash hoặc tải ảnh trên máy tính để tạo ảnh nền.

Khi bạn chọn được ảnh bạn muốn, bạn sẽ thấy nút ‘Apply Image’ sáng lên. Sau đó bạn có thể điều chỉnh kích thước ảnh mà bạn muốn. Có thể lựa chọn ảnh cỡ lớn để bao phủ hết toàn trang.

Bấm vào ‘Save and Puclish’ pử phía dưới để thêm ảnh nền cho website của bạn.

Cách 6: Thêm ảnh nền bất cứ đâu trong WordPress sử dụng mã CSS

Theo mặc định thì WordPress tích hợp sẵn một số lớp CSS trong các phần tử HTML khác nhau trên Website của bạn. Bạn có thể thêm hình nền cho website bằng cách sử dụng các lớp CSS này.

Ví dụ bạn có danh mục trên website có tên là TV, thì WordPress sẽ tự động thêm lớp CSS vào thẻ body khi ai đó vào xem trang danh mục TV.

Bạn có thể sử dụng công cụ kiểm tra để xem chính xác lớp CSS nào đã được thêm bởi WordPress vào thẻ Body.

Bạn có thể sử dụng lớp category-tv hoặc category-4 trong danh mục này cho trang khác.

Để thêm tùy chỉnh hình nền cho danh mục trang lưu trữ. Bạn sẽ cần thêm lớp CSS tùy chỉnh này cho giao diện của bạn.

Đừng quên thay thế đường dẫn hình nền và lớp danh mục khớp với website của bạn.

Bạn cũng có thể thêm hình nền tùy chỉnh cho các bài viết và trang riêng lẻ. WordPress sẽ thêm lớp CSS ứng với bài đăng hoặc ID trang trong thẻ Body.

Vậy là Xichphong.com đã giới thiệu xong 6 cách thêm ảnh nền cho website. Hi vọng bài viết có thể giúp ích được cho bạn.

Nếu có ý kiến phản hồi hoặc yêu cầu nào khác, bạn vui lòng để lại bình luận, xichphong.com sẽ cố gắng giải đáp. Cảm ơn bạn!