Wordpress - カスタム投稿フィールドのパラメータを使用して動的onclickリダイレクトメソッドを作成する

Question

正直言って、私はwordpress envの教祖ではありません。私はある種の問題を解決しなければならない。次のように私のテンプレートコードは次のとおりです。

<div class="section-one"> 
    <div class="section-one-container"> 
     <h1><?php the_title(); ?></h1> 
     <?php the_excerpt(); ?> 
     <div class="link"> 
      <a href="" target="_blank">Go to the presentation</a> 
     </div> 
    </div> 
    <?php if(has_post_thumbnail()) 
     echo '<div class="image">'; 
     the_post_thumbnail('full'); 
     echo '</div>'; 
    ?> 
</div> 

クリックされた「プレゼンテーションに行く」一度私は新しいブラウザタブ内プレゼンテーションページにユーザーをリダイレクトします。問題は、Wordpress Custom Fieldsにあるいくつかのパラメータを渡さなければならず、各Wordpressの投稿ごとに異なることです。

私の考えは、HTML onclickメソッドを使用するときに起動されるJS関数を作成することでした。

function gotoUrl(path, params, method) { 
    //Null check 
    method = method || "post"; // Set method to post by default if not specified. 

    // The rest of this code assumes you are not using a library. 
    // It can be made less wordy if you use one. 
    var form = document.createElement("form"); 
    form.setAttribute("method", method); 
    form.setAttribute("action", path); 

    //Fill the hidden form 
    if (typeof params === 'string') { 
     var hiddenField = document.createElement("input"); 
     hiddenField.setAttribute("type", "hidden"); 
     hiddenField.setAttribute("name", 'data'); 
     hiddenField.setAttribute("value", params); 
     form.appendChild(hiddenField); 
    } 
    else { 
     for (var key in params) { 
      if (params.hasOwnProperty(key)) { 
       var hiddenField = document.createElement("input"); 
       hiddenField.setAttribute("type", "hidden"); 
       hiddenField.setAttribute("name", key); 
       if(typeof params[key] === 'object'){ 
        hiddenField.setAttribute("value", JSON.stringify(params[key])); 
       } 
       else{ 
        hiddenField.setAttribute("value", params[key]); 
       } 
       form.appendChild(hiddenField); 
      } 
     } 
    } 

    document.body.appendChild(form); 
    form.submit(); 
} 

質問は、カスタムフィールド値をgoToUrl関数に渡す適切な方法は何ですか？どのようにWordPressのフィールド値でJS paramsオブジェクトを作成するには？あなたが直面しているように見える主な問題は、JSファイルの上でPHPのデータを配っている方法例えばPHPコードとJSコードを混在させる：

const params = { 
    color: <?php the_field('color'); ?>, 
    label: <?php the_field('label'); ?>, 
    mode: <?php the_field('mode'); ?> 
    ... 
} 

Answer 1

。そのような場合にwp_localize関数が正確に作られています。 あなたのケースでは、あなたが最初のfunctions.php内のjsファイルを登録し、次のように変数をローカライズする必要があります。

// Register the script 
wp_register_script('some_handle', 'path/to/myscript.js'); 
$custom_field = get_post_meta($postid,"meta_key",true); //get the custom field 
// Localize the script with new data 
$data = array(
    'some_value' => $custom_field 
); 
wp_localize_script('some_handle', '_object', $data); 

// Enqueued script with localized data. 
wp_enqueue_script('some_handle'); 

あなたは、このようなPHPの変数にアクセスすることができます。

var value = _object.some_value;