Javascript 向单个Wordpress页面添加复杂的html/css/js元素

我用一个主题创建了一个网站（博客）；该网站需要一个带有单位转换器的页面，所以我已经使用html、css和Codepen上的vanilla JS创建了一个。

我在这里还有转换器设置的wordpress页面：

我很难找到将转换器“放到”wordpress页面的方法。我尝试将其添加到编辑页面文本区域，以及“附加代码”部分。显示html元素，但样式完全错误

---

我是否需要将它创建为一个单独的实体，如插件或小部件，然后将其添加到页面中？或者在服务器a上有一个特定的文件位置，我需要单独放置js和css？

有很多方法可以做到这一点。实现这一点最简单的方法之一就是用代码创建单独的CSS和JS文件，并将这些文件包含在themes header.php文件中

您还可以为此页面创建单独的主题文件（“自定义页面模板”部分）：

---

在

functions.php

中，或在您包含的单独文件中添加以下内容：

//[converter_shortcode]

add_action('init', 'register_my_script');
add_action('wp_footer', 'print_my_script');

function register_my_script() {
    wp_register_script('converter_script', get_template_directory_uri() . '/js/converter.js', array(), '', true );
}

function print_my_script() {
    global $add_my_script;

    if ( ! $add_my_script )
        return;

    wp_print_scripts('converter_script');
}

function converter_function( $atts ){
    global $add_my_script;

    $add_my_script = true;

    return '
    <div class="converter-wrapper">
      <h1>ENGINEERING UNIT CONVERTER</h1>

      <form name="property_form">
        <span>
          <select class="select-property" name="the_menu" size=1 onChange="UpdateUnitMenu(this, document.form_A.unit_menu); UpdateUnitMenu(this, document.form_B.unit_menu)">
          </select>
        </span>
      </form>

      <div class="converter-side-a">
        <form name="form_A" onSubmit="return false">
          <input type="text" class="numbersonly" name="unit_input" maxlength="20" onKeyUp="CalculateUnit(document.form_A, document.form_B)">
          <span>
            <select name="unit_menu" onChange="CalculateUnit(document.form_B, document.form_A)">
            </select>
          </span>
        </form>
      </div>

      <div class="converter-side-b">
        <form name="form_B" onSubmit="return false">
          <input type="text" class="numbersonly" name="unit_input" maxlength="20" onkeyup="CalculateUnit(document.form_B, document.form_A)">
          <span>
            <select name="unit_menu" onChange="CalculateUnit(document.form_A, document.form_B)">
            </select>
          </span>
        </form>
      </div>
    </div>';

}
add_shortcode( 'converter_shortcode', 'converter_function' );

/[converter\u shortcode]
添加动作（“初始化”，“注册我的脚本”）；
添加操作（“wp\u页脚”、“打印我的脚本”）；
函数寄存器\我的\脚本（）{
wp_register_script（'converter_script'，get_template_directory_uri（）。/js/converter.js'，array（），''，true）；
}
函数打印我的脚本（）{
全局$add\u my\u脚本；
如果（！$添加我的脚本）
返回；
wp_打印_脚本（“转换器_脚本”）；
}
功能转换器\功能（$atts）{
全局$add\u my\u脚本；
$add_my_script=true；
返回'
工程单元转换器
';
}
添加_短代码（“转换器_短代码”、“转换器_函数”）；

现在在主题

js

文件夹中创建

converter.js

文件并添加javascript。在

css

文件中添加样式，就完成了

现在我试过了，但我犯了一个错误

未捕获类型错误：document.getElementByClass不是函数

---

第194行，所以你可能想看看。但这是它的要点…

我也有同样的问题。我最终编辑了主题的css文件，添加了我的自定义类，将我的js添加到主题js文件中，并将html粘贴到页面编辑器的“附加代码”选项卡中。我不得不稍微调整一下定位设置，但它确实起了作用。不确定这是否是最健壮的解决方案，但它对我很有效。

最好为此创建单独的插件，或者如果不想，可以为此页面创建特殊模板，并在其中包含js创建一个短代码。这样你就可以将它添加到任何页面，或者创建一个插件，或者将它添加到你的主题的functions.php文件中。这种方式对于我需要它的单一用途来说似乎是最简单的，谢谢！它现在工作得很好，尽管不得不改变一些造型！

//[converter_shortcode]

add_action('init', 'register_my_script');
add_action('wp_footer', 'print_my_script');

function register_my_script() {
    wp_register_script('converter_script', get_template_directory_uri() . '/js/converter.js', array(), '', true );
}

function print_my_script() {
    global $add_my_script;

    if ( ! $add_my_script )
        return;

    wp_print_scripts('converter_script');
}

function converter_function( $atts ){
    global $add_my_script;

    $add_my_script = true;

    return '
    <div class="converter-wrapper">
      <h1>ENGINEERING UNIT CONVERTER</h1>

      <form name="property_form">
        <span>
          <select class="select-property" name="the_menu" size=1 onChange="UpdateUnitMenu(this, document.form_A.unit_menu); UpdateUnitMenu(this, document.form_B.unit_menu)">
          </select>
        </span>
      </form>

      <div class="converter-side-a">
        <form name="form_A" onSubmit="return false">
          <input type="text" class="numbersonly" name="unit_input" maxlength="20" onKeyUp="CalculateUnit(document.form_A, document.form_B)">
          <span>
            <select name="unit_menu" onChange="CalculateUnit(document.form_B, document.form_A)">
            </select>
          </span>
        </form>
      </div>

      <div class="converter-side-b">
        <form name="form_B" onSubmit="return false">
          <input type="text" class="numbersonly" name="unit_input" maxlength="20" onkeyup="CalculateUnit(document.form_B, document.form_A)">
          <span>
            <select name="unit_menu" onChange="CalculateUnit(document.form_A, document.form_B)">
            </select>
          </span>
        </form>
      </div>
    </div>';

}
add_shortcode( 'converter_shortcode', 'converter_function' );