Logo chính giữa trong Kickstart Pro

Trong GenesisWP Slack, người dùng muốn biết cách biểu trưng (liên kết đến URL trang web) có thể được căn giữa phía trên điều hướng trong Kickstart Pro.

Trong hướng dẫn này, chúng tôi sẽ thiết lập logo chủ đề và tùy chỉnh CSS trong Kickstart Pro (v1.3.6 tại thời điểm viết bài này).

Bước 1

Thêm phần sau vào Kickstart Pro’s :functions.php

// Add support for custom logo.
add_theme_support( 'custom-logo', array(
    'width'       => 230,
    'height'      => 106,
    'flex-width' => true,
    'flex-height' => true,
) );

add_filter( 'genesis_seo_title', 'custom_header_inline_logo', 10, 3 );
/**
 * Add an image inline in the site title element for the logo
 *
 * @param string $title Current markup of title.
 * @param string $inside Markup inside the title.
 * @param string $wrap Wrapping element for the title.
 *
 * @author @_AlphaBlossom
 * @author @_neilgee
 * @author @_neilgee
 * @author @_JiveDig
 * @author @_srikat
 */
function custom_header_inline_logo( $title, $inside, $wrap ) {
    // If the custom logo function and custom logo exist, set the logo image element inside the wrapping tags.
    if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) {
        $inside = sprintf( '<span class="screen-reader-text">%s</span>%s', esc_html( get_bloginfo( 'name' ) ), get_custom_logo() );
    } else {
        // If no custom logo, wrap around the site name.
        $inside = sprintf( '<a href="%s">%s</a>', trailingslashit( home_url() ), esc_html( get_bloginfo( 'name' ) ) );
    }

    // Determine which wrapping tags to use.
    $wrap = genesis_is_root_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';

    // A little fallback, in case a SEO plugin is active.
    $wrap = genesis_is_root_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap;

    // Wrap homepage site title in p tags if static front page.
    $wrap = is_front_page() && ! is_home() ? 'p' : $wrap;

    // And finally, $wrap in h1 if HTML5 & semantic headings enabled.
    $wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap;

    // Build the title.
    $title = genesis_markup( array(
        'open'    => sprintf( "<{$wrap} %s>", genesis_attr( 'site-title' ) ),
        'close'   => "</{$wrap}>",
        'content' => $inside,
        'context' => 'site-title',
        'echo'    => false,
        'params'  => array(
            'wrap' => $wrap,
        ),
    ) );

    return $title;
}

add_filter( 'genesis_attr_site-description', 'custom_add_site_description_class' );
/**
 * Add class for screen readers to site description.
 * This will keep the site description markup but will not have any visual presence on the page
 * This runs if there is a logo image set in the Customizer.
 *
 * @param array $attributes Current attributes.
 *
 * @author @_neilgee
 * @author @_srikat
 */
function custom_add_site_description_class( $attributes ) {
    if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) {
        $attributes['class'] .= ' screen-reader-text';
    }

    return $attributes;
}

Đặt chiều rộng và chiều cao trong lệnh gọi hàm hỗ trợ thêm chủ đề cho biểu trưng tùy chỉnh theo kích thước biểu trưng của bạn.

Bước 2

Chỉnh sửa Kickstart Pro’s .style.css

a) Thay thế

a img {
    margin-bottom: -4px;
}

với

a img {
    /*margin-bottom: -4px;*/
    vertical-align: top;
}

b) Thay đổi

.site-header .wrap {
    max-width: 970px;
    padding: 40px 0;
}

đến

.site-header .wrap {
    max-width: 970px;
    padding: 40px 0;
    text-align: center;
}

c) Thay đổi

.title-area {
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
}

đến

.title-area {
    /*float: left;*/
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
}

d) Thay đổi

.site-title {
    background-color: #f26c4f;
    float: left;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 8px;
    text-align: center;
    text-transform: uppercase;
}

.site-title a {
    color: #fff;
    display: block;
    padding: 12px 22px;
}

.site-title a:hover {
    background-color: #efefef;
    color: #999;
}

đến

.site-title {
    /*background-color: #f26c4f;
    float: left;*/
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 8px;
    text-align: center;
    text-transform: uppercase;
}

.site-title a {
    color: #fff;
    display: block;
    /*padding: 12px 22px;*/
}

/*.site-title a:hover {
    background-color: #efefef;
    color: #999;
}*/

e) Thay đổi

.header-image .site-header .wrap {
    background: url(images/logo.png) no-repeat left center;
    padding: 0;
}

đến

.header-image .site-header .wrap {
    /*background: url(images/logo.png) no-repeat left center;*/
    padding: 0;
}

f) Nhận xét

.site-header .widget-area {
    float: right;
    text-align: right;
}

g) Thay đổi

.home-top-slider {
    margin-bottom: -124px;
    overflow: hidden;
    position: relative;
    top: -124px;
}

đến

.home-top-slider {
    /*margin-bottom: -124px;*/
    overflow: hidden;
    position: relative;
    /*top: -124px;*/
}

h) Trong truy vấn phương tiện 1023px, hãy thay đổi

.before-contact,
    .before-content,
    .home-top-slider {
        margin-bottom: -84px;
        position: relative;
        top: -84px;
    }

    .header-image .before-contact,
    .header-image .before-content,
    .header-image .home-top-slider {
        margin-bottom: -116px;
        top: -116px;
    }

đến

    .before-contact,
    .before-content/*,
    .home-top-slider*/ {
        margin-bottom: -84px;
        position: relative;
        top: -84px;
    }

    .header-image .before-contact,
    .header-image .before-content/*,
    .header-image .home-top-slider*/ {
        margin-bottom: -116px;
        top: -116px;
    }

Bước 3

Đi tới Giao diện> Tùy chỉnh> Nhận dạng trang web.

Nhấp vào nút “Chọn biểu trưng”, tải lên / chọn hình ảnh biểu trưng của bạn, nhấp vào nút “Bỏ qua Cắt xén” và cuối cùng là “Lưu & Xuất bản”.