Cách thiết lập logo SVG trong Genesis

Bạn đang tìm cách sử dụng tệp svg vectơ sắc nét làm biểu trưng cho trang web của mình thay vì png tiêu chuẩn? Có hai cách để thiết lập biểu trưng SVG trong trang web WordPress do Genesis hỗ trợ:

  • Làm nền
  • Dưới dạng hình ảnh nội tuyến

Điều kiện tiên quyết

Đối với một trong hai phương pháp, trước tiên, hãy cài đặt và kích hoạt plugin Hỗ trợ SVG.

Sau đó, chuyển đến cài đặt của plugin, bật chế độ nâng cao, giới hạn nó cho quản trị viên và đặt JS được xuất ở chân trang.

Biểu trưng SVG nền

Bước 1

Định vị mã tương tự như

// Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 600,
    'height'          => 140,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
) );

trong functions.php của chủ đề con của bạn.

Thêm để những điều trên trở thành:'flex-width' => true

// Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 600,
    'height'          => 140,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-width'     => true,
    'flex-height'     => true,
) );

Điều này là để thêm nút “Bỏ qua cắt xén” trong quá trình tải lên hình ảnh tệp svg để bỏ qua lỗi.There has been an error cropping your image.

Tùy chọn: Nếu bạn muốn cung cấp hình ảnh tiêu đề được đề xuất, hãy tải tệp svg lên thư mục hình ảnh của chủ đề con và thêm mã này vào functions.php của chủ đề con:

// https://codex.wordpress.org/Function_Reference/register_default_headers.
register_default_headers( array(
    'svg-logo' => array(
    'url'   => '%2$s/images/logo.svg',
    'thumbnail_url' => '%2$s/images/logo.svg',
    'description'   => __( 'SVG Logo', 'CHILD_TEXT_DOMAIN' ),
    ),
));

Thay thế ở trên bằng tên của tệp svg tiêu đề (logo) của bạn.logo.svg

Bước 2

Trong quản trị viên WordPress, đi tới Giao diện> Tiêu đề.

Nếu bạn đã làm theo bước tùy chọn ở trên, chỉ cần nhấp vào hình ảnh được đề xuất và nhấn nút “Lưu & Xuất bản”.

Nếu bạn chưa làm theo bước tùy chọn, hãy nhấp vào “Thêm hình ảnh mới”, tải lên hoặc chọn tệp hình ảnh svg của bạn, nhấp vào “Chọn và cắt”, sau đó “Bỏ qua cắt” và cuối cùng là “Lưu & xuất bản”.

Biểu trưng SVG nội tuyến

Bước 1

Làm theo Biểu trưng Chủ đề trong hướng dẫn Genesis.

Bước 2

Trong functions.php của chủ đề con, hãy thêm

add_filter( 'get_custom_logo', 'sk_custom_logo' );
/**
 * Filter the output of logo to add a custom class for the img element.
 *
 * @return string Custom logo markup.
 */
function sk_custom_logo() {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( home_url( '/' ) ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo style-svg',
                'itemprop' => 'logo',
            ) )
        );
    return $html;
}

Bước 3

Trong style.css của chủ đề con, hãy đặt chiều rộng và chiều cao của kích thước hiển thị biểu trưng mong muốn của bạn trong bộ chọn..custom-logo

Bán tại.:

.custom-logo {
    vertical-align: top;
    width: 300px;
    height: 70px;
}