本文最后更新于 391 天前,其中的信息可能已经过时,如有错误请发送邮件到 me@norc.cn
将 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"> </span> <?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span data-text="' . get_option('argon_banner_subtitle') . '" class="banner-subtitle d-block"> </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"> <?php endif; ?> </span> <?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span data-text="' . get_option('argon_banner_subtitle') . '" class="banner-subtitle d-block"> </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"> </span> <?php endif; ?> </span> <?php echo get_option('argon_banner_subtitle') == '' ? '' : '<span data-text="' . get_option('argon_banner_subtitle') . '" class="banner-subtitle d-block"> '; ?> </div> <?php }?> </div>
在主题设置的 banner 标题中填入地址,例如:
src=/Notbody_delay+2.svg alt=Not-Body //alt后面的内容不能有空格
写的很详细具体,学习到了,多谢博主的分享!⌇●﹏●⌇