<?php
// 定义一个函数,在前端插入浮球的 CSS 和 JS
function add_floating_home_button() {
// 获取 WordPress 首页 URL
$home_url = esc_url(home_url('/'));
?>
<style>
.floating-home-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
background-color: #0073aa; /* WordPress 蓝色 */
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
z-index: 1000000; /* 高 z-index,确保覆盖 iframe */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: transform 0.2s, background-color 0.2s;
}
.floating-home-button:hover {
background-color: #005177; /* 悬停时颜色变深 */
transform: scale(1.1); /* 轻微放大效果 */
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 创建浮球元素
var floatButton = document.createElement('div');
floatButton.className = 'floating-home-button';
floatButton.innerHTML = '🏠';
// 添加点击事件,跳转到首页
floatButton.addEventListener('click', function() {
window.location.href = '<?php echo $home_url; ?>';
});
// 插入到页面
document.body.appendChild(floatButton);
});
</script>
<?php
}
// 将脚本和样式注入到前端
add_action('wp_footer', 'add_floating_home_button');
?>