Code chỉnh giao diện ~ Tài liệu học thiết kế web

1. Xử lý menu chính

Menu chính sẽ chứa thông tin các trang hoặc chuyên mục quan trọng nhất, trong bài viết những yếu tố tạo nên sự thành công khi làm SEO với WordPress thì Sáu cũng đã nêu khái niệm cũng như cách bố trí giữa chuyên mục, bài viết và trang như thế nào cho hợp lý. Đối với các tag thì bạn không nên để vào menu này.

Bây giờ bạn mở tập tin header.php lên, sau đó tìm kiếm tới đoạn này:

<!-- nav -->

<nav class="nav" role="navigation">

        <?php html5blank_nav(); ?>

</nav>

<!-- /nav -->

Đây là đoạn code hiển thị menu của giao diện đã được build sẵn. Bạn cắt đoạn code trên và cho ra ngoài thẻ div với class là wrapper, và vị trí là nằm phía trước wrapper nhé bạn, mục đích của việc này là đưa menu lên trên cùng và cho nó rộng toàn màn hình:

<!-- nav -->

<nav class="nav" role="navigation">

        <?php html5blank_nav(); ?>

</nav>

<!-- /nav -->

<!-- wrapper -->

<div class="wrapper">

Bây giờ thì menu đã nằm lên trên cùng của trang, tuy nhiên nó chưa được canh giữa cho đều với nội dung bên dưới, bạn tiếp tục mở phần code chỗ lúc nãy lên và thêm vào một thẻ div với class là page-width:

<!-- nav -->

<nav class="nav" role="navigation">

<div class="page-width">

        <?php html5blank_nav(); ?>

</div>

</nav>

<!-- /nav -->

Sau khi hoàn thành xong thì nhớ lưu lại, nhưng menu của bạn vẫn chưa thật sự nằm ra giữa, không phải lo gì hết, tiếp tục mở tập tin custom-style.css trong thư mục con của bạn lên và tìm tới lớp .wrapper:

.wrapper {

    width: 1020px; /* Do rong cua trang la 1020px */

}

Sửa đoạn css ở trên thành đoạn như bên dưới, thêm lớp .page-width vào chung với lớp .wrapper để có cùng độ rộng của trang.

.wrapper, .page-width {

    width: 1020px; /* Do rong cua trang la 1020px */

}

Vẫn chưa thật sự có tác dụng, menu của bạn vẫn chưa được canh giữa, đó là vì bạn còn thiếu thuộc tính margin cho khung này, tiếp tục thêm dòng css sau vào dưới mục vừa sửa bên trên.

.wrapper, .page-width {

    width: 1020px; /* Do rong cua trang la 1020px */

}

.page-width {

        margin: 0 auto;

}

Dòng css trên nghĩa là bạn sẽ canh cho khung page-width cách phía trên với phía dưới là 0, đối với 2 bên trái và phải sẽ canh tự động, và khung của bạn sẽ nằm ngay ở giữa màn hình thẳng hàng với các mục bên dưới sau khi bạn nhấn f5 để tải lại trang.

Đưa menu lên trên cùng và canh giữa màn hình

Tiếp tục, bây giờ bạn đăng nhập vào bảng điều khiển và ghé vào mục quản lý Menus của giao diện tại Dashboard -> Appearance -> Menus

Bạn tạo một menu với tên là Top Menu và kéo một vài trang hoặc chuyên mục vào đấy, và làm cho menu phân thành 2 cấp như hình mình minh họa bên dưới nhé.

Tin tức liên quan:

Đào tạo thiết kế web

Đào tạo lập trình php

Học quản trị web tại Hà Nội