带有脚本的 Wordpress 插件开发问题

Question

您好我是第一次创建插件，我正在使用我的秒表代码已经内置 PHP 但我的插件无法正常工作，我认为我的脚本没有按照插件要求正确编写，如果理解请帮助我.这是代码：主插件PHP文件 <?php/*Plugin Name: MyStopwatchDescription: Adds a stopwatch to websiteVersion: 1.0.0Author: Samina*/// Exit if acessed directlyif(!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);    }    }

Answer 1

完整的工作代码和测试。

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

?>

Answer 2

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

?>

如果您在将标题加载到页面之前在 php 文件上返回了大字符串，则它显示在管理端“此插件生成了 X 个字符的意外输出”

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

Answer 3

您需要更新您的代码，例如（我已经测试过）-

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 挂钩