Những cải tiến trong Genesis Sample 2.6.0

Genesis Sample 2.6.0 được phát hành gần đây đã gần đạt đến mức hoàn hảo là chủ đề con Genesis khởi động lý tưởng của tôi.

Điều đó nói rằng, vẫn còn một số thứ có thể được cải thiện theo ý kiến ​​của tôi và tôi liệt kê các thay đổi và sửa chữa chủ đề bên dưới.

Hầu hết những điều này hy vọng sẽ được StudioPress khắc phục trong bản cập nhật tiếp theo.

Các mục menu nhấp nháy

Từ 959px trở xuống trên máy tính để bàn, tức là khi các mục menu điều hướng thu gọn vào menu hamburger, việc tải lại trang sẽ / có thể hiển thị một đoạn ngắn các mục menu bên dưới tiêu đề trang web trước khi biểu tượng hamburger xuất hiện.

Điều này có thể được khắc phục bằng cách cài đặt plugin Genesis JS / No JS của Gary Jones và thêm CSS này:

.js nav {
    display: none;
}

@media only screen and (min-width: 960px) {

    .js nav {
        display: block;
    }

}

Tiêu đề nổi

.title-area và và lơ lửng bên trái và bên phải tương ứng ..nav-primary .site-header > .wrap

Chúng có thể được gỡ bỏ và Flexbox được sử dụng cho 960px trở lên như vậy:

@media only screen and (min-width: 960px) {

    .site-header .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .title-area {
        float: none;
    }

    .nav-primary {
        float: none;
        margin-left: auto;
    }

}

Điều này sẽ có thêm lợi ích là giữ cho hai phần tử được căn giữa theo chiều dọc khi JS tắt trong trình duyệt.

tức là, điều này sẽ khắc phục:

Bọc điều hướng chính

Tôi là một fan hâm mộ của đánh dấu HTML ít nhất có thể (đó là lý do tại sao tôi không thích các trình tạo trang).

Như vậy, chúng ta có thể loại bỏ 's (giả sử rằng bạn muốn điều hướng chính nằm ở bên phải trong tiêu đề chứ không phải bên dưới như trong phiên bản chủ đề cũ hơn) bằng cách thêm điều này vào functions.php:.nav-primary .wrap

// Remove `.menu-primary` from structural wrap.
add_theme_support( 'genesis-structural-wraps', array( 'header', 'menu-secondary', 'footer-widgets', 'footer' ) );

Khi JS bị tắt

Menu con sẽ không xuất hiện trong menu di động khi Javascript bị tắt.

Điều này có thể được khắc phục bằng cách thêm vào .display: block .genesis-nav-menu .menu-item:hover > .sub-menu

.genesis-nav-menu .menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
    display: block;
}

và để sửa chiều rộng của menu con, hãy thay đổi (bên trong truy vấn phương tiện chiều rộng 960 phút)

.genesis-responsive-menu .genesis-nav-menu .sub-menu,
.genesis-responsive-menu .genesis-nav-menu .sub-menu a {
    width: 180px;
}

đến

.genesis-nav-menu .sub-menu,
.genesis-nav-menu .sub-menu a {
    width: 180px;
}

Không có bố cục thanh bên

960px trở lên, sẽ có chiều rộng là 65%. Điều này nên được đặt thành 100% cho các trang sử dụng bố cục nội dung đầy đủ..content

Bên trong truy vấn phương tiện có chiều rộng tối thiểu 960 bên dưới

.content {
    float: left;
    width: 65%;
}

cộng

.full-width-content .content {
    float: none;
    width: 100%;
}