Extraction de données à partir de paramètres de plugin personnalisés à l'aide PHP shortcode et Javascript
Je construis un plugin personnalisé qui est juste un compte à rebours d'événement de base. Vous pouvez entrer une date et une heure de compte à rebours, puis coller le code court dans une page de votre site Web pour afficher le nombre de jours, heures, minutes et secondes jusqu'à l'événement. J'utilise PHP pour générer le formulaire et JavaScript pour extraire les données du formulaire et les restituer à la page. J'ai configuré une section "Aperçu" dans les paramètres pour m'assurer que le compte à rebours est correct, que les données persistent, etc. Cela fonctionne très bien (voir la capture d'écran n ° 1)!
Cependant, lorsque j'utilise mon shortcode [mbc_countdown_clock] sur une page externe, les données de date d'événement ne sont pas extraites dans les div générés par le shortcode. Je me suis assuré que le shortcode génère correctement le code HTML en ajoutant du texte dans les divs et qu'il soit visible. Lorsque je vérifie la console sur la page sur laquelle le shortcode est en cours d'exécution, je vois ceci:
Dans la deuxième boîte rouge, les nombres à gauche se comptent par intervalles d'une seconde, donc quelque chose fonctionne, mais je ne comprends pas pourquoi il ne peut pas afficher les propriétés de 'valeur' sur le symbole non. page de paramètres. J'ai mon seul fichier PHP pour mon plug-in et deux fichiers Js: un pour l'horloge du compte à rebours, l'autre pour le sélecteur de date sur la page des paramètres (je ne l'inclus pas dans cet article pour le moment) .
J'ai essayé de le rechercher, mais je ne peux pas trouver une bonne ressource qui a aidé jusqu'à présent. Des pensées?
Code PHP:
register_activation_hook( __FILE__, 'mbc-countdown-clock' );
register_deactivation_hook( __FILE__, 'mbc-countdown-clock' );
wp_enqueue_script('moment_js', plugin_dir_url( __FILE__ ) .'/moment.js', array(), null, true);
wp_enqueue_script('cdc-picker', plugin_dir_url( __FILE__ ) .'/mbc_datepicker.js', array(), null, true);
wp_enqueue_script('cdc-settings', plugin_dir_url( __FILE__ ) .'/mbc_cdc_settings.js', array(), null, true);
wp_enqueue_style('cdc-css', plugin_dir_url( __FILE__ ) .'/mbc_datepicker.css', false, 1.1, 'all');
function addMenu(){
add_menu_page('Countdown Clock', 'Countdown Clock', 4, 'countdown-clock',
'countdownMenu');
}
add_action('admin_menu', 'addMenu');
if (is_admin ()) {
add_action('adminMenu', 'add_myMenu');
add_action('admin_init', 'register_mySettings');
}
function register_mySettings(){
add_option('mbccdc_datepicker', 'Date Picker');
add_option('mbccdc_timepicker', 'Time Picker');
register_setting('mbccdc', 'cdc_datepicker');
register_setting('mbccdc', 'cdc_timepicker');
}
function countdownMenu(){
?>
<div id="mbc-countdown-dash">
<div class="mbc-cdc-header">
<h1>Timer Settings</h1>
</div>
<div class="mbc-cdc-display">
<form method="post" action="options.php">
<?php settings_fields('mbccdc');
do_settings_sections('mbccdc');?>
<p>Countdown To Date:<input type="text" name="cdc_datepicker"
class="datepicker" id="mbc-cdc-date" value="<?php echo esc_attr( get_option(
'cdc_datepicker' ) ); ?>"></p>
<p>Countdown To Time:<input type="time" step="1"
name="cdc_timepicker" id="mbc-cdc-timepicker" value="<?php echo esc_attr(
get_option( 'cdc_timepicker' ) ); ?>"></p>
<input type="submit" value="Save Changes" id="mbccdc-submit" />
</form>
<div class="mbc-cdc-clock-preview">
<div><span id="mbc-cdc-preview-days"> </span></div>
<div><span id="mbc-cdc-preview-hours"> </span></div>
<div><span id="mbc-cdc-preview-minutes"> </span></div>
<div><span id="mbc-cdc-preview-seconds"> </span></div>
</div>
</div>
</div>
<?php
}
function mbc_cdc_shortcode() {
?>
<div class="mbc-cdc-clock-onpage">
<div><span id="mbc-cdc-onpage-days"> H</span></div>
<div><span id="mbc-cdc-onpage-hours"> E</span></div>
<div><span id="mbc-cdc-onpage-minutes"> LL</span></div>
<div><span id="mbc-cdc-onpage-seconds"> O</span></div>
</div>
</div>
<?php
}
add_shortcode( 'mbc_countdown_clock', 'mbc_cdc_shortcode');
Fichier JS mbc_cdc_settings:
console.log('mbc_cdc_settings.js is working!');
function mbcTimer(){
//EVENT DATE AND TIME
const eventDate = document.getElementById('mbc-cdc-date').value;
const eventTime = document.getElementById('mbc-cdc-timepicker').value;
const concatEvent = new Date (eventDate + ' ' + eventTime).getTime();
const today = new Date().getTime();
const distance = concatEvent - today;
const days = Math.floor (distance / (1000 * 60 * 60 * 24));
const hours = Math.floor ((distance % (1000 * 60 * 60 *24)) / (1000 * 60 * 60));
const minutes = Math.floor ((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor ((distance % (1000 * 60)) / 1000);
//PREVIEW
document.getElementById('mbc-cdc-preview-days').innerHTML = "<h3> Days: </h3>" + "<p>" + days + "</p>";
document.getElementById('mbc-cdc-preview-hours').innerHTML = "<h3> Hours: </h3>" + "<p>" + hours + "</p>";
document.getElementById('mbc-cdc-preview-minutes').innerHTML = "<h3> Minutes: </h3>" + "<p>" + minutes + "</p>";
document.getElementById('mbc-cdc-preview-seconds').innerHTML = "<h3> Seconds: </h3>" + "<p>" + seconds + "</p>";
//PAGE RENDER
document.getElementById('mbc-cdc-onpage-days').innerHTML = "<h3> Days: </h3>" + "<p>" + days + "</p>";
document.getElementById('mbc-cdc-onpage-hours').innerHTML = "<h3> Hours: </h3>" + "<p>" + hours + "</p>";
document.getElementById('mbc-cdc-onpage-minutes').innerHTML = "<h3> Minutes: </h3>" + "<p>" + minutes + "</p>";
document.getElementById('mbc-cdc-onpage-seconds').innerHTML = "<h3> Seconds: </h3>" + "<p>" + seconds + "</p>";
if (distance < 0){
clearInterval(x);
document.getElementById('mbc-cdc-preview-days').innerHTML = '0';
document.getElementById('mbc-cdc-preview-hours').innerHTML = '0';
document.getElementById('mbc-cdc-preview-minutes').innerHTML = '0';
document.getElementById('mbc-cdc-preview-seconds').innerHTML = '0';
document.getElementById('mbc-cdc-onpage-days').innerHTML = '0';
document.getElementById('mbc-cdc-onpage-hours').innerHTML = '0';
document.getElementById('mbc-cdc-onpage-minutes').innerHTML = '0';
document.getElementById('mbc-cdc-onpage-seconds').innerHTML = '0';
}
}
timer = setInterval(mbcTimer, 1000);
Merci d'avance!
L'erreur que vous voyez dans JS est due à ces éléments qui n'existent pas, d'où le cannot read property value of null
Vous êtes JS utilise la sortie d'élément HTML uniquement dans la fonction countdownMenu qui est appelée uniquement lorsque vous êtes sur cette page de menu spécifique.
Vous devez sortir la valeur, même si elle est dans un div masqué, pour que votre JS fonctionne correctement:
function mbc_cdc_shortcode() {
?>
<div class="mbc-cdc-clock-onpage">
<input type="hidden" id="mbc-cdc-date" value="<?php echo esc_attr( get_option( 'cdc_datepicker' ) ); ?>">
<input type="hidden" id="mbc-cdc-timepicker" value="<?php echo esc_attr( get_option( 'cdc_timepicker' ) ); ?>">
<div><span id="mbc-cdc-onpage-days"> H</span></div>
<div><span id="mbc-cdc-onpage-hours"> E</span></div>
<div><span id="mbc-cdc-onpage-minutes"> LL</span></div>
<div><span id="mbc-cdc-onpage-seconds"> O</span></div>
</div> </div>
<?php
}
Vous devriez également mettre votre code JS dans quelque chose qui ne l'exécutera que lorsque le DOM sera chargé et prêt (pensez que cela peut être la raison des erreurs null):
document.addEventListener("DOMContentLoaded", function(event) {
// DOM is ready and loaded
});
Ou, si vous utilisez jQuery, il existe un moyen de le faire:
jQuery(document).ready(function() {
// DOM ready
});
Quel est le même que
jQuery(function(){
// DOM ready
});
Si vous souhaitez que $ soit disponible car jQuery dans WordPress noConflict (ce qui signifie que $ n'est pas défini sur l'objet jQuery), vous pouvez utiliser l'autoappelant func en passant l'objet jQuery:
(function($){
$(function(){
//dom ready
});
})(jQuery);