使用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，則腳本將放置在結束標記之前。