Как превратить свой сайт Divi в мобильное приложение с помощью AppPresser

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

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

Почему мобильные приложения - это будущее просмотра веб-страниц

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

Создание адаптивного сайта не означает, что вы должны жертвовать стилем, чтобы его можно было использовать.

Как владелец сайта, самый простой способ обслужить пользователей смарт-устройств - оптимизировать свой сайт для небольших окон просмотра. Таким образом, пользователи будут иметь постоянный опыт независимо от того, какое устройство они используют. Однако есть и другой вариант - хотя и требует немного больше работы - и это создание приложения для вашего сайта.

У приложений есть несколько явных преимуществ перед обычными сайтами, оптимизированными для мобильных устройств:

1. Они предлагают читателям постоянное напоминание о вашем сайте. Наличие специального приложения на своем устройстве может заставить некоторых пользователей задуматься о проверке нового контента. Вы также можете получить более высокую частоту посещений, чем обычно.
2. Вы можете включить специальные функции для мобильных устройств. Многие приложения включают интересные функции, такие как вход в социальные сети и push-уведомления. Конечно, их также можно реализовать на обычном сайте, но они кажутся более естественными как часть приложения.
3. Выглядит профессионально. Наличие приложения для вашего сайта просто делает его профессиональным. Пока вы предлагаете современное, стабильное предложение, есть вероятность, что пользователи уйдут, чувствуя себя впечатленными.

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

Введение в AppPresser

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

Самое приятное то, что пользоваться сервисом очень просто. Фактически, вполне возможно получить работающее (и стильное) приложение за считанные часы с помощью AppPresser.

Скорее всего, вы захотите выбрать авансом стартовый план за 19 долларов в месяц, который поддерживает одно приложение. Если вам нужно больше (или вы планируете монетизировать свое приложение), доступны другие уровни.

Ключевая особенность:

• Позволяет создавать мобильные приложения для Android и iOS.
• Включает тему WordPress и плагин, который позволяет вам получить доступ к расширенным функциям приложения.
• Предлагает возможности входа в социальные сети и обмена.

Цена: 19 долларов в месяц | Больше информации

Как превратить свой сайт Divi в мобильное приложение с помощью AppPresser

Прежде чем мы углубимся в руководство, вам необходимо зарегистрировать учетную запись как в AppPresser, который, как мы упоминали ранее, является платным, так и в Phonegap (который вам нужно будет использовать на последнем шаге).

После регистрации в первом вы получите электронное письмо с доступом к плагину AppPresser и его дополнительной теме (которую нельзя найти в другом месте).

Что касается темы, не волнуйтесь - ее не нужно активировать. Его нужно установить только для того, чтобы плагин AppPresser и веб-приложение могли получать доступ к данным, и он будет отображаться только для вашего мобильного приложения. Если вы являетесь пользователем Divi, использование темы и плагина AppPresser не повлияет на вашу установку.

После того, как вы установили и активировали плагин AppPresser, а затем загрузили его тему (но не активировали ее), переходите к первому шагу!

Шаг № 1: Создайте новое приложение и настройте его стиль

Для начала вам необходимо войти в свою учетную запись AppPresser, используя те же учетные данные, с которыми вы регистрировались. Служба предложит вам создать новое приложение, поэтому после добавления заголовка нажмите « Создать приложение» :

Затем вам нужно связать свой веб-сайт с приложением, прежде чем вы начнете его настраивать. Для этого перейдите на вкладку « Общие » на панели инструментов AppPresser и найдите раздел, который гласит НАСТРОЙКИ API:

Скопируйте ярлык своего сайта и идентификатор приложения , затем перейдите на вкладку AppPresser на панели инструментов WordPress. Вы найдете два соответствующих поля, поэтому вставьте туда свои данные и сохраните изменения:

Разобравшись с этим, вы можете приступить к настройке своего приложения. Вернитесь на панель управления AppPresser, перейдите в раздел « Настроить» , затем нажмите кнопку « Настроить и создать приложение» :

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

В течение следующих нескольких шагов мы рассмотрим наиболее важные разделы настройщика, а пока давайте сосредоточимся на вкладке « Цвет ». Здесь вы найдете несколько вариантов изменения цветов вашего приложения и объяснения того, что делает каждый из них:

После того, как вы настроили цветовую палитру своего приложения и довольны результатами, пора взглянуть на свое меню.

Шаг № 2: Измените меню вашего приложения

Каждое приложение AppPresser запускается с одним и тем же меню по умолчанию: главный экран, вводная страница и страница « О программе» , а также ссылка на домашнюю страницу службы. Чтобы заменить их, вам нужно перейти на вкладку Menus в настройщике и выбрать опцию App Menu :

На следующем экране вы можете выбрать элементы из левого меню. В этом случае кнопки « Главная», «Введение» и « О программе» ведут на пользовательские страницы, и вы можете выбрать, удалять ли их элементы меню сейчас, щелкнув опцию « Удалить» :

Вы также можете сохранить эти пункты меню и настроить их соответствующие страницы (подробнее об этом через минуту). А пока удалите все ненужные элементы меню и воспользуйтесь опцией « Добавить элементы», чтобы заполнить меню другими страницами. Для этого вы сможете выбрать либо существующие страницы, записи WordPress, либо пользовательские (созданные с помощью AppPresser)…

… И нажав кнопку WordPress / Внешние ссылки , вы сможете добавить ссылку на одну из страниц вашего сайта WordPress :

Как только ваше меню будет заполнено (и тема AppPresser установлена), приложение сможет «экспортировать» контент вашего сайта и автоматически отображать его:

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

Шаг № 3: Добавьте пользовательские страницы в ваше приложение

Чтобы настроить пользовательские страницы, перейдите на соответствующую вкладку в настройщике. Как и в стандартном меню, вы найдете три существующие страницы: « Главная», «Введение» и « О программе». На этом этапе вы можете переназначить каждый из них для своего собственного приложения или просто проигнорировать их и создать новые страницы:

Нажав на кнопку « Добавить новую страницу» , вы получите два варианта: использовать собственный HTML-код для создания новой страницы…

… Или выбрать один из предварительно созданных стилей AppPresser, который включает формат списка и макет карточки:

Чтобы настроить любой из них, вам необходимо создать собственные страницы списков с помощью WordPress API. Затем просто вставьте ссылку на свою новую страницу в поле прямо под любым из встроенных стилей приложения:

Когда вы закончите возиться со своими пользовательскими страницами, пришло время подвести итоги, настроив несколько дополнительных настроек для вашего приложения.

Шаг № 4: Настройте параметры вашего приложения

На этом этапе у вас должно быть работающее приложение - по крайней мере, в настройщике, - но такое, которое по-прежнему имеет значок и логотип AppPresser . Чтобы заменить их, перейдите на вкладку Настройки в настройщике:

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

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

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

Имейте в виду, что AppPresser включает некоторую информацию о размере изображений, которые вы должны загружать, поэтому вам следует придерживаться их, если вы не хотите, чтобы ваши изображения выглядели искаженными. Когда вы здесь закончите, пришло время наконец запустить ваше приложение.

Что делать, когда ваше приложение готово к запуску

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

После обновления токена вы увидите возможность скомпилировать приложение, и служба сделает это за вас. Затем нужно просто отправить его в магазины Android и iOS (или в оба), дождаться одобрения и сделать ссылку на них со своего обычного веб-сайта.

Если вы думаете о распространении своего приложения прямо со своего сайта, мы не рекомендуем этого делать - в основном из соображений безопасности. Более того, пользователи могут не чувствовать себя в безопасности при загрузке приложений, которые не были одобрены ни одной из служб, поэтому ваши усилия могут быть напрасными, если вы пропустите этап отправки. Конечно, плагины WordPress, такие как Easy Digital Downloads, могут соответствовать всем требованиям, но все же следует учитывать те же соображения, что и выше.

Заключение

Создание приложения для вашего веб-сайта WordPress может показаться излишним, но на самом деле это может быть разумная идея. В конце концов, такие сервисы, как AppPresser, сделали это проще, чем когда-либо. Более того, приложение может быть именно тем, что вам нужно для дальнейшего взаимодействия с мобильными пользователями благодаря таким функциям, как push-уведомления.

В этом посте мы показали вам, как превратить ваш сайт Divi в мобильное приложение с помощью AppPresser. Давайте быстро повторим шаги:

1. Создайте новое приложение и настройте его стиль.
2. Измените меню своего приложения.
3. Добавьте пользовательские страницы в свое приложение.
4. Настройте параметры своего приложения.

У вас есть вопросы об использовании AppPresser для создания мобильных приложений для Divi? Спросите в разделе комментариев ниже!

Миниатюра статьи: 31moonlight31 / shutterstock.com