Question

我正在尝试构建一个可以与Wordpress站点一起使用的事件处理程序。让我简化我想要做的事情如下：

前端有一个按钮。如果用户按下它，它会响铃（或发出哔哔声）。然后该页面显示到目前为止有多少人敲响了钟。

我知道这涉及客户端和服务器端，但是这样做的正确架构和代码是什么？

我在想一个服务器端的php函数，它会增加一个变量来跟踪总的响铃次数。我在前端使用什么来调用php函数？阿贾克斯？或者无论如何我只能用CSS做到这一点？

感谢您提供的所有帮助和建议。

Answer 1

在这里，您需要构建两个部分：

1）第一部分将是与使用AJAX发送数据的按钮相关的JS代码。您可以将此代码直接添加到主题文件（例如footer.php）或使用插件。

2）第二部分是构建PHP处理程序，它将拦截ajax调用并用信息更新数据库。您可以在主题的function.php中执行此操作。

您需要知道的是：

如何使用JQuery来使用AJAX，因为wordpress使用jQuery
您需要知道如何添加PHP代码来处理ajax请求，您可以使用＆＃34; add_action（＆＃39; wp_ajax_you_action＆＃39;，＆＃39; function_of_your_action＆＃39;）; < / LI>
然后如何操纵wordpress DB来存储信息

这是一个可以帮助您查看代码示例的链接： https://premium.wpmudev.org/blog/using-ajax-with-wordpress/

Answer 2

在您的网站上添加音频标签，例如在footer.php中，将其设置为display：none; ...它不必是可见的，只需要在单击按钮时播放该文件。当然，你需要你的按钮和计数器的div

//HTML 
//e.g. footer.php
<audio id="bell_audio" controls preload="auto">
    <source src="bell.ogg" type="audio/ogg">
    <source src="bell.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

//BUTTON
<button id="bell_button">Play Bell</button>

//VISIBLE COUNTER
<div id="counter"><?php echo get_post_meta(3, 'bell-clicked')?></div>

使用以下JS片段，您可以在按钮上添加一个点击功能，它应该播放铃声并计算播放次数。

$('#bell_button').click(function (e) {
    e.preventDefault();
    $.ajax({ 
        type: 'post', 
        url: 'path_to_your_WP_theme_folder/click-bell.ajax.php', 
        dataType: 'json',
        beforeSend: function () {
            // PLAYS THE AUDIO FILE
            $('#bell_audio').play();
        },
        success: function (data) { 
            // RECEIVES JSON ($updatedAmount) FROM PHP FILE AND UPDATES VISIBLE COUNTER
            $('#counter').html('data');
        },
        error : function(jqxhr,textStatus,error){
            console.log(textStatus + ", " + error);
        }
    });
});

在JS代码中，您会看到一个AJAX函数，它调用一个名为click-bell.ajax.php的PHP文件，这个PHP文件仅用于读取响铃播放次数并将其设置为+1。

<?php
/*
PHP FILE: click-bell.ajax.php 
Store Bell Click Amount on Home Page (e.g. ID:3)
*/
require_once('../../../wp-load.php');
if (!add_post_meta( 3, 'bell-clicked', '1', true)) : 
    $givenAmount = get_post_meta(3, 'bell-clicked');
    update_post_meta( 3, 'bell-clicked', $givenAmount+1);
endif;
$updatedAmount = get_post_meta(3, 'bell-clicked');

if(isset($_SERVER['HTTP_ACCEPT']) && (strpos($_SERVER['HTTP_ACCEPT'], 'application/json') !== false)) :
    header('Content-type: application/json');
else :
    header('Content-type: text/plain');
endif;
echo json_encode($updatedAmount);

使用这3个片段，您应该能够创建按钮并计算它被点击的次数...按钮计数作为元数据存储在您的主页上，您可以将PHP脚本中的ID更改为您想将其保存在按钮所在的页面上

希望我能帮到你

如何让Wordpress网站处理鼠标事件？

2 个答案: