将Argon主题的Banner替换为Svg图片
本文最后更新于270 天前,其中的信息可能已经过时,如有错误请发送邮件到[email protected]

将Banner替换为Svg图片

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

准备Svg图片

并非正文 - Notbody delay+2

修改主题文件

打开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后面的内容不能有空格

评论

  1. Windows Chrome
    安徽省马鞍山市 移动
    9 月前
    2024-3-09 1:42:00

    写的很详细具体,学习到了,多谢博主的分享!⌇●﹏●⌇

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇