这很简单。非常简单，您需要确保您的来宾不会在DB中插入错误代码。所以请仔细阅读Data Validation 和Validating Sanitizing and Escaping User Data 在从前端表单向站点添加任何内容之前。
在创建新页面/new-post
创建一个页面模板，以该页面为目标，设置AJAX操作，在自定义页面模板中呈现表单使用jQuery将表单详细信息提交给AJAX，AJAX操作将验证数据，如果良好，将创建新帖子，AJAX将输出成功或失败响应，前端表单上的jQuery将通知用户成功或失败首先，创建一个名为
new-post 那会保持你的状态。然后创建
page template 使用文件结构以该页为目标
page-{slug}.php.
page-new-post.php
在该页面上，您可以查看
is_user_logged_in 如果他们有能力使用
current_user_can. 如果不是，你可以
wp_redirect 其他地方或
wp_die.
你需要用AJAX 因此，创建一个前端表单，单击该表单时；向WP提交数据、验证并创建新帖子。
注意到_nopriv 你不想在你的案例中使用它，因为有人会对你的网站进行垃圾邮件爬网。
// AJAX for logged in users
add_action( \'wp_ajax_create_new_post\', \'ajax_create_new_post_action\' );
// AJAX for non-logged in users
add_action( \'wp_ajax_nopriv_create_new_post\', \'ajax_nopriv_create_new_post_action\' );
一旦您收集了数据并在
ajax_create_new_post_action 然后，您需要使用
wp_insert_post.
由于涉及到很多步骤，我建议使用
WP Secure Forms 然后填补空白。下面是一个AJAX电子邮件提交表单的示例，可以很好地概述AJAX部分，包括清理。
Title {30 characters limit}
> * 30
| Your Title
! Field specific error message
Textarea{150 characters limit}
> 150
| Content
|
|
! Field specific error message
This label is invisible
> H
这个脚本进入主题的PHP文件。
<p id="wpse_form_message_wrap" class="secureforms-message-wrap"></p>
<form id="wpse_form" method="post">
<div id="wpse_form_10000-wrapper">
<label for="wpse_form_10000">* Title <span>30 characters limit</span></label>
<input type="text" name="wpse_form_10000" id="wpse_form_10000" value="" placeholder="Your Title" required="required" maxlength="30" />
<p class="secureforms-error-msg">Field specific error message</p>
</div>
<div id="wpse_form_20000-wrapper">
<label for="wpse_form_20000">Textarea{150 characters limit}</label>
<textarea rows="3" name="wpse_form_20000" id="wpse_form_20000" value="" maxlength="150" ></textarea>
<p class="secureforms-error-msg">Field specific error message</p>
</div>
<div id="wpse_form_30000-wrapper" class="secureforms-hidden-wrapper">
<input id="wpse_form_30000" name="wpse_form_30000" type="hidden">
</div>
<div id="wpse_form_footer">
<input type="hidden" id="check_wpse_form" name="check_wpse_form" value="" />
<input type="hidden" name="action" value="wpse_form" />
<?php echo wp_nonce_field(\'wpse_form\', \'_nonce_eklwu\', true, false); ?>
<input type="submit" name="wpse_form_submit_btn" id="wpse_form_submit_btn" value="Submit" />
</div>
</form>
功能。php这一步将进入您的函数中。php
// WP SECURE FORMS - EMAIL VALIDATION & SENDING
require_once( \'ajax/wpse_form.php\' );
// WP SECURE FORMS - ENQUEUE EMAIL JS
function enqueue_ajax_wpse_form() {
if (!is_admin()) {
wp_enqueue_script( \'ajax_wpse_form\', get_template_directory_uri().\'/ajax/wpse_form.js\', array(\'jquery\'), \'\', true );
wp_localize_script( \'ajax_wpse_form\', \'ajax_wpse_form\', array( \'ajax_url\' => admin_url( \'admin-ajax.php\' ) ) );
}
}
add_action( \'wp_enqueue_scripts\', \'enqueue_ajax_wpse_form\', 999 );
在主题文件夹中创建一个名为wpse\\u form的“ajax”文件夹。php。将下面的代码粘贴到其中。
<?php
function ajax_wpse_form_action() {
if ($_SERVER["REQUEST_METHOD"] == "POST"){
$return_message = \'\';
$status = \'success\';
$fields_with_errors = array();
// validate nonce
if(!wp_verify_nonce($_POST[\'_nonce_eklwu\'], $_POST[\'action\'])){
$status = \'error\';
}
// validate hidden field
if(!empty(trim($_POST[\'check_wpse_form\']))){
$status = \'error\';
}
if ($status == \'error\') {
$return_message = \'Data verification error. Check marked fields.\';
} else {
$wpse_form_10000 = strip_tags(trim(stripslashes($_POST[\'wpse_form_10000\'])));
if(!empty($wpse_form_10000)){
if(strlen($wpse_form_10000) > 30){
$status = \'error\';
$fields_with_errors[] = \'wpse_form_10000\';
}
} else {
$status = \'error\';
$fields_with_errors[] = \'wpse_form_10000\';
}
$wpse_form_20000 = strip_tags(trim(stripslashes($_POST[\'wpse_form_20000\'])));
if(!empty($wpse_form_20000)){
if(strlen($wpse_form_20000) > 150){
$status = \'error\';
$fields_with_errors[] = \'wpse_form_20000\';
}
}
$wpse_form_30000 = strip_tags(trim(stripslashes($_POST[\'wpse_form_30000\'])));
if ($status == \'error\') {
$return_message = \'Data verification error. Check marked fields.\';
} else {
// message
$to = \'[email protected]\';
$header = \'From: \'. get_bloginfo(\'name\') . \' <[email protected]>\'.PHP_EOL;
$subject = \'Test Email Subject\';
$formMessage = \'\';
$formMessage .= \'Title {30 characters limit}\' . "\\n";
$formMessage .= $wpse_form_10000 . "\\n\\n";
$formMessage .= \'Textarea{150 characters limit}\' . "\\n";
$formMessage .= $wpse_form_20000 . "\\n\\n";
$formMessage .= \'This label is invisible\' . "\\n";
$formMessage .= $wpse_form_30000 . "\\n\\n";
if ( wp_mail($to, $subject, $formMessage, $header) ) {
$return_message = \'Thank you for contacting us. We will get in touch as soon as possible.\';
} else {
$status = \'error\';
$return_message = \'There was an error sending the message. Please try again.\';
}
}
}
$resp = array(
\'status\' => $status,
\'return_message\' => $return_message,
\'fields_with_errors\' => $fields_with_errors,
);
header( "Content-Type: application/json" );
echo json_encode($resp);
die();
} else {
http_response_code(403);
}
}
add_action( \'wp_ajax_wpse_form\', \'ajax_wpse_form_action\' );
add_action( \'wp_ajax_nopriv_wpse_form\', \'ajax_wpse_form_action\' );
AJAX在主题文件夹中创建一个名为wpse\\u form的“AJAX”文件夹。js。将此代码粘贴到其中。
jQuery(document).ready(function($) {
var wpse_form_btn = $(\'#wpse_form_submit_btn\');
function init_wpse_form(){
/* VARS */
var form = $(\'#wpse_form\'),
type = form.attr(\'method\'),
requiredFields = [\'wpse_form_10000 | textline\'];
/* FUNCTIONS */
function showErrors(fieldsWithErrors){
form.find(\'.hasError\').removeClass(\'hasError\').end().find(\'.secureforms-error-msg.active\').removeClass(\'active\');
for(var i=0; i< fieldsWithErrors.length; i++){
if(fieldsWithErrors[i].length > 0){
$(\'#\' + fieldsWithErrors[i]).addClass(\'hasError\').next().addClass(\'active\');
}
}
}
/* TRIGGER */
wpse_form_btn.on(\'click\', function(e){
e.preventDefault();
e.stopPropagation();
if($(\'#check_wpse_form\').val()){
return false;
} else {
var emptyErrors = [];
for(var i = 0; i<requiredFields.length; i++){
var fieldData = requiredFields[i].split(\' | \'),
field = $(\'#\' + fieldData[0]),
fieldType = fieldData[1];
if(fieldType == \'select\'){
var selected = field.find(\':selected\');
if(selected.length > 0){
if(selected.val() == \'wpse_form_select_null\'){
emptyErrors.push(fieldData[0]);
}
} else {
emptyErrors.push(fieldData[0]);
}
} else if(fieldType == \'radio\' || fieldType == \'checkbox\'){
if(field.find(\'input:checked\').length <= 0){
emptyErrors.push(fieldData[0]);
}
} else {
if(!field.val()){
emptyErrors.push(fieldData[0]);
}
}
}
if(emptyErrors.length > 0){
showErrors(emptyErrors);
$(\'#wpse_form_message_wrap\').removeClass(\'success\').addClass(\'error\').text(\'Please fill all the required fields\');
return false;
} else {
var data = form.serialize();
$.ajax({
type: type,
url: ajax_wpse_form.ajax_url,
data: data,
dataType: \'json\',
success: function(response) {
if (response.status == \'success\') {
$(\'#wpse_form_message_wrap\')
.removeClass(\'error\')
.addClass(\'success\')
.text(response.return_message);
showErrors([]);
} else {
$(\'#wpse_form_message_wrap\')
.removeClass(\'success\')
.addClass(\'error\')
.text(response.return_message);
showErrors(response.fields_with_errors);
}
},
error: function(xhr,err){
console.log("readyState: "+xhr.readyState+"\\
status: "+xhr.status);
console.log("responseText: "+xhr.responseText);
}
})
}
}
});
};
if(wpse_form_btn.length > 0){
init_wpse_form();
}
});
将此代码粘贴到主题的主JS文件中。
$(\'body\').on(\'click\', \'input[type=radio]\', function(){
var wrapper = $(this).parent(),
triggers = wrapper.find(\'.isTrigger\');
if(triggers.length > 0){
triggers.each(function(){
if($(this).is(\':checked\')){
$(\'.\' + $(this).attr(\'data-toggle\')).slideDown(200);
} else {
$(\'.\' + $(this).attr(\'data-toggle\')).slideUp(200);
}
})
}
})
$(\'body\').on(\'click\', \'input[type=checkbox]\', function(){
var that = $(this),
wrapper = that.parent(),
limit = wrapper.attr(\'data-limit\'),
chosen = wrapper.find(\'input:checked\').length;
// disabling / enabling choices
if(that.is(\':checked\')){
if(chosen + 1 > limit){
wrapper.find(\'input\').not(\':checked\').prop(\'disabled\', true);
}
} else {
wrapper.find(\'input\').prop(\'disabled\', false);
}
// conditional showing / hiding fields
if(that.hasClass(\'isTrigger\')){
var targetClass = that.attr(\'data-toggle\');
if(that.is(\':checked\')){
$(\'.\' + targetClass).slideDown(200);
} else {
$(\'.\' + targetClass).slideUp(200);
}
}
})
$(\'body\').on(\'change\', \'select\', function(){
var that = $(this),
wrapper = that.parent(),
triggers = wrapper.find(\'.isTrigger\'),
options = wrapper.find(\'option\');
if(triggers.length > 0){
options.each(function(){
if($(this).is(\':selected\')){
if($(this).hasClass(\'isTrigger\')){
$(\'.\' + $(this).attr(\'data-toggle\')).slideDown(200);
}
} else {
if($(this).hasClass(\'isTrigger\')){
$(\'.\' + $(this).attr(\'data-toggle\')).slideUp(200);
}
}
})
}
})
将下面的代码粘贴到主题的主CSS文件中。
form>div, form>p{
margin-top: 0;
margin-bottom: 1em;
}
form fieldset {
margin: 0;
border: none;
padding: 0;
}
form label, form legend{
display: block;
margin-bottom: .25em;
}
form label span, form legend span{
font-size: .8em;
font-style: italic;
}
form label span::before, form legend span::before{
content: \'\';
display: block;
}
input[type="checkbox"]+label, input[type="radio"]+label, input[type="number"]+label{
display: inline-block;
}
form .showOnTrigger{
display: none;
}
.secureforms-error-msg{
display: none;
color: red;
}
.secureforms-error-msg.active{
display: block;
}
.secureforms-hidden-wrapper{
display: none;
}
.secureforms-message-wrap.error{
border: 2px solid red;
}
.secureforms-message-wrap.success{
border: 2px solid green;
}
