WordPress右侧悬浮按钮

简单写了个WhatsApp右侧悬浮按钮,支持所有WordPress网站,改改图标支持所有图标,还可以自己添加图标之类的。

样式如下:

图片[1]-WordPress右侧悬浮按钮 - KEKC博客-KEKC博客

代码如下:

<?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
喜欢就支持一下吧
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称常用语 夸夸
夸夸
还有吗!没看够!
表情代码图片

    暂无评论内容