wordpress右侧悬浮联系按钮
在WordPress中添加一个右侧悬浮的联系按钮,可以通过添加一个简单的JavaScript和CSS来实现。以下是一个示例代码,你可以将其添加到你的WordPress主题的functions.php
文件中,或者使用一个自定义的JavaScript文件。
// 确保这段代码在HTML标头输出后运行add_action( 'wp_footer', 'add_floating_contact_button' );function add_floating_contact_button() {// 添加CSS来定位悬浮按钮wp_enqueue_style( 'floating-contact-button-style', get_template_directory_uri() . '/path/to/your/css/style.css', false, '1.0', 'all' );// 添加JavaScript来处理悬浮按钮的功能wp_enqueue_script( 'floating-contact-button-script', get_template_directory_uri() . '/path/to/your/js/script.js', array('jquery'), '1.0', true );}
在style.css
文件中添加以下CSS:
/* 悬浮联系按钮的样式 */#contact-button {position: fixed;bottom: 10px;right: 10px;z-index: 99;background: #007bff;color: white;border: none;padding: 10px20px;border-radius: 50%;cursor: pointer;opacity: 0.8;transition: all 0.3s;}#contact-button:hover {opacity: 1;}
在script.js
文件中添加以下JavaScript:
jQuery(document).ready(function($) {// 当点击按钮时,执行你的联系表单打开或其他逻辑 $('#contact-button').click(function() {// 例如,打开一个内联框框或是其他联系表单alert('联系我们!');// 或者// window.location.href = '你的联系页面链接'; });});
确保将style.css
和script.js
文件的路径替换为你的实际路径。这样,当你的WordPress网站加载完毕时,就会在页面右侧出现一个可以悬浮的联系按钮,点击它可以执行你想要的动作(如弹出窗口或导航到特定页面)。
提示:仅供参考