在自定义wordpress页面中显示自定义搜索小部件结果

Question

我正在创建一个自定义搜索小部件插件，可以在我的wordpress网站中使用，这应该允许用户搜索歌词并在wordpress中的页面上显示。我是这个环境的新手，所以我真的不知道如何解决这个问题，这是我到目前为止所做的。

    <?php
    /**
 *     Plugin Name: Search Lyrics
 *     Plugin URI: http://example.net/
 *     Description: Find the lyrics to your sound...
 *     Author: John Doe
 *     Version: 1.0
 */

add_action("widgets_init", function () { register_widget("SearchWidget"); });

class SearchWidget extends WP_Widget
{
    public function __construct() {
        parent::__construct("search_widget", __("Simple Seach Widget", "wpe_search_domain"),
            array("description" => __("A simple widget to show how WP Plugins work", "wpe_search_domain")));
    }

    // Creating widget front-end
    // This is where the action happens

    public function widget( $args, $instance ) 
      {
          $title = apply_filters( 'widget_title', $instance['title'] ); ?>
          <div class="wpe-search-block">
              <h4><?php if (! empty( $title )) { echo $title; } else { echo 'Search'; } ?></h4>
              <div class="wpe-main-block">
                  <form role="search" method="get" class="search-form" action="teslyrics.php">
                    Artist Name: <input type="text" class="field" name="s_artist"/>
                    Track Name: <input type="text" class="field" name="s_track"/> <br />
                    <input type="submit" name="submit" value="Search" />
                  </form>
             </div>
          </div>
          <?php
      }


    // Widget Backend
    public function form( $instance ) 
    {
        if ( isset( $instance["title"] ) ) 
        {
            $title = $instance["title"];
        }
        else {
            $title = __("New title", "wpe_search_domain");
        }

        // Widget admin form
        ?>
            <p>
                <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
                <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
            </p>
        <?php
    }

    // Updating widget replacing old instances with new
    public function update( $new_instance, $old_instance ) 
    {
        $instance = array();
        $instance["title"] = ( ! empty( $new_instance["title"] ) ) ? strip_tags( $new_instance["title"] ) : ”;
        return $instance;
    }    
}

我希望它显示在我的wordpress网站上的页面中，而不是“ teslyrics.php ，因为操作说...

以下是 teslyrics.php 页面

<?php
/**
 * Template Name: Search Lyrics Result
 * Description: Custom search page.
 **/
    // These code snippets use an open-source library.
require_once 'unirest-php\src\Unirest.php';
if(isset($_GET["submit"]))
{
    $artist = $_GET["s_artist"];
    $track = $_GET["s_track"];



$response = Unirest\Request::get("https://examplecom-example.p.example.com/wsr/1.1/matcher.lyrics.get?q_artist='$artist'&q_track='$track'",
  array(
    "X-Example-Key" => "my_token",
    "Accept" => "application/json"
  )
);
echo "<div align='center'> <h2>";
    echo "You searched for Artist: $artist Track: $track <br/>";

    if(!$artist || !$track)
    {
        echo "Your search retuned nothing...";
    }

    else
    {
        echo "<pre>";
        echo ($response->body->lyrics_body);
        echo "</pre>";
    }
echo "</div></h2>";      
}
?>

那么我该如何做到当用户激活插件并使用小部件进行搜索时，它会创建一个新页面并在页面中显示结果？