Home HƯỚNG DẪN WP Hướng dẫn thêm ảnh nền trong WordPress

Hướng dẫn thêm ảnh nền trong WordPress

by Admin
huong dan them anh nen trong wordpress

Bạn có muốn thêm hình nền vào trang WordPress của mình không?

Hình ảnh nền có thể được sử dụng để làm 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 dễ dàng thêm hình nền vào trang web WordPress của bạn.

Video hướng dẫn

Nếu bạn muốn hướng dẫn bằng văn bản, vui lòng tiếp tục đọc.

Phương pháp 1. Thêm hình nền bằng cài đặt chủ đề WordPress của bạn

Hầu hết các chủ đề WordPress phổ biến đều có hỗ trợ nền tùy chỉnh . Tính năng này cho phép bạn dễ dàng đặt hình nền cho trang WordPress của mình.

Nếu chủ đề của bạn hỗ trợ tính năng nền tùy chỉnh, 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 chủ đề 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ó triển khai hình ảnh nền, thì bạn có thể thử các tùy chọn khác được đề cập trong hướng dẫn của chúng tôi.

Trước tiên, bạn cần truy cập trang Giao diện »Tùy chỉnh trong 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 chủ đề WordPress nơi bạn có thể thay đổi các cài đặt chủ đề khác nhau trong khi xem bản xem trước trực tiếp của trang web của mình.

Tiếp theo, bạn cần nhấp vào tùy chọn ‘Hình nền’. 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 chọn hình nền cho trang web của bạn.

Bấm vào nút chọn hình ảnh để tiếp tục.

Thao tác này sẽ hiển thị cửa sổ bật lên của trình tải lên phương tiện WordPress 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 phương tiện.

Tiếp theo, bạn cần nhấp 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ổ bật lên của trình tải lên phương tiện và bạn sẽ thấy bản xem trước của hình ảnh đã chọn trong công cụ tùy chỉnh chủ đề.

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 ‘Đặt trước’, bạn có thể chọn cách bạn muốn hiển thị hình nền: lấp đầy 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 nhấp vào các mũi tên bên dưới. Nhấp vào trung tâm sẽ căn chỉnh hình ảnh vào giữa màn hình.

Đừng quên nhấp vào nút ‘Lưu & Xuất bản’ ở trên cùng để lưu trữ cài đặt của bạn. Vậy là xong, bạn đã thêm ảnh nền vào trang WordPress của mình thành công.

Hãy tiếp tục và truy cập trang web của bạn để xem nó hoạt động.

Phương pháp 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. Nó hoạt động với bất kỳ chủ đề WordPress nào 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.

Nó tự động làm cho tất cả hình nền của bạn ở chế độ toàn màn hình và đáp ứng cho 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 . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .

Khi kích hoạt, bạn cần truy cập Giao diện »Toàn màn hình BG Image để định cấu hình cài đặt plugin.

Bạn sẽ được yêu cầu thêm khóa cấp phép của mình. Bạn có thể lấy thông tin này 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.

Tiếp theo, bạn cần nhấp vào nút ‘Lưu Cài đặt’ để lưu trữ các thay đổi của mình. Bây giờ bạn đã sẵn sàng để bắt đầu thêm hình nền vào trang web WordPress của mình.

Tiếp tục và nhấp vào nút ‘Thêm hình ảnh mới’ trên trang cài đặt của plugin. Thao tác này sẽ đưa bạn đến màn hình tải lên hình nền.

Nhấp vào nút ‘Chọn Hình ảnh’ để 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 sẽ 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 mình.

Tiếp theo, bạn cần cung cấp tên cho hình ảnh này. Tên này sẽ được sử dụng trong nội bộ, vì vậy bạn có thể sử dụng bất kỳ thứ gì ở đây.

Cuối cùng, bạn cần chọn nơi bạn muốn hình ả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 của mình như danh mục, kho lưu trữ, trang đầu hoặc trang blog.

Đừng quên bấm vào nút lưu ảnh để lưu ảnh nền của bạn.

Bạn có thể thêm bao nhiêu hình ảnh tùy thích bằng cách truy cập trang Giao diện »Toàn màn hình BG Image .

Nếu bạn đặt nhiều hình ảnh được sử dụng trên toàn cầu, 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 ở đây 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 nhấp vào nút lưu cài đặt để lưu trữ các thay đổi của bạn.

Hình nền cho Bài đăng, Trang và Danh 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ẻ và hơn thế nữa.

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 đăng, bạn sẽ thấy hộp ‘Hình nền Toàn màn hình’ mới bên dưới trình chỉnh sửa bài đăng.

Để sử dụng hình nền cho một danh mục cụ thể, bạn cần truy cập trang Giao diện »Toàn màn hình BG Image và sau đó nhấp vào nút ‘Thêm Hình ảnh Mới’.

Sau khi tải lên hình ảnh của mình, bạn có thể chọn ‘Danh mục’ làm ngữ cảnh mà bạn muốn hiển thị hình nền.

Bây giờ nhập ID danh mục cụ thể hoặc slug nơi bạn muốn hiển thị hình ảnh. Xem hướng dẫn của chúng tôi về cách tìm ID danh mục trong WordPress .

Đừng quên lưu hình ảnh của bạn để lưu cài đặt của bạn.

Phương pháp 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 chủ đề của mình mà không cần chạm vào một dòng mã nào.

Bạn có thể thêm hình nền nhanh chóng 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 CSS Hero . Khi bạn đã hoàn thành điều đó, đã đến lúc bắt đầu tùy chỉnh trang web của bạn.

Bây giờ mở trang chủ của bạn trong trình duyệt của bạn. Bạn sẽ thấy liên kết ‘Tùy chỉnh với CS SHero’ 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 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 .header-filter-gradientkhu vực. Khi bạn nhấp vào khu vực này, bạn có thể chọn liên kết nền trong thanh bên trái.

Liên kết nền sẽ mở ra. Từ đó, bạn có thể nhấp vào ‘Hình ảnh.’ Bây giờ, bạn có thể chọn một hình ảnh từ Unsplash hoặc từ các video tải lên của mình để 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 ‘Áp dụng Hình ảnh’. 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 phiên bản lớn để nó sẽ trải dài trên trang.

Nhấn ‘Lưu và Xuất bản’ ở dưới cùng và hình nền hiện được lưu cho trang web của bạn.

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

Theo mặc định, 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.

1<body class="archive category category-tv category-4">

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-4lớp CSS để tạo kiểu khác cho trang danh mục này.

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 CSS tùy chỉnh này vào chủ đề của mình.

body.category-tv {
background-image: url("https://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;}

Đừng quên thay thế URL hình nền và 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. Bạn cũng có thể muốn xem so sánh của chúng tôi về các plugin trình tạo trang kéo và thả tốt nhất cho WordPress và hướng dẫn của chúng tôi về cách tạo chủ đề WordPress tùy chỉnh (không cần bất kỳ mã nào).

Related Posts

Leave a Comment

shares