Wordpress 插件开发脚本问题

Wordpress Plugin Development problem with script

你好,我是第一次创建插件,我使用的是已经内置的秒表代码 PHP 但是我的插件无法正常工作,我认为我的脚本没有根据插件要求,如果理解请帮助我。

代码如下: 主插件 PHP 文件

 <?php
/*
Plugin Name: MyStopwatch
Description: Adds a stopwatch to website
Version: 1.0.0
Author: Samina
*/
// Exit if acessed directly
if(!defined('ABSPATH')){
    exit;
}
require_once(plugin_dir_path(__FILE__).'/includes/stopwatchscripts.php');
function my_stopwatch_function(){
    return '<p id="output"></p>
<div id="controls">
  <button id="strtpause" onclick="strtpause()" class="stopwatchbutton">Start</button>
   <button id="reset" onclick="reset()" class="stopwatchbutton">Reset</button>
</div>';
}
add_shortcode('mystopwatch','my_stopwatch_function'); 
add_action('wp_enqueue_scripts','my_stopwatch_function');
?>

脚本文件:

   <?php
    ob_start();
    //Add Scripts
    function stopw_add_scripts(){
    //Add Main CSS
    wp_enqueue_style('stopw-main-style',plugins_url(). '/mystopwatch/css/style.css');
    //Add Main JS
     wp_enqueue_script('stopw-main-script',plugins_url(). '/mystopwatch/js/main.js');   
    }

add_action('wp_enqueue_scripts','stopw_add_scripts');
?>

main.js 文件

var time=0;
    var running=0;
    function strtpause () {
        if(running==0){
            running=1;
            increment();
            document.getElementById("strtpause").innerHTML="Pause"

        }
        else{
            running=0;
            document.getElementById("strtpause").innerHTML="Resume"
        }
    }
    function reset(){
    running=0;
    time=0;
    document.getElementById("strtpause").innerHTML="Start"
    document.getElementById("output").innerHTML="00:00:00"
    }
    function increment(){
        if(running==1){
        setTimeout(function(){
         time++;
         var mins=Math.floor(time/10/60);
         var secs=Math.floor(time/10);
         var teths=time%10;
         if(mins<10){
            mins="0"+mins;
         }
         if(secs<10){
            secs="0"+secs;
         }
         document.getElementById("output").innerHTML=mins+":"+secs+":"+teths;
         increment();


        },100);
    }
    }

完整的代码并经过测试。

<?php
/*
Plugin Name: MyStopwatch
Description: Adds a stopwatch to website
Version: 1.0.0
Author: Samina
*/
// Exit if acessed directly
if(!defined('ABSPATH')){
    exit;
}
ob_start();
// require_once(plugin_dir_path(__FILE__).'/includes/stopwatchscripts.php');
function my_stopwatch_function(){
    return '<p id="output"></p>
<div id="controls">
  <button id="strtpause" onclick="strtpause()" class="stopwatchbutton">Start</button>
   <button id="reset" onclick="reset()" class="stopwatchbutton">Reset</button>
</div>';
}
add_shortcode('mystopwatch','my_stopwatch_function'); 
add_action('wp_enqueue_scripts','my_stopwatch_function');


//Add Scripts
function stopw_add_scripts(){
//Add Main CSS
wp_enqueue_style('stopw-main-style',plugins_url(). '/mystopwatch/css/style.css');
//Add Main JS
 wp_enqueue_script('stopw-main-script',plugins_url(). '/mystopwatch/js/main.js');   
}

add_action('wp_enqueue_scripts','stopw_add_scripts');
?>

您需要更新您的代码(我已经测试过)-

add_shortcode('mystopwatch','my_stopwatch_function'); 
add_action('wp_footer','MyStopwatch_scripts'); 

function my_stopwatch_function($watch_html) { 

    ob_start(); ?>

    <p id="output"></p>
    <div id="controls">
      <button id="strtpause" onclick="strtpause()" class="stopwatchbutton">Start</button>
       <button id="reset" onclick="reset()" class="stopwatchbutton">Reset</button>
    </div> <?php

    $watch_html = ob_get_contents();
    ob_clean();

    return $watch_html;

}

function MyStopwatch_scripts() { ?>

    <script>
    var time=0;
    var running=0;

    function strtpause () {
        if(running==0){
            running=1;
            increment();
            document.getElementById("strtpause").innerHTML="Pause"

        }
        else{
            running=0;
            document.getElementById("strtpause").innerHTML="Resume"
        }
    }
    function reset(){
    running=0;
    time=0;
    document.getElementById("strtpause").innerHTML="Start"
    document.getElementById("output").innerHTML="00:00:00"
    }
    function increment(){
        if(running==1){
        setTimeout(function(){
         time++;
         var mins=Math.floor(time/10/60);
         var secs=Math.floor(time/10);
         var teths=time%10;
         if(mins<10){
            mins="0"+mins;
         }
         if(secs<10){
            secs="0"+secs;
         }
         document.getElementById("output").innerHTML=mins+":"+secs+":"+teths;
         increment();


        },100);
    }
    }

     </script>
     <?php

}

如果你创建一个短代码,你应该使用 ob_start() & ob_clean() 和 js 脚本通常与 wp_footer hook

 <?php
/*
Plugin Name: MyStopwatch
Description: Adds a stopwatch to website
Version: 1.0.0
Author: Samina
*/
// Exit if acessed directly
if(!defined('ABSPATH')){
    exit;
}
require_once(plugin_dir_path(__FILE__).'/includes/stopwatchscripts.php');
function my_stopwatch_function(){

ob_start(); //start output buffering
echo '<p id="output"></p>
<div id="controls">
  <button id="strtpause" onclick="strtpause()" class="stopwatchbutton">Start</button>
   <button id="reset" onclick="reset()" class="stopwatchbutton">Reset</button>
</div>';


//getting content after buffering
$content = ob_get_contents();
ob_end_clean();
return $content;
}
add_shortcode('mystopwatch','my_stopwatch_function'); 
add_action('wp_enqueue_scripts','my_stopwatch_function');
?>

如果您在 headers 加载到页面之前在 php 文件上返回了大字符串,它会显示在管理端 "this plugin generated X characters of unexpected output"

您可以将这些返回的字符串添加到输出缓冲中以防止出现此错误。