Thêm hình nền vào trang WordPress của bạn thật dễ dàng. Đúng?
Đối với hầu hết các phần, có. Trừ khi chủ đề của bạn không hỗ trợ nó. Sự thật là, nhiều chủ đề WordPress ngày nay có cài đặt nhanh chóng và dễ dàng để thêm hoặc thay đổi hình nền hiện có. Các tùy chỉnh giao diện WP mặc định cũng vậy.
Bạn cũng có thể thay đổi hình nền bằng CSS hoặc thông qua các plugin khác nhau, mở ra các tùy chọn để thiết lập hình nền trên các trang, bài đăng và danh mục.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thực hiện tất cả những điều trên và làm cho trang web của bạn nổi bật với giao diện bắt mắt do chính bạn lựa chọn.
Tiếp tục đọc, hoặc tiếp tục bằng cách sử dụng các liên kết sau:
Tại sao lại thay đổi nền của bạn? Chà, hình ảnh mà chủ đề của bạn mặc định có thể không thu hút bạn hoặc cảm thấy nó giống với thương hiệu của bạn. Hoặc, có thể nó không phải là một hình ảnh, chỉ là màu sắc. Hoặc có lẽ bạn yêu thích hình ảnh ban đầu, nhưng bạn đã cảm thấy nhàm chán với nó.
Dù lý do là gì, hãy thử nghiệm với việc thay đổi nó.
Thêm hình nền bằng các tùy chỉnh WordPress mặc định
Các chủ đề WordPress có thể có nền màu hoặc ảnh mặc định trong nền. Hầu hết mọi người chọn thay thế những thứ này bằng một hình ảnh và / hoặc màu sắc phù hợp hơn với sở thích và thương hiệu trang web của họ.
Để thêm hình nền trong trình chỉnh sửa WordPress mặc định, bạn cần làm theo các bước sau:
- Từ bảng điều khiển WP, đi tới Giao diện> Tùy chỉnh> Hình nền hoặc Giao diện> Hình nền / Hình nền.
- Bấm vào Chọn ảnh để mở Thư viện phương tiện của bạn.
- Chọn hình ảnh mong muốn, bằng cách tải lên từ máy tính của bạn hoặc bằng cách chọn một hình ảnh từ thư viện phương tiện của bạn.
- Sau khi bạn có hình ảnh bạn muốn chọn, hãy nhấp vào màu xanh lam Chọn hình ảnh khuy ao.
- Trong cửa sổ trên cùng của menu bên trái, bạn sẽ thấy lựa chọn của mình được điền vào. Ở bên phải, bạn sẽ thấy bản xem trước kích thước đầy đủ của trang chủ các trang web của mình, với hình nền.
Nếu bạn thích những gì bạn nhìn thấy, hãy nhấp vào màu xanh lam Công bố ở góc trên bên phải và bạn đã hoàn tất!
Nếu bạn muốn thay đổi giao diện của nó trước khi hoàn thiện, có một số cài đặt và tùy chọn bạn có thể sử dụng để tìm giao diện ưa thích của mình.
Các công cụ chỉnh sửa menu hình nền, cùng với các tùy chọn liên quan của chúng, như sau:
- Đặt trước
- Mặc định, Tô màn hình, Vừa với màn hình, Lặp lại, Tùy chỉnh
- Vị trí hình ảnh
- Chính giữa, Trên cùng bên phải, Giữa phải, RIght dưới cùng, Giữa dưới, Trên cùng bên trái, Giữa trái, Dưới cùng bên trái, Giữa trên
- Kích thước ảnh
- Gốc, vừa với màn hình, lấp đầy màn hình
- Lặp lại Hình nền – hộp kiểm
- Cuộn với Trang – hộp kiểm
Hãy thử với các công cụ chỉnh sửa để xem kích thước, mẫu và vị trí bạn thích nhất. Chọn bất kỳ tùy chọn thả xuống nào từ menu con sẽ cung cấp cho bạn bản xem trước kết quả của trang của bạn ở bên phải.
Đừng lo lắng về việc bị mắc kẹt với bất cứ điều gì. Thật dễ dàng để quay lại cài đặt và thay đổi hình nền (và các tùy chọn liên quan) bất cứ lúc nào bạn muốn.
Thêm hình nền bằng plugin
Có một số plugin trên WordPress.org có thể thực hiện nhiệm vụ thêm hình nền.
Đến tên một vài: Nền WordPress nâng cao, Trình quản lý nền đầy đủvà Hình ảnh nền toàn màn hình đơn giản.
Cái sau là cái mà tôi yêu thích nhất trong nhóm, vì vậy đó là những gì tôi sẽ sử dụng cho hướng dẫn này.
Hình ảnh nền toàn màn hình đơn giản cung cấp dễ dàng cài đặt và thiết lập hình ảnh toàn màn hình làm nền cho trang web của bạn. Nó tự động chia tỷ lệ hình ảnh với trình duyệt, có nghĩa là hình ảnh luôn lấp đầy màn hình.
Để đưa nó vào hoạt động chỉ cần một vài bước đơn giản. Có sẵn phiên bản trả phí / chuyên nghiệp bổ sung các tính năng khác, nhưng phiên bản miễn phí là tất cả những gì chúng ta cần cho bài tập này.
Hãy sử dụng plugin ngay bây giờ để thêm hình nền toàn màn hình.
- Cài đặt và kích hoạt Hình ảnh nền toàn màn hình đơn giản cắm vào.
- Từ bảng điều khiển WP, đi tới Giao diện> Hình nền Toàn màn hình.
- Chọn hình ảnh mong muốn, bằng cách tải lên từ máy tính của bạn hoặc bằng cách chọn một hình ảnh từ thư viện phương tiện của bạn.
- Sau khi bạn có hình ảnh bạn muốn chọn, hãy nhấp vào màu xanh lam Sử dụng hình ảnh khuy ao.
- Nhấp vào màu xanh lam Lưu tùy chọn và kiểm tra trang web của bạn.
Đây là bạn có nó! Hình ảnh bây giờ sẽ hiển thị trên trang web của bạn dưới dạng hình nền toàn màn hình.
Tôi muốn đề cập đến cài đặt của plugin này cho hình nền ghi đè cài đặt nền tùy chỉnh WP mặc định. Đây không phải là một điều xấu, chỉ là một số điều cần lưu ý.
Có thể đặt hình nền cho các bài đăng, trang, danh mục, thẻ, v.v. với plugin cụ thể này, nhưng sẽ yêu cầu mua Phiên bản chuyên nghiệp.
Thêm hình nền bằng CSS
Bây giờ chúng ta sẽ khám phá cách thay đổi hình nền bằng cách sử dụng mã CSS. Điều này có thể được thực hiện để tạo nền cho toàn bộ trang web hoặc cho một danh mục cụ thể ― bằng cách sử dụng tùy biến chủ đề WP.
- Từ bảng điều khiển WordPress của bạn, điều hướng đến Giao diện> Tùy chỉnh.
- Cuộn xuống và nhấp vào CSS bổ sung.
- Dán mã thích hợp vào trường CSS như sau:
Hình nền trên toàn trang web:
Đảm bảo thay thế văn bản chủ sở hữu cho “URL hình ảnh”Trong mã có tên thực của URL tệp hình ảnh. Để xem phần này, hãy chọn bất kỳ hình ảnh nào trong Thư viện phương tiện của bạn và xem thông tin hình ảnh ở phía bên phải của màn hình.
Hình nền danh mục cụ thể:
Đảm bảo thay thế hai vùng văn bản chủ trong mã trên:
- Tên thực của URL tệp hình ảnh cho “URL hình ảnh”
- Tên danh mục hợp lệ cho tên mèo
Để tìm tên danh mục:
- Điều hướng đến bảng điều khiển trang web WordPress của bạn
- Bấm vào Bài viết> Danh mục
- Chọn danh mục bạn muốn tham chiếu và di chuột qua “Biên tập”Liên kết cho nó; bạn sẽ thấy URL ở dưới cùng bên trái của trang, hiển thị ID danh mục
Hãy nhớ rằng đây là mã cứng, vì vậy có thể một số plugin sẽ không tải hình ảnh một cách lười biếng hoặc có thể lập chỉ mục nó thành CDN.
Thêm hình nền vào các khu vực cụ thể
Có một plugin hay khác sẽ hỗ trợ thêm hình ảnh nền vào các khu vực nội dung cụ thể.
Các Nền WordPress nâng cao plugin cho WordPress cho phép thêm hình nền bằng cách sử dụng các khối Gutenberg. Bạn có thể đặt màu, hình ảnh hoặc thậm chí là video làm nền và chúng có thể xem được trên thiết bị di động.
Nó cũng cho phép thêm hiệu ứng thị sai vào ảnh nền và video.
Trong trường hợp này, chúng ta sẽ chỉ thêm một hình nền tĩnh vào một khu vực nội dung, cụ thể là một Bài đăng.
Bởi vì điều này hoạt động với các khối Gutenberg, bạn sẽ cần sử dụng trình chỉnh sửa Gutenberg, vì vậy hãy đảm bảo chuyển từ chế độ Trình chỉnh sửa cổ điển nếu bạn cần.
Sau khi plugin được cài đặt và kích hoạt, hãy điều hướng đến bảng điều khiển WordPress.
1. Nhấp vào Đăng> Thêm mới.
2. Nhấp vào dấu cộng + cuộn xuống Thiết kế và nhấp vào AWB khối.
Các thanh công cụ cho bất kỳ chỉnh sửa nào mà chúng tôi muốn thực hiện nằm ở hai khu vực: thanh biểu tượng trên cùng và cột menu bên.
3. Từ một trong hai menu (tôi thích sử dụng cột bên hơn), hãy nhấp vào Hình ảnh thanh ở trên cùng (giữa Màu sắc & Băng hình), sau đó nhấp vào màu xanh lam Chọn ảnh bên dưới nó, và nó sẽ mở Thư viện phương tiện của bạn.
4. Chọn hình ảnh bạn muốn, sau đó nhấp vào màu xanh lam Lựa chọn khuy ao.
Khi bạn đã hoàn thành việc đó, bạn sẽ thấy rằng hình ảnh hiện là một phần của khối AWB. (Nếu bạn không nhìn thấy nó, hãy nhấp vào biểu tượng hình ảnh từ thanh biểu tượng AWB và nó sẽ xuất hiện trong chế độ xem.)
Sử dụng cài đặt menu, bạn có thể thay đổi vị trí của hình ảnh (dựa trên chỉ báo trên các trục), kích thước, khoảng cách, v.v. Tôi để cài đặt tỷ lệ phần trăm ở mức mặc định 50/50 (đặt nó trực tiếp ở giữa) và kích thước mặc định của Full và Cover.
Vì vậy, bây giờ chúng ta đã có nền bài đăng của mình, chúng ta cần thêm nội dung / văn bản thực tế của bài đăng.
1. Nhấp vào dấu cộng + nút nằm trong khối ở trên cùng của hình nền.
2. Nhấp vào Đoạn văn biểu tượng này sẽ thêm một khối văn bản lên trên hình nền của chúng tôi.
Nhập nội dung văn bản của bạn, sau đó thay đổi căn chỉnh hoặc màu văn bản nếu muốn (tôi đã làm, nhưng đó là tùy chọn), và thì đấy! Chúng tôi có một bài đăng với hình nền cá nhân của riêng nó.
Bạn có thể làm cho nó để chỉ một phần của bài đăng của bạn có hình nền, điều này mang lại cho nó một số hiệu ứng. Chỉ cần thêm các khối Đoạn văn bổ sung trước và sau khối hình nền.
Tuyệt đấy.
Quay lại (mặt đất) về Kiến thức cơ bản
Thêm hình nền vào trang web WordPress của bạn có vẻ như là một việc nhỏ. Nhưng nếu được thực hiện đúng cách, nó có thể tạo ra một tác động lớn. Nó cũng có thể giúp giữ cho sự hiện diện trực tuyến của bạn luôn mới mẻ, để khách truy cập không cảm thấy nhàm chán khi luôn nhìn thấy những bức ảnh giống nhau lặp đi lặp lại.
Thật lý tưởng để sử dụng tùy chỉnh tích hợp chức năng của chủ đề để thêm hình nền khi nó tồn tại, vì nó được thiết kế đặc biệt để hoạt động dưới dạng mã hóa.
Tuy nhiên, bạn có các tùy chọn khác khi nói đến việc đặt ảnh nền WordPress vào đúng vị trí. Tùy chỉnh lõi WP, plugin, trình tạo trang và chỉnh sửa CSS, tất cả đều giúp bạn có thể kiểm soát tốt những hình ảnh được sử dụng và ở đâu.
Vì vậy, hãy tiếp tục và sáng tạo với hình nền của bạn. Tạo tác động theo chủ đề và thu hút khách truy cập của bạn một cách trực quan.
Ghi chú của biên tập viên: Bài đăng này đã được cập nhật để đảm bảo tính chính xác và phù hợp.
[Originally Published: August 2014 / Revised: November 2021]
Thẻ:
