СОЗДАНИЕ ПРОСТОГО ВЕБ-ПРИЛОЖЕНИЯ С ИСПОЛЬЗОВАНИЕМ WORDPRESS REST API с JavaScript

ОБЗОР

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

ТРЕБОВАНИЯ

1. Блог WordPress.
2. Веб-хостинг для размещения блога (рекомендую AwardSpace, это бесплатно).
3. REST API v2 (плагин WordPress)
4. JSON Web Token (JWT) Аутентификация (плагин Wordpress)
5. Почтальон

ВЫДЕЛЯТЬ

1. Создайте учетную запись на AwardSpace и ведите блог WordPress.
2. Настройте блог WordPress (необязательно).
3. Установите и настройте необходимые плагины.
4. Получите токен jwt с помощью почтальона
5. Отправка сообщений в формате JSON в блоге WordPress
6. Получайте сообщения из блога.

СОЗДАНИЕ БЛОГА НА AWARDSPACE

1. Создайте учетную запись на Awardspace и войдите в личный кабинет.
2. На вкладках перейдите к «Hosting Tools», а затем откройте «Zacky Installer».
3. Выберите платформу для создания сайтов (WordPress).
4. Выберите свой дизайн и установленные плагины (необязательно).
5. Настройте параметры своего веб-сайта, зарегистрируйте бесплатный домен
6. Установите свой новый блог
7. Войдите на страницу администратора вашего блога.

УСТАНОВИТЬ И АКТИВИРОВАТЬ WORDPRESS REST API (ВЕРСИЯ2)

1. На панели управления WordPress перейдите в раздел «Плагины» и нажмите «Добавить».
2. Найдите WordPress REST API (версия 2), созданный командой WP REST API.
3. Установите и активируйте плагин.

УСТАНОВИТЕ И АКТИВИРУЙТЕ ПЛАГИН АУТЕНТИФИКАЦИИ JSON WEB TOKEN (JWT)

1. Найдите «JWT Authentication for WP REST API» и установите плагин.
2. Вернитесь на панель управления AwardSpace, откройте файловый менеджер или любую другую службу хостинга, которую вы выбрали, откройте каталог WordPress, найдите и откройте файл «.htaccess».
3. В файл «.htaccess» добавьте следующий фрагмент кода;

RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

4. Настройте Секретный ключ в файле «wp-config.php», вставив следующий код;

define(‘JWT_AUTH_SECRET_KEY’, <your-top-secret-key>);
define(‘JWT_AUTH_CORS_ENABLE’, true);

5. Сохраните файл и активируйте плагин.

ПОЛУЧИТЬ ВЕБ-ТОКЕН JSON

Этот шаг объясняет, как получить веб-токен JSON с помощью Postman.

1. Создайте нового пользователя на панели инструментов WordPress и назначьте ему роль «Автор».
2. Откройте Postman и введите URL-адрес веб-сайта с конечной точкой ‘/ wp-json / jwt-auth / v1 / token’.
3. Добавьте параметры для имени пользователя и пароля с соответствующими значениями.
   URL-адрес должен выглядеть так
   http://example.org/wp-json/jwt-auth/v1/token? имя пользователя = ???? пароль = ????
4. Отправьте почтовый запрос, а затем получите ответ JSON с токеном и другими сведениями о пользователе.

ОТПРАВКА ПОСТОВ ИЗ ПРИЛОЖЕНИЯ В БЛОГ

Благодаря веб-токену JSON, полученному в последнем сеансе, теперь вы можете отправлять сообщения в блог WordPress с помощью HTTP-запроса AJAX. Есть много способов отправить данные, но я отправляю данные как объект JSON с помощью формы. Используя этот метод, мы возьмем пару значений в объекте JSON, что должно помочь нам передать их в запрос. Я создал простую форму для публикации данных со следующей разметкой.

HTML

<form name="post-form" id="post-form">
<label for="title">Title</label>
<input type="text" name="title" id="title">
<label for="status">Status</label>
<select name="status" id="status">
<option value="publish">Publish</option>
<option value="draft">Draft</option>
</select>
<label for="content">Content</label>
<textarea name="content" id="content"></textarea>
<input type="submit" name="submit" value="Submit">
</form>

Приведенный выше код будет состоять из трех основных полей для содержания, статуса и заголовка. Затем мы отправим форму и получим фрагмент кода JavaScript, подобный этому:

JAVASCRIPT

var postForm = $( '#post-form' );
var jsonData = function( form ) {
var arrData = form.serializeArray(),
objData = {};
$.each( arrData, function( index, element ) {
objData[element.name] = element.value;
});
return JSON.stringify( objData );
};
postForm.on( 'submit', function( e ) {
e.preventDefault();
$.ajax({
url: 'http://example/wp-json/wp/v2/posts',
method: 'POST',
data: jsonData( postForm ),
crossDomain: true,
contentType: 'application/json',
beforeSend: function ( xhr ) {
xhr.setRequestHeader( 'Authorization', “Bearer YOUR Token' );
},
success: function( data ) {
console.log( data );
},
error: function( error ) {
console.log( error );
}
});
});

Маршрут / wp / v2 / posts будет тем, который получит запрос AJAX, который был отправлен после отправки предыдущего фрагмента кода. После отправки HTML-форма будет преобразована в формат JSON, который затем используется методом $ .ajax () и его свойством data. Используя свойство contentType, мы установим тип контента на application / json. Когда запрос отправляется по маршруту / wp / v2 / posts, создается новое сообщение, но не раньше, чем мы включаем заголовок авторизации, который используется методом проверки подлинности JWT, который мы рассмотрели ранее.

ПОЛУЧАЙТЕ ЗАПИСИ ИЗ БЛОГА В ПЕРЕДНЕЕ ПРИЛОЖЕНИЕ

У меня есть простой шаблон, показывающий, как отображать сообщения из блога WordPress во внешнем интерфейсе нашего приложения. Гораздо удобнее использовать механизмы шаблонов, но для простоты мы воспользуемся этим методом.

HTML

<div class="container">
<h1>Posts</h1>
<div id="excerpt"></div>
</div>

JAVASCRIPT

function callpost() {
var URL = newFunction();
$.getJSON(URL, function(data) {
console.log(data);
updateDOM(data);
});
function newFunction() {
return 'http://example.org/wp-json/wp/V2/posts';
}
};
callpost();
function updateDOM(data)
for(i = 0; i < data.length; i++){
var date = data[i].date;
var excerpt = data[i].excerpt.rendered;
$('#excerpt').append("<section class='posts'><h5>Date: " +date     +"</h5><p>" + excerpt + "</p></section>");
};
};

РЕКОМЕНДАЦИИ

Если вы столкнулись с ошибкой Не удалось загрузить« http://example.org/wp-json/wp/V2/posts: На запрошенном ресурсе нет заголовка Access-Control-Allow-Origin . Следовательно, к источнику "null" доступ не разрешен. В ответе был код состояния HTTP 403 ”. Если вы хотите выполнить междоменный запрос, нужно сделать что-то другое. Учебник о том, как этого добиться, называется Использование CORS.

Самый простой способ - просто добавить расширение в Google Chrome, чтобы разрешить доступ с помощью CORS. (Https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

Просто активируйте это расширение всякий раз, когда вы хотите разрешить доступ без запроса заголовка ‘access-control-allow-origin’.

Or

В Windows вставьте эту команду в окно Выполнить.

chrome.exe - user-data-dir = "C: / Chrome dev session" - disable-web-security

откроется новый браузер chrome, который не разрешает доступ к запросу заголовка ‘access-control-allow-origin’ без запроса.