如何将宽度和高度 html 属性添加到 Wordpress 标题上的徽标？答案

【问题标题】：How can I add width and height html properties to a logo on Wordpress header?如何将宽度和高度 html 属性添加到 Wordpress 标题上的徽标？
【发布时间】：2021-08-23 17:21:12
【问题描述】：

我正在使用 Wordpress（Astra 主题 + 子）构建此网站，但徽标中缺少这些属性（宽度和高度），但我不知道如何添加这些属性。我试图在主题中查看“header.php”文件，但我对 php 一点也不熟悉。这是 header.php 文件中的代码：

<?php
/**
 * The header for Astra Theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Astra
 * @since 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

?><!DOCTYPE html>
<?php astra_html_before(); ?>
<html <?php language_attributes(); ?>>
<head>
<?php astra_head_top(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">

<?php wp_head(); ?>
<?php astra_head_bottom(); ?>
</head>

<body <?php astra_schema_body(); ?> <?php body_class(); ?>>
<?php astra_body_top(); ?>
<?php wp_body_open(); ?>
<div 
<?php
    echo astra_attr(
        'site',
        array(
            'id'    => 'page',
            'class' => 'hfeed site',
        )
    );
    ?>
>
    <a class="skip-link screen-reader-text" href="#content"><?php echo esc_html( astra_default_strings( 'string-header-skip-link', false ) ); ?></a>
    <?php 
    astra_header_before(); 

    astra_header(); 

    astra_header_after();

    astra_content_before(); 
    ?>
    <div id="content" class="site-content">
        <div class="ast-container">
        <?php astra_content_top(); ?>

【问题讨论】：

标签： php html wordpress

【解决方案1】：

如果您尝试调整徽标大小，则无需进入主题编辑选项，您可以通过自定义选项轻松完成。

转到 WordPress 仪表板 > 外观 > 自定义 > 在左侧面板中，转到 Header builder > Logo，您可以在此处轻松调整徽标大小。

查看附图以获得更好的理解。

Astra Theme Logo sizing option

【讨论】：

其实这不是我的问题。问题是徽标图像在 html 上没有明确的宽度和高度，因为它是一个 svg 文件，这会导致我的网站性能出现问题。例如，而不是 <img data-src="site.com/logo.svg" class="custom-logo astra-logo-svg lazyloaded" src="site.com/logo.svg"> 我希望 html 是 <img width="180" height="40" data-src="site.com/logo.svg" class="custom-logo astra-logo-svg lazyloaded" src="site.com/logo.svg">

【解决方案2】：

如果您在带有 Astra 主题的定制器中使用自定义徽标/站点标识元素，则可以使用“get_custom_logo”过滤器来添加维度。

使用此过滤器，您可以更改将在前端呈现的徽标的 HTML 代码。

所以我们可以使用 str_replace 来添加我们的宽度和高度参数。

使用 $width 和 $height 变量，您可以指定徽标的宽度和高度：

add_filter( 'get_custom_logo', function ( $html ) {
$width = '151';
$height = '49';

return str_replace(
    '<img src=',
    '<img width="' . $width . '" height="' . $height . '" src=',
    $html
 );
} );

你可以把这段代码放在子主题的functions.php中。自己使用 Astra 主题和 SVG 徽标对此进行了测试。

如果它不起作用，您可能需要调整 str_replace 函数的“指针”，以针对您想要替换徽标的特定 HTML 代码的精确 HTML 代码行。

【讨论】：