web-dev-qa-db-ja.com

を使用してカスタムプラグイン設定からデータを取得する PHP ショートコードとJavascript

基本的なイベントカウントダウンタイマーに過ぎないカスタムプラグインを作成しています。カウントダウンする日時を入力してから、ショートコードをWebサイトのページに貼り付けて、イベントまでの日数、時間数、分数、および秒数を表示できます。フォームの生成にはPHPを使用し、フォームからデータを取得してページにレンダリングするためのJavaScriptを使用しています。カウントダウンが正しいこと、データが持続することなどを確認するために、設定の中に「プレビュー」セクションを設定しました。

enter image description here

ただし、外部ページでショートコード[mbc_countdown_clock]を使用しても、ショートコードが生成するdivにイベントの日付データは取り込まれません。ショートコードがdivにテキストを追加することによって同様にHTMLを正しく生成していることを確認しました、そしてそれは目に見えます。ショートコードが実行されているページでコンソールを確認すると、次のように表示されます。

enter image description here

2番目の赤いボックスでは、左側の数字が1秒間隔でカウントアップされるので、何かが機能していますが、それ以外のフィールドに 'value'のプロパティを表示できないのはわかりません。設定ページ私のプラグイン用に1つのPHPファイルと2つのJsファイルがあります。1つはカウントダウンクロック用、もう1つは設定ページの日付ピッカー用です（現在この記事には含まれません） 。

私はそれを調べてみましたが、これまで助けてきた良いリソースを見つけることができません。何かご意見は？

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');

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);

前もって感謝します！

pluginsphpplugin-developmentjavascript
1
photogcoder

JSで見ているエラーはこれらの要素が存在しないことによるものです。したがってcannot read property value of null

あなたは、その特定のメニューページ上でのみ呼び出されるcountdownMenu関数でのみ、HTML要素出力を使用しています。

あなたのJSが正しく動作するためには、たとえ隠されたdivの中であっても、あなたは値を出力する必要があります：

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
}

また、DOMがロードされて準備が整った後にのみそれを実行するようなものにJSコードを入れるべきです（nullエラーの理由かもしれないと思います）：

document.addEventListener("DOMContentLoaded", function(event) {
    // DOM is ready and loaded
});

あるいは、jQueryを使用している場合は、これを行う方法がいくつかあります。

jQuery(document).ready(function() {
    // DOM ready
});

どれが同じです

jQuery(function(){
    // DOM ready
});

WordPressのnoConflictでjQuery以降に$を使用可能にしたい場合（つまり、$がjQueryオブジェクトに設定されていない場合）、jQueryオブジェクトを渡す自己呼び出し関数を使用できます。

(function($){

    $(function(){
        //dom ready
    });

})(jQuery);
1
sMyles