按鈕onclick打開wordpress短代碼

Question

我試圖做一個按鈕打開從最終的短代碼插件短代碼。 這是我的例子：

<button id="showInfo" onclick="showInfo()">Video</button> 

的javascript：

var infoSC = '[su_lightbox_content id="showInfo"]Inline content[/su_lightbox_content]'; 

function showInfoSC(){ 
    return infoSC; 
} 

我想根據帖子的內容（先進的自定義字段）

<?php the_field('info'); ?> 

打開ligtbox哪有我讓這個工作？

Answer 1

你應該能夠利用wordpress中的do_shortcode()函數來獲取短代碼將返回的實際輸出。

do_shortcode('[su_lightbox_content id="showInfo"]Inline content[/su_lightbox_content]'); 

這將返回任何短碼輸出的字符串。請記住，JavaScript將使用多行字符串中斷，因此請注意，如果您計劃將其存儲在JavaScript中的字符串中，shortcode將輸出的html代碼。

我的建議是通過CSS隱藏任何簡碼顯示，然後利用javascript使內容可見。

例如，說短碼輸出

<div class="su_lightbox_content" id="showInfo"> 
    Inline content 
</div> 

在你的CSS，只需添加

#showInfo { 
    display: none; 
} 

而JavaScript函數：

function showInfo() { 
    document.getElementById("showInfo").style.display = "block"; 
} 

這樣，您就可以包括通常在文章/頁面中簡化代碼並避免使用javascript創建新元素f的任何複雜性從一個原始的html字符串。