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

Question

您好我是第一次创建插件，我正在使用我的秒表代码已经内置 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);

    }

    }

Answer 1

完整的工作代码和测试。<?php/*Plugin Name: MyStopwatchDescription: Adds a stopwatch to websiteVersion: 1.0.0Author: Samina*/// Exit if acessed directlyif(!defined('ABSPATH')){&nbsp; &nbsp; exit;}ob_start();// require_once(plugin_dir_path(__FILE__).'/includes/stopwatchscripts.php');function my_stopwatch_function(){&nbsp; &nbsp; return '<p id="output"></p><div id="controls">&nbsp; <button id="strtpause" onclick="strtpause()" class="stopwatchbutton">Start</button>&nbsp; &nbsp;<button id="reset" onclick="reset()" class="stopwatchbutton">Reset</button></div>';}add_shortcode('mystopwatch','my_stopwatch_function');&nbsp;add_action('wp_enqueue_scripts','my_stopwatch_function');//Add Scriptsfunction stopw_add_scripts(){//Add Main CSSwp_enqueue_style('stopw-main-style',plugins_url(). '/mystopwatch/css/style.css');//Add Main JS&nbsp;wp_enqueue_script('stopw-main-script',plugins_url(). '/mystopwatch/js/main.js');&nbsp; &nbsp;}add_action('wp_enqueue_scripts','stopw_add_scripts');?>

Answer 2

&nbsp;<?php/*Plugin Name: MyStopwatchDescription: Adds a stopwatch to websiteVersion: 1.0.0Author: Samina*/// Exit if acessed directlyif(!defined('ABSPATH')){&nbsp; &nbsp; exit;}require_once(plugin_dir_path(__FILE__).'/includes/stopwatchscripts.php');function my_stopwatch_function(){ob_start(); //start output bufferingecho '<p id="output"></p><div id="controls">&nbsp; <button id="strtpause" onclick="strtpause()" class="stopwatchbutton">Start</button>&nbsp; &nbsp;<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');&nbsp;add_action('wp_enqueue_scripts','my_stopwatch_function');?>如果您在将标题加载到页面之前在 php 文件上返回了大字符串，则它显示在管理端“此插件生成了 X 个字符的意外输出”您可以将这些返回的字符串添加到输出缓冲以防止出现此错误。

Answer 3

您需要更新您的代码，例如（我已经测试过）-add_shortcode('mystopwatch','my_stopwatch_function');&nbsp;add_action('wp_footer','MyStopwatch_scripts');&nbsp;function my_stopwatch_function($watch_html) {&nbsp;&nbsp; &nbsp; ob_start(); ?>&nbsp; &nbsp; <p id="output"></p>&nbsp; &nbsp; <div id="controls">&nbsp; &nbsp; &nbsp; <button id="strtpause" onclick="strtpause()" class="stopwatchbutton">Start</button>&nbsp; &nbsp; &nbsp; &nbsp;<button id="reset" onclick="reset()" class="stopwatchbutton">Reset</button>&nbsp; &nbsp; </div> <?php&nbsp; &nbsp; $watch_html = ob_get_contents();&nbsp; &nbsp; ob_clean();&nbsp; &nbsp; return $watch_html;}function MyStopwatch_scripts() { ?>&nbsp; &nbsp; <script>&nbsp; &nbsp; var time=0;&nbsp; &nbsp; var running=0;&nbsp; &nbsp; function strtpause () {&nbsp; &nbsp; &nbsp; &nbsp; if(running==0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; running=1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; increment();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("strtpause").innerHTML="Pause"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; running=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("strtpause").innerHTML="Resume"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; function reset(){&nbsp; &nbsp; running=0;&nbsp; &nbsp; time=0;&nbsp; &nbsp; document.getElementById("strtpause").innerHTML="Start"&nbsp; &nbsp; document.getElementById("output").innerHTML="00:00:00"&nbsp; &nbsp; }&nbsp; &nbsp; function increment(){&nbsp; &nbsp; &nbsp; &nbsp; if(running==1){&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;time++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var mins=Math.floor(time/10/60);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var secs=Math.floor(time/10);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var teths=time%10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(mins<10){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mins="0"+mins;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(secs<10){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; secs="0"+secs;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("output").innerHTML=mins+":"+secs+":"+teths;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;increment();&nbsp; &nbsp; &nbsp; &nbsp; },100);&nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;</script>&nbsp; &nbsp; &nbsp;<?php}如果您创建一个简码，您应该使用 ob_start() 和 ob_clean() 和 js 脚本，通常与 wp_footer 挂钩