l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中添加 WhatsApp 聊天框和分享按钮

如何在 WordPress 中添加 WhatsApp 聊天框和分享按钮

Bug编译狮

Bug编译狮

要在 WordPress 网站上添加 WhatsApp 聊天框和分享按钮，你可以通过使用一些插件来实现。以下是一些常用的插件以及它们的安装、配置和基本功能介绍。

1. 使用 WhatsApp Web 插件

插件名称: WhatsApp Web 简介: 这个插件允许你在 WordPress 站点上创建一个与 WhatsApp Web 集成的聊天界面。

安装步骤：

  1. 登录到您的 WordPress 后台。
  2. 找到“插件”部分并点击“添加新插件”。
  3. 在搜索栏中输入“WhatsApp Web”，然后选择并点击下载该插件。
  4. 完成安装后，点击“激活”。

配置步骤：

  1. 登录到 WhatsApp Web 控制面板（默认地址为 https://web.whatsapp.com）。
  2. 创建一个新的会话或登录现有账户。
  3. 返回 WordPress 站点，找到并启用此插件。
  4. 您可以自定义聊天框的颜色、字体等样式。

示例代码：

<?php
// 初始化 WhatsApp Web 插件
$whatsapp_web = new WP_WhatsAppWeb();

// 获取当前用户 ID
$user_id = $whatsapp_web->get_user_id();
?>
<div class="whatsapp-web-chat">
    <img src="<?php echo esc_url($whatsapp_web->get_avatar_url()); ?>" alt="WhatsApp Avatar" />
    <div class="chat-box">
        <?php if ($whatsapp_web->has_messages()) : ?>
            <?php foreach ($whatsapp_web->get_messages() as $message) : ?>
                <div class="message">
                    <?php echo wp_kses_post($message['text']); ?>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
        <form action="#" method="post">
            <textarea name="message" placeholder="Type your message here..."></textarea>
            <button type="submit">Send</button>
        </form>
    </div>
</div>

<style>
    .whatsapp-web-chat {
        width: 500px;
        height: 600px;
        border-radius: 10px;
        overflow-y: scroll;
        background-color: #f9f9f9;
    }
    .chat-box {
        padding: 20px;
        font-size: 18px;
        color: #333;
    }
    .message {
        margin-bottom: 10px;
        line-height: 1.5;
    }
    textarea {
        width: 100%;
        height: 100px;
        resize: none;
        padding: 10px;
    }
    button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
    }
</style>

2. 使用 ShareThis 插件

插件名称: ShareThis 简介: 这个插件提供了一个简单的方法来嵌入 Facebook 和 Twitter 的分享按钮。

安装步骤：

  1. 登录到 WordPress 后台。
  2. 找到“插件”部分并点击“添加新插件”。
  3. 在搜索栏中输入“ShareThis”，然后选择并点击下载该插件。
  4. 完成安装后，点击“激活”。

配置步骤：

  1. 登录到 ShareThis 控制面板（默认地址为 https://sharethis.com/your-account/settings）。
  2. 创建新的站点或编辑现有的站点设置。
  3. 返回 WordPress 站点，找到并启用此插件。
  4. 设置您想要共享的内容类型（例如文章、页面等），然后选择分享方式。

示例代码：

<!-- 共享到 Facebook -->
<a href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"><i class="fa fa-facebook"></i></a>

<!-- 共享到 Twitter -->
<a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>"><i class="fa fa-twitter"></i></a>

总结

通过以上两种方法，你可以在 WordPress 站点上添加 WhatsApp 聊天框和分享按钮。这些插件提供了丰富的自定义选项，帮助你根据自己的需求调整界面外观和功能。希望这些建议对你有所帮助！

黑板前的Bug语法讲师

黑板前的Bug语法讲师

如何在 WordPress 中添加 WhatsApp 聊天框和分享按钮

1. 安装 WhatsApp 应用

首先，在您的 WordPress 主题中安装并激活 WhatsApp 应用插件。

2. 添加 WhatsApp 聊天框

  1. 打开 WordPress 管理后台。
  2. 导航到“主题” > “功能”。
  3. 在“功能”页面找到并启用“WhatsApp”选项。
  4. 检查是否已成功安装 WhatsApp 插件。如果没有，请下载并上传至您的 WordPress 主题文件夹。

3. 添加 WhatsApp 分享按钮

  1. 在您的 WordPress 主题中找到并激活“Share via WhatsApp”插件（如果未安装）。
  2. 使用自定义链接或短语来指定 WhatsApp 分享链接。
  3. 如果需要，为 WhatsApp 分享按钮设置点击事件以触发特定操作。

示例代码：

  • functions.php 文件中的注册和配置：
// 注册自定义函数
function wp_enqueue_share_via_whatsapp() {
    // 将 WhatsApp 分享链接作为自定义参数传递
    add_filter('wp_shortlink', 'custom_shortcode', 10, 2);
}

add_action('wp_enqueue_scripts', 'wp_enqueue_share_via_whatsapp');

// 自定义 shortcode 函数
function custom_shortcode($shortlink, $args) {
    if (isset($args['whats_app']) && $args['whats_app'] == true) {
        return '<a href="' . esc_url(get_permalink()) . '" target="_blank" rel="noopener noreferrer"><img src="' . get_template_directory_uri() . '/assets/images/whatsapp-icon.png" alt="WhatsApp"></a>';
    }
    return $shortlink;
}
  • functions.php 文件中的自定义链接：
// 设置 WhatsApp 分享链接
function set_whatsapp_share_link() {
    $share_link = get_theme_mod('whatsapp_share_link');
    if (!empty($share_link)) {
        echo '<script>
            document.body.setAttribute("data-whatsapp-share-link", "' . esc_attr($share_link) . '");
        </script>';
    }
}

add_action('admin_head', 'set_whatsapp_share_link');

通过以上步骤，您可以在 WordPress 主题中轻松地添加 WhatsApp 聊天框和分享按钮。

,

最新更新