Cách thay đổi thanh bên trong WordPress
Gần đây, một trong những độc giả của chúng tôi đã hỏi chúng tôi cách thay đổi thanh bên trong chủ đề WordPress. Chúng tôi nhận được câu hỏi này rất nhiều khi người dùng muốn thay đổi thanh bên của họ từ trái sang phải hoặc phải sang trái. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thay đổi thanh bên trong WordPress.
Tại sao thay đổi Sidebar trong WordPress
Các chuyên gia về khả năng sử dụng tin rằng mọi người quét các trang từ trái sang phải. Họ khuyên nên đặt nội dung quan trọng ở bên trái để người dùng nhìn thấy nội dung đầu tiên. Tuy nhiên, điều này có thể đảo ngược nếu trang web của bạn sử dụng ngôn ngữ được viết theo hướng Phải sang Trái.
Nhiều trang WordPress sử dụng bố cục blog điển hình với hai cột. Một cột dành cho nội dung và cột còn lại dành cho thanh bên.
Nếu bạn mới bắt đầu tạo một trang web thì bạn nên chọn một chủ đề WordPress có thanh bên ở vị trí ưa thích của bạn.
Nhiều chủ đề có các tùy chọn để chuyển đổi các bên của thanh bên từ cài đặt chủ đề. Tuy nhiên, nếu chủ đề của bạn không có tùy chọn này thì bạn sẽ phải thay đổi các cạnh của thanh bên theo cách thủ công.
Như đã nói, chúng ta hãy xem cách bạn có thể dễ dàng thay đổi phía thanh bên trong WordPress bằng cách sử dụng một chút CSS.
Thay đổi Sidebar trong WordPress bằng CSS
Trước khi thực hiện bất kỳ thay đổi nào đối với chủ đề của mình, trước tiên bạn nên cân nhắc việc tạo một chủ đề con. Bằng cách sử dụng chủ đề con, bạn sẽ có thể cập nhật chủ đề gốc mà không làm mất các thay đổi.
Thứ hai, bạn phải luôn tạo bản sao lưu cho trang WordPress của mình khi thực hiện các thay đổi trực tiếp đối với chủ đề WordPress đang hoạt động của mình.
Bạn sẽ cần một ứng dụng khách FTP để chỉnh sửa các tệp chủ đề của mình. Xem hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách sử dụng FTP để tải tệp lên WordPress.
Kết nối với trang WordPress của bạn bằng ứng dụng khách FTP và đi tới thư mục chủ đề của bạn. Nó thường nằm ở:
/yourwebsite/wp-content/themes/your-theme-folder/
Bây giờ bạn cần tải xuống và mở tệp biểu định kiểu chính của chủ đề trong trình soạn thảo văn bản thuần túy như Notepad. Tệp này có tên là style.css và nằm trong thư mục gốc của chủ đề của bạn.
Trong tệp này, hãy tìm lớp CSS cho thanh bên của bạn. Nó thường là .sidebar. Trong ví dụ này, chúng tôi đang sử dụng chủ đề WordPress mặc định Twenty Fifteen có CSS này để xác định thanh bên:
.sidebar {
float: left;
margin-right: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
Như bạn có thể thấy, nó nổi thanh bên sang trái với lề -100% ở bên phải. Chúng ta sẽ thay đổi nó thành float phải và lề trái như thế này:
.sidebar {
float: right;
margin-left: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
Lưu các thay đổi của bạn và tải tệp style.css trở lại trang web của bạn bằng ứng dụng khách FTP. Bây giờ nếu bạn truy cập trang web của mình, nó sẽ trông như thế này:
Đó là vì chúng ta đã di chuyển thanh bên nhưng chưa di chuyển vùng nội dung. Twenty Fifteen sử dụng CSS này để xác định vị trí của vùng nội dung.
.site-content {
display: block;
float: left;
margin-left: 29.4118%;
width: 70.5882%;
}
Chúng ta sẽ thay đổi để di chuyển nội dung sang bên phải. Như thế này:
.site-content {
display: block;
float: left;
margin-right: 29.4118%;
width: 70.5882%;
}
Đây là cách trang web của chúng tôi xử lý sau khi áp dụng CSS này.
Như bạn có thể thấy rằng chúng tôi đã đổi bên cho cả khu vực nội dung và thanh bên. Tuy nhiên vẫn còn một khối màu trắng ở bên trái.
Bạn sẽ gặp những điều như vậy khi làm việc với CSS. Sẽ cần một số công việc thám tử để tìm ra nguyên nhân gây ra điều đó và cách điều chỉnh nó.
Sử dụng công cụ 'Kiểm tra' của trình duyệt của bạn để xem mã nguồn. Trỏ chuột vào vùng bị ảnh hưởng trong trình duyệt, nhấp chuột phải và chọn Kiểm tra từ menu trình duyệt.
Khi bạn di chuyển chuột trong chế độ xem mã nguồn, bạn sẽ nhận thấy các khu vực mà nó ảnh hưởng được đánh dấu trong bản xem trước trực tiếp. Ở khung bên phải, bạn sẽ có thể thấy CSS được sử dụng cho thành phần đã chọn đó.
Chúng tôi nhận ra rằng CSS này trong biểu định kiểu của chúng tôi cần được điều chỉnh.
@media screen and (min-width: 59.6875em) {
body:before {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: "";
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
width: 29.4118%;
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}
Mã CSS này thêm một khối nội dung trống có chiều rộng 29,4118% và chiều rộng 100% vào trên cùng bên trái. Đây là cách chúng ta sẽ di chuyển nó sang phải.
@media screen and (min-width: 59.6875em) {
body:before {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: "";
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
right: 0;
width: 29.4118%;
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}
Sau khi lưu và tải biểu định kiểu trở lại máy chủ, trang web của chúng tôi trông như thế này.
Làm việc với CSS có thể gây nhầm lẫn cho người mới bắt đầu. Nếu bạn không muốn thực hiện tất cả công việc viết mã thủ công thì bạn có thể muốn dùng thử CSS Hero. Nó cho phép bạn chỉnh sửa CSS mà không cần viết bất kỳ mã nào và nó hoạt động với mọi chủ đề WordPress.
Chúng tôi hy vọng bài viết này đã giúp bạn thay đổi thanh bên trong WordPress. Bạn cũng có thể muốn xem danh sách 12 thủ thuật thanh bên WordPress của chúng tôi để có được kết quả tối đa.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.