Добавление сообщений на внешний сайт сайта с использованием AJAX

19 января 2018

WordPress в основном делит на две части, переднюю часть, где люди могут приходить и читать сообщения или статьи на сайте. Другой - это раздел администрирования WordPress, из которого можно создавать сообщения и страницы. Это очень хорошо работает, если WordPress используется как общий сайт для ведения блога. Но поскольку WordPress используется для разных типов сайтов, иногда возникает необходимость дать пользователю возможность создавать сообщения из передней части сайта, не заставляя его заходить в раздел администрирования WordPress.

В этом учебном пособии мы рассмотрим, как создать виджет, чтобы пользователи могли создавать сообщения из внешнего интерфейса. Это поможет пользователям сайта создавать контент.


Шаг 1 Создание плагина

Чтобы создать плагин, создайте файл ajaxpostfromfront.php в своих плагинах wp-content ajaxpostfromfront. Чтобы создать плагин в WordPress, мы должны добавить заголовок модуля следующим образом:

/*
Plugin Name: Ajax post from front
Plugin URI:
Description:Allows to post from front end
Author: Abbas Suterwala
Version:
Author URI:
*/

Мы также определим некоторые именованные константы для нашего URL-адреса плагина и пути плагина следующим образом:

define('APFSURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('APFPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

Это поможет нам легко использовать их там, где это необходимо в плагине. Также создайте папку js в вашей папке ajaxpostfromfront и добавьте в нее файл apf.js. Таким образом, структура папок плагина будет выглядеть следующим образом:

Теперь мы введем в очередь сценарии, подключившись к ключу действия wp_enqueue_scripts и запустим наш файл javascript и локализуем его, чтобы сохранить URL-адрес ajax WordPress, который мы будем использовать для наших вызовов ajax.

function apf_enqueuescripts()
{
    wp_enqueue_script('apf', APFSURL.'/js/apf.js', array('jquery'));
    wp_localize_script( 'apf', 'apfajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', apf_enqueuescripts);

Если все дошло до сих пор, мы сможем увидеть наш плагин в списке плагинов, и мы должны его активировать.


Шаг 2 Понимание функций WordPress для создания нового сообщения

WordPress имеет богатый набор API или функций, которые подвергаются выполнению задач для плагинов. Он имеет функции для всех типов задач, таких как создание сообщения, создание страницы, комментарии и т. Д. В этом плагине мы будем использовать функцию WordPress wp_insert_post.

wp_insert_post принимает массив различной информации, необходимой для создания сообщения в WordPress. Он принимает различные параметры, такие как заголовок сообщения, пост-контент, статус сообщения и т. Д. Он также принимает в себя массив категорий, которые должны быть связаны с сообщением. Он также содержит некоторые другие параметры, такие как почтовый пароль и пост-отрывок и т. Д.

Полный список параметров можно найти на странице wp_insert_post в WordPress Codex.


Step 3 Создание пользовательского интерфейса для создания сообщения с лицевой стороны

Затем мы создадим пользовательский интерфейс для нашего сообщения из плагина front end. Для этого мы будем писать следующую функцию:

function apf_post_form()
{
    ?>
    <form id="apfform" action="" method="post"enctype="multipart/form-data">
        <div id="apf-text">
            <div id="apf-response" style="background-color:#E6E6FA"></div>
            <strong>Title </strong> <br/>
            <input type="text" id="apftitle" name="apftitle"/><br />
            <br/>
            <strong>Contents </strong> <br/>
            <textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />
            <br/>
            <a onclick="apfaddpost(apftitle.value,apfcontents.value);" style="cursor: pointer"><b>Create Post</b></a>
        </div>
    </form>
    <?php
}

В этой функции мы сначала создадим форму, используя тег

. В этом случае мы создадим div с идентификатором apf-response, который будет обновляться сообщением, полученным от ответа AJAX, который мы получим. Затем мы создали текстовое поле для заголовка и текстовую область для содержимого сообщения.

Затем создадим ссылку под названием «создать сообщение», которая вызывает функцию apfaddpost javascript, которая сделает вызов AJAX для создания сообщения. Мы увидим реализацию вызова AJAX в следующих шагах.

В случае, если мы вызываем функцию apf_post_form в файлах тем, вы увидите ее следующим образом. В моей теме я только что назвал ее до основного цикла.


Шаг 4 Создание виджета для отображения пользовательского интерфейса на лицевой стороне

Теперь мы создадим виджет для нашего сообщения из плагина front. Этот виджет отобразит пользовательский интерфейс для публикации с фронта, который мы создали. Ниже приведен код для виджета.

class AjaxPostFromFrontWidget extends WP_Widget {
    function AjaxPostFromFrontWidget() {
        // widget actual processes
        $widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );
        $this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);
    }
    function form($instance) {
        // outputs the options form on admi
        $defaults = array( 'title' => 'Ajax Post From Front' );
        $instance = wp_parse_args( (array) $instance, $defaults );
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo 'Title:'; ?></label>
            <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
        </p>
        <?php
    }
    function update($new_instance, $old_instance) {
        // processes widget options to be saved
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] );
        return $instance;
    }
    function widget($args, $instance) {
        // outputs the content of the widget
        extract( $args );
        $title = apply_filters('widget_title', $instance['title'] );
        echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;
        echo '<ul>';
        echo apf_post_form();
        echo '</ul>';
        echo $after_widget;
    }
}

В конструкторе мы даем имя класса и описание виджета. В функции формы в настоящее время отображается только одно поле, которое является заголовком, отображаемым для виджета. Мы обновляем поле заголовка в функции обновления.

В функции виджетов мы получим заголовок, сохраненный в экземпляре виджета, и отобразите его. Затем мы вызываем функцию apf_post_form, которая отображает форму, созданную нами на предыдущем шаге.

Мы зарегистрируем виджет следующим образом:

function apf_widget_init() {
    // Check for the required API functions
    if ( !function_exists('register_widget') )
        return;
    register_widget('AjaxPostFromFrontWidget');
}
add_action('widgets_init', 'apf_widget_init');

Теперь мы можем перетащить наш новый виджет на боковой панели.

Как только виджет будет удален на боковой панели, вы сможете увидеть форму на главной странице на боковой панели, как показано ниже:


Шаг 5 Создание сообщения через AJAX С переднего конца

Теперь давайте создадим функцию для обработки запроса AJAX для создания сообщения. Функция для обработки запроса AJAX выглядит следующим образом:

function apf_addpost() {
    $results = '';
    $title = $_POST['apftitle'];
    $content =  $_POST['apfcontents'];
    $post_id = wp_insert_post( array(
        'post_title'        => $title,
        'post_content'      => $content,
        'post_status'       => 'publish',
        'post_author'       => '1'
    ) );
    if ( $post_id != 0 )
    {
        $results = '*Post Added';
    }
    else {
        $results = '*Error occurred while adding the post';
    }
    // Return the String
    die($results);
}

В этой функции мы получаем значения заголовка и содержимого из переменной $ _POST. С этими значениями используется функция wp_insert_post WordPress для создания сообщения. Функция wp_insert_post возвращает вновь созданный идентификатор сообщения, если он был успешным, и ноль, если не удалось. Поэтому, используя это значение, мы либо отправили сообщение об успехе, либо сообщение об ошибке из AJAX.

Чтобы зарегистрировать эту функцию в системе WordPress AJAX, мы вызываем следующее:

// creating Ajax call for WordPress
add_action( 'wp_ajax_nopriv_apf_addpost', 'apf_addpost' );
add_action( 'wp_ajax_apf_addpost', 'apf_addpost' );

Как только наш обработчик AJAX будет выполнен, нам просто нужно сделать запрос AJAX из нашего кода javascript следующим образом:

function apfaddpost(posttitle,postcontent) {
    jQuery.ajax({
        type: 'POST',
        url: apfajax.ajaxurl,
        data: {
            action: 'apf_addpost',
            apftitle: posttitle,
            apfcontents: postcontent
        },
        success: function(data, textStatus, XMLHttpRequest) {
            var id = '#apf-response';
            jQuery(id).html('');
            jQuery(id).append(data);
            resetvalues();
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}
function resetvalues() {
    var title = document.getElementById("apftitle");
    title.value = '';
    var content = document.getElementById("apfcontents");
    content.value = '';
}

В функции apfaddpost мы просто делаем запрос AJAX, передавая заголовок сообщения и содержимое сообщения. После получения ответа мы просто выводим сообщение, возвращенное обработчиком AJAX в apf-ответе div. После этого мы сбрасываем значения в форме.

После нажатия на сообщение создать сообщение будет создано, и сообщение будет выглядеть следующим образом:


Шаг 6 Добавление опции разрешить только вход в систему Пользователи

Теперь мы добавим функции, позволяющие администратору выбрать, не хотят ли пользователи, которые не вошли в систему для создания сообщений.

Для этого мы обновляем apf_post_form следующим образом, чтобы принять аргумент $ allowNotLoggedInuser. В этом случае, когда пользователь не войдет в систему, он не отобразит форму, но отобразит сообщение для входа.

function apf_post_form($allowNotLoggedInuser='yes') {
    if ( $allowNotLoggedInuser == 'no' &&  !is_user_logged_in() ) {
        echo "Please Login to create new post";
        return;
    }
    ?>
    <form id="apfform" action="" method="post"enctype="multipart/form-data">
        <div id="apf-text">
            <div id="apf-response" style="background-color:#E6E6FA ;color:blue;"></div>
            <strong>Title </strong> <br/>
            <input type="text" id="apftitle" name="apftitle"/><br />
            <br/>
            <strong>Contents </strong> <br/>
            <textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />
            <br/>
            <a onclick="apfaddpost(apftitle.value,apfcontents.value);" style="cursor: pointer"><b>Create Post</b></a>
        </div>
    </form>
    <?php
}

Мы также обновим виджет, чтобы отобразить еще один параметр в функции формы, чтобы отобразить поле выбора, спрашивая, разрешено ли для незарегистрированных пользователей отправлять сообщения. Мы также обновим значения в функции обновления. Теперь в функции виджетов мы читаем значение, которое было установлено в виджете, а затем передаем его функции apf_post_form.

Обновленный код виджетов должен выглядеть следующим образом:

class AjaxPostFromFrontWidget extends WP_Widget {
    function AjaxPostFromFrontWidget() {
        // widget actual processes
        $widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );
        $this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);
    }
    function form($instance) {
        // outputs the options form on admi
        $defaults = array( 'title' => 'Ajax Post From Front','allow_not_logged_users' => 'no' );
        $instance = wp_parse_args( (array) $instance, $defaults );
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo 'Title:'; ?></label>
            <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'allow_not_logged_users' ); ?>">allow_not_logged_users:</label>
            <select id="<?php echo $this->get_field_id( 'allow_not_logged_users' ); ?>" name="<?php echo $this->get_field_name( 'allow_not_logged_users' ); ?>" class="widefat" style="width:100%;">
                <option <?php if ( 'no' == $instance['allow_not_logged_users'] ) echo 'selected="selected"'; ?>>no</option>
                <option <?php if ( 'yes' == $instance['allow_not_logged_users'] ) echo 'selected="selected"'; ?>>yes</option>
            </select>
        </p>
        <?php
    }
    function update($new_instance, $old_instance) {
        // processes widget options to be saved
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['allow_not_logged_users'] = $new_instance['allow_not_logged_users'];
        return $instance;
    }
    function widget($args, $instance) {
        // outputs the content of the widget
        extract( $args );
        $allow_not_logged_users = isset( $instance['allow_not_logged_users'] ) ? $instance['allow_not_logged_users'] : 'no';
        $title = apply_filters('widget_title', $instance['title'] );
        echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;
        echo '<ul>';
        echo apf_post_form($allow_not_logged_users);
        echo '</ul>';
        echo $after_widget;
    }
}

Теперь из виджета мы можем выбрать вариант, разрешить ли вход в систему пользователям или нет, как показано ниже.

Теперь, если опция установлена на нет, а кто-то посещает домашнюю страницу без входа в систему, они будут видеть следующее сообщение для входа в систему.


Step 7 Добавление опции добавления категорий в сообщение через виджет переднего конца

Теперь мы добавим функциональные возможности для добавления категорий в сообщение, которое мы создаем с передней стороны. Для этого сначала мы получим список всех категорий и покажем их как флажки в пользовательском интерфейсе.

Для этого мы добавим следующий код в функцию apf_post_form.

<strong>Contents </strong> <br/>
<textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />
<?php
    $categories = get_categories(array('hide_empty'=> 0));
    foreach ( $categories as $category ) {
        echo "<input type='checkbox' name='apfcategorycheck' id='apfcategorycheck' value='$category->term_id' />";
        echo $category->cat_name;
        echo '<br>';
    }
?>
<br/>
<a onclick="apfaddpost(apftitle.value,apfcontents.value,apfcategorycheck);" style="cursor: pointer"><b>Create Post</b></a>

Вышеприведенный код получает список всех категорий и отображает их как флажки. Это значение передается нашей javascript-функции apfaddpost в качестве дополнительного параметра.

В функции apfaddpost мы получаем значения, которые проверяются и передаются в вызов AJAX следующим образом:

function apfaddpost ( posttitle,postcontent,postcategory ) {
    var postCatergoryArray = new Array();
    for ( var i=0; i < postcategory.length; i++ ) {
        if ( postcategory[i].checked ) {
            postCatergoryArray[postCatergoryArray.length] = postcategory[i].value;
        }
    }
    jQuery.ajax({
        type: 'POST',
        url: apfajax.ajaxurl,
        data: {
            action: 'apf_addpost',
            apftitle: posttitle,
            apfcontents: postcontent,
            apfcategory:postCatergoryArray
        }
    });

Нам нужно будет обновить обработчик AJAX следующим образом, чтобы взять массив идентификаторов категорий, а затем передать его функции wp_insert_post, чтобы новосозданная публикация соответствовала соответствующим категориям.

function apf_addpost() {
    $results = '';
    $title = $_POST['apftitle'];
    $content =  $_POST['apfcontents'];
    $category = $_POST['apfcategory'];
    $post_id = wp_insert_post( array(
        'post_title'        => $title,
        'post_content'      => $content,
        'post_status'       => 'publish',
        'post_category'     => $category,
        'post_author'       => '1'
    ) );
    if ( $post_id != 0 ) {
        $results = '*Post Added';
    }
    else {
        $results = '*Error occured while adding the post';
    }
    // Return the String
    die($results);
}

Теперь, если мы увидим виджет, это будет выглядеть следующим образом:

И созданный пост будет иметь те избранные категории, связанные с ним, как показано ниже.


Заключение

WordPress - расширяемая платформа. Мы можем расширить WordPress, чтобы добавить разные функциональные возможности, чтобы платформа WordPress могла использоваться для разных типов сайтов, а не только для блогов. Как и в этом плагине, мы добавили функциональность создания сообщений с лицевой стороны, WordPress можно расширить по-разному. Настолько счастливая кодировка WordPress!