Примечание: Это часть одна в серии постов о GATSBY.JS и WordPress. Вы можете найти Часть два здесь Отказ
Вы когда-нибудь задавались вопросом, как использовать GATSBY JS с WordPress? Этот пост охватит все, что вам нужно знать о том, чтобы получить WordPress, готовый к сайту GATSBY.
В оформлении Предыдущий пост , мы говорили об использовании React JS для создания интерфейса для сайта WordPress. Мы говорили о простой настройке, чтобы сделать это, но также упомянули некоторые недостатки для этого.
Одним из таких недостатков является трудностями, с которыми сталкиваются при попытке ранжирования SEO, потому что поисковые потерпы имеют трудно индексирующую информацию, загруженную в реакцию. Вкратко упомянул, что есть пути вокруг этого, и один из этих способов – Gatsby.js. .
В этой серии сообщений блога мы будем говорить о том, как построить сайт GATSBY JS с помощью WordPress Back-End. Целью установки является разрешение пользователям неразделения вносить изменения на их веб-сайт, позволяя разработчикам использовать быстрый, современный и приятный инструмент для построения.
Зачем использовать GATSBY JS с WordPress Вообще?
Когда я сделал свой последний пост об использовании React JS с WordPress, несколько человек спросили, почему можно сделать такую вещь?
Есть несколько причин, что создание отдельного интерфейса в React js выгодна:
Во-первых, это действительно позволяет много настроить для разработчика выбрать инструменты, которые будут а) приносить пользу сайта большинства и B) создать приятный опыт разработки. И давайте будем честными, как разработчики не все мы ищем лучшего опыта Dev?
Во-вторых, я считаю, что плагины – это обоюдоострый меч. Они позволяют некоторую крутую функциональность, которые в противном случае не будут существовать для несущимистов, но люди довольны их и начнут вкладывать их. Я видел сайты с более чем 60 плагинами, активированными сразу, и они задавались вопросом, почему их сайт был таким медленным! Наличие 60 различных плагинов может означать, что имел смешное количество HTTP-запросов, поскольку каждый плагин загружает новую библиотеку. Использование отдельного интерфейса означает, что разработчик контролирует это. Это означает, что клиенту придется заплатить, чтобы иметь некоторые изменения, но в то же время он будет обеспечивать оптимизировать сайт, и что разработчик может внести изменения, не добавляя кучу ненужного мусора.
В-третьих, я видел случаи, когда разработчик и дизайнер создают удивительный сайт для клиента, а затем клиент решает начать точься, пытаясь изменить что-то минуту, как размер шрифта от 12PX до 14px и заканчивает взять целый сайт. Это крайний пример, но это определенно происходит. Если передний интерфейс является совершенно отдельной сущностью, то у клиента нет возможности сделать это.
Наконец, WordPress способствует тому, что 1/3 Интернета. Это означает, что есть много людей, которые знают, как выяснить, если сайт является сайтом WordPress, чтобы они могли взломать его и украсть информацию. Они могут написать боты, которые проверяют различные детали информации о сайте и определяют, является ли сайт WordPress. Пособие по использованию чего-то вроде GATSBY JS заключается в том, что он создает статические файлы в строю время и обслуживает статический HTML, поэтому пользователи и боты никогда не узнают, что есть сайт WordPress, управляющий контентом.
Что такое GATSBY JS?
Теперь, когда мы говорили о том, почему оно выгодно использовать такую настройку, давайте поговорим о том, что такое GATSBY.JS.
Согласно их сайте, «GATSBY – это Free Framework и Open Source основана на реакции, которая помогает разработчикам построить пылающие файнты и приложения». Другими словами, он позволяет вам разработать веб-сайт, использующий React и только о любом источнике контента. Затем в строю времени он тянет во всех данных из указанных источников и превращает ваш сайт в кучу статических HTML-файлов, которые оптимизированы для производительности.
На самом деле, Мой портфолио сайта построен с использованием файлов GATSBY и Markdown. Это отличный способ построить исполнительные сайты в реагировании без необходимости беспокоиться о том, что Crawlers могут индексировать ваш сайт. Кроме того, у него есть довольно удивительная документация и община вокруг него.
Теперь давайте приступим к бизнесу …
Настройка WordPress.
Эта статья предполагает, что у вас есть хотя бы элементарные знания WordPress. Если вы никогда не использовали его, вы можете проверить Мое быстрое руководство по настройке сайта WordPress Отказ
Немного о WordPress как CMS
WordPress – это система управления контентом, построенная с использованием PHP и MySQL. Как правило, при строительстве сайта WordPress мы бы построим тему, которая будет существенно выступать в качестве «кожи» для содержания. Поскольку мы используем GATSBY, чтобы построить интерфейс, мы не будем использовать эту функциональность.
Как я уже упоминал в своем другом посте в блоге, WordPress обнажает API для отдыха, которые можно использовать для получения данных для нашего приложения React. Этот же принцип будет использоваться здесь, хотя мы добавим некоторые вещи, чтобы улучшить API для отдыха и сделать его более гибким.
Я также люблю использовать WordPress в поддомен, такой как admin.example.com. Так что это полностью отдельно от фактического сайта.
Тема WordPress
Поскольку мы не волнуемся о том, как сайт выглядит в WordPress, тема, которую мы используем, не обязательно имеет значение. Единственные два файла, которые нам действительно нужны в теме, являются style.csss Файл, чтобы сказать WordPress информацию о нашей теме и Функции .php Файл, чтобы мы могли создавать меню, создавать пользовательские типы контента, создавать унылые пользовательские поля по умолчанию и т. Д. Позже мы можем добавить больше файлов в тему для шаблонов страницы, но это совершенно необязательно.
При строительстве сайтов WordPress я вообще придерживаюсь Подчеркивает Тема, поэтому мы будем использовать это как стартер сегодня, так как у него уже есть много вещей, установленных вне коробки.
Плагины WordPress.
Я знаю, что я был в моей мыльной коробке раньше, используя кучу плагинов, и вообще не о них не огромный поклонник. Есть несколько плагинов, которые могут действительно сделать нашу жизнь проще, чем разработчики, хотя.
Передовые пользовательские поля
Первый плагин, который я хотел бы упомянуть, это Передовые пользовательские поля или ACF. Это, возможно, один из моих любимых плагинов всех времен, поскольку он позволяет нам создавать пользовательские поля для любого типа или страницы поста. Мы можем переопределить значения по умолчанию. Мы можем создавать любое количество полей для пользователя, начиная от редакторов WYSIWYG и сортировщиков даты (бесплатно) в галереи и поля повторителя (PRO). С помощью этого инструмента мы можем действительно настроить сайт, чтобы быть именно то, что нужно нашему клиенту.
Acf. отдыхать API
Другой плагин, который работает в руке с ACF, называется ACF для отдыха API Отказ Могу поспорить, вы уже догадались, что это делает. Он предоставляет данные из наших пользовательских полей в API для отдыха, чтобы мы могли использовать его на нашем сайте GATSBY JS.
WP API МЕНЮ
Одной из великолепных функций в WordPress – это возможность пользователей легко создавать и обновлять меню для их сайта. Если мы жесткокодируем меню на наш сайт GATSBY, он удаляет эту способность для наших пользователей. Чтобы сделать его гибким для них, мы можем установить WP API меню Плагин для создания маршрутов отдыха для пунктов меню. Обратите внимание: в соответствии с GATSBY-Source-WordPress Docs Это должна быть эта версия плагина, а не новее. Новая версия не будет работать.
WP Trigger NetLify Building
Когда я создаю веб-сайт GATSBY, мне нравится использовать NetLify для обработки развертывания сайта. NetLify Rebuilds Всякий раз, когда новый коммит подталкивается или сливается на главный отделений хранилища, но как насчет того, когда кто-то обновляет свой сайт WordPress?
NetLify обладает способностью создавать веб-качки, которые мы можем схватить, – эй, есть новый контент, поэтому вам нужно восстановить ». Я построил WP Trigger NetLify Build Чтобы сделать эту супер легко интегрировать с WordPress. Просто упасть в необходимую информацию, и она скажет NetLify для восстановления изменений. Это даже показывает значок со статусом сборки на приборной панели.
У нас есть темы и плагины, теперь что?
Не быть слишком антиомиактическим, но на самом деле есть не более тонкий, чтобы сделать на стороне WordPress, кроме создания контента. Эти плагины и тема в значительной степени выставляют все, что нам нужно построить наш блог GATSBY JS.
Это, как говорят, если мы создаем пользовательские типы контента для нашего блога, нам понадобится способ разынеть их в ACF. Создание пользовательской страницы шаблона будет служить этой цели, поэтому мы можем фильтровать на шаблоне страницы, чтобы показать пользовательские поля. Мы также можем использовать шаблон страницы для фильтрации в нашем проекте GATSBY, чтобы убедиться, что мы получаем нужные поля для данной страницы.
Если у вас есть какие-либо вопросы, вы можете ударить меня в Twitter в @iam_timsmith Действительно
Увидимся в Как построить блог с WordPress и GATSBY.JS – часть 2 Действительно
Оригинал: “https://dev.to/iam_timsmith/how-to-build-a-blog-with-wordpress-and-gatsby-js-part-1-4f9e”