Cách để thêm hình nền trong WordPress

Bạn muốn thêm hình nền vào website WordPress của mình ?

Hình nền có thể giúp cho trang web của bạn trông hấp dẫn hơn và dễ chịu hơn về mặt thẩm mỹ.

Ở trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách để thêm hình nền vào trang web WordPress của bạn một cách dễ dàng .

Video hướng dẫn

Bạn có thể tiếp tục xem bài viết này nếu bạn thích đọc hướng dẫn hơn.

Cách 1. Thêm hình nền bằng cách sử dụng cài đặt theme WordPress của bạn

Hầu hết các theme WordPress đều hỗ trợ ảnh nền tùy chỉnh. Tính năng này giúp bạn có thể thêm hình nền vào website WordPress một cách dễ dàng.

Nếu theme của bạn hỗ trợ tính năng tùy chỉnh hình nền, thì chúng tôi khuyên bạn nên sử dụng phương pháp này để thêm hình nền vào trang web WordPress của mình.

Tuy nhiên, nếu theme của bạn không hỗ trợ tính năng này hoặc bạn không thích cách nó thêm hình ảnh nền, thì bạn có thể thử các cách khác được đề cập trong hướng dẫn của chúng tôi.

Trước tiên, bạn cần vào trang Appearance » Customize trong vùng quản trị viên WordPress của mình. Thao tác này sẽ khởi chạy công cụ tùy chỉnh theme WordPress nơi bạn có thể thay đổi các cài đặt theme khác nhau trong khi xem bản xem trước trực tiếp của trang web.

Tiếp theo, bạn cần nhấp vào tùy chọn ‘Background image‘. Bảng điều khiển sẽ trượt vào và hiển thị cho bạn các tùy chọn để tải lên hoặc lựa chọn hình nền cho trang web của bạn.

Bấm vào nút Selec image để tiếp tục.

Sau đó một cửa sổ WordPress media uploader sẽ xuất hiện nơi bạn có thể tải lên hình ảnh từ máy tính của mình. Bạn cũng có thể chọn một hình ảnh đã tải lên trước đó từ thư viện media.

Tiếp theo, bạn cần click vào nút chọn hình ảnh sau khi tải lên hoặc chọn hình ảnh bạn muốn sử dụng làm nền.

Thao tác này sẽ đóng cửa sổ media uploader và bạn sẽ thấy bản xem trước của hình ảnh đã chọn trong trình tùy chỉnh theme.

Bên dưới hình ảnh, bạn cũng sẽ có thể thấy các tùy chọn hình nền. Trong phần ‘Preset’, bạn có thể chọn cách bạn muốn hiển thị hình nền: toàn màn hình, vừa với màn hình, lặp lại hoặc tùy chỉnh.

Bạn cũng có thể chọn vị trí ảnh nền bằng cách click vào các mũi tên bên dưới. Click vào trung tâm sẽ căn chỉnh hình ảnh vào giữa màn hình.

Đừng quên click vào nút ‘Save & Publish‘ ở trên cùng để lưu lại cài đặt của bạn. Vậy là xong, bạn đã hoàn tất việc thêm hình nền vào website WordPress của mình.

Bạn có thể tiếp tục mở trang web của mình để xem nó.

Cách 2. Thêm hình nền tùy chỉnh trong WordPress bằng plugin

Phương pháp này linh hoạt hơn rất nhiều. Cách này hoạt động với mọi theme WordPress và cho phép bạn đặt nhiều hình nền.

Bạn cũng có thể đặt các hình nền khác nhau cho bất kỳ bài đăng, trang, danh mục hoặc bất kỳ phần nào khác trên trang web WordPress của bạn.

Plugin tự động làm cho tất cả hình nền của bạn ở chế độ toàn màn hình và tự động căn chỉnh để phù hợp với thiết bị di động. Điều này có nghĩa là hình nền của bạn sẽ tự động thay đổi kích thước trên các thiết bị nhỏ hơn.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin Full Screen Background Pro. Nếu cần được hướng dẫn chi tiết hơn bạn có thể xem bài viết của chúng tôi về cách cài đặt một plugin WordPress.

Sau khi đã kích họat plugin, bạn hãy vào Appearance » Full Screen BG để thiết lập lại cài đặt của plugin.

Bạn sẽ phải điền key bản quyền của bạn vào dưới mục ‘License‘. Bạn có thể lấy key bản quyền từ email bạn nhận được sau khi mua plugin hoặc từ tài khoản của bạn trên trang web của plugin đấy.

Tiếp theo, bạn cần nhấp vào nút ‘Save Settings‘ để lưu lại các thay đổi của mình. Bây giờ bạn đã sẵn sàng để thêm hình nền vào website WordPress của bạn.

Bạn hãy click vào nút ‘Add New Image‘ trên trang cài đặt của plugin. Sau đó màn hình để bạn có thể tải ảnh nền lên sẽ xuất hiện.

Hãy nhấp vào nút ‘Choose Image‘ để tải lên hoặc chọn một hình ảnh. Ngay sau khi bạn chọn hình ảnh, bạn có thể xem bản xem trước trực tiếp của hình ảnh trên màn hình của bạn.

Tiếp theo, bạn cần đặt tên cho hình ảnh này. Tên này sẽ không sử dụng công khai nên bạn có thể dùng tên nào cũng được.

Cuối cùng, bạn cần chọn nơi mà bạn muốn ảnh này được sử dụng làm trang nền.

Full Screen Background Pro cho phép bạn đặt hình ảnh làm nền chung hoặc bạn có thể chọn từ các phần khác nhau của trang web như danh mục, kho lưu trữ, trang đầu hoặc trang blog.

Đừng quên click vào nút ‘Save Image‘ để lưu lại hình nền của bạn nhé.

Bạn có thể thêm bao nhiêu hình ảnh tùy thích bằng cách vào Appearance » Full Screen BG Image .

Nếu bạn đặt nhiều hình ảnh để sử dụng chúng công khai, thì plugin sẽ tự động bắt đầu hiển thị hình ảnh nền dưới dạng trình chiếu.

Bạn có thể điều chỉnh thời gian để hình ảnh mờ đi và thời gian sau đó hình nền mới bắt đầu mờ dần.

Thời gian bạn nhập được tính bằng mili giây. Nếu bạn muốn hình nền mờ đi sau 20 giây, thì bạn cần nhập 20000.

Đừng quên click vào nút ‘Save Options‘ để lưu các thay đổi của bạn.

Hình nền cho các bài viết, trang và các mục

Full Screen Background Pro cũng cho phép bạn đặt hình nền cho các bài đăng, trang, danh mục, thẻ,…

Bạn chỉ cần chỉnh sửa bài đăng/trang mà bạn muốn hiển thị hình nền khác. Trên màn hình chỉnh sửa bài viết, bạn sẽ thấy ô ‘Full Screen Background Image‘ bên dưới trình chỉnh sửa bài viết.

Để thêm hình nền vào một mục cụ thể, bạn hãy vào Appearance » Full Screen BG Image và sau đó click vào nút ‘Add New Image‘.

Sau khi tải hình ảnh lên, bạn có thể chọn ‘Category‘ làm nơi mà bạn muốn hiển thị hình nền.

Bây giờ bạn hãy nhập ID của danh mục hoặc slug nơi mà bạn muốn hiển thị ảnh nền. Bạn có thể xem bài viết của chúng tôi về cách tìm ID của danh mục trong WordPress.

Nhớ click vào ‘Save Image‘ để lưu lại các cài đặt của bạn nhé.

Cách 3. Thêm hình nền bằng CSS Hero

CSS Hero là một plugin WordPress cho phép bạn thực hiện bất kỳ thay đổi nào đối với theme của mình mà không cần phải sử dụng bất kì dòng code nào.

Bạn có thể thêm hình nền một cách nhanh chóng chỉ trong một vài bước đơn giản. Đầu tiên, bạn cần cài đặt và kích hoạt plugin CSS Hero . Sau khi đã hoàn tất việc kích hoạt, giờ là lúc để tùy chỉnh lại website của bạn

Bây giờhãy  mở trang chủ của bạn trong trình duyệt. Bạn sẽ thấy đường link ‘Customize with CSS Hero’ trong thanh quản trị của mình.

Sau khi nhấp vào liên kết đó, bạn sẽ thấy các tùy chọn CSS Hero được mở ra. Di chuột qua khu vực bạn muốn thêm hình ảnh.

Trong ảnh chụp màn hình bên dưới, bạn sẽ thấy vùng .header-filter-gradient. Khi bạn nhấp vào khu vực này, bạn có thể chọn liên kết của nền trong thanh bên trái.

Liên kết nền sẽ mở ra. Sau đó, bạn có thể click vào ‘Image‘ Bây giờ, bạn có thể chọn một hình ảnh từ Unsplash hoặc từ các hình ảnh bạn đã tải lên để tạo nền.

Khi bạn nhấp vào hình ảnh bạn muốn, bạn sẽ thấy nút ‘Apply Image’. Sau đó, bạn có thể chọn kích thước bạn muốn hình ảnh của mình. Chúng tôi đã chọn kích thước lớn để hình ảnh có thể trải dài trên trang.

Hãy click vào ‘Save and Publish ở phía dưới cùng và hình nền đã được lưu lại trên website của bạn.

Cách 4. Thêm hình nền tùy chỉnh ở bất kỳ đâu trong WordPress bằng cách sử dụng CSS

Mặc định thì WordPress thêm một số lớp CSS vào các phần tử HTML khác nhau trên toàn bộ trang web WordPress của bạn. Bạn có thể dễ dàng thêm hình nền tùy chỉnh vào từng bài đăng, danh mục, tác giả và các trang khác bằng cách sử dụng các lớp CSS do WordPress tạo ra này .

Ví dụ: Nếu bạn có một danh mục trên trang web của mình được gọi là TV, thì WordPress sẽ tự động thêm các lớp CSS này vào thẻ body khi ai đó 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 WordPress thêm vào thẻ body.

Bạn có thể sử dụng category-tvhoặc category-4 để tạo kiểu khác cho trang danh mục này.

Giờ hãy thêm hình nền tùy chỉnh vào trang lưu trữ danh mục. Bạn sẽ cần thêm đoạn code CSS tùy chỉnh này vào chủ đề của mình.

Đừng quên thay thế URL của hình nền và phần lớp danh mục bằng danh mục của riêng bạn.

Bạn cũng có thể thêm hình nền tùy chỉnh cho các bài đăng và trang riêng lẻ. WordPress thêm một lớp CSS với bài đăng hoặc ID trang trong thẻ body. Bạn có thể sử dụng cùng một mã CSS chỉ cần thay thế .category-tv bằng lớp CSS cụ thể của bài đăng.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm hình nền trong WordPress. Có thể bạn sẽ muốn xem bài viết của chúng tôi về những plugin dựng trang kéo thả tốt nhất cho WordPress, và bài hướng dẫn của chúng tôi về cách tạo một theme WordPress mà không cần một dòng code nào.

Nếu bạn thích bài viết này thì hãy đăng kí kênh Youtube của chúng tôi để được xem nhiều video hướng dẫn WordPress hơn nhé. Bạn cũng có thể theo dõi chúng tôi ở trên Twitter và Facebook.