Bỏ qua đến nội dung chính

Làm thế nào để thay đổi các bên của thanh bên trên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Gần đây, một trong những độc giả của chúng tôi đã hỏi chúng tôi làm thế nào để thay đổi bên 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 thay đổi vị trí của thanh bên trên WordPress?

Các chuyên gia về khả năng sử dụng nghĩ rằng mọi người đang 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 này trước tiên. Tuy nhiên, điều này có thể được đảo ngược nếu trang web của bạn bằ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 trên WordPress sử dụng bố cục điển hình của blog với hai cột. Một cho nội dung và cột còn lại 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 phía thanh bên trong cài đặt của 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 thay đổi các mặt của thanh bên theo cách thủ công. Đi 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 phải 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. Kiểm tra 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 bạn trong trình chỉnh sửa văn bản như Notepad. Tập tin 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.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

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ụ "Inspector" trên 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 "Trình kiểm tra" từ menu trình duyệt.

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

Khi bạn di chuyển chuột trong chế độ xem mã nguồn, bạn sẽ thấy các khu vực mà nó ảnh hưởng được tô sáng trong bản xem trước thời gian thực. Trong khung bên phải, bạn sẽ có thể thấy CSS được sử dụng cho mục đã chọn này.

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

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀ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 xuống biểu định kiểu trên máy chủ, đây là 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ác plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của 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 cao cấp mạnh 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ẽ giúp bảo vệ trang web của bạn khỏi các cuộc tấn công có thể.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ệ 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 tuyệt vời, giao diện hiện đại và chuyên nghiệp, hỗ trợ khách hàng tận tâm và những người 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ỉ bằng 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 đủ plugin WordPress nàyGó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ố trí đáp ứng các thanh trượt của nó, dễ dàng nhập hoặc xuất các thanh trượt, cập nhật thường xuyên, hỗ trợ khách hàng có sẵn 24 / 7, hoạt hình thú vị và mát mẻ, có sẵn hướng dẫn bằng video để bắt đầu nhanh, hỗ trợ Google Fonts và hơn thế nữa.

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

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

Contact Us Form là một plugin WordPress đáp ứng cao cấp và một công cụ đơn giản nhưng giàu tùy chọn cá nhân hóa cho phép bạn hiển thị một biểu mẫu rõ ràng và đáng khích lệ, 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.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

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

Tài nguyên đề xuất

Khám phá các tài nguyên được đề xuất khác sẽ đồng hành cùng bạn trong việc tạo và quản lý trang web của bạn.

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. Đừng ngần ngạ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.

...

Bài viết này chứa 1 bình luận

  1. [...] Trong hướng dẫn này, bạn sẽ học cách thay đổi vị trí của thanh bên của theme WordPress của bạn. [...]

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
1 cổ phiếu
cổ phiếu
tweet
Enregistrer1