上图
上代码
【将代码直接到themes/zibll/footer.php文件全选覆盖就行】
本文隐藏内容
本文隐藏内容
<?php
/**
*
* @link https://www.yulll.com/
*
* @package 宇凌云界
*/
$company_name = ‘YourCompany’; // 公司名称
$company_description = ‘我们是一家专注于创新和品质的企业，致力于为客户提供最优质的产品和服务。’; // 公司描述
// 二维码配置
$wechat_qr = ‘https://picsum.photos/seed/wechat-qr/150/150.jpg’; // 微信二维码图片URL
$qq_qr = ‘https://picsum.photos/seed/qq-qr/150/150.jpg’; // QQ二维码图片URL
$other_qr = ‘https://picsum.photos/seed/other-qr/150/150.jpg’; // 其他二维码图片URL
// 二维码说明文字
$wechat_text = ‘扫码添加微信’; // 微信二维码说明
$qq_text = ‘扫码添加QQ’; // QQ二维码说明
$other_text = ‘其他联系方式’; // 其他二维码说明
// 视差区域配置
$footer_bg_image = ‘https://picsum.photos/seed/footer-bg/1920/600.jpg’; // 背景图片URL
$footer_parallax_title = ‘联系我们’; // 视差区域标题
$footer_parallax_subtitle = ‘让我们一起创造美好的未来’; // 视差区域副标题
?>
</div><!– #content –>
<footer id=“colophon” class=“site-footer”>
<!– 视差图片区域 —>
<div class=“footer-parallax-section”>
<div class=“footer-parallax-image”>
<div class=“footer-image-overlay”></div>
<div class=“footer-parallax-content”>
<div class=“footer-cartoon-icon”>
<svg width=“80” height=“80” viewBox=“0 0 80 80” fill=“none”>
<circle cx=“40” cy=“40” r=“35” fill=“#FF6B6B” opacity=“0.1”/>
<path d=“M25 35C25 35 30 25 40 25C50 25 55 35 55 35” stroke=“#FF6B6B” stroke-width=“3” stroke-linecap=“round”/>
<circle cx=“30” cy=“40” r=“3” fill=“#333”/>
<circle cx=“50” cy=“40” r=“3” fill=“#333”/>
<path d=“M35 50C35 50 37.5 52 40 52C42.5 52 45 50 45 50” stroke=“#333” stroke-width=“2” stroke-linecap=“round”/>
</svg>
</div>
<h3 class=“footer-parallax-title”><?php echo $footer_parallax_title; ?></h3>
<p class=“footer-parallax-subtitle”><?php echo $footer_parallax_subtitle; ?></p>
<div class=“footer-contact-buttons”>
<a href=“#” class=“footer-btn footer-btn-primary”>
<svg width=“20” height=“20” viewBox=“0 0 20 20” fill=“currentColor”>
<path d=“M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z”/>
<path d=“M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z”/>
</svg>
发送邮件
</a>
<a href=“#” class=“footer-btn footer-btn-secondary”>
<svg width=“20” height=“20” viewBox=“0 0 20 20” fill=“currentColor”>
<path d=“M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z”/>
</svg>
立即致电
</a>
</div>
</div>
</div>
</div>
<!– 主要内容区域 —>
<div class=“footer-main”>
<div class=“container”>
<div class=“footer-grid”>
<!– 公司信息 —>
<div class=“footer-column footer-company”>
<div class=“footer-logo”>
<span class=“footer-logo-text”><?php echo $company_name; ?></span>
</div>
<p class=“footer-description”>
<?php echo $company_description; ?>
</p>
</div>
<!– 快速链接 —>
<div class=“footer-column quick-links-column”>
<h4 class=“footer-title”>快速链接</h4>
<ul class=“footer-links”>
<li><a href=“#”>关于我们</a></li>
<li><a href=“#”>产品服务</a></li>
<li><a href=“#”>成功案例</a></li>
<li><a href=“#”>新闻动态</a></li>
<li><a href=“#”>联系我们</a></li>
</ul>
</div>
<!– 服务项目 —>
<div class=“footer-column service-column”>
<h4 class=“footer-title”>服务项目</h4>
<ul class=“footer-links”>
<li><a href=“#”>网站设计</a></li>
<li><a href=“#”>移动开发</a></li>
<li><a href=“#”>品牌策划</a></li>
<li><a href=“#”>数字营销</a></li>
<li><a href=“#”>技术支持</a></li>
</ul>
</div>
<!– 联系信息 —>
<div class=“footer-column”>
<h4 class=“footer-title”>联系信息</h4>
<div class=“footer-contact-info”>
<div class=“contact-item”>
<div class=“contact-text-wrapper”>
<span class=“contact-text”>微信</span>
<div class=“qr-popup”>
<img src=“<?php echo $wechat_qr; ?>” alt=“微信二维码” class=“qr-code”>
<span class=“qr-text”><?php echo $wechat_text; ?></span>
</div>
</div>
</div>
<div class=“contact-item”>
<div class=“contact-text-wrapper”>
<span class=“contact-text”>QQ</span>
<div class=“qr-popup”>
<img src=“<?php echo $qq_qr; ?>” alt=“QQ二维码” class=“qr-code”>
<span class=“qr-text”><?php echo $qq_text; ?></span>
</div>
</div>
</div>
<div class=“contact-item”>
<div class=“contact-text-wrapper”>
<span class=“contact-text”>其他</span>
<div class=“qr-popup”>
<img src=“<?php echo $other_qr; ?>” alt=“其他二维码” class=“qr-code”>
<span class=“qr-text”><?php echo $other_text; ?></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!– 版权信息 —>
<div class=“footer-bottom”>
<div class=“container”>
<div class=“footer-bottom-content”>
<div class=“footer-copyright”>
<p>© <?php echo date(‘Y’); ?> <?php bloginfo(‘name’); ?>. 保留所有权利。</p>
</div>
<div class=“footer-bottom-links”>
<a href=“#”>隐私政策</a>
<a href=“#”>服务条款</a>
<a href=“#”>网站地图</a>
</div>
</div>
</div>
</div>
</footer>
<!– 返回顶部按钮 —>
<button id=“back-to-top” class=“back-to-top” aria-label=“返回顶部”>
<svg width=“20” height=“20” viewBox=“0 0 20 20” fill=“currentColor”>
<path d=“M10 2l8 8h-5v8h-6v-8H2l8-8z”/>
</svg>
</button>
</div><!– #page –>
<?php wp_footer(); ?>
</body>
</html>
<style>
/* 底部样式 */
.site-footer {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
color: white;
position: relative;
overflow: hidden;
}
/* 视差图片区域 */
.footer-parallax-section {
position: relative;
height: 400px;
overflow: hidden;
}
.footer-parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-image: url(‘<?php echo $footer_bg_image; ?>’);
background-size: cover;
background-position: center;
background-attachment: fixed;
will-change: transform;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.footer-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(74, 85, 104, 0.8) 0%, rgba(45, 55, 72, 0.8) 100%);
}
.footer-parallax-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
}
.footer-cartoon-icon {
margin-bottom: 1.5rem;
}
.footer-parallax-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.footer-parallax-subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
color: white;
}
.footer-contact-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.footer-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.footer-btn-primary {
background: white;
color: #4a5568;
}
.footer-btn-primary:hover {
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.footer-btn-secondary {
background: transparent;
color: white;
border-color: white;
}
.footer-btn-secondary:hover {
background: white;
color: #4a5568;
}
/* 主要内容区域 */
.footer-main {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
padding: 4rem 0;
position: relative;
}
.footer-main::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
}
.footer-column {
position: relative;
}
.footer-description {
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
}
.footer-social {
display: flex;
gap: 1rem;
}
.social-link {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.social-link:hover {
background: white;
color: #4a5568;
transform: translateY(-3px);
}
.footer-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: white;
position: relative;
padding-bottom: 0.5rem;
}
.footer-title::after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 3px;
background: white;
border-radius: 2px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
position: relative;
}
.footer-links a::before {
content: ‘→’;
margin-right: 0.5rem;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.footer-links a:hover {
color: white;
transform: translateX(5px);
}
.footer-links a:hover::before {
opacity: 1;
transform: translateX(0);
}
.footer-contact-info {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 1.5rem;
flex-wrap: wrap;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255,255,255,0.8);
}
.contact-text {
font-size: 16px;
font-weight: 600;
color: white;
cursor: pointer;
padding: 8px 16px;
border-radius: 8px;
background: rgba(255,255,255,0.1);
transition: all 0.3s ease;
display: inline-block;
}
.contact-text:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}
.contact-text-wrapper {
position: relative;
display: inline-block;
}
.qr-popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 12px;
padding: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
margin-bottom: 10px;
min-width: 180px;
text-align: center;
}
.qr-popup::after {
content: ”;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: white;
}
.contact-text-wrapper:hover .qr-popup {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}
.qr-code {
width: 150px;
height: 150px;
border-radius: 8px;
margin-bottom: 8px;
display: block;
}
.qr-text {
color: #4a5568;
font-size: 14px;
font-weight: 600;
display: block;
}
/* 底部版权区域 */
.footer-bottom {
background: rgba(0,0,0,0.2);
padding: 1.5rem 0;
backdrop-filter: blur(10px);
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copyright p {
margin: 0;
opacity: 0.8;
}
.footer-bottom-links {
display: flex;
gap: 2rem;
}
.footer-bottom-links a {
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-bottom-links a:hover {
color: white;
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background: white;
color: #4a5568;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
/* 响应式设计 */
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-parallax-title {
font-size: 2rem;
}
.footer-contact-buttons {
flex-direction: column;
align-items: center;
}
.footer-btn {
width: 200px;
justify-content: center;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.footer-bottom-links {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-parallax-image {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
/* 移动端联系图标适配 */
.footer-contact-info {
flex-direction: row;
justify-content: center;
gap: 1.5rem;
}
.contact-text {
font-size: 14px;
padding: 6px 12px;
}
/* 移动端禁用悬浮弹窗，改为点击事件 */
.qr-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
bottom: auto;
margin: 0;
z-index: 9999;
}
.qr-popup::after {
display: none;
}
/* 移动端隐藏服务项目和快速链接文字 */
.service-column .footer-title,
.service-column .footer-links,
.quick-links-column .footer-title,
.quick-links-column .footer-links {
display: none;
}
}
.qr-popup.show {
display: block;
opacity: 1;
visibility: visible;
}
/* 遮罩层 */
.qr-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 9998;
}
.qr-overlay.show {
display: block;
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.footer-main {
padding: 3rem 0;
}
.footer-parallax-section {
height: 300px;
}
.footer-parallax-title {
font-size: 1.5rem;
}
.footer-parallax-subtitle {
font-size: 1rem;
}
/* 小屏幕联系图标调整 */
.contact-text {
font-size: 14px;
padding: 6px 12px;
}
.qr-code {
width: 120px;
height: 120px;
}
.qr-popup {
padding: 12px;
min-width: 150px;
}
}
<!– 移动端二维码遮罩层 —>
<div class=“qr-overlay” id=“qrOverlay”></div>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
// 检测是否为移动设备
const isMobile = window.innerWidth <= 768;
// 视差滚动效果
const parallaxImage = document.querySelector(‘.footer-parallax-image’);
const parallaxSection = document.querySelector(‘.footer-parallax-section’);
if (parallaxImage && parallaxSection) {
window.addEventListener(‘scroll’, function() {
const scrolled = window.pageYOffset;
const sectionTop = parallaxSection.offsetTop;
const sectionHeight = parallaxSection.offsetHeight;
if (scrolled + window.innerHeight > sectionTop && scrolled < sectionTop + sectionHeight) {
const speed = 0.5;
const yPos = –(scrolled – sectionTop) * speed;
parallaxImage.style.transform = `translateY(${yPos}px)`;
}
});
}
// 返回顶部按钮
const backToTop = document.getElementById(‘back-to-top’);
if (backToTop) {
window.addEventListener(‘scroll’, function() {
if (window.pageYOffset > 300) {
backToTop.classList.add(‘show’);
} else {
backToTop.classList.remove(‘show’);
}
});
backToTop.addEventListener(‘click’, function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: ‘smooth’
});
});
}
// 平滑滚动到锚点
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute(‘href’));
if (target) {
target.scrollIntoView({
behavior: ‘smooth’,
block: ‘start’
});
}
});
});
// 二维码弹窗交互
const contactTexts = document.querySelectorAll(‘.contact-text-wrapper’);
const qrOverlay = document.getElementById(‘qrOverlay’);
if (isMobile) {
// 移动端：点击显示/隐藏二维码
contactTexts.forEach(text => {
text.addEventListener(‘click’, function(e) {
e.preventDefault();
const popup = this.querySelector(‘.qr-popup’);
// 关闭其他弹窗
document.querySelectorAll(‘.qr-popup.show’).forEach(p => {
if (p !== popup) p.classList.remove(‘show’);
});
// 切换当前弹窗
popup.classList.toggle(‘show’);
qrOverlay.classList.toggle(‘show’);
// 阻止点击事件冒泡
e.stopPropagation();
});
});
// 点击遮罩层关闭弹窗
qrOverlay.addEventListener(‘click’, function() {
document.querySelectorAll(‘.qr-popup.show’).forEach(popup => {
popup.classList.remove(‘show’);
});
qrOverlay.classList.remove(‘show’);
});
// 点击弹窗内容不关闭
document.querySelectorAll(‘.qr-popup’).forEach(popup => {
popup.addEventListener(‘click’, function(e) {
e.stopPropagation();
});
});
} else {
// PC端：鼠标悬浮显示二维码（CSS已处理）
// 可以添加额外的交互效果
contactTexts.forEach(text => {
text.addEventListener(‘mouseenter’, function() {
// 可以添加鼠标进入时的额外效果
});
text.addEventListener(‘mouseleave’, function() {
// 可以添加鼠标离开时的额外效果
});
});
}
// 窗口大小改变时重新检测设备类型
window.addEventListener(‘resize’, function() {
const newIsMobile = window.innerWidth <= 768;
if (newIsMobile !== isMobile) {
location.reload(); // 简单处理：重新加载页面以应用正确的交互模式
}
});
});
</script>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容