如何在Wordpress中實現簽名板

Question

我正在嘗試讓簽名板顯示在我的wordpress頁面上。

我轉到https://github.com/szimek/signature_pad並安裝腳本。 但是，wordpress中沒有任何內容。 有沒有一種特定的方法可以使js在wordpress中工作？

這是它的js小提琴鏈接： 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>

Answer 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>