使用PHP快捷码和Java脚本从自定义插件设置中提取数据

我正在构建一个自定义插件，它只是一个基本的事件倒计时计时器。您可以输入倒计时的日期和时间，然后将快捷码粘贴到网站的页面中，以显示距事件发生的天数、小时、分钟和秒数。我使用PHP生成表单，使用JavaScript从表单中提取数据并将其呈现到页面。我在“设置”中设置了一个“预览”部分，以确保倒计时正确、数据持续等。它工作得很好（请参见屏幕截图#1）！

然而，当我在外部页面上使用我的短代码[mbc\\U countdown\\U clock]时，它不会将事件日期数据拉入短代码生成的div中。我已经通过在divs中添加文本来确保短代码正确生成HTML，并且它是可见的。当我在运行shortcode的页面上检查控制台时，我看到：

在第二个红色框中，左侧的数字每隔一秒钟计数一次，所以有些东西在工作，但我不明白为什么它不能在非设置页面上显示“value”属性。我有一个用于插件的PHP文件和两个Js文件：一个用于倒计时时钟，另一个用于设置页面上的日期选择器（我现在不在这篇文章中）。

我已经试着去查了，但我找不到一个到目前为止有用的好资源。有什么想法吗？

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\\U cdc\\U设置文件：

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

提前感谢！

小码农CODE

相关推荐

有没有可能在不使用wp-config.php、.htaccess或php.ini中的指令的情况下增加php内存？