The Plugin file （vocab.php）

<?php
/*
Plugin Name: a_Stackoverflow_Vocab test
*/
// 01 - Define the filesystem paths for the plugin

if ( ! defined( \'WP_CONTENT_URL\' ) )
      define( \'WP_CONTENT_URL\', get_option( \'siteurl\' ) . \'/wp-content\' );
if ( ! defined( \'WP_CONTENT_DIR\' ) )
      define( \'WP_CONTENT_DIR\', ABSPATH . \'wp-content\' );
if ( ! defined( \'WP_PLUGIN_URL\' ) )
      define( \'WP_PLUGIN_URL\', WP_CONTENT_URL. \'/plugins\' );
if ( ! defined( \'WP_PLUGIN_DIR\' ) )
      define( \'WP_PLUGIN_DIR\', WP_CONTENT_DIR . \'/plugins\' );
define( \'VOCAB_DIR\', plugin_dir_path( __FILE__  ) );
define( \'VOCAB_URL\', plugin_dir_url( __FILE__  ) );

// 02 - Enqueue scripts and styles for the plugin. 

function vocab_scripts() {
    if (!is_admin()) {
            if (is_page(array(\'vocab\'))) { 
                wp_enqueue_script( \'jquery\' );
                wp_register_script(\'vocabjs\',  VOCAB_URL . \'vocab.js\', array( \'jquery\'),NULL);  
                wp_enqueue_script(\'vocabjs\'); 
            }
    }
}
add_action( \'wp_enqueue_scripts\', \'vocab_scripts\' );

// Calls to key files: template layout

require("vocab-template.php"); 

?>

jQuery(document).ready(function ($) {
    var words = [];
    words.push(\'vocabulary\');
    words.push(\'lexicon\');
    words.push(\'lexicons\');

function toggle(element) {
  if (element.innerHTML.split(\'_\').join(\'\').trim().length === 0) {
    element.innerHTML = element.getAttribute("word");
  } else {
    element.innerHTML = "_______";
  }
}

$.each(words, function(index, value) {
  var replacestr = new RegExp(\'\\\\b\'+value+\'\\\\b\', "g");
  $("p#demo:contains(\'" + value + "\')").html(function(_, html) {
    return html.replace(replacestr, \' <span class = "smallcaps" word="\' + value + \'" onclick="toggle(this)">_______</span>\')
  });
});
});

<?php
/*
*       function to deliver template
*/
function insert_vocab_template(){
?>
<div id="page">
<!-- start div page -->
    <h1>Vocabulary Test</h1>
        <div id="cover_content">
            <h2>Test content</h2>
                <p id="demo">A vocabulary is a list of words that an individual knows or uses regularly. vocabulary is different from lexicon because vocabulary is about what an individual or group of people know, whereas lexicon is about the language itself. In this paragraph, lexicons is a new word that\'s added, so don\'t forget to push \'lexicons\' in your array.</p>
        </div>
        <!-- end cover_content -->
    </div> 
    <!-- end #page -->
<?php
}
?>

<?php /* Template Name: Vocab Test */ ?>
<?php
get_header(); ?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <!-- page -->
            <?php
            $myoutput = insert_vocab_template();
            echo $myoutput;
            ?>
        </main><!-- .site-main -->
    </div><!-- .primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

1-将函数排入函数队列。php（主题/子主题/js）-vocab2。js（与插件版本相同）
3-页面模板（Page-vocab2.php）（模板名称=vocab2 Test）
加上一个标准WordPress页面，模板=“Vocab Test2”
注意：在这个版本中，文本段落（id=“demo”）作为内容包含在WordPress页面中。

Extract from Functions.php

// enqueue jquery and script
function vocab2_scripts() {
    if (!is_admin()) {
            if (is_page(array(\'vocab2\'))) { 
                wp_enqueue_script(\'jquery\');
                wp_enqueue_script(\'vocab2js\', get_stylesheet_directory_uri(). \'/js/vocab2.js\', array( \'jquery\' ));  
            }
    }
}
add_action( \'wp_enqueue_scripts\', \'vocab2_scripts\' );

The Javascript file （主题/儿童主题/js）-vocab2。js公司

jQuery(document).ready(function ($) {
    var words = [];

    words.push(\'vocabulary\');
    words.push(\'lexicon\');
    words.push(\'lexicons\');

    function toggle(element) {
      if (element.innerHTML.split(\'_\').join(\'\').trim().length === 0) {
        element.innerHTML = element.getAttribute("word");
      } else {
        element.innerHTML = "_______";
      }
    }

    $.each(words, function(index, value) {
      var replacestr = new RegExp(\'\\\\b\'+value+\'\\\\b\', "g");
      $("p#demo:contains(\'" + value + "\')").html(function(_, html) {
        return html.replace(replacestr, \' <span class = "smallcaps" word="\' + value + \'" onclick="toggle(this)">_______</span>\')
      });
    });
});

The Page Template （page-vocab2.php）（模板名称=vocab2测试）

<?php /* Template Name: Vocab Test2 */ ?>
<?php
get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
    <!-- page -->
        <?php
        while ( have_posts() ) : the_post();
        ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <?php the_title( \'<h1 class="entry-title">\', \'</h1>\' ); ?>
                </header><!-- .entry-header -->

                <div class="entry-content">
                    <?php the_content();?>
                </div><!-- .entry-content -->
            </article><!-- #post-## -->
        <?php
            // End of the loop.
        endwhile;
        ?>
    </main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

UPDATE:

现在，我可以通过使用“$.each”语句从中调用“toggle”使代码正常工作，但控制台仍在给出错误-现在更改为：“UncaughtTypeError：无法读取未定义的属性‘innerHTML’”

Javascript文件现在如下所示：

function toggle(element) {
      if (element.innerHTML.split(\'_\').join(\'\').trim().length === 0) {
        element.innerHTML = element.getAttribute("word");
      } else {
        element.innerHTML = "_______";
      }
}

jQuery(document).ready(function ($) {
    var words = [];

    words.push(\'vocabulary\');
    words.push(\'lexicon\');
    words.push(\'lexicons\');
    $.each(words, function(index, value) {
      var replacestr = new RegExp(\'\\\\b\'+value+\'\\\\b\', "g");
      $("p#demo:contains(\'" + value + "\')").html(function(_, html) {
        return html.replace(replacestr, \' <span class = "smallcaps" word="\' + value + \'" onclick="toggle(this)">_______</span>\')
      });
    });
        toggle();
});