如何在wordpress中实现签名板答案

【问题标题】：How to implement signature pad in wordpress如何在wordpress中实现签名板
【发布时间】：2017-09-21 14:20:51
【问题描述】：

我正在尝试让签名板显示在我的 wordpress 页面中。

我去https://github.com/szimek/signature_pad 安装脚本。但是在 wordpress 中没有任何内容。有没有一种特定的方法可以让 js 在 wordpress 中工作？

这是它的 js fiddle 链接：https://jsfiddle.net/szimek/jq9cyzuc/

*我已将以下内容添加到标题中，并将 html 添加到正文中（没有任何反应）：

放置如下html

<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
  <canvas></canvas>
</div>
<div class="signature-pad--footer">
  <div class="description">Sign above</div>

  <div class="signature-pad--actions">
    <div>
      <button type="button" class="button clear" data-action="clear">Clear</button>
      <button type="button" class="button" data-action="change-color">Change color</button>
      <button type="button" class="button" data-action="undo">Undo</button>

    </div>
    <div>
      <button type="button" class="button save" data-action="save-png">Save as PNG</button>
      <button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
      <button type="button" class="button save" data-action="save-svg">Save as SVG</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

【问题讨论】：

贴出你试过的实现sn-ps。
您确定 HTML 正在 WP 模板中呈现吗？脚本正在加载吗？
html 呈现。我在“检查 html”上看到了脚本，但我没有看到它生效。我把它放在页脚和页眉上

标签： javascript jquery wordpress

【解决方案1】：

我已经创建了签名代码，它工作正常。看看演示。

<div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
      <canvas width="664" height="235" style="touch-action: none;"></canvas>
    </div>
    <div class="signature-pad--footer">
      <div class="description">Sign above</div>

      <div class="signature-pad--actions">
        <div>
          <button type="button" class="button clear" data-action="clear">Clear</button>
          <button type="button" class="button" data-action="change-color">Change color</button>
          <button type="button" class="button" data-action="undo">Undo</button>

        </div>
        <div>
          <button type="button" class="button save" data-action="save-png">Save as PNG</button>
          <button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
          <button type="button" class="button save" data-action="save-svg">Save as SVG</button>
        </div>
      </div>
    </div>
  </div>
  
<script src="https://szimek.github.io/signature_pad/js/signature_pad.js"></script>
<script src="https://szimek.github.io/signature_pad/js/app.js"></script>

【讨论】：