Как создать привлекательный одностраничный сайт с WordPress

Как создать привлекательный одностраничный сайт с WordPress

Одностраничный сайт (лэндинг, посадочная страница) это сайт без разветвлённой структуры, содержащий только одну страницу, и этот сайт пользователь может просматривать простой прокруткой. Многие одностраничные сайты по-прежнему имеют основное меню. Пользователи могут нажимать на пункты меню, но вместо перехода на другую страницу они переходят в другой раздел на той же странице. Вы уже, вероятно, представляете себе, как сделать обычный сайт, а в этой статье я расскажу Вам, как создать и протестировать одностраничник с WordPress, используя локальный сервер на своем компьютере!

Преимущества

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

Отличное решение для небольших сайтов

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

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

Образность

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

Идеально для мобильного использования

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

Когда лучше не использовать одностраничный сайт

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

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

Создание одностраничного сайта с WordPress

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

Локальный сервер

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

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

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

Как установить XAMPP для Windows и WordPress

Прежде чем начать действовать, Вы должны знать, что такое XAMMP. XAMPP означает Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) и Perl (P). Это бесплатно распространяемое программное обеспечение, которое помогает запускать собственные локальные серверы. Оно содержит серверное приложение, базу данных, интерпретатор скриптов PHP и язык программирования Perl, которые необходимы для установки WordPress на локальном сервере. Обычно серверы, запускаемые с помощью XAMPP, используются для тестирования, так что Вы можете свободно попрактиковаться в своих дизайнерских навыках, не платя за хостинг и не открывая доступ к сайту на этапе разработки. А затем сайт можно будет перенести на сервер хостинг-провайдера.

WordPress – установка

Как установить XAMPP для Windows

Теперь давайте закончим с теорией и позвольте мне показать Вам, как всё настроить. Хотя кросс-платформенная часть названия означает, что программное обеспечение работает и на компьютерах Linux и Mac, сегодня мы сосредоточимся на Windows:

  1. Перейдите на сайт Apache Friends
  2. Скачайте последнюю версию, нажав кнопку, и сохраните ее на свой компьютер
  3. После загрузки запустите установщик
  4. На экране приветствия нажмите «Next«

Xampp установка для WordPress 1На следующем экране будет предложено выбрать компоненты, которые Вы хотите установить. Вы можете оставить всё как есть и установить все компоненты. Но если Вам просто нужна базовая установка WordPress, будет достаточно оставить опции MySQL и phpMyAdmin. На всякий случай, если у Вас возникнет потребность в любом другом компоненте в будущем, можно добавить его через панель управления. В целях данного руководства Вы можете снять отметки со всех других опций, поскольку они не будут нужны для создания одностраничного сайта.

Xampp установка для WordPress 2

Выберите папку, в которую Вы хотите установить XAMPP. Это может быть любая папка, и также можно оставить её по умолчанию. Просто помните её местоположение.

Xampp установка для WordPress 3На следующем экране снимите флажок «Learn more about Bitnami for XAMPP», потому что Вы будете устанавливать WordPress вручную.

Xampp установка для WordPress 4Нажмите «Next».

Xampp установка для WordPress 5Теперь дайте установщику несколько минут, чтобы перенести все файлы и настроить среду, которую вы будете использовать для своего сайта WordPress. Через несколько секунд установщик распакует все и завершит установку.

Xampp установка для WordPress 6

  1. Оставьте флажок «Do you want to start Control Panel now?»
  2. Нажмите «Finish»
  3. Выберите язык интерфейса

Панель управления XAMPP

Надеюсь, все прошло без проблем. Если это так, то панель управления откроется без красного текста, отображающего ошибки. Если Apache и MySQL не отмечены зеленым цветом, который означает, что они работают, их следует запустить, нажав на соответствующие кнопки «Start». Чтобы проверить, работает ли ваш сервер, перейдите в свой браузер и посетите этот URL: http://localhost.

Xampp Панель управления

Если всё в порядке, Вы должны увидеть простую веб-страницу, которая приветствует Вас в XAMPP для Windows. Если страница загрузилась, выдохните, потому что это означает, что XAMPP настроен правильно и Вы можете перейти к установке WordPress.

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

Как установить WordPress, используя XAMPP

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

  1. Откройте панель управления XAMPP
  2. Нажмите кнопку «Admin» в секции «MySQL». В браузере откроется новая вкладка с phpMyAdmin
  3. Выберите вкладку «Базы данных» в левой части верхнего меню
  4. Введите имя для своей новой базы данных, например, WordPress
  5. Нажмите кнопку Создать

Создание базы данных mysql в xampp

Пока было не так сложно, правда? Теперь Вы можете закрыть окно браузера и перейти к следующему шагу.

  1. Загрузите последнюю версию WordPress
  2. Перейдите в папку XAMPP (папка, в которой Вы недавно установили XAMPP)
  3. Откройте папку, перейдите в папку htdocs и откройте её
  4. Распакуйте здесь архив WordPress

У Вас должна получиться новая папка WordPress в папке htdocs. Вы можете переименовать эту папку как захотите. Это имя также будет частью адреса вашей локальной установки. Например, назовем папку WordPress, и тогда Ваш сайт откроется после введения в браузере http://localhost/wordpress. Неважно, какое имя Вы используете, поэтому нет проблем с его изменением.

  1. Откройте эту папку (у нас – WordPress) и найдите файл wp-config-sample.php
  2. Переименуйте его в wp-config.php
  3. Откройте файл и найдите часть с информацией о настройках MySQL (посмотрите на скриншот)
  4. Замените «database_name_here» на имя вашей базы данных, которое в нашем случае «WordPress»
  5. Замените «username_here» на «root» и оставьте «password_here» пустым
  6. Сохраните файл и закройте его.

Скриншот wp-config-sample

Наконец, мы готовы завершить процесс установки. Откройте браузер и перейдите по адресу http://localhost/wordpress (или введите своё имя, которое Вы использовали для папки, куда Вы извлекли WordPress). Откроется страница «Добро пожаловать». Здесь нужно ввести данные названия сайта, имени пользователя и пароля, Ваш e-mail, а затем нажмите «Установить WordPress».

Это всё! Теперь Вы можете войти на свой тестовый сайт и начать работу на своем первом одностраничном сайте. Первым шагом будет выбор темы.

Начать строительство!

Выбор темы

Вы можете использовать любую тему для одностраничного сайта. В этом примере я буду использовать бесплатную тему «SiteOrigin North», которая может быть найдена в репозитории тем WordPress. Перейдите к Внешний вид -> Темы -> Добавить новую в панели инструментов WordPress и введите в строку поиска «SiteOrigin North». Тема должна появиться в начале списка найденных по этому критерию тем. Установите и активируйте её.

Тема WordPress SiteOrigin North
Это простая, но продуманная, адаптивная тема, которая также очень хорошо работает с WooCommerce. Она сделана разработчиками плагина Page Builder, который я собираюсь использовать для сайта в этом примере. Ещё раз повторю, не стесняйтесь использовать другую тему; действия перехода, когда Вы кликаете на элемент меню, будут работать в любом случае. Я советую Вам использовать тему, в которой есть «липкое» меню, так что посетителям Вашего сайта не придется снова прокручивать страницу вверх, чтобы щелкнуть по элементу меню, переносящему их к другому разделу.

Плагины

Очень важным элементом для создания одностраничных сайтов являются используемые Вами плагины. Я собираюсь установить построитель страниц SiteOrigin и виджет — расширение для этого плагина. Оба полностью бесплатны и размещаются в репозитории плагинов WordPress. Перейдите в раздел «Плагины» -> «Добавить новый» на инструментальной панели сайта WordPress и введите в строке поиска page builder by siteoriginПлагин появится в верхней части списка найденных плагинов. Установите и активируйте его. На том же экране Вы можете установить плагин SiteOrigin Сборник виджетов (если его там нет, введите siteorigin widgets bundle в строку поиска плагинов). Убедитесь, что оба плагина активированы.

Начиная с версии 2.3 этого построителя страниц, добавлена функция прокрутки одностраничного сайта. Это то, что нам нужно, чтобы прокручивать сайт, когда кто-то нажимает на элемент меню c атрибутом href (ссылка на строку с ID, указанным в атрибуте href). Я объясню, как это работает ниже в статье.

Плагины SiteOrigin

Строим страницу

Итак, у Вас активированы плагины, и мы готовы построить нашу страницу. Во-первых, добавьте новую страницу или начните редактирование имеющейся страницы. Обратите внимание на вкладки в верхней правой части редактора страниц и нажмите на недавно добавленную вкладку «Page Builder».

Вкладка Page Builder
SiteOrigin Page builder имеет множество пресетов, поэтому нам не нужно будет строить весь проект с нуля. Вы увидите несколько кнопок над редактором страниц, одна из них — кнопка «Layouts (Макеты)», щелкните по ней.

Page Builder Layouts
Вы увидите экран со всеми видами макетов; это пресеты, которые можно использовать. Вы также можете импортировать и экспортировать макеты, которых, как я предполагаю, что у Вас еще нет. В этом примере я выберу дизайн «Fitness Gym». Конечно, Вы можете выбрать любой дизайн, какой хотите, или начните с нуля. Отметьте нажатием выбранный дизайн, а затем нажмите кнопку «Вставить» в правом нижнем углу. Если у Вас уже есть контент на странице, Вы можете вставить дизайн до или после контента, или полностью заменить его. Для меня это не имеет значения, поскольку у меня в наличии пустая страница.

Предустановка макета Fitness Gym

Идем дальше, сохраняем страницу и посещаем ее. Если все сделано правильно, мы можем добавить наши идентификаторы для областей макета сайта. Перейдите в режим «Визуальный редактор», щелкнув ссылку в панели администратора WordPress в верхней части страницы, которую Вы только что создали.

Визуальный редактор

Когда Вы наводите курсор на элементы на своем сайте, то можете точно видеть, какой виджет представляет какой элемент. Перейдите к первой (сверху слева) строке макета, щелкните значок «инструмент» и отредактируйте строку. На новом экране перейдите в «Атрибуты» и добавьте ID строки. Я дам строке идентификатор «activities».

ID activities

Дайте каждой строке свой уникальный идентификатор. Когда закончите, сохраните страницу.

Настройка Вашего меню

Ещё не всё. Теперь нам нужно создать наши пункты меню. Когда пользователь нажимает на один из элементов меню, страница прокручивается к конкретному разделу Вашего сайта. Идем дальше и создаем новое меню, нажимая на ссылки Внешний вид -> Меню в инструментальной панели WordPress. Мы собираемся создавать произвольные ссылки в этом меню. На картинке ниже я создаю одну из них для строки макета — добавил идентификатор «activities» и текст ссылки «Деятельность».

Ссылка с ID activities

Вы видите, что URL-адрес произвольной ссылки теперь совпадает с идентификатором элемента строки макета. SiteOrigin page builder запрограммирован на распознавание этого и будет знать, что он должен прокручиваться до указанного раздела.

Очень важно, чтобы Вы не забыли вставить хэш в URL-адрес элемента меню, это формат атрибута HTML-идентификатора. Однако не добавляйте хэш в разделе Атрибуты -> Row ID в построителе SiteOrigin page builder. Он уже знает, что это идентификатор.

Мой результат

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

Результат построения одностраничника WordPress 1

 

Результат построения одностраничника WordPress 2

Результат построения одностраничника WordPress 3

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

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

Оставьте комментарий