WordPress滑块插件开发：如何将设置页POST参数传递到前端模板替换图片

开发背景 #

我正在开发一款教育用途的WordPress滑块插件，用于熟悉WP PHP生态体系。目前我已经完成了插件的文件结构搭建，使用Bootstrap实现了可用的轮播效果。接下来我需要创建设置页，用于上传轮播图片并为每张图片配置对应文本，目前我已经完成了设置页和对应表单的开发，现在需要了解如何将表单提交的POST变量传递到我的template.html文件中，替换其中img标签的src属性值与对应文本内容。

现有代码 #

options.php文件代码 #

<?php
//Plugin Options Menu
/** Adds menu in the WP admin area*/
add_action('admin_menu', 'sd_cool_plugin_create_menu');
//create menu
function sd_cool_plugin_create_menu() {
    //create new top-level menu
    add_menu_page('My Cool Plugin Settings', 'Cool Settings', 'administrator', __FILE__, 'my_cool_plugin_settings_page' , plugins_url('/images/icon.png', __FILE__) );
    //call register settings function
    add_action( 'admin_init', 'register_mysettings' );
}
add_action( 'admin_menu', 'sd_slider_settings' );
add_action( 'admin_init', 'register_mysettings' );
//register settings
function register_mysettings() { // whitelist options
    register_setting( 'sd-option-group', 'new_option_name' );
    register_setting( 'sd-option-group', 'some_other_option' );
    register_setting( 'sd-option-group', 'option_etc' );
}
//add icon
/** Step 1. */
function sd_slider_settings() {
    add_options_page( 'SD Slider Settings', 'SD Slider', 'manage_options', 'my-unique-identifier', 'sd_plugin_options' );
    add_menu_page('SD Slider Plugin Settings', 'Cool Settings', 'administrator', __FILE__, 'my_cool_plugin_settings_page', get_stylesheet_directory_uri('stylesheet_directory')."/images/logo.png");
}
/** Step 3. */
function sd_plugin_options() {
    if ( !current_user_can( 'manage_options' ) )  {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }
    echo '<div class="wrap">';
    echo '<h1>SD Slider Plugin Options</h1>';
    echo '</div>';?>
    
    <form method="post" action="template.php" enctype="multipart/form-data">
        <?php settings_fields( 'sd-option-group' ); ?>
<!-- settings input form -->
<div class="form-group">
    <!-- 1st image -->
    <label for="exampleFormControlFile1">Choose the 1st image</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1" name="image1">
<br>
    <label for="fname">Headline:</label>
<input type="text" id="headline1" name="headline1"><br><br>
<br>
<label for="fname">Caption:</label>
<input type="text" id="headline1" name="headline1"><br><br>
<br>
<!-- 2nd image -->
    <label for="exampleFormControlFile2">Choose the 2nd image</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile2" name="image2">
<br>
    <label for="fname">Headline:</label>
<input type="text" id="headline2" name="headline2"><br><br>
<br>
<label for="fname">Caption:</label>
<input type="text" id="headline2" name="headline2"><br><br>
<!-- 3rd image -->
<br>
    <label for="exampleFormControlFile3">Choose the 3rd image</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile3" name="image3">
<br>
    <label for="fname">Headline:</label>
<input type="text" id="headline3" name="headline3"><br><br>
<br>
<label for="fname">Caption:</label>
<input type="text" id="headline3" name="headline3"><br><br>
<?php submit_button(); ?>
</div>
</form>
<?
}
//Plugin Options Menu End
?>
<?php
// create custom plugin settings menu
add_action('admin_menu', 'my_cool_plugin_create_menu');
function my_cool_plugin_create_menu() {
    //create new top-level menu
    add_menu_page('My Cool Plugin Settings', 'Cool Settings', 'administrator', __FILE__, 'my_cool_plugin_settings_page' , plugins_url('/images/icon.png', __FILE__) );
    //call register settings function
    add_action( 'admin_init', 'register_my_cool_plugin_settings' );
}
function register_my_cool_plugin_settings() {
    //register our settings
    register_setting( 'my-cool-plugin-settings-group', 'new_option_name' );
    register_setting( 'my-cool-plugin-settings-group', 'some_other_option' );
    register_setting( 'my-cool-plugin-settings-group', 'option_etc' );
}
function my_cool_plugin_settings_page() {
?>
<div class="wrap">
<h1>Your Plugin Name</h1>
<form method="post" action="options.php">
    <?php settings_fields( 'my-cool-plugin-settings-group' ); ?>
    <?php do_settings_sections( 'my-cool-plugin-settings-group' ); ?>
    <table class="form-table">
        <tr valign="top">
        <th scope="row">New Option Name</th>
        <td><input type="text" name="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /></td>
        </tr>
        
        <tr valign="top">
        <th scope="row">Some Other Option</th>
        <td><input type="text" name="some_other_option" value="<?php echo esc_attr( get_option('some_other_option') ); ?>" /></td>
        </tr>
        
        <tr valign="top">
        <th scope="row">Options, Etc.</th>
        <td><input type="text" name="option_etc" value="<?php echo esc_attr( get_option('option_etc') ); ?>" /></td>
        </tr>
    </table>
    
    <?php submit_button(); ?>
</form>
</div>
<?php } ?>

前端代码 #

JS逻辑代码

var $ = jQuery;
$(document).ready(function(){
    var myCarousel = document.querySelector('#myCarousel');
    var carousel = new bootstrap.Carousel(myCarousel);
    $('#page').prepend("<div id='slider-container'></div>");
    $("#slider-container").load("wp-content/plugins/slider-plugin/template.html") ;
  });

HTML模板代码

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
<img width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.jqueryscript.net%2Fdemo%2FResponsive-Full-Width-jQuery-Image-Slider-Plugin-skdslider%2Fslides%2F1.jpg&f=1&nofb=1" alt="">
        <div class="container">
          <div class="carousel-caption text-start">
            <h1>Example headline.</h1>
            <p>Some representative placeholder content for the first slide of the carousel.</p>
            <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
<img width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.jqueryscript.net%2Fdemo%2FResponsive-Full-Width-jQuery-Image-Slider-Plugin-skdslider%2Fslides%2F1.jpg&f=1&nofb=1" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Another example headline.</h1>
            <p>Some representative placeholder content for the second slide of the carousel.</p>
            <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

内容的提问来源于stack exchange，提问作者xbass540