时间戳

首页 > 解决方案 > 如何将宽度和高度 html 属性添加到 Wordpress 标题上的徽标？

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

问题描述

我正在使用 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(); ?>

标签： phphtmlwordpress

解决方案

如果您在定制器中使用自定义徽标/站点标识元素和 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 函数的“needle”以定位您想要替换徽标的特定 HTML 代码的精确 HTML 代码行。

推荐阅读