将Banner替换为Svg图片

Argon主题默认的Banner样式为文字，无法添加图片路径，比较呆板一些，虽然可以通过CSS来改变文字样式。

准备Svg图片

修改主题文件

打开Argon主题目录（路径：./wp-content/themes/argon），将header.php文件复制一份，避免出错。

打开header.php文件，搜索“banner_container”，定位到以下位置：

<div id="banner_container" class="banner-container container text-center">
	<?php if ($enable_banner_title_typing_effect != "true"){?>
		<div class="banner-title text-white"><span class="banner-title-inner"><?php echo apply_filters('argon_banner_title_html', $banner_title); ?></span>
		<?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span class="banner-subtitle d-block">' . get_option('argon_banner_subtitle') . '</span>'; ?></div>
	<?php } else {?>
		<div class="banner-title text-white" data-interval="<?php echo get_option('argon_banner_typing_effect_interval', 100); ?>"><span data-text="<?php echo $banner_title; ?>" class="banner-title-inner">&nbsp;</span>
		<?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span data-text="' . get_option('argon_banner_subtitle') . '" class="banner-subtitle d-block">&nbsp;</span>'; ?></div>
	<?php }?>
</div>

方法一

将上述代码修改为以下内容

<div id="banner_container" class="banner-container container text-center">
	<?php if ($enable_banner_title_typing_effect != "true"){?>
		<div class="banner-title text-white">
		<span class="banner-title-inner">
		<?php if (strpos($banner_title, '/') !== false) : ?>
			<!-- 标题中含有 / 标签 -->
			<?php echo '<img src=' . $banner_title  . ' alt="Not - Body" height="86" >';
		else : ?>
			<!-- 标题标签为空 或 不含 / 标签 -->
			<?php echo apply_filters('argon_banner_title_html', $banner_title);
		endif; ?>
		</span>
		<!-- 副标题 -->
		<?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span class="banner-subtitle d-block">' . get_option('argon_banner_subtitle') . '</span>'; ?>
		</div>
	<?php } else {?>
		<div class="banner-title text-white" data-interval="<?php echo get_option('argon_banner_typing_effect_interval', 100); ?>">
		<?php if (strpos($banner_title, '/') !== false) : ?>
			<!-- 标题中含有 / 标签 -->
			<span data-text="" class="banner-title-inner"><img src="<?php echo esc_url(site_url($banner_title)) .'?'. time(); ?>" alt="Not - Body" height="86" />
		<?php else : ?>
			<!-- 标题标签为空 或 不含 / 标签 -->
			<span data-text="<?php echo $banner_title; ?>" class="banner-title-inner">&nbsp;
		<?php endif; ?>
		</span>
		<?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span data-text="' . get_option('argon_banner_subtitle') . '" class="banner-subtitle d-block">&nbsp;</span>'; ?>
		</div>
	<?php }?>
</div>

在banner中填入链接即可，比如：

/Notbody_delay+2b.svg

方法二

将上述定位到的代码修改为以下内容

<div id="banner_container" class="banner-container container text-center">
	<?php if ($enable_banner_title_typing_effect != "true"){?>
		<div class="banner-title text-white">
		<span class="banner-title-inner">
        	<?php if (strpos($banner_title, 'src=') !== false) : ?>
			<!-- 标题中含有 src= 标签 -->
			<?php echo '<img ' . $banner_title . ' height="86" >';
		else : ?>
			<!-- 标题标签为空 或 不含 src= 标签 -->
			<?php echo apply_filters('argon_banner_title_html', $banner_title);
		endif; ?>
		</span>
		<!-- 副标题 -->
		<?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span class="banner-subtitle d-block">' . get_option('argon_banner_subtitle') . '</span>'; ?>
		</div>
	<?php } else {?>
		<div class="banner-title text-white" data-interval="<?php echo get_option('argon_banner_typing_effect_interval', 100); ?>">
		<?php if (strpos($banner_title, 'src=') !== false) : ?>
			<!-- 标题中含有 src= 标签 -->
			<span data-text="" class="banner-title-inner"><img <?php echo esc_url(site_url($banner_title)); ?>  height="86" />
		<?php else : ?>
			<!-- 标题标签为空 或 不含 src= 标签 -->
			<span data-text="<?php echo $banner_title; ?>" class="banner-title-inner">&nbsp;</span>
		<?php endif; ?>
		</span>
		<?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span data-text="' . get_option('argon_banner_subtitle') . '" class="banner-subtitle d-block">&nbsp;'; ?>
		</div>
	<?php }?>
</div>

在主题设置的banner标题中填入地址，例如：

src=/Notbody_delay+2.svg alt=Not-Body
//alt后面的内容不能有空格