Làm thế nào để thay đổi Sidebar Side trong WordPress

Làm thế nào để thay đổi Sidebar Side trong WordPress
Rate this post

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 cạnh bên trong một chủ đề WordPress. Chúng tôi nhận được câu hỏi này rất nhiều nơi 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 này, chúng tôi sẽ chỉ cho bạn cách thay đổi thanh bên trong WordPress.

Tham khảo : Mua Backlink

Tại sao thay đổi Sidebar Side trong WordPress

Các chuyên gia về khả năng sử dụng tin rằng mọi người quét 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 xem nội dung đó trước tiên. Tuy nhiên, điều này có thể bị đảo ngược nếu trang web của bạn bằng một ngôn ngữ được viết bằng hướng sang phải.

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

Nếu bạn chỉ mới bắt đầu một trang web, sau đó 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ủ đề có các tùy chọn để chuyển đổi sidebar từ các thiết lập 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 bên bằng tay.

Có nói rằng, chúng ta hãy xem làm thế nào bạn có thể dễ dàng thay đổi sidebar bên trong WordPress sử dụng một ít CSS .

Thay đổi Sidebar Side trong WordPress sử dụng CSS

Trước khi bạn 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 xem xét tạo 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 thay đổi.

Thứ hai, bạn nên tạo một bản sao lưu của trang WordPress khi bạn thực hiện thay đổi trực tiếp cho chủ đề WordPress đang hoạt động của mình.

Bạn sẽ cần một khách hàng FTP để chỉnh sửa các tập tin chủ đề của bạn. Xem hướng dẫn 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 web WordPress của bạn bằng cách sử dụng trình khách FTP và chuyển đến thư mục chủ đề. Nó thường được đặt tại:

/yourwebsite/wp-content/themes/your-theme-folder/

Bây giờ bạn cần phải tải xuống và mở tệp stylesheet chính của chủ đề trong một trình soạn thảo văn bản thuần túy như Notepad. Tập tin này được gọi style.css, và nó nằm trong thư mục gốc của chủ đề.

Trong tệp nà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 sidebar:

1
2
3
4
5
6
7
.sidebar {
        float: left;
        margin-right: -100%;
        max-width: 413px;
        position: relative;
        width: 29.4118%;
    }

Như bạn có thể nhìn thấy, nó sẽ di chuyển thanh bên cạnh bên trái với biên độ -100% ở bên phải. Chúng ta sẽ thay đổi nó để trôi nổi bên phải và lề trái như sau:

1
2
3
4
5
6
7
.sidebar {
        float: right;
        margin-left: -100%;
        max-width: 413px;
        position: relative;
        width: 29.4118%;
    }

Lưu thay đổi của bạn và tải lên tệp style.css về trang web của bạn bằng ứng dụng FTP. Bây giờ nếu bạn truy cập trang web của bạn, nó sẽ như thế này:

Đó là bởi vì chúng tôi đã di chuyển thanh bên nhưng chúng tôi không di chuyển vùng nội dung. Hai mươi phần mười lăm sử dụng CSS này để xác định vị trí của vùng nội dung.

1
2
3
4
5
6
.site-content {
        display: block;
        float: left;
        margin-left: 29.4118%;
        width: 70.5882%;
    }

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

1
2
3
4
5
6
.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 xem xét sau khi áp dụng CSS này.

Như bạn thấy, chúng tôi đã chuyển sang cho cả nội dung và các khu vực 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 thứ như vậy khi bạn làm việc với CSS. Nó sẽ mất một số công việc thám tử để tìm ra những gì gây ra điều đó và làm thế nào để điều chỉnh nó.

Sử dụng công cụ ‘Kiểm tra’ của trình duyệt để xem mã nguồn. Trỏ chuột đến khu vực bị ảnh hưởng trong trình duyệt, nhấp chuột phải và chọn Kiểm tra từ trình đơn của trình duyệt.

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

Xem : http://dichvuseosaigon.com/p/muabacklinkchatluonggiare.html

Chúng tôi đã tìm ra rằng CSS này trong stylesheet của chúng tôi cần điều chỉnh.

1
2
3
4
5
6
7
số 8
9
10
11
12
13
14
@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 là 29.4118% và chiều rộng 100% lên phía trên bên trái. Đây là cách chúng tôi sẽ di chuyển nó sang phải.

1
2
3
4
5
6
7
số 8
9
10
11
12
13
14
@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 về máy chủ, đây là cách trang web của chúng tôi nhìn.

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 mã thủ công, sau đó bạn có thể muốn 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 theme WordPress.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *