Gần đây, một trong những độc giả của chúng tôi đã hỏi chúng tôi làm cách nào để thay đổi thanh bên của một chủ đề WordPress?

Chúng tôi thường nhận được câu hỏi này từ những người dùng muốn thay đổi vị trí thanh bên của họ từ trái sang phải hoặc từ phải sang trái.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thay đổi vị trí của thanh bên trên WordPress.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn 

Sau đó trở lại lý do tại sao chúng ta ở đây.

Cách thay đổi vị trí của sidebar trên wordpress e1568058176266

Tại sao lại thay đổi vị trí của thanh bên trên 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 bạ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 này đầu tiên. Tuy nhiên, điều này có thể bị đảo ngược nếu trang web của bạn sử dụng ngôn ngữ RTL (bên phải).

Tìm hiểu xem blog WordPress của bạn nên có sidebars

Nhiều trang web WordPress sử dụng bố cục blog điển hình với hai cột. Một cho nội dung và cột khác cho thanh bên.

demo nội dung điển hình thanh bên WordPress

Nếu bạn chưa quen với các trang web, thì bạn nên chọn một chủ đề WordPress có thanh bên trên vị trí ưa thích của bạn.

Nhiều Chủ đề WordPress cung cấp các tùy chọn để thay đổi bên thanh bên trong cài đặt thanh bên. Tuy nhiên, nếu chủ đề WordPress của bạn không có tùy chọn này, bạn sẽ cần phải thay đổi các cạnh của thanh bên theo cách thủ công. Tiến xa hơn bằng cách khám phá Cách xóa thanh bên trên WordPress

Điều đó nói rằng, chúng ta hãy xem phương pháp bạn cần sử dụng để dễ dàng thay đổi mặt bên của WordPress bằng cách sử dụng CSS.

Thay đổi thanh bên bằng CSS

Trước khi thực hiện bất kỳ thay đổi nào đối với chủ đề WordPress của bạn, trước tiên bạn nên xem xét tạo một chủ đề con. Bằng cách sử dụng một chủ đề con, bạn sẽ có thể cập nhật chủ đề gốc mà không mất các thay đổi.

Khám phá Làm thế nào để hiển thị một sidebar khác nhau cho từng hạng mục trên WordPress

Thứ hai, bạn phải luôn tạo bản sao lưu của trang web WordPress của mình khi bạn thực hiện các thay đổi theo thời gian thực cho chủ đề đang hoạt động.

Bạn sẽ cần một ứng dụng khách FTP để chỉnh sửa các tệp chủ đề WordPress. Tham khảo ý kiến hướng dẫn về cách sử dụng FTP.

Đăng nhập vào trang web WordPress của bạn bằng ứng dụng khách FTP và điều hướng đến thư mục chủ đề. Nó thường được đặt tại:

 / Yoursite / wp-content / themes / bạn-theme-thư mục / 

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ủ đề WordPress của mình trong một trình soạn thảo văn bản như Notepad. Tệp này được gọi là style.cssvà nó nằm trong thư mục gốc của chủ đề WordPress của bạn.

Khám phá Cách quản lý tệp và thư mục WordPress

Trong tệp này, tìm lớp CSS của thanh bên của bạn. Nói chung lớp này là " sidebar ". Trong ví dụ này, chúng tôi sử dụng chủ đề mặc định của WordPress " hai mươi mười lăm Ai có lớp này cho thanh bên:

.sidebar {float: left; lề phải: -100%; chiều rộng tối đa: 413px; vị trí: tương đối; chiều rộng: 29.4118%; }

Như bạn có thể thấy thanh bên nổi bên trái với lề -100%. Chúng tôi sẽ thay đổi float sang phải:

.sidebar {float: phải; lề trái: -100%; chiều rộng tối đa: 413px; vị trí: tương đối; chiều rộng: 29.4118%; }

Lưu các thay đổi của bạn và tải tệp style.css lên 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 bạn, nó sẽ trông như thế này:

Trang web giới thiệu thay đổi thanh bên

Thật vậy, chúng tôi đã di chuyển thanh bên, nhưng chúng tôi không di chuyển khu vực nội dung. " Hai mươi mười lăm Sử dụng CSS này để xác định vị trí của khu vực nội dung.

.site-content {display: block; phao: trái; lề trái: 29.4118%; chiều rộng: 70.5882%; }

Chúng tôi sẽ thay đổi nó để di chuyển nội dung sang bên phải. Như sau:

.site-content {display: block; phao: trái; lề phải: 29.4118%; chiều rộng: 70.5882%; }

Đây là trang web của bạn sẽ trông như thế nào sau khi áp dụng mã CSS này.

trình bày mới chuyển trang web sidebar

Như bạn có thể thấy, chúng tôi đã thay đổi vị trí của 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.

Đi xa hơn bằng cách khám phá Cách quản lý tệp và thư mục WordPress

Bạn sẽ thường gặp những lỗi này khi làm việc với CSS. Nó sẽ mất một số công việc thám tử để hiểu những gì gây ra điều này và làm thế nào để khắc phục nó.

Sử dụng công cụ "Thanh tra" của trình duyệt để 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 "Thanh tra" từ menu của trình duyệt.

kiểm tra công cụ trình duyệt

Khi bạn di chuyển chuột xung quanh 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. Trong khung bên phải, bạn sẽ có thể thấy CSS được sử dụng cho phần tử đã chọn đó.

Khám phá của chúng tôi Các plugin 5 WordPress để chỉnh sửa trực quan CSS trên blog của bạn

Vì vậy, CSS tương ứng với mục được tô sáng phải được điều chỉnh lại.

Màn hình @media và (min-width: 59.6875em) {body: before {background-color: #fff; hộp bóng: 0 0 1px rgba (0, 0, 0, 0.15); nội dung: ""; hiển thị: khối; chiều cao: 100%; chiều cao tối thiểu: 100%; vị trí: cố định; đầu trang: 0; trái: 0; chiều rộng: 29.4118%; chỉ số z: 0; / * Sửa lỗi nhấp nháy khi cuộn trên Safari * /}

Mã CSS này thêm một khối trống có chiều rộng 29,4118% và chiều rộng 100% ở phía trên bên trái. Đây là cách chúng ta sẽ di chuyển nó sang bên phải.

Màn hình @media và (min-width: 59.6875em) {body: before {background-color: #fff; hộp bóng: 0 0 1px rgba (0, 0, 0, 0.15); nội dung: ""; hiển thị: khối; chiều cao: 100%; chiều cao tối thiểu: 100%; vị trí: cố định; đầu trang: 0; phải: 0; chiều rộng: 29.4118%; chỉ số z: 0; / * Sửa lỗi nhấp nháy khi cuộn trên Safari * /}

Sau khi lưu và tải biểu định kiểu lên máy chủ, trang web của bạn sẽ trông như thế nào.

mới nhìn trang web sidebar bên phải

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 làm tất cả các công việc thủ công, thì bạn có thể thử Plugin WordPress CSS Hero. Nó cho phép bạn chỉnh sửa CSS mà không cần viết mã và nó hoạt động với mọi chủ đề WordPress.

Khám phá thêm một số plugin WordPress cao cấp  

Bạn có thể sử dụng cái khác plugin WordPress để tạo ra một giao diện hiện đại và để tối ưu hóa việc xử lý blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. Zxeion

Zxeion là một Plugin WordPress phí bảo hiểm chịu trách nhiệm cải thiện tính bảo mật của trang web của bạn. Plugin này chứa một bộ sưu tập các công cụ bảo vệ và bảo mật sẽ bảo vệ trang web của bạn chống lại các cuộc tấn công có thể xảy ra.Các plugin Zxeion wordpress bảo vệ trang web khỏi sự tấn công của vi rút phần mềm độc hại

Hệ thống bảo vệ thời gian thực của nó sẽ giúp bạn xác định các mối đe dọa đối với trang web của bạn và chặn chúng, mà bạn không phải làm gì cả.

Khám phá cũng của chúng tôi 7 plugin để tăng thanh bên của bạn trên WordPress

Các tính năng của nó là: bảo vệ theo thời gian thực, hỗ trợ khách hàng tuyệt vời, cập nhật thường xuyên, chặn địa chỉ IP, tài liệu xuất sắc, giao diện hiện đại và chuyên nghiệp, hỗ trợ khách hàng tận tâm và những thứ khác

Tải về | Bản demo | Web hosting

2. Slaido 

Slaido là một Plugin WordPress cao cấp cho phép bạn chọn từ gần 320 mẫu thanh trượt đáp ứng và nhập một trong số chúng vào trang web của bạn chỉ trong vài cú nhấp chuột. Đó là một gói mẫu hoàn chỉnh, hoàn hảo cho Cách mạng Slider. Vì vậy, bạn sẽ phải cài đặt nó trước để sử dụng đầy đủ tính năng này Plugin WordPressGói mẫu Slaido cho cuộc cách mạng thanh trượt wordpress

Các tính năng chính của nó là: bố cục đáp ứng của các thanh trượt, dễ dàng nhập hoặc xuất thanh trượt, cập nhật thường xuyên, hỗ trợ khách hàng 24/7, hoạt ảnh linh hoạt và rất thú vị, tính khả dụng của video hướng dẫn để bắt đầu nhanh, hỗ trợ Google Fonts và nhiều hơn nữa.

Tải về | Bản demo | Web hosting

3. Liên hệ với chúng tôi

Biểu mẫu Liên hệ với chúng tôi là một plugin WordPress đáp ứng cao cấp và là một công cụ đơn giản nhưng có nhiều tùy chọn tùy chỉnh cho phép bạn hiển thị một biểu mẫu rõ ràng và khuyến khích, trên đó khách truy cập của bạn có thể liên hệ với bạn bằng cách để lại tin nhắn của họ.

Liên hệ với chúng tôi biểu mẫu liên hệ plugin wordpress

Bạn sẽ có thể xác định các trường cần thiết, chọn bố cục tốt nhất của các trường và tùy chỉnh hoàn toàn để khuyến khích khách hàng hoặc khách truy cập của bạn để lại đề xuất hoặc tin nhắn của họ.

Chúng tôi cũng mời bạn đọc: Các plugin 10 WordPress để tạo và quản lý trang web nhà hàng

Chỉ cần thiết lập địa chỉ email nơi bạn muốn nhận tin nhắn và sử dụng nó để phát triển doanh nghiệp của bạn theo hướng có lợi nhất.

Tải về | Bản demo | Web hosting

Tài nguyên đề xuất

Tìm hiểu về các tài nguyên được đề xuất khác để giúp bạn xây dựng và quản lý trang web của mình.

Kết luận

Có! Đó là nó cho hướng dẫn này. Chúng tôi hy vọng nó sẽ giúp bạn thay đổi phía thanh bên của blog WordPress của bạn. thoải mái để chia sẻ bài viết này với bạn bè của bạn trên các mạng xã hội yêu thích của bạn

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.

Nếu bạn có đề xuất hoặc nhận xét, hãy để lại trong phần của chúng tôi ý kiến.

...