通过按下按钮使用 Wordpress 将值增加 1

Increment value by 1 using Wordpress by pressing button

我有一个 Wordpress 网站,我想要一个页面,如果您按下一个按钮,它会将存储的值递增 1。我希望页面在按下按钮后刷新,以显示带有新的整数值。

我不确定我是否应该使用 PHP 和 txt 文件来存储数据或使用 mySQL...无论哪种方式我都不知道如何编码这样的事情!我只想要一些非常简单的东西:)

提前谢谢你:)

您好,您可以使用这样的 jquery 代码。 youtube 上有许多教程展示了如何 link html 中的 jQuery 库。

然后您可以在页面的 html 中使用此代码。或者如果你使用的是外部 javascript 那么你应该将你的 javascript 文件排入你的主题 functions.php 文件中,就像这样

wp_enqueue_script('your_js_handle', plugins_url('your_js_folder/your_js_file.js',__FILE__) ,array('any_dependency_the_js_file_might_require',false);

add_filter('wp_head','your_function');

function your_function(){
$output = '
var myvalue = 0;
$("#mybuttonid").on("click",function(){
    myvalue++;
    localStorage.setItem("any_name_here", myvalue);
})

if ( localStorage.getItem("any_name_here") ) {
  myvalue = localStorage.getItem("any_name_here");
}
</script>';
echo $output;
}

然后您可以使用 myvalue 将其作为文本放入某些 div 标记中。 但首先你必须有 div id。假设 div id 是 'the_text'

这是您应该使用的代码:

那你就可以这样写代码了

wp_enqueue_script('your_js_handle', plugins_url('your_js_folder/your_js_file.js',__FILE__) ),array('any_dependency_the_js_file_might_require',false);


add_filter('wp_head','your_function');

function your_function(){
$output = '
var myvalue = 0;
$("#mybuttonid").on("click",function(){
    if ( localStorage.getItem("any_name_here") ) {
      myvalue = localStorage.getItem("any_name_here");
    }

    myvalue++;
    $("#the_text").text(myvalue);
    localStorage.setItem("any_name_here", myvalue);

</script>';
echo $output;
}

对于your_js_handle,您可以输入任何名称,但不要包含空格。 your_js_handle 是将在 HTML DOM.

中可用的文件 ID

Plugins_url 是您在使用 plugin.Else 时应该使用的函数 你应该使用 get_template_directory_uri('your_js_folder/your_js_file.js').

__FILE__ 在单词前后各有 2 个下划线,所以这不是错误,__FILE__ 将检索您正在使用的文件的相对路径.

如果 javascript 文件需要任何库才能工作,则应使用

array('any_dependency_the_js_file_might_require',false)。就像如果你的插件需要 jQuery 库那么你必须通过声明 array('jquery') 来使用它。 如果您的插件需要 jQuery 库,请确保在使用前将其排队。 Wordpress 通常预装了最新版本的 jQuery 库。要使用它,只需声明

 wp_enqueue_script('jquery');

最后 false 表示您在网站的页脚或页眉中呈现文件。在这种情况下,您应该确保根据需要使用 wp_head()wp_footer()。如果将其设置为 true,则脚本位于结束标记之前。