本文最后更新于270 天前,其中的信息可能已经过时,如有错误请发送邮件到[email protected]
将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后面的内容不能有空格
写的很详细具体,学习到了,多谢博主的分享!⌇●﹏●⌇