如何在wordpress中實現簽名板

我想要簽名板顯示在我的wordpress頁面中。如何在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/[email protected]/dist/signature_pad.min.js"></script>

來源

2017-09-20 user3821656

後你試圖執行代碼片段。 –

你確定HTML是在WP模板中呈現嗎？腳本加載了嗎？ – Will

html呈現。我看到了「檢查html」腳本，但我沒有看到它生效。我已將它放在頁腳和標題上 – user3821656

我已經創建了簽名代碼，它工作正常。看看演示。

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

來源

2017-09-21 06:20:51

工作正常！非常感謝。 – user3821656

如何在wordpress中實現簽名板

回答

相關問題