Comment faire pour qu'un site Wordpress gère un événement souris?

Question

J'essaye de construire un gestionnaire d'événement qui peut fonctionner avec un site Wordpress. Permettez-moi de simplifier ce que je veux faire comme suit:

L'interface a un bouton. Si un utilisateur appuie dessus, il sonne une cloche (ou émet un bip). Ensuite, la page montre combien de personnes ont déjà sonné la cloche. Je comprends que cela implique à la fois le côté client et le côté serveur, mais quelle est la bonne architecture et le code pour le faire?

Je pense à une fonction php côté serveur qui incrémente une variable pour garder une trace du nombre total de sonneries. Que dois-je utiliser sur le frontal pour invoquer la fonction php? Ajax? Ou est-il de toute façon que je peux le faire avec CSS seul?

Merci pour toute aide et suggestions.

Answer 1

Ici, vous devez construire deux parties:

1) la première partie sera le code JS lié au bouton qui envoie des données en utilisant AJAX. Vous pouvez ajouter ce code directement sur vos fichiers de thème (footer.php par exemple) ou en utilisant un plugin. 2) la deuxième partie consiste à construire le gestionnaire PHP qui va intercepter l'appel ajax et mettre à jour la base de données avec les informations. Vous pouvez le faire dans le function.php de votre thème.

Ce que vous devez savoir est:

• Comment utiliser AJAX avec Jquery depuis l'utilisation wordpress jQuery
• Vous devez savoir comment ajouter un code PHP pour gérer la demande ajax, vous pouvez faire avec « add_action (« wp_ajax_you_action », « function_of_your_action »);
• Alors comment manipuler DB wordpress pour stocker les informations

est un lien ici qui peut vous aider à voir des exemples de code : https://premium.wpmudev.org/blog/using-ajax-with-wordpress/

Answer 2

Ajoutez une balise audio sur votre site Web, par exemple. dans footer.php, définissez-le pour afficher: none; ... il ne doit pas être visible, il suffit de lire le fichier lorsque vous cliquez sur le bouton. Bien entendu, vous aurez besoin de votre bouton et un div pour votre contre

//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> 

Avec les JS suivants Snippet vous ajoutez une fonction de clic sur le bouton où il doit jouer la cloche et compter les playings.

$('#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); 
     } 
    }); 
}); 

Dans le code JS vous voyez une fonction AJAX qui appelle un fichier PHP appelé clic-bell.ajax.php, ce fichier PHP est seulement pour lire combien de fois la cloche a été joué et mis à +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); 

Avec ces 3 extraits vous devriez être en mesure de créer votre bouton et comptez combien de fois il a été cliqué ... Le nombre de boutons est stocké en tant que méta-données sur votre page d'accueil, vous pouvez modifier l'ID à l'intérieur le script php que vous souhaitez enregistrer sur la page où se trouve votre bouton

espoir que je pourrais vous aider