将Argon主题的Banner替换为Svg图片
本文最后更新于 391 天前,其中的信息可能已经过时,如有错误请发送邮件到 me@norc.cn

将 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
    安徽省马鞍山市 移动
    2024-3-8
    2024-3-09 1:42:00

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

发送评论 编辑评论


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