简单写了个WhatsApp右侧悬浮按钮,支持所有WordPress网站,改改图标支持所有图标,还可以自己添加图标之类的。
样式如下:
代码如下:
<?php
/*
Plugin Name: 网站右下角悬浮WhatsApp图标
Plugin URI: https://www.kekc.cn/
Description: 在网站右侧显示悬浮的WhatsApp的图标,方便用户点击联系。
Version: 1.0.0
Author: 殷江碧
Author URI: https://www.kekc.cn/
*/
add_action("wp_head",function (){
?>
<style>
.fixed_whatsapp:hover{
width: 56px;
height: 56px;
box-shadow: 3px 3px 7px rgba(0, 0, 0, .4);
}
.fixed_whatsapp{
position: fixed;
width: 55px;
height: 55px;
border-radius: 50%;
bottom: 100px;
right: 20px;
z-index: 99999999;
background-color: #4dc247;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
cursor: pointer;
}
.fixed_whatsapp_icon{
position: absolute;
width: 35px;
height: 35px;
background-color: #4dc247;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgOTAgOTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDkwIDkwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBpZD0iV2hhdHNBcHAiIGQ9Ik05MCw0My44NDFjMCwyNC4yMTMtMTkuNzc5LDQzLjg0MS00NC4xODIsNDMuODQxYy03Ljc0NywwLTE1LjAyNS0xLjk4LTIxLjM1Ny01LjQ1NUwwLDkwbDcuOTc1LTIzLjUyMiAgIGMtNC4wMjMtNi42MDYtNi4zNC0xNC4zNTQtNi4zNC0yMi42MzdDMS42MzUsMTkuNjI4LDIxLjQxNiwwLDQ1LjgxOCwwQzcwLjIyMywwLDkwLDE5LjYyOCw5MCw0My44NDF6IE00NS44MTgsNi45ODIgICBjLTIwLjQ4NCwwLTM3LjE0NiwxNi41MzUtMzcuMTQ2LDM2Ljg1OWMwLDguMDY1LDIuNjI5LDE1LjUzNCw3LjA3NiwyMS42MUwxMS4xMDcsNzkuMTRsMTQuMjc1LTQuNTM3ICAgYzUuODY1LDMuODUxLDEyLjg5MSw2LjA5NywyMC40MzcsNi4wOTdjMjAuNDgxLDAsMzcuMTQ2LTE2LjUzMywzNy4xNDYtMzYuODU3UzY2LjMwMSw2Ljk4Miw0NS44MTgsNi45ODJ6IE02OC4xMjksNTMuOTM4ICAgYy0wLjI3My0wLjQ0Ny0wLjk5NC0wLjcxNy0yLjA3Ni0xLjI1NGMtMS4wODQtMC41MzctNi40MS0zLjEzOC03LjQtMy40OTVjLTAuOTkzLTAuMzU4LTEuNzE3LTAuNTM4LTIuNDM4LDAuNTM3ICAgYy0wLjcyMSwxLjA3Ni0yLjc5NywzLjQ5NS0zLjQzLDQuMjEyYy0wLjYzMiwwLjcxOS0xLjI2MywwLjgwOS0yLjM0NywwLjI3MWMtMS4wODItMC41MzctNC41NzEtMS42NzMtOC43MDgtNS4zMzMgICBjLTMuMjE5LTIuODQ4LTUuMzkzLTYuMzY0LTYuMDI1LTcuNDQxYy0wLjYzMS0xLjA3NS0wLjA2Ni0xLjY1NiwwLjQ3NS0yLjE5MWMwLjQ4OC0wLjQ4MiwxLjA4NC0xLjI1NSwxLjYyNS0xLjg4MiAgIGMwLjU0My0wLjYyOCwwLjcyMy0xLjA3NSwxLjA4Mi0xLjc5M2MwLjM2My0wLjcxNywwLjE4Mi0xLjM0NC0wLjA5LTEuODgzYy0wLjI3LTAuNTM3LTIuNDM4LTUuODI1LTMuMzQtNy45NzcgICBjLTAuOTAyLTIuMTUtMS44MDMtMS43OTItMi40MzYtMS43OTJjLTAuNjMxLDAtMS4zNTQtMC4wOS0yLjA3Ni0wLjA5Yy0wLjcyMiwwLTEuODk2LDAuMjY5LTIuODg5LDEuMzQ0ICAgYy0wLjk5MiwxLjA3Ni0zLjc4OSwzLjY3Ni0zLjc4OSw4Ljk2M2MwLDUuMjg4LDMuODc5LDEwLjM5Nyw0LjQyMiwxMS4xMTNjMC41NDEsMC43MTYsNy40OSwxMS45MiwxOC41LDE2LjIyMyAgIEM1OC4yLDY1Ljc3MSw1OC4yLDY0LjMzNiw2MC4xODYsNjQuMTU2YzEuOTg0LTAuMTc5LDYuNDA2LTIuNTk5LDcuMzEyLTUuMTA3QzY4LjM5OCw1Ni41MzcsNjguMzk4LDU0LjM4Niw2OC4xMjksNTMuOTM4eiIgZmlsbD0iI0ZGRkZGRiIvPg0KPC9nPg0KPC9zdmc+DQo=");
background-size: cover;
margin: 10px;
}
</style>
<div class="fixed_whatsapp">
<a target="_blank" href="<?php echo get_option('whatsapp_url')?get_option('whatsapp_url'):"#"; ?>">
<div class="fixed_whatsapp_icon"></div>
</a>
</div>
<?php
});
//增加插件管理菜单
add_action( 'admin_init', 'register_fixed_whatsapp_icon_settings' );
function register_fixed_whatsapp_icon_settings() {
register_setting( 'fixed_whatsapp_icon-settings-group', 'whatsapp_url' );
}
if(is_admin()) {
add_action('admin_menu', 'add_fixed_whatsapp_icon_page');
}
function add_fixed_whatsapp_icon_page() {
add_menu_page("悬浮WhatsApp链接设置", "悬浮WhatsApp链接设置", 'administrator', 'fixed_whatsapp_icon_page', 'fixed_whatsapp_iconpage_html');
}
function fixed_whatsapp_iconpage_html() {
?>
<div class="wrap">
<h1>悬浮WhatsApp链接设置</h1>
<?php settings_errors(); ?>
<form method="post" action="options.php">
<?php settings_fields( 'fixed_whatsapp_icon-settings-group' ); ?>
<?php do_settings_sections( 'fixed_whatsapp_icon-settings-group' ); ?>
<label for="whatsapp_url">请在下方填写你的WhatsApp的链接,以修改前台悬浮按钮中的链接地址。</label>
<textarea name="whatsapp_url" id="whatsapp_url" class="large-text code" rows="3" spellcheck="false" data-ms-editor="true"><?php echo get_option('whatsapp_url'); ?></textarea>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="fixed_whatsapp_icon" />
<input type="submit" value="保存更改" class="button button-primary" class="button-primary" />
</form>
</div>
<?php
}
© 版权声明
THE END
暂无评论内容