Wordpress - Erstellen Sie dynamische onclick Redirect-Methode mit Parametern aus benutzerdefinierten Post-Felder

Question

Um ehrlich zu sein, ich bin kein Guru von WordPress env. aber ich muss ein bestimmtes Problem lösen. Mein Template-Code lautet wie folgt:

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

I Benutzer der Präsentationsseite innerhalb neuen Browser-Tab umleiten möchten einmal „zu Präsentation Go“ geklickt haben. Das Problem ist, dass ich einige Parameter übergeben muss, die sich in Wordpress Custom Fields befinden und für jeden Wordpress-Post unterschiedlich sind.

Meine Idee war, JS-Funktion zu erstellen, die bei Verwendung der HTML onclick-Methode gestartet wird.

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(); 
} 

Die Frage ist, was ist der richtige Weg, benutzerdefinierte Felder Werte in goToUrl Funktion übergeben? Wie erstelle ich ein JS-Parameter-Objekt mit Wordpress-Feldwerten? Wie JS-Code mit PHP-Code zB mischen .:

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

Answer 1

Das Hauptproblem, das Sie zu Gesicht scheinen über PHP-Daten Austeilen an die JS-Datei. Die Funktion wp_localize ist genau für solche Fälle gedacht. In Ihrem Fall müssen Sie zuerst die js-Datei in functions.php registrieren und die Variablen lokalisieren wie folgt:

// 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'); 

können Sie dann die Variablen in PHP zugreifen wie folgt aus:

var value = _object.some_value;