Thêm Menu Điều hướng Chính Mở rộng vào Chân trang Genesis

Nếu trang web của bạn có một menu điều hướng thả xuống lớn, bạn có thể muốn hiển thị nó ở chân trang, để nó có sẵn ở cả đầu và cuối các trang trên trang web của bạn. Menu chân trang có thể được mở rộng.

Bạn có thể sử dụng một số tiện ích con với các menu ở chân trang của mình, một tiện ích cho mỗi mục menu trên cùng. Nhưng hướng dẫn này sẽ chỉ cho bạn cách sử dụng menu chính hoặc menu chính trong chân trang và tạo kiểu để nó hiển thị với các mục menu phụ bên dưới mỗi mục menu trên cùng, như trong hình trên. Các chi tiết dành cho chủ đề mẫu Genesis (Genesis Sample 2.1.1), nhưng bạn có thể áp dụng điều này cho bất kỳ chủ đề con nào.

OK, vậy hãy bắt đầu. Tất cả mã đều có trong GitHub Gist - Thêm menu điều hướng mở rộng vào Genesis Footer

Bước 1. Tạo một vùng widget lớn trong Footer của bạn

Hầu hết các chủ đề con của Genesis đều có ba widget footer. Điều đầu tiên bạn cần làm là chỉnh sửa functions.php của mình để chỉ tạo một widget chân trang lớn.

Mở functions.php của bạn trong một trình soạn thảo văn bản và tìm phần này:

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

Thay đổi 3 trong dòng này thành 1, vì vậy nó trông giống như sau:

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 1 );

Sau đó làm như sau:

  1. Đi tới Giao diện> Tiện ích
  2. Kéo Tiện ích Menu Tùy chỉnh vào vùng tiện ích Chân trang 1.
  3. Sử dụng trình đơn thả xuống chọn để chọn trình đơn bạn muốn trong chân trang của mình, trong trường hợp này, trình đơn được gọi là “Điều hướng chính”.

Bước 3. Xem mã nguồn của bạn

Bước này chỉ cần thiết, nếu bạn muốn biết mình thực sự sẽ tạo kiểu tóc như thế nào. Nếu bạn nhìn vào nguồn của menu đã thêm của mình, bạn sẽ thấy một cái gì đó như thế này. (Bạn có thể sử dụng công cụ Firebug hoặc Chrome Developer để xem nguồn của mình. Nếu bạn không biết cách thực hiện, bạn có thể tìm kiếm hoặc chỉ cần chuyển sang bước tiếp theo.)

Menu của bạn có thể có một số lớp khác nhau, tùy thuộc vào menu bạn đã thêm. Vì vậy, chúng tôi muốn chọn để tạo kiểu cho các lớp chung cho hầu hết các chủ đề. Trong trường hợp này, bạn cần thêm một số kiểu vào .footer-widgets-1, .menu và .menu-item.

Bước 4. Thêm kiểu vào menu chân trang của bạn

Mở style.css trong trình soạn thảo văn bản. Đi tới cuối phần chính của style.css - ngay phía trên các phần @media. Bắt đầu một phần mới có tên là Footer Menu.

  1. Điều đầu tiên bạn cần làm là tạo toàn bộ chiều rộng .footer-widgets-1.
/* Footer Menu
----------------------------- */

.footer-widgets-1 {
    width: 100%;
}
  1. Tiếp theo, bạn muốn thêm một số stlyes vào các mục menu trên cùng, vì vậy hãy sử dụng .footer-widgets-1 .menu > .menu-item
.footer-widgets-1 .menu > .menu-item {
    border-bottom: 0; /* removes dotted border-bottom */
    display: inline-block;
    float: left;
    font-weight: 700; /* makes top menu items bold */
    margin-left: 2.564102564102564%; /* column grid margin */
    vertical-align: top; /* aligns menu items at the top */
    width: 23.076923076923077%; /* column grid for 4 top menu items */
}

Hầu hết các dòng được bình luận. Đối với ví dụ này, có 4 mục menu trên cùng - Mẫu, Bố cục, Mẫu, Liên hệ. Bạn có thể có nhiều hơn hoặc ít hơn các mục trên menu. Chiều rộng và lề trái được lấy từ phần Lớp cột của chủ đề con của bạn. Những thứ này có thể khác đối với chủ đề con bạn. Ví dụ này đã sử dụng lề trái và chiều rộng cho phần tử .one-4th. Nếu bạn có 6 mục menu, bạn sẽ chọn lề trái và chiều rộng cho phần tử .one-six.

Ví dụ này làm cho các mục menu trên cùng được in đậm; bạn có thể làm cho chúng có kích thước phông chữ lớn hơn, nếu bạn muốn. Chỉ cần thêm font-size: 18px; hoặc font-size: 20px; , tùy thuộc vào kích thước văn bản footer-widget mặc định cho chủ đề con của bạn.

2a. Đã thêm 02/01/16 Sau đó, bạn muốn các menu phụ luôn được mở rộng; bạn có thể làm điều này bằng cách thêm a display: block; vào tất cả các bộ chọn ul.

.footer-widgets-1 .menu .menu-item ul {
	display: block;
	margin-top: 6px;
}
  1. Sau đó, bạn muốn xóa lề trái khỏi mục menu trên cùng đầu tiên.
.footer-widgets-1 .menu > .menu-item:first-child {
    margin-left: 0; /* removes column grid margin on first top menu item */
}
  1. Các mục danh sách được thụt vào trong chủ đề Genesis Sample. Nếu bạn không muốn các mục menu phụ của mình bị thụt vào, hãy thêm vào.
.footer-widgets-1 .widget li li {
    margin: 0; /* removes indentation on sub-menu items */
}
  1. Và sau đó, bạn cần xóa một số kiểu bạn đã thêm cho các mục menu trên cùng khỏi các mục menu phụ. Bạn cũng có thể muốn bao gồm kích thước phông chữ nhỏ hơn.
.footer-widgets-1 .menu .menu-item .menu-item {
    display: block; /* sub-menu items are block */
    font-weight: 300; /* normal weight sub-menu items */
    width: 100%; /* sub-menu items are full width */
}
  1. Bây giờ bạn cần thêm một số kiểu cho các phần @media. Bạn chỉ có thể sao chép và dán mã bên dưới vào cuối style.css của mình hoặc bạn có thể thêm CSS bên trong mỗi phần @media vào cuối phần @media thích hợp trong chủ đề con của bạn. Lưu ý rằng hầu hết các phần @media của bạn sẽ có các điểm ngắt (độ rộng) khác với ví dụ này.
@media only screen and (max-width: 1200px) {

    .footer-widgets-1 {
      padding-left: 30px;
      width: 100%;
    } /* add to bottom of 1200px @media section */

}

@media only screen and (max-width: 800px) {

    .footer-widgets-1 .menu > .menu-item {
      display: block;
      float: none;
      margin-left: 0;
      width: 100%;
    } /* add to bottom of 800px @media section */

}

Lưu ý rằng nếu bạn đang sử dụng chủ đề con từ trước Genesis 2.1.1, bạn sẽ sử dụng
@media only screen and (max-width: 1139px) {
thay thế
@media only screen and (max-width: 1200px) { .
Và bạn sẽ sử dụng
@media only screen and (max-width: 767px) {
thay vì
@media only screen and (max-width: 800px) {

Bây giờ bạn có một menu điều hướng mở rộng đẹp mắt cho chủ đề con Genesis của bạn. Bạn có thể thêm một số kiểu khác, nếu bạn thích.