javascript - 如何在 wordpress 前端使用 ajax 保存帖子和自定义字段值？

Question

p.s. had placed this simply to share the solution.

如果我们在 js 中使用 ajax 单击一个按钮，我想在前端保存一个帖子:

var title = $("#portfolioTitle").val();
var customFieldValues = $("#customfieldValue").val();

$("#btnClick").on("click", function() {
  $.ajax({
    url : ajax_url,
    type: 'post',
    dataType: 'json',
    data: { 
      action: 'data_Publish', portfolioTitle: title, fieldValues: customFieldValues 
    },
    success: function(data) {
      if(data == "exists") {
        console.log("Add a different title");         
      } else {
        console.log("post added");
        console.log(data["link"]);
        console.log(data["title"]);
      }   
    }
  });
});

Answer 1

放置我自己的答案但想知道是否有任何速度或安全改进？

例如我们可以添加一个缓存系统，或者define our own ajax (也许可以提供帮助:How to implement the code in the link using the case scenario using the case scenario we have on this question?)为了不让 wordpress 加载所有文件，但在这里我们正在做一个http 请求，无论如何，如果你们中的任何人愿意付出他们的 2 美分以使其更快，那就太好了。

假设我们想要在 wordpress 前端通过 ajax 添加帖子，并且我们想要检查标题在数据库中是否唯一，否则告诉用户添加不同的标题:

我们有一个按钮可以点击:

<button type="button" id="btnClick">Load</button>

我们有标题输入和自定义字段:

<input type="text" id="portfolioTitle" name="portfolioTitle" value="" placeholder="Your title...">

<input type="text" id="customfieldValue" name="customfieldValue" value="" placeholder="Your customFieldvalue...">

JS。首先，您需要加载 wordpress ajax(如果有人愿意，可以改进这一点):

var ajax_url = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

然后是您的javaScript:

var title = $("#portfolioTitle").val();
var customFieldValues = $("#customfieldValue").val();

$("#btnClick").on("click", function() {
  $.ajax({
    url : ajax_url,
    type: 'post',
    dataType: 'json',
    data: { 
      action: 'data_Publish', portfolioTitle: title, fieldValues: customFieldValues 
    },
    success: function(data) {
      if(data == "exists") {
        console.log("Add a different title");         
      } else {
        console.log("post added");
        console.log(data["link"]);
        console.log(data["title"]);
      }   
    }
  });
});

然后在 function.php 中:

function data_Publish() {
  $post_title = $_POST['portfolioTitle'];
  $post_custom_field = $_POST['fieldValues'];
  $post = array(
    'post_title'    => $post_title,
    'post_status'   => 'publish',
    'post_type'   => 'page',
    'page_template'  => 'portoflio.php'
  );
  if ( get_page_by_title( $post_title ) === null ) {
    // the title is unique, we can add the new page
    $post_id = wp_insert_post( $post );
    add_post_meta($post_id, 'customField', $post_custom_field], true);
    $link = get_permalink( get_page_by_title( $post_title ) );
    $title = get_the_title($post_id);
    $newPostAttributes[] = array("link"=>$link, "title"=>$title);
    echo json_encode($newPostAttributes);
  } else {
    // that title already exists, tell the user to change it
    echo json_encode("exists");
  }
  wp_die();
}
add_action('wp_ajax_data_Publish', 'data_Publish');

基本上该函数是一个普通的 wordpress 查询。因此，如果您愿意，您可以使用相同的逻辑来检索帖子值，例如，您不会使用 $post_id = wp_insert_post( $post ); 但也许可以将标题恢复为您将使用 $postTile = get_the_title(); 的用户。

让我们分解一下:

在 ajax 中，我们使用 action: 'data_Publish', portfolioTitle: title 其中 data_Publish 是我们的 php 函数，而 portfolioTitle: title 是我们发送的内容。

在函数中我们可以看到:$post_title = $_POST['portfolioTitle']; 这是我们通过 ajax 发送的标题。使用 'page_template' => 'portoflio.php' 我们可以将我们自己的模板添加到该页面。

然后我们需要使用 if ( get_page_by_title( $_POST['portfolioTitle'] ) === null ) { 来检查该标题是否存在，如果不存在，我们使用 $post_id = wp_insert_post( $post );

将帖子添加到数据库

添加它后，我们使用以下命令将任何其他值添加到新创建的帖子中的自定义字段add_post_meta($post_id, 'customField', $_POST['customfieldValue'], 其中customField 是我们要在刚刚添加的新帖子中创建的自定义字段的名称。

因此，如果帖子不存在，我们会保存它，我们可以将它的标题和链接发送回 ajax，这样我们就可以将它作为响应显示给用户，如果我们愿意永远想要。

所以我们这样定义标题和链接，我们创建一个多维数组来将数据发送回前端:

$link = get_permalink( get_page_by_title( $post_title ) );
$title = get_the_title($post_id);
$newPostAttributes[] = array("link"=>$link, "title"=>$title);

如果标题存在，我们会发回一个响应 echo json_encode("exists");

为了安全我们需要终止查询 wp_die();

如果我们想让任何登录用户都可以使用 ajax，记住 wordpress ajax 只对管理员可用，所以我们需要添加:

add_action('wp_ajax_data_Publish', 'data_Publish');
add_action( 'wp_ajax_nopriv_data_Publish', 'data_Publish' );

基本上在 function.php wordpress 中使用 wp_ajax_ +"name of our function" 并且 wordpress 有 wp_ajax_nopriv_ 使 ajax 在没有记录时可用.

我希望它对任何人都有帮助，如果你们中的任何人可以改进它，它对所有人来说都会更好。