Wordpress侧边社交按钮

效果图如下：

 

把以下代码放到主题的function.php文件里面

function add_floating_social_icons() {
    ?>
    <style>
    .floating-social-icons {
        position: fixed;
        bottom: 160px;
        right: 20px;
        z-index: 9999;
    }

    .floating-social-icons a {
        display: block;
        margin: 10px;
    }

    .floating-social-icons .whatsapp-icon img,
    .floating-social-icons .email-icon img {
        width: 50px;
        height: 50px;
        transition: transform 0.3s ease;
    }

    .floating-social-icons .whatsapp-icon img:hover,
    .floating-social-icons .email-icon img:hover {
        transform: scale(1.1);
    }
    </style>

    <div class="floating-social-icons">
        <a href="https://wa.me/+WhatsApp电话号码" class="whatsapp-icon" target="_blank" id="whatsapp-icon123">
            <img src="你的WhatsApp图标路径" alt="WhatsApp">
        </a>
        <a href="mailto:你的邮箱" class="email-icon" id="email-icon123">
            <img src="你的邮箱图片路径" alt="Email">
        </a>
    </div>
    <?php
}
add_action('wp_footer', 'add_floating_social_icons');