Css 如何使Wordpress站点处理鼠标事件？

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

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

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

我正在考虑一个服务器端php函数，它增加一个变量来跟踪总环数。我在前端使用什么来调用php函数？AJAX还是说我可以单独用CSS来做这件事

---

谢谢你的帮助和建议

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

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

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

您需要知道的是：

• 既然wordpress使用Jquery，那么如何在Jquery中使用AJAX
• 您需要知道如何添加PHP代码来处理ajax请求，您可以使用“add_action（'wp_ajax_You_action'，'function_of u your_action'）
• 那么如何操作wordpress数据库来存储信息呢

下面是一个链接，可以帮助您查看代码示例：

---

在您的网站上添加一个音频标签，例如在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代码中，您会看到一个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);

---

欢迎使用Stack Overflow。您已经尝试了哪些方法？请查看。Stack Overflow不是一项编码服务。您需要研究您的问题，并在发布之前尝试自己编写代码。如果您遇到了某些特定问题，请回来并附上您尝试的内容和摘要谢谢你太多了，这正是我需要的！！
<?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);