第一种:直接修改模板文件添加
第一步、添加HTML代码
将下面的HTML代码添加到主题页脚模板footer.php,</body>标签的上面。
<!– 梅花树枝 –> <div class=“meiha”></div>
如果只想在首页显示,可以用下面的判断语句把HTML代码包裹起来:
<?php if (is_home()) { ?> <!-- 代码放这里 --> <?php } ?>
第二步、添加样式
将样式代码添加到WP后台 → 外观 → 自定义 → 额外CSS 中,点击“发布”即可。也可以将样式代码直接加到主题样式文件style.css的最后。
/** 梅花树 **/
.meiha {
position: fixed;
top: 0;
right: 0;
z-index: 999;
width: 350px;/** PNG图宽度 **/
height: 231px;/** PNG图高度 **/
pointer-events: none;
background: url('https://momeis.net/wp-content/themes/b2child/hua/img/mohua.png');
}
/** 梅花翻转动画 **/
.snowfall-flakes {
pointer-events: none;
animation: sakura 1s linear 0s infinite;
}
.snowfall-flakes {
animation: sakura 1s linear 0s infinite;
}
.night .snowfall-flakes {
background: transparent !important;
}
@keyframes sakura {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}
25% {
transform: rotate3d(1, 1, 0, 60deg);
}
50% {
transform: rotate3d(1, 1, 0, 0deg);
}
75% {
transform: rotate3d(1, 0, 0, 60deg);
}
100% {
transform: rotate3d(1, 0, 0, 0deg);
}
}
<script type="text/javascript" src="https://momeis.net/wp-content/themes/b2child/hua/snowfall.js"></script>
第二种方法:封装成hua.php 然后引入到footer.php
这里不搞下载了,需要的朋友直接复制下边的代码,然后在主题根目录新建一个 hua的目录,再里面新建一个hua.php 文件,然后把代码复制进去就可以的。
<?php if ( ! defined( 'ABSPATH' ) ) { exit; } // 封装代码 function meihua() { ?> <!-- 加载snowfall.js --> <script type="text/javascript" src="https://momeis.net/wp-content/themes/b2child/hua/snowfall.js"></script> <!-- 梅花树枝,可以删除 --> <div class="meiha"></div> <!-- 配套样式,可以替换其中的图片地址 --> <style> /** 梅花树 **/ .meiha { position: fixed; top: 0; right: 0; z-index: 999; width: 350px;/** PNG图宽度 **/ height: 231px;/** PNG图高度 **/ pointer-events: none; background: url('https://momeis.net/wp-content/themes/b2child/hua/img/mohua.png'); } /** 梅花翻转动画 **/ .snowfall-flakes { pointer-events: none; animation: sakura 1s linear 0s infinite; } .snowfall-flakes { animation: sakura 1s linear 0s infinite; } .night .snowfall-flakes { background: transparent !important; } @keyframes sakura { 0% { transform: rotate3d(0, 0, 0, 0deg); } 25% { transform: rotate3d(1, 1, 0, 60deg); } 50% { transform: rotate3d(1, 1, 0, 0deg); } 75% { transform: rotate3d(1, 0, 0, 60deg); } 100% { transform: rotate3d(1, 0, 0, 0deg); } } </style> <?php } /** 将代码绑定到页脚 **/ add_action( 'wp_footer', 'meihua', 100 );
使用方法:
第一步,按上面说的新建的hua.php文件放到当前主题根目录中的hua目录里。
第二步,打开当前主题页脚模板footer.php,在<?php wp_footer(); ?>上面添加:
<?php require get_template_directory() . '/hua/hua.php'; ?>
添加判断函数
如果只想在首页显示,可以用下面的判断语句把上面的代码包裹起来:
<?php if (is_home()) { ?>
<!-- 代码放这里 -->
<?php } ?>
手机移动端不显示
<?php if (!wp_is_mobile()) { ?>
<?php require get_template_directory() . '/hua/hua.php'; ?>
<?php } ?>
提示:加显示判断函数,代码必须添加在页脚模板<?php wp_footer(); ?>函数上面,否则无效。