HTML輸出中的WordPress簡碼

Question

我只是想知道是否可以在我的JavaScript頁面的html輸出中輸出wordpress簡碼？

您會看到我有一個javascript文件，其內容如下：

$(document).ready(function () {
    $("#bannav li a").on("click", function (e) {
        e.preventDefault();
        var hrefval = $(this).attr("href");
        if (hrefval == "#enquire") {
          var distance = $('#banner').css('right');
          $('.banner-rt-content1').html('
            <div style="padding:20px;">
            [contact-form-7 id="102" title="Make an Enquiry"]
            </div>
          ');
          if (distance == "auto" || distance == "0px") {
            $(this).addClass("open");
            openSidepage();
          }
        }

問題是我想使用其WordPress短代碼[contact-form-7 id="102" title="Make an Enquiry"]在此JS頁面中輸出我的Contact Form 7表單。 那有可能嗎？

Answer 1

在頁面加載之前，將使用PHP處理Wordpress中的簡碼。 不幸的是，沒有一種簡單的方法可以直接在您的javascript中直接處理它們。 您需要制作一個AJAX處理程序以獲取處理后的短代碼的輸出，或者讓PHP為您編寫JavaScript。 Wordpress中的AJAX比第二個選項稍微困難一點，因此我將解釋一個。

您可以本地化短代碼的輸出，然后在javascript中引用它。 由於大多數wordpress主題都使用jQuery，因此我將腳本本地化為jQuery。 將此添加到您的功能文件：

$translation = do_shortcode('[contact-form-7 id="102" title="Make an Enquiry"]');

wp_localize_script( 'jquery', 'contact_form', array( 'html' => $translation) );

然后在您的JavaScript中執行以下操作：

$('.banner-rt-content1').html('<div style="padding:20px;">'+contact_form.html+'</div>');

那應該把您需要的內容帶入頁面。