使用WordPress按键增加值1按下按钮

Question

我有一个Wordpress网站，我想要一个页面，如果你按下一个按钮，它将增加一个存储值1.我希望页面一旦刷新按下以显示带有新整数值的页面。

我不知道我是否应该使用PHP和像一个txt文件来存储数据或使用mySQL ......无论如何我不知道如何编写这样的事情！我只是想要的东西很简单:)

预先感谢您:)

Answer 1

嗨，你可以使用这样的jQuery代码。 YouTube上有许多教程显示如何在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中可用的文件的标识。

Plugins_url是你应该使用的功能，如果你正在使用一个插件。所以你应该使用get_template_directory_uri('your_js_folder/your_js_file.js')。

__FILE__是在单词前后用2个下划线写的，所以这不是错误，__FILE__会做的是它将检索您正在使用的文件的相对路径。

array('any_dependency_the_js_file_might_require',false)如果JavaScript文件需要任何库才能使用，那么应该使用array('any_dependency_the_js_file_might_require',false)。就像你的插件需要jQuery库那么你必须通过声明数组（'jquery'）来使用它。 如果您的插件需要jQuery库，请确保您在使用它之前排队。 Wordpress通常带有预装的最新版本的jQuery库。要使用它只是说明

wp_enqueue_script('jquery'); 

最后false意味着要么你呈现在页脚文件或您网站的标题。在这种情况下，您应该确保根据需要使用wp_head()或wp_footer()。如果将其设置为true，则脚本将放置在结束标记之前。