Плагин 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 file

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

вам нужно обновить ваш код, как (я проверял) -

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

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

Полностью рабочий код и также проверено.

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