Nền WordPress

Nhiều chủ đề WordPress cho phép bạn thay đổi nền của trang web bằng cách tải lên hình ảnh hoặc chọn màu

Màu nền của trang web của bạn đóng một vai trò quan trọng trong thiết kế và thương hiệu của bạn và làm cho nội dung của bạn dễ đọc hơn. Hình nền có thể làm cho trang web của bạn trông hấp dẫn và dễ chịu hơn về mặt thẩm mỹ

Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách bạn có thể thay đổi màu nền và thêm hình nền vào trang web WordPress của mình

Vì vậy, không cần phải quảng cáo thêm, hãy bắt đầu

Mục lục

1. Làm cách nào để thay đổi màu nền trong WordPress?
• Thay đổi màu nền bằng WordPress Theme Customizer
• Thay đổi màu nền bằng cách thêm CSS tùy chỉnh
• Thay đổi màu nền cho từng bài viết
• Thay đổi màu nền cho các mẫu
2. Làm cách nào để thêm hình nền trong WordPress?
• Thêm hình nền bằng cài đặt chủ đề WordPress
• Thêm hình nền trong WordPress bằng plugin
• Thêm hình nền trong WordPress bằng mã CSS
3. Phần kết luận

1 Cách thay đổi màu nền trong WordPress?

Có nhiều cách khác nhau để thay đổi màu nền trong WordPress. Bạn có thể làm như vậy với sự trợ giúp của công cụ tùy chỉnh chủ đề hoặc sử dụng CSS tùy chỉnh. Chúng ta hãy xem xét các cách khác nhau một cách chi tiết

1. 1 Thay đổi màu nền bằng Trình tùy chỉnh chủ đề WordPress

Sử dụng WordPress Theme Customizer, bạn có thể thay đổi màu nền tùy theo chủ đề của mình. Nó cho phép bạn thay đổi giao diện trang web của mình trong thời gian thực mà không phải thay đổi mã

Đăng nhập vào trang web của bạn và điều hướng đến Giao diện > Chủ đề > Tùy chỉnh để sử dụng Trình tùy chỉnh chủ đề WordPress

Thao tác này sẽ hiển thị Trình tùy chỉnh chủ đề, nơi bạn có thể điều chỉnh chủ đề của mình theo nhiều cách khác nhau. Để thay đổi màu nền của trang web của bạn, hãy tiếp tục và nhấp vào tab Cài đặt màu từ menu bên phải của bạn

Bước tiếp theo là chọn màu nền cho trang web của bạn. Bạn có thể sử dụng công cụ chọn màu hoặc nhập mã màu hex cho nền của mình

Đừng quên nhấn nút Lưu/Xuất bản khi bạn thực hiện xong các thay đổi. Bây giờ bạn có thể thấy màu nền mới đang hoạt động trên trang web của mình

1. 2 Thay đổi màu nền bằng cách thêm CSS tùy chỉnh

Bạn có thể thêm mã CSS tùy chỉnh để thay đổi màu nền của trang web của mình. Để làm như vậy, hãy điều hướng đến Giao diện> Tùy chỉnh từ bảng điều khiển WordPress của bạn

Sau đó điều hướng đến phần CSS bổ sung và thêm đoạn mã sau

body {
 background-color: #FFFFFF;
}

Thay thế mã màu nền bằng mã màu mà bạn muốn sử dụng trên trang web của mình. Khi bạn đã thêm mã, hãy nhấp vào nút Xuất bản và truy cập trang web của bạn để xem màu nền mới

1. 3 Thay đổi màu nền cho từng bài đăng

Thay vì có một màu duy nhất trên toàn bộ trang web của bạn, bạn có thể thay đổi màu nền của mỗi bài đăng trên blog trong WordPress bằng cách sử dụng CSS tùy chỉnh

Nó cho phép bạn tùy chỉnh giao diện của từng bài đăng và hình nền của chúng. Ví dụ: bạn có thể thay đổi màu nền của bài viết được bình luận nhiều nhất hoặc điều chỉnh bố cục của từng bài viết dựa trên tác giả

Bạn sẽ cần xem CSS của chủ đề để biết lớp ID bài đăng. Bạn có thể thực hiện việc này bằng cách duyệt bất kỳ bài đăng trên blog nào và sau đó nhấp chuột phải để sử dụng công cụ Kiểm tra của trình duyệt

Khi bạn có ID bài đăng của mình, bạn có thể sử dụng CSS tùy chỉnh sau để sửa đổi màu nền của một bài đăng. Thay thế ID bài đăng bằng mã màu nền của riêng bạn và mong muốn

.postid-1349 {
background: #D7DEB5
}

Trình tùy chỉnh chủ đề WordPress có thể được sử dụng để thêm CSS tùy chỉnh. Thêm mã vào phần CSS bổ sung và nhấp vào nút Xuất bản

Bây giờ bạn có thể kiểm tra bài đăng và xem màu nền mới

1. 4 Thay đổi màu nền cho mẫu

Các mẫu là bố cục khối được xác định trước được truy cập trên tab mẫu của bộ chèn khối. Để thêm một mẫu, nhấp vào dấu '+' từ góc trên bên trái, như hình bên dưới

Điều hướng đến tab Mẫu nơi bạn có thể chọn các danh mục như đầu trang, chân trang, thư viện, v.v.

Chẳng hạn, chúng tôi đã thêm các cột. Chọn cột muốn đổi màu nền và tìm đến mục Color bên tay phải như hình bên dưới

Chọn màu nền từ bộ chọn màu. Khi bạn đã cập nhật bài đăng, hãy nhấp vào nút Xuất bản. Sau đó, bạn có thể truy cập bài đăng của mình và xem màu nền cho mẫu

1. 5 Thêm màu nền ngẫu nhiên trong WordPress

Màu sắc bạn chọn cho trang web của mình ảnh hưởng lớn đến cách khách truy cập cảm nhận về nó. Màu sắc hỗ trợ chủ đề tổng thể của trang web của bạn, ngoài giao diện của chúng. Tuy nhiên, một số người bỏ qua tầm quan trọng của màu sắc trên trang web của họ và chọn bỏ qua nó

Người dùng của bạn có thể trở nên nhàm chán nếu bạn sử dụng một màu nền duy nhất. Điều tốt nhất bạn có thể làm trên trang web WordPress của mình là thay đổi màu nền một cách ngẫu nhiên

Để bắt đầu, bạn cần tìm lớp CSS của khu vực mà bạn muốn thay đổi màu nền ngẫu nhiên. Điều hướng đến bài đăng của bạn và với sự trợ giúp của công cụ Kiểm tra, xác định vị trí lớp CSS như hình bên dưới

Khi bạn đã xác định được lớp CSS, hãy mở một trình soạn thảo văn bản đơn giản như notepad và tạo một tệp mới. Lưu tệp dưới dạng 'nền. js' trên máy tính để bàn của bạn. Thêm đoạn mã sau vào tệp JS

jQuery(function($) {
    $('#masthead').each(function() {
        var $this = $(this),
            colors = ['#e5d1d2', '#d2d1e1', '#c0ebf1'];

        setInterval(function() {
            var color = colors.shift();
            colors.push(color);
            $this.animate({ backgroundColor: color }, 2000);
        }, 4000);
    });
});

Bạn sẽ nhận thấy rằng chúng tôi đã sử dụng mã màu hex để tạo bốn màu khác nhau. Đối với nền của bạn, bạn có thể sử dụng bao nhiêu màu tùy thích. Chỉ cần thêm mã màu vào đoạn mã và phân tách chúng bằng dấu phẩy và dấu ngoặc đơn. Đảm bảo thay đổi bộ chọn CSS #masthead từ ví dụ trên thành bộ chọn phù hợp với trang web của bạn

Bây giờ, bạn sẽ cần tải tệp JS lên thư mục JS của chủ đề WordPress bằng dịch vụ giao thức truyền tệp (FTP). Đăng nhập vào máy chủ FTP của trang web của bạn. Điều hướng đến thư mục JS trong chủ đề trang web của bạn trong cột Trang web từ xa.  

Bạn có thể tạo một thư mục js nếu chủ đề của bạn không có. Chỉ cần nhấp chuột phải vào thư mục của chủ đề trong ứng dụng khách FTP của bạn và chọn tùy chọn Tạo thư mục

Sau đó điều hướng đến cột Trang web cục bộ và mở vị trí của tệp JS của bạn. Sau đó nhấp chuột phải vào tệp và nhấp vào tùy chọn Tải lên để đưa nó vào chủ đề của bạn

Thêm đoạn mã sau vào các chức năng của chủ đề của bạn. tập tin php

function wpb_bg_color_scripts() {    
wp_enqueue_script( 'background',  get_stylesheet_directory_uri() . '/js/background.js', array( 'jquery-color' ), '1.0.0', true ); 
 } 
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

Bây giờ bạn có thể truy cập trang web của mình để xem màu nền thay đổi ngẫu nhiên trên trang web của bạn

2 Cách thêm hình nền vào WordPress?

Hình nền có thể làm cho trang web của bạn hấp dẫn và hấp dẫn hơn. Bây giờ hãy xem cách thêm hình nền vào trang web WordPress của bạn

2. 1 Thêm hình nền bằng cài đặt chủ đề WordPress

Điều hướng đến Giao diện> Tùy chỉnh cài đặt từ bảng điều khiển WordPress của bạn. Bạn sẽ được điều hướng đến tùy biến chủ đề, nơi bạn có thể quản lý các cài đặt chủ đề khác nhau

Sau đó, chọn tùy chọn Hình nền. Cửa sổ sẽ trượt vào, hiển thị 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

Cửa sổ bật lên trình tải lên phương tiện WordPress sẽ xuất hiện, cho phép bạn tải lên hình ảnh từ máy tính của mình. Bạn cũng có thể sử dụng thư viện phương tiện để tìm hình ảnh đã tải lên trước đó

Sau khi được chọn, bạn sẽ xem bản xem trước hình ảnh đã chọn của mình trong tùy biến chủ đề

Bạn cũng sẽ nhận thấy các tùy chọn hình nền bên dưới hình ảnh. Bạn có thể chọn xem bạn muốn hình nền lấp đầy màn hình, vừa với màn hình, lặp lại hay tùy chỉnh trong mục Đặt trước

Bằng cách sử dụng các mũi tên bên dưới, bạn cũng có thể thay đổi vị trí của ảnh nền. Hình ảnh sẽ được căn chỉnh vào giữa màn hình nếu bạn nhấp vào nút giữa

Khi bạn đã cập nhật cài đặt hình ảnh, hãy nhấp vào nút Xuất bản và hình nền của bạn sẽ được thêm vào trang web của bạn

2. 2 Thêm ảnh nền vào WordPress bằng plugin

Nếu cài đặt chủ đề của bạn không cho phép bạn thêm hình nền, bạn có thể thêm hình nền với sự trợ giúp của plugin

Một trong những plugin trình tạo trang kéo và thả phổ biến nhất cho WordPress là Elementor. Plugin có một số tính năng cho phép bạn tạo một trang web đầy đủ chức năng bằng bảng điều khiển tương tác mà không cần viết một dòng mã nào

Để bắt đầu, bạn cần cài đặt và kích hoạt plugin Elementor từ bảng điều khiển WordPress của mình

Điều hướng đến trang/bài đăng của bạn nơi bạn muốn thêm hình nền. Nhấp vào nút Chỉnh sửa bằng Elementor trên trình chỉnh sửa trang để mở bảng điều khiển

Để thêm hình nền vào trang của bạn, hãy nhấp vào biểu tượng cài đặt, như hình bên dưới

Nhấp vào menu thả xuống Nền trên tab Kiểu. Sau đó, nhấp vào biểu tượng bút và sau đó chọn Chọn hình ảnh

Bây giờ bạn có thể chọn một hình ảnh từ thư viện phương tiện WordPress hoặc tải lên một hình ảnh mới. Nhấp vào nút Xuất bản và hình nền sẽ được thêm vào trang web của bạn

2. 3 Thêm ảnh nền vào WordPress bằng mã CSS

Nếu là người am hiểu công nghệ, bạn có thể sử dụng mã CSS tùy chỉnh và thêm hình nền vào các trang và bài đăng của mình

Bạn có rất nhiều sự linh hoạt và quyền kiểm soát đối với hình thức và vị trí của hình ảnh khi bạn sử dụng CSS tùy chỉnh

Để làm như vậy, hãy điều hướng đến Giao diện> Tùy chỉnh từ bảng điều khiển WordPress của bạn. Điều hướng đến phần CSS bổ sung. Trong phần CSS bổ sung, thêm đoạn mã sau

body
{
	background: url(example-image.jpg);
}

Đảm bảo bạn thay thế hình ảnh ví dụ. jpg với URL bạn muốn sử dụng làm hình nền của mình

Đoạn mã trên sẽ đặt hình nền chung cho tất cả các trang trên trang web của bạn. Bạn có thể truy cập trang web của mình và xem hình nền mới được thêm vào trang web của bạn

Phần kết luận

Không mất thời gian hay công sức để thay đổi nền sẽ xuất hiện trên trang của bạn. Đó là một tính năng được tích hợp vào WordPress Core, giúp dễ dàng thay đổi hình nền cho những dịp đặc biệt. Bạn cũng có thể chọn một nền duy nhất cho phần còn lại của cuộc đời mình

Bạn có thể sử dụng mã CSS tùy chỉnh, plugin và trình tạo trang để thay đổi hình nền trên trang web WordPress của mình. Khả năng là vô tận, từ hình nền trên một số trang nhất định đến màu nền cho trang web của bạn