Если вы хотите просто посмотреть код, вы можете найти его на Github.
Есть вопросы по Wordpress или вы хотите больше подобных руководств? Позови меня в любое время!
Я давно хотел поэкспериментировать с API Wordpress, и после объявления о том, что он подходит все ближе и ближе к пониманию ядра Wordpress, я подумал, что сейчас самое подходящее время, чтобы встать на ноги. влажный.
Идея заключалась в том, чтобы создать своего рода цифровую «газету» со статьями, доступными через API на основе Wordpress. Это позволяет интерфейсу работать полностью отдельно от экземпляра Wordpress.
Общая архитектура
Для этого проекта нам понадобятся два отдельных экземпляра, которые могут общаться друг с другом. API Wordpress будет предоставлять сообщения для внешнего интерфейса, а javascript будет потреблять их и выводить на страницу.
В будущей версии я могу представить, что это общение будет двусторонним. Например, если пользователь видит опечатку, он может захотеть иметь возможность редактировать сообщение прямо на странице, а интерфейс передаст это обратно в Wordpress.
Однако для первой версии я сделал все просто.
Установка Wordpress
Что касается Wordpress, я хотел, чтобы он был очень простым. Экземпляр Wordpress представляет собой базовую версию Wordpress всего с двумя плагинами: Fakerpress и WP REST API.
Поскольку я не хотел генерировать тестовые сообщения вручную, я использовал Fakerpress, чтобы получить некоторые данные для работы. Существует множество различных настроек на выбор (хотите ли вы, чтобы в ваших сообщениях были изображения, были ли у них заголовки и многое другое…), но когда вы закончите, ваша настройка должна выглядеть примерно так:
Все, что осталось на стороне Wordpress, — это настроить API.
Последняя версия плагина API дает вам конечную точку:
/wp-json/wp/v2/
Если мы запустим запрос на получение этой конечной точки, мы увидим все возможные конечные точки, которые мы можем затронуть. Тот, который мы будем давать нам сообщения, естественно:
/wp-json/wp/v2/posts
Итак, теперь у нас есть наш API, который выгружает все наши посты, и мы можем оставить его работающим, пока займемся внешним интерфейсом.
Настройка Javascript
Опять же, мы сохраняем это простым и просто придерживаемся jQuery. Я рассматривал возможность использования чего-то вроде React в будущем, но jQuery подходит для прототипа.
Есть еще несколько зависимостей, которые нам нужны, но мы доберемся до них по мере их появления.
Первый — Gridster.js. Мы будем полагаться на это, чтобы предоставить нам сетку, перетаскивание и изменение размера из коробки. Для демонстрации этой конкретной функциональности иди сюда.
Чтобы настроить нашу бумагу, я использовал Foundation, чтобы помочь нам с сеткой, и начал со следующей разметки.
<div class=”paper”>
<div class=”header”>
<h1>Javascript News Daily</h1>
</div>
<div class=”gridster”>
<ul>
</ul>
</div>
</div>
Очень просто, но это потому, что большая часть нашего контента будет добавляться динамически. Добавление пары кнопок, чтобы помочь нам (я вернусь к этому позже), дает нам следующий вид.
Здесь мы можем использовать наш новый API Wordpress. Когда мы нажимаем «Добавить историю», нам нужен модальный режим, чтобы выбрать историю из API.
Давайте взглянем на код, который обеспечивает добавление истории.
var apiBase = ‘http://wp-rest.dev/wp-json/wp/v2/'; $.get( apiBase + “posts?filter[posts_per_page]=-1”, function( data ){ $( “.result” ).html( data ); posts = data; $.each(posts, function(index, value){ post_titles.push(value.title.rendered); post_ids.push(value.id); }); $(‘#pendingStory.typeahead’).typeahead({ hint: true, highlight: true, minLength: 1 }, { name: ‘titles’, source: substringMatcher(post_titles) }); });
Сначала мы запускаем запрос, чтобы получить все сообщения. Если вы этого не сделаете, Wordpress будет возвращать только то количество сообщений, которое установлено в ваших настройках чтения по умолчанию (обычно 8 или 10), и, поскольку мы хотим, чтобы все заголовки были нам доступны, это просто не сработает. Опять же, это можно было бы оптимизировать, лучше интегрировав ввод с опережением в вызов API, но ради прототипирования мы вытащим все.
Затем мы разбиваем результаты на массив идентификаторов постов и массив заголовков. Массив titles — это то, что приводит в действие упреждающий ввод, а идентификаторы используются позже для фактического извлечения содержимого поста.
Когда все это на месте, мы можем начать печатать и увидеть результаты нашего вызова API.
Нажатие на один из этих результатов или использование клавиш со стрелками для выбора одного из них приводит к предварительному просмотру сообщения, загружаемого в модальное окно.
Это обеспечивается событием :selected в typeahead.
$(‘#pendingStory’).bind(‘typeahead:selected’, function(obj, datum, name) {
selectedPost = posts[post_titles.indexOf(datum)];
$(‘.story-preview’).html(‘<h3>’ + selectedPost.title.rendered + ‘</h3>’ + selectedPost.content.rendered.substring(0, 200) + ‘…’);
});
На самом деле нажатие кнопки «Добавить историю» поместит историю в сетку и немного очистит модальное окно.
$(‘.modal-add-story’).click(function(){
$(‘#addStoryModal’).foundation(‘reveal’, ‘close’);
$(‘.story-preview’).html(‘This is where a preview of the story will go.’);
$(‘#pendingStory’).val(‘’);
var gridster = $(“.gridster ul”).gridster().data(‘gridster’);
var storyTitle = selectedPost.title.rendered;
var storyCopy = selectedPost.content.rendered;
html = ‘<li class=”story”><h2>’ + storyTitle + ‘</h2><p class=”body-copy”>’ + storyCopy + ‘</p></li>’;
gridster.add_widget(html, 2, 1);
});
Теперь у нас есть история со всем контентом из Wordpress API в нашей «газете».
Изначально история начинается с малого, но ее можно расширить, перетащив ручку в правом нижнем углу.
Этот процесс добавления историй и их размещения можно легко повторять до тех пор, пока не будет сгенерирован весь макет.
Хорошо смотритесь! Если у вас возникли проблемы с визуализацией границ историй, мы можем легко добавить кнопку для переключения границ каждой из историй.
$(‘button.border’).click(function(){
if($(‘.story’).hasClass(‘borders’)) {
$(‘.story’).removeClass(‘borders’);
}
else {
$(‘.story’).each(function(){
$(this).addClass(‘borders’);
})
}
});
Последний шаг — фактически экспортировать это во что-то, что мы можем использовать. Для целей этой демонстрации мы экспортируем ее в формате PDF. Поскольку мы хотели сделать этот внешний интерфейс полностью несвязанным, создание PDF-файла с помощью Javascript было бы идеальным. К счастью, JSPDF делает это относительно легко.
Для рендеринга HTML в PDF также требуется плагин HTML2Canvas, так что позаботьтесь о том, чтобы избавить себя от разочарования и скачать его прямо сейчас.
Когда у нас все это будет готово, мы можем просто передать HTML-код, из которого мы хотим создать PDF-файл, в JSPDF, и он начнет загрузку PDF-файла, когда это будет сделано.
$(‘.export-pdf’).click(function(){
var pdf = new jsPDF();
pdf.addHTML($(“.paper”)[0],function() {
pdf.save(‘js-news-daily.pdf’);
});
});
Обратите внимание, что если у вас включены границы, эти границы будут включены в окончательный вывод PDF. Вот что у нас получилось.
Общее потраченное время: около 6 часов
Многое еще можно было бы сделать, но для первого знакомства с Wordpress просто как с API это был довольно хороший опыт. Я определенно рад видеть, как развиваются события по мере того, как мы приближаемся к тому, чтобы увидеть WP API в ядре.
Хотите больше подобных руководств? Позови меня в любое время!
