- Что такое wordpress и как это работает
- Использование подключаемого модуля клонирования
- Служба резервного копирования веб-хостинга
- Google maps easy
- Loginizer
- Выбор хостинга и регистрация домена
- Добавление параграфа в gutenberg
- Загрузка и распаковка файла архива платформы
- Как сделать список сотрудников
- Как создать галерею
- Как создать интернет-магазин на wordpress
- Как создать публикацию
- Как создать статическую страницу
- Как установить плагин (любой)
- Карусель логотипов
- Название сайта и логотип
- Настраиваем виджеты
- Недостатки
- Организуем сайт
- Подключение темы
- Преимущества
- Сайты на wordpress: плюсы и минусы
- Создаем блок контакты
- Создаем страницы
- Стоимость использования wordpress
- Установка через ftp
- Форма обратной связи
Что такое wordpress и как это работает
WordPress (WP) ― это система управления содержимым сайта (CMS) с открытым исходным кодом.
Самым популярным на данный момент способом создания сайта является именно CMS. CMS (Content Management System) ― это система создания и управления сайтом. Простыми словами, это программа с удобным интерфейсом для создания веб-ресурса. В ней можно использовать код, но это необязательно. Благодаря такой технологии все желающие могут создать себе страничку.
На рынке программ по созданию интернет-ресурсов за первенство борются Joomla, Drupal, 1C-Битрикс, однако самая популярная CMS ― WordPress. По данным W3techs, WP используют 64,7% всех веб-сайтов, которые сделаны на CMS. Это 41,1% всех существующих в мире сайтов.
Что нужно знать, чтобы работать с этой CMS? Программа не требует знания кода. Достаточно только зайти в админку и немного познакомиться с интерфейсом.
Расширить функционал программы позволяют плагины. Благодаря им можно создать как простой одностраничник, так и интернет-магазин с сотнями товаров. Интерфейс для публикации статей и заметок чем-то напоминает привычный Microsoft Word:
Опытным разработчикам WP даёт возможность использовать PHP. Так как эта CMS с открытым исходным кодом, интерфейс можно модернизировать и сделать для себя ещё удобнее.
Использование подключаемого модуля клонирования
Другой метод переноса сайта WordPress — использование плагина клонирования.
В каталоге плагинов WordPress есть сотни скриптов клонирования PHP на выбор.
Однако я бы рекомендовал использовать плагин «All-in-One WP Migration», поскольку он прост в использовании и предоставляет все необходимые инструменты миграции, чтобы упростить процесс.
Перед началом процесса миграции убедитесь, что у вас установлен и активирован плагин клонирования WordPress на ваших старых и новых учетных записях хостинга.
Следующие шаги покажут вам, как перенести веб-сайт WordPress с помощью плагина миграции.
1. Откройте панель администратора сайта, который вы хотите перенести, и перейдите во вкладку «All-in-One WP Migration — Export».
2. Нажмите «Экспорт в» и выберите в раскрывающемся меню пункт «Файл».
3. Подождите, пока плагин завершит получение файлов вашего сайта. После завершения процесса загрузите файл резервной копии в формате «.wpress» из всплывающего окна.
4. Откройте панель администратора WordPress в своей новой учетной записи хостинга и перейдите к «All-in-One WP Migration — Import».
5. Нажмите «Импортировать из» и выберите «Файл». Затем найдите файлы, которые вы экспортировали. Имейте в виду, что максимальный размер загружаемого файла составляет 128 МБ.
Скажу по секрету — его можно увеличить до нужных размеров. Если интересно — пишите, помогу.
6. По завершении процесса нажмите «Готово».
Если метод импорта не работает, вы можете загрузить данные резервной копии, созданные плагином, вручную через FTP или диспетчер файлов.
- Перейдите к «All-in-One WP Migration — Export» на старом сервере и сгенерируйте файл «.wpress»;
- Войдите через FTP и загрузите файл «.wpress» в папку «wp-content / ai1wm-backups» в папке плагина «All-In-One WP Migration»;
- Перейдите в панель администратора WordPress вашего нового сервера, зайдите в «All-In-One WP Migration — Backups». Файл «.wpress» должен появиться там.
- Щелкните значок «Восстановить» рядом с файлом «.wpress». Нажмите «Продолжить», чтобы начать процесс миграции.
Последним шагом использования плагина является повторное сохранение структуры постоянной ссылки.
Вам нужно дважды изменить структуру, так как она восстановит файл «.htaccess».
- В меню боковой панели WordPress выберите «Настройки — Постоянные ссылки»;
- Выберите новую структуру и нажмите «Сохранить изменения». Если вы используете настраиваемую структуру, обязательно сначала скопируйте ее;
- Обновите постоянные ссылки страницы параметров настройки и выберите исходную структуру. Когда закончите, нажмите «Сохранить изменения».
Служба резервного копирования веб-хостинга
Последний метод миграции использует службу резервного копирования веб-хостинга для перемещения файлов WordPress на новый хост.
Некоторые хостинг-провайдеры, такие как TimeWeb, периодически создают резервные копии.
Вы можете использовать эти резервные копии для переноса вашего сайта WordPress на новый сервер.
Поскольку многие хостинг-провайдеры используют cPanel, выполните следующие действия для резервного копирования вашего сайта WordPress с помощью этой опции.
1. Перейдите в «Файлы — Мастер резервного копирования» из вашей cPanel.
2. В меню мастера резервного копирования выберите «Резервное копирование — Полное резервное копирование».
Этот вариант резервного копирования охватывает ваш домашний каталог, базу данных WordPress, конфигурацию пересылки электронной почты и конфигурацию фильтра электронной почты.
3. Установите предпочтительное место назначения резервной копии — в этом руководстве мы выберем домашний каталог.
Не забудьте добавить свой адрес электронной почты, если вы хотите получать уведомление после завершения процесса резервного копирования.
4. Щелкните «Создать резервную копию», чтобы начать процесс.
Получив резервный ZIP-файл, вы можете восстановить его в новой учетной записи хостинга, используя тот же метод.
- Перейдите в «Файлы — Мастер резервного копирования» на панели управления вашей новой учетной записи хостинга;
- В меню мастера резервного копирования выберите «Восстановить — Домашний каталог»;
- Выберите созданный вами резервный ZIP-файл и нажмите «Загрузить».
Также можно восстановить данные резервной копии, вручную загрузив ZIP-файл в корневую папку нового хостинг-провайдера.
Это можно сделать через диспетчер файлов на панели управления или FTP-клиент.
Убедитесь, что все файлы сайта в папке «public_html» старого хоста перемещены в папку «public_html» нового хоста.
Google maps easy
Плагин для создания стилизованных карт с вашими маркерами. Чтобы работал, нужно подключить API. Переходим по ссылке и жмем “Получение ключа”.
Открывается окно “Активация Google Maps JavaScript API“ жмем “Продолжить”.
Выбираем существующий проект или создаем новый, ставим флажки везде Да.
Выбираем тип учетных данных и получаем ключи
Loginizer
Заходим в консоль плагина
Картинка скрин где искать консоль плагина
Видим сводную информацию по состоянию безопасности панели администрирования. В частности нам указывают, что двум системным файлам надо перенастроить правила изменения – сделать запрет на изменения файлов.
Для этого заходим на хостинг, файловый менеджер, находим нужные файлы (они сразу в папке с WordPress) и меняем права доступа.
Теперь, чтобы редактировать файлы, надо зайти через файловый менеджер хостинга.
Остальные настройки плагина можно оставить по умолчанию. Но если у вас проблемы с авторизацией (забываете пароль или не можете сразу вбить с первого раза), то рекомендую увеличить кол-во разрешенных попыток авторизации до временной блокировки и добавить свой IP-адрес в белый лист.
Для этого заходим в раздел Loginizer – Brute Force Settings
Здесь видим все IP-адреса, которые пытались авторизоваться на сайт. Находим наш и добавляем в белый лист IP – скопируйте, прокрутите страницу вниз и добавьте в первое поле.
Увеличиваем кол-во попыток авторизации. Возвращаемся в начало странице, в поле Max Retries ставим число 5.
Остальные настройки можно оставить по умолчанию.
Выбор хостинга и регистрация домена
Прежде чем создавать сайт на WordPress, необходимо определиться с хостингом, на котором он будет располагаться. Бесплатные варианты можно даже не рассматривать — они либо предлагают мало места, либо не обеспечивают достойную производительность. Для запуска блога обычно хватает возможностей минимального тарифа на платном хостинге.
Некоторые площадки предлагают специальные тарифы для сайтов на WordPress. На них обычно уже установлена CMS, а параметры работы сервера оптимизированы под особенности движка. Но не стоит ждать от этих тарифов каких-то чудес: уникальных инструментов, подходящих только под WordPress, не существует. Всё решает оптимизация.
Тем не менее, есть хостинги для WordPress, на которые следует обратить особое внимание. В первую очередь это Bluehost — площадка, которую рекомендуют разработчики самой популярной CMS в мире.
Создать сайт на WP Bluehost
Официальная рекомендация — это серьёзное конкурентное преимущество. В случае с Bluehost (детальный обзор) оно оправдано большим количеством положительных качеств, которые помогают создавать на WordPress отличные сайты.
- Оптимизация серверов под требования WordPress.
- Удобная тарифная сетка, в которой есть как бюджетные, так и премиальные пакеты услуг.
- Домен и SSL в подарок.
- Обширная база веб-приложений, которые устанавливаются в административной панели в один клик.
- Круглосуточная служба технической поддержки, с которой можно пообщаться по телефону, через лайв-чат или тикеты.
Bluehost — американский хостинг, но благодаря сотрудничеству с международной группой Endurance он имеет возможность использовать для размещения сайтов оборудование в разных уголках мира. Для более быстрой доставки контента до посетителей также используются серверы сетей CDN. Независимые тесты показывают, что скорость работы хостинга всё время держится на уровне «быстро» и «очень быстро».
Приятное впечатление остаётся и после изучения показателей аптайма — времени бесперебойной работы серверов. У Bluehost показатели всегда максимально приближены к 100%. Например, за 2022 годы на тестируемом сервере было зафиксировано лишь 5 сбоев продолжительностью от 5 до 35 минут. Это отличный результат, позволяющий без опаски размещать на хостинге коммерческие сайты.
Ещё один важный параметр — защита серверов. На тарифах для WordPress есть система предотвращения DDoS-атак, которая в том числе обеспечивает высокие показатели аптайма. На всех видах хостинга доступен сканер SiteLock, который обнаруживает вредоносный код.
Выбирая Bluehost, вы получите лучший хостинг для сайтов на WordPress. Это рекомендация от разработчиков CMS, которые предлагают площадку, на которой их продукт полностью раскрывает свой потенциал. После регистрации на хостинге вы получите на почту учётные данные для входа в панель администратора. Авторизуйтесь в консоли, чтобы приступить непосредственно к созданию сайта.
Следующий шаг — регистрация домена. Вам нужно придумать доменное имя, убедиться, что оно свободно, и оплатить его использование на год. Несколько правил выбора:
- Хорошо, если в домене указано название сайта или указание на его предназначение.
- Чем короче имя, тем проще его запомнить и воспроизвести.
- У доменного имени не должно быть второго смысла или неприятного звучания.
- Выбор доменной зоны зависит от того, для какой аудитории вы создаёте сайт. Самые распространённые зоны — территориальные. Но иногда полезно использовать тематические домены — например, *.shop для интернет-магазина.
Большинство хостеров дополнительно предоставляет возможность регистрации доменного имени. Если такая услуга есть, воспользуйтесь ей — это удобно, так как домен будет автоматически привязан к вашему хостингу.
Можно зарегистрировать имя и на других площадках, но тогда привязку придётся выполнять вручную, прописывая адреса DNS-серверов в настройках. Инструкцию о том, как это сделать, регистраторы обычно отправляют в письме, которое приходит после оплаты домена. Для регистрации понадобятся паспортные данные — без них купить доменное имя нельзя.
Добавление параграфа в gutenberg
Кнопка “Добавить блок” позволяет добавить на сайт текст(Параграф), изображение, заголовок и так далее. То есть все теги уже готовы, вам остается только выбрать их.
Добавление новых блоков в Gutenberg
Допустим выберем стандартный блок Параграф, в самом конце записи создается новый блок в который вписываем необходимую нам информацию.
Изменение текста в параграфе Gutenberg
Сам текст можем расположить по левому, правому краях и по центру.
Расположение текста по центру — Gutenberg
Выделение жирным — буква B (с английского Bold) и курсивом — буква I (с английского Italic)
Выделение текста жирным и курсивом в Gutenberg
К примеру хотим разместить ссылку в тексте на другую страницу или сайт. Для этого необходимо выделить часть текста и нажать на связующую иконку (или зажать клавиши CTRL K)
Добавление ссылок в Guttenberg
Появляется окно в котором можем указать адрес страницы, на которую собираемся вести и нажимаем на стрелку, чтобы применить действия.
Добавление новых ссылок в Guttenberg
Если не хотим, чтобы пользователи покидали наш сайт, необходимо выбрать надстройку по ссылке “Открыть в новом окне”.
Открыть ссылку в новом окне — Gutenberg
Чтобы удалить существующие ссылки необходимо выделить текст, который ссылается на другую страницу нажать на ту же иконку или CTRL K.
Удаление ссылок в Gutenberg
Загрузка и распаковка файла архива платформы
1. Открыть ISPManager.
2. Перейти в раздел «WWW» в левой панели и выбрать пункт «WWW-домены».
4. Выбрать домен сайта, для которого загружается CMS и нажать кнопку «Каталог».
5. В результате в каталоге инсталляции сайта будут созданы файлы парковочной страницы, которые необходимо удалить, кроме папки «webstat» (если таковая будет).
6. Нажать кнопку «Закачать».
7. Выберите архив CMS, расположенный на локальном диске компьютера. Нажать «Ok».
9. Выделить загруженный архив и распаковать его нажатием кнопки «Извлечь». Распаковка будет произведена во вложенный каталог WordPress.
6. Нажать кнопку «Закачать».
7. Выберите архив CMS, расположенный на локальном диске компьютера. Нажать «Ok».
9. Выделить загруженный архив и распаковать его нажатием кнопки «Извлечь». Распаковка будет произведена во вложенный каталог WordPress.
10. Файлы из каталога WordPress необходимо переместить в папку инсталляции платформы. Для этой цели потребуется вернуться в каталог WordPress и выделить все его файлы, а затем — нажать «Копировать».
11. Указать каталог инсталляции сайта блога.
12. Включить опцию «Перенести файлы» и кликнуть «ОК».
13. Убедиться, что файлы CMS загружены корректно. С этой целью необходимо в браузере открыть сайт. Дальнейшая установка WordPress на хостинг будет возможна в случае успешного открытия стартовой страницы.
Как сделать список сотрудников
Раздел Team – Add New. Задаем название “Наши сотрудники”. Заполняем данные сотрудника: имя, должность, описание, загружаем фото, указываем ссылки на профили соц. сетей (необязательно). Добавляем сотрудников (“Add another member”) и сортируем в порядке приоритетности.
Справа в колонке указываем настройки: Members to show per line – 2 member per line и галочка после Force original fonts. Т.е. 2 сотрудника в линии, используем стандартный шрифт.
Жмем “Опубликовать”. Переходим Team – All Teams, копируем шорткод и вставляем на странице О компании. Смотрим, что получилось:
Как создать галерею
Варианты использования уже демонстрировал, теперь покажу как создавать. Раздел Envira Gallery. Жмем Add New:
Задаем название, добавляем изображения, задаем размер миниатюры.
Можно посмотреть другие настройки, поэкспериментировать. Жмем “Опубликовать”. В готовой галереи забираем шорткод (Shortcode) – короткая строка с идентификатором вашей галереи. Такие шорткоды используются постоянно. В моем случае он выглядит так: [envira-gallery id=”154″] Копируем и вставляем в нужное место на странице О компании:
Публикуем изменения и смотрим что получилось на лицевой части сайта. Если результат не утраивает, то можно либо вернутся в галерею и отредактировать, либо поменять местоположение.
Как создать интернет-магазин на wordpress
Несмотря на то, что для WordPress имеется более десятка различных модулей, реализующих функционал интернет-магазинов, на самом деле действительно эффективных и доступных для массового использования решений немного. Лучший плагин, без сомнений – WooCommerce.
Более того, многие премиум-шаблоны на профильных площадках стараются обеспечить совместимость именно с WooCommerce.
Для начала работы нужно установить и активировать плагин WooCommerce из официального каталога. Откроется мастер первоначальной настройки. Вам нужно будет ответить на ряд вопросов, на основании которых будет сконфигурирован ваш первый интернет-магазин.
Обратите внимание, для продажи подписок, тарифов для участников клуба и для организации систем бронирования применяются дополнительные плагины из инфраструктуры WooCommerce, они платные и распространяются по модели подписки (от 79 до 249 USD в год). Для продажи физических и электронных товаров подписка не нужна. Плагин будет полностью бесплатным.
Заполните адрес вашего юридического лица (физического магазина), выберите тип продаваемой продукции и пройдите другие шаги мастера.
Если штатная тема магазина вас не устраивает –смените её на свою (обязательно должна быть совместима, некоторые стандартные темы могут не подойти).
Создайте или импортируйте свои товары.
Добавьте категории и распределите товары по ним. Вложенность каталога никак не ограничивается. Для товаров можно задавать специальные параметры (атрибуты: цвет, размер и т.п.). Для каждого товара можно определить сопутствующие товары, параметры доставки (класс, вес и т.д.), активировать опцию написания отзывов и т.д.
Всё это будет работать без каких-либо дополнительных модулей. Но плагины точно потребуются для настройки интеграции с CRM, платёжными шлюзами, службами доставки, ERP-системами и т.д. Некоторые из таких плагинов могут быть платными.
Как создать публикацию
Создание публикации рассматривается на примере классического редактора. С пятой версии WordPress, его придется установить как отдельный плагин. Конечно, как и для страниц, можно использовать новый «Гутенберг», но он не настолько гибкий.
Чтобы добавить запись, выберите меню «Записи – добавить новую».
Большинство шаблонов поддерживает несколько форматов записи. Выберите подходящий.
По умолчанию используется базовый шаблон
Выберите подходящую рубрику для публикации. Чтобы создать рубрику, воспользуйтесь соответствующим меню.
Для любой записи можно назначить одну или несколько рублик
Классический редактор поддерживает два формата редактирования: визуальный или WYSIWIG (от англ. What You See Is What You Get, «что видишь, то и получаешь») и «Текст» с возможностью использовать HTML. Выберите подходящий. Добавьте заголовок и контент.
Укажите title и description, выберите изображение записи. Опубликуйте страницу.
Не забудьте задать уникальный заголовок и описание страницы
Как создать статическую страницу
Придерживайтесь описанного ниже алгоритма.
Выберите меню «Страницы – Добавить новую».
Чтобы создать новую страницу нажмите кнопку Добавить новую
Добавьте заголовок страницы. Затем следуйте подсказкам редактора. Пишите текст или нажмите на значок «Плюс», чтобы добавить блок контента.
Добавляем новый элемент страницы
Например, чтобы вставить фотографию, выберите соответствующий блок.
Чтобы добавить картинку кликните по этой иконке
Выберите источник фото и положение картинки на странице.
Нажмите Upload, Media Library или Insert from URL
В Gutenberg доступны десятки вариантов блоков. Например, кнопки, произвольный код, встраивание публикаций из социальных сетей и так далее. Их можно использовать для оформления вашего блога.
После редактирования опубликуйте страницу.
Нажмите кнопку Publish, чтобы опубликовать запись
Проверьте корректность отображения контента. Если нужно, отредактируйте страницу.
Как установить плагин (любой)
Заходим в раздел Плагины – Добавить новый
В поиске задаем название плагина, жмем Enter и видим результат:
Выбираем нужный, жмем “Установить”, происходит установка, после этого жмем “Активировать”.
Плагин установлен и работает.
Карусель логотипов
Плагин Logo Carousel. Раздел Logos – Carousels, создаем новую карусель, обзываем Главная. Добавляем логотипы.
В разделе Logos – Manage Carousels копируем шорткод. Заодно смотрим настройки. По большей части можно оставить по умолчанию, но я поменял:
- Logo Style – Grayscale Images, Default Color on Hover;
- Maximum logos – 5
Сохраняем изменения, забираем шорт код. Переходим Внешний вид – Виджеты, ставим виджет Текст в область “Сайдбар снизу на странице Business”. Обзываем “Клиенты”, вставляем шорткод. Сохраняем и смотрим результат на Главной.
Название сайта и логотип
Задаем название компании, логотип. Раздел Внешний вид – Настроить. Открывается визуальный редактор внешнего вида сайта.
Визуальный редактор внешнего видаЗаходим в Свойство сайта. Пишем название – Свой Дом – и описание. Добавляем фавикон.
Картинка Название сайта и фавикон
Фавикон – небольшое изображение на вкладке браузера и поисковой выдаче Яндекс.
После этого заходим в Заголовок – Показать, ставим флажок “Показывает оба”. Жмем “Сохранить и опубликовать”.
Настраиваем виджеты
Виджет в WordPress это… Официальное определение приводить не буду. Но если своими словами, то виджет – это функциональный элемент сайта, которые можно разместить в любую предусмотренную дизайном зону. Непонятно? Заходим в раздел Внешний вид – Виджеты.
Справа заданы различные области у шаблонов сайта: для главной страницы (в нашем случае страница Business), для стандартных внутренних страниц. Слева варианты виджетов. Есть стандартный набор, есть дополнительные, которые идут вместе с плагином.
Нас интересует: установка меню услуг, добавление адреса и телефонов вверху сайта.
Логика работы “хватай-и-тяни”. Находим виджет Произвольное меню и размещаем в области Меню справа. В настройках виджета выбираем меню Услуги. Аналогично устанавливаем меню Наши проекты.
Создаем контакты вверху сайта, над основным меню. Размещаем виджет Текст в области “Сайдбар заголовка”.
Пример текста:
Челябинск, ул. Труда, д. 64ф, оф. 201
Теги <strong> задают выделение телефона, </br> принудительный перенос строки.
Вы уже поняли, боковое меню можно располагать слева или с двух сторон. Шаблоны дизайна в WordPress гибкие, позволяют создавать несколько вариантов макетов.
Недостатки
Несмотря на многие положительные моменты программы, у CMS есть и минусы.
Много сторонних программ. Множество плагинов и тем WordPress созданы сторонними разработчиками, и в них могут быть ошибки. Перед тем как устанавливать новое дополнение, почитайте отзывы, спросите у сообщества мнение по поводу плагина или темы.
Загрузка страницы может занимать много времени. Большое количество плагинов влияет на загрузку страницы. Однако установка плагина кэширования обычно решает эту проблему.
Несовместимость обновлений и плагинов. Большой выбор плагинов — это не только плюс WordPress, но и настоящая боль. Некоторые плагины и их обновления могут вызывать различные баги (ошибки). Ошибки могут возникнуть и из-за обновлений самого Вордпресса.
Бывают проблемы с безопасностью. Так как программа распространяется с открытым исходным кодом, злоумышленникам проще найти уязвимости. Также подозрительные плагины могут вызывать вирусы. Разработчики WordPress борются с этой проблемой. Они регулярно выпускают патчи, чтобы усилить защиту системы. Также есть много эффективных плагинов, которые также защищают сайт.
Отсутствует техподдержка. Отсутствие технической поддержки может создать некоторые трудности. Изучать интерфейс и разбираться с проблемами нужно будет самостоятельно. Однако у WordPress очень активное сообщество, поэтому найти решение проблемы можно там.
Не синхронизируется с 1C. Внутри программы нет инструментом для работы с 1С. Если всё-таки это нужно сделать, придётся приглашать программистов для работы с кодом. Однако это сложная задача даже для специалистов.
Организуем сайт
На первом этапе достаточно создать пустые страницы или заполнить их посторонним текстом, только, чтобы видеть примерный объем контента. После создания болванок страниц, начинаем организацию сайта.
Надо:
- создать меню;
- загрузить логотип компании;
- задать название сайта;
- настроить цвет;
- разместить в шапке и подвале сайта контакты;
- сквозная форма обратной связи.
Раздел Внешний вид – Меню
Здесь все существующие меню сайта. Требуются создать три меню:
- Главное – для шапки сайта.
- Услуги – сквозное меню для всех внутренних страниц. Это основной продающий раздел.
- Подвальное меню. Иногда дублирует верхнее.
Меню услуг разобьем на две части: услуги и наши проекты. Оба раздела являются продающими.
Главное меню (основное). Скорее всего оно будет уже создана по умолчанию. Пункты меню редактируются по принципу “хватай-и-тащи”. Слева находите нужные вам страницы разделов (услуги, выполненные проекты, о компании) и рубрику Выполненные объекты, добавляете в меню.
Таким же образом создаем меню для подвала. Указываем только основные разделы и ставим галочку “Меню в футере”. Сохраняемся.
В верхнем меню не указываем страницу Главная – переход на главную страницу сайта происходит по клику на заголовок или логотип. В нижнем меню есть смысл указать п. Главная.
Создаем еще два меню: Услуги и Выполненные объекты. На этот раз галочку местоположения не ставим:
Все пункты меню ведут сразу на целевую страницу с продаваемым товаром или услугой.
Подключение темы
Настроим внешний вид сайта, подключим готовый шаблон дизайна.
Заходим в раздел Внешний вид – Темы. Здесь перечень шаблонов дизайна сайта, которые хранятся на сервере сайта. Каждую тему можно быстро активировать. Несколько тем по умолчанию входят в комплектацию CMS WordPress. Нам они не подходят. Их назначение – личный блог.
Чтобы поставить другую тему, ждем “Добавить новую тему”.
В каталоге WordPress хранится громадное кол-во готовых дизайном. Большинство бесплатные или условно бесплатные. Но не все темы подходят. Во-первый, нужен корпоративный сайт, во-вторых, с хорошей локализацией русского языка.
В поиск вбейте Spacious. Находим, жмем “Установить” и “Активировать”.
Используем тему Spacious. Чем она хороша?
- бесплатная (есть платная версия)
- мобильная адаптация
- много настроек по цвету и шаблону страниц
- хорошо переведена на русский язык
- использует читабельные шрифты
Это основные преимущества. Есть другие хорошие темы. Но статья предназначена для предпринимателей, поэтому не будем тратить время на изучение доступных дизайнов, которых громадное кол-во. Время – деньги.
Преимущества
Бесплатная платформа. CMS WordPress полностью бесплатна. Вы платите только за домен и хостинг (или VPS), где будут храниться файлы вашего сайта. Программное обеспечение и плагины чаще всего тоже бесплатные.
Открытый исходный код. Вам не нужно будет платить за программное обеспечение WordPress.
Простая установка. Настройка происходит в пару кликов. Если выйдут новые обновления, программа сама сообщит о них и предложит обновиться.
Лёгкость в управлении. Вам не нужны знания программирования для таких ежедневных задач, как написание и редактирование публикаций, загрузка и редактирование изображений, установка плагинов.
Понятный интерфейс. Достаточно посмотреть на название кнопки и сразу станет понятно, что можно сделать с её помощью.
Готовые темы для разных сайтов. Внутри CMS есть множество бесплатных шаблонов для разных типов ресурсов (корпоративных, блоговых, новостных). Неважно, делаете ли вы портфолио для фотографа или сайт медицинской компании. Шаблоны найдутся для любого бизнеса.
Гибкие настройки сайта. Владельцам сайтов на Вордпресс доступны десятки плагинов, которые могут решать любые технические задачи и расширять функциональность веб-страницы.
SEO-направленность CMS. Работа над SEO очень важна для современного бизнеса. WP готов к такому запросу разработчиков. Уже есть плагины (например, Yoast SEO), которые помогают продвигать сайт. С их помощью можно ставить метатеги, делать xml-карты и размещать ключевые слова в пару кликов.
Автоматическая адаптация под разные устройства. Сейчас важно, чтобы сайт не терял своей красоты и удобства при работе на мобильных устройствах. Движок WordPress сразу генерирует внешний вид на любом устройстве. В процессе работы над дизайном вы всегда можете перейти в режим мобильного устройства и посмотреть, как в этой версии будут видеть сайт пользователи.
Поддержка со стороны многих хостинг-провайдеров. Хостинг — важная часть сайта. На нём хранятся все файлы ресурса. WP «дружит» со всеми крупными хостинг-провайдерами, поэтому вы можете выбрать любую понравившуюся компанию.
Большое сообщество. Пользователей WordPress очень много, и они постоянно обмениваются находками на официальном форуме. Если вы чего-то не знаете или у вас есть какие-то проблемы, вы быстро сможете найти решение.
Сайты на wordpress: плюсы и минусы
WordPress — одна из самых популярных систем управления контентом. Впрочем, эту популярность она обрела заслужено. Главным плюсом CMS является полная свобода действий. Можно создать сайт практически любой функциональности и сложности. На начальных этапах новичкам удобно использовать встроенный визуальный редактор, ну а для профи кодинга здесь, как говорится, «все двери открыты».
Естественно, никуда не деться от «ложки дегтя». С точки зрения начинающего, основной головной болью при использовании WordPress (как и любой другой open-source CMS) будет выбор хостинга и грамотное урпавление тонкими настройками системы. Да, можно все сделать «по-шаблону», но при этом утратится понимание сделанного, чем могт воспользоваться злоумышленники, ибо на равне со своей популярностью, WordPress наиболее часто подвергается атакам, направленным на взлом или захват сайта.
После установки и настройки жизнь wordpress-сайта, как и другого web-ресурса, только начинается. Далее необходимо наполнять его качественным контентом, следить за правильной работой, при необходимости вносить изменения (в том числе за счёт установки плагинов), уделять особое внимание SEO.
Не забывайте о ссылках с других ресурсов. Добавьте сайт в панели вебмастера Google и Яндекс, отслеживайте показатели эффективности и исправляйте выявленные ошибки. Чтобы сайт двигался в поиске, а вы получали клиентов, сайтом нужно активно заниматься и никогда не останавливаться на достигнутом, иначе конкуренты вас обязательно опередят.
Создать сайт WordPress бесплатно
Создаем блок контакты
Сделаем его сквозным на весь сайт. Указываем контакты, номера телефонов, карту Google. Для этого нам понадобится плагин Google Maps Easy. Создаем карту с маркером компании.
Заходим Google Maps Easy – Добавить карту. Задаем название карты. Остальные настройки оставляем по умолчанию.
Переходим во вкладку Маркеры, задаем имя, выбираем иконку маркера и можно задать описание к маркеру, но в нашем случаи это не обязательно. Забиваем адрес и Google выдает подсказку. Остается только сохранить и запомнить ID маркера:
Переходим в раздел Виджеты (Внешний вид – Виджеты). Вставляем виджет Google Maps Easy в область “Первый сайдбар подвала”. Выбираем созданную карту и задаем настройки: ширина карты 300%, Map Centre – ID нашего маркера (чтобы маркер всегда был в центре). Сохраняем.
Вставляем виджет Текст в область Четвертый сайдбар подвала. Придется применить навыки верстки. Используем теги:
Пример приведен в моем случае:
Получаем блок Контакты внизу сайта:
Создаем страницы
В терминологии WordPress существуют страницы двух типов: записи и страницы.
Записи это прежде всего блог, лента сообщений, связанных между собой общей темой. Записям можно присваивать рубрики, метки. Записи идут в хронологическом порядке, у них есть анонс (короткая версия страницы), указан автора, дата публикации, рубрика.
Страницы работают как в одиночку, так и объединенными в группы. Можно создавать родительскую страницу и несколько дочерних, но все же каждая страница вполне самостоятельна.
Для каждого раздела сайта используем тот или иной вариант. Подбираем исходя из функций страниц, их назначений.
Сначала создаем страницы разделов: услуги, наши проекты, о компании. Потом создаем страницы внутри каждого раздела, указываем родительскую страницу. Если все сделать правильно, то перечень страниц выглядит примерно так:
Потом делаем страницы выполненных объектов. Это уже лента блога. Создаем рубрику блога Выполненные объекты. Под каждый объект создаем отдельный пост в блоге, добавляем метки с указанием тип объекта, тип конструкции. Например: зернохранилище, бескаркасный ангар, арочная конструкция.
Стоимость использования wordpress
Расходы на владение сайтом – это не только покупка CMS (кстати, WordPress распространяется полностью бесплатно), это целый комплекс вложений, который зависит от специфики web-ресурса, а также предпочтений и опыта его владельца. Сюда можно включить:
- Покупка домена. От 199 руб. за первый год и от 900 руб. при продлении. Цена зависит от выбранной зоны, типа домена (короткие и звучные имена относятся к премиум-сегменту) и регистратора. Многие хостинги предлагают подарочный домен на первый год, например, Bluehost дарит домен в общих зонах (RU/РФ-домены надо будет регистрировать у российских регистраторов).
- Покупка шаблона. Около 45-90 USD (единоразово). Кто-то может подобрать качественный бесплатный вариант, кто-то – даже сверстать свою тему, но мы ориентируемся на малый бизнес и коммерческие проекты. Здесь лучше не экономить и начать сразу с премиум-темы.
- Покупка плагинов. Около 20-40 USD за отдельные решения. Вообще, в 90% случаев можно легко обойтись бесплатными плагинами. Но тот же Elementor Pro обойдётся от 49 USD/год.
- Хостинг. На примере Bluehost – от 2,95 USD/месяц. Есть варианты и дешевле, но Bluehost – «Номер один» в списке рекомендуемых разработчиками WordPress. Он идеально адаптирован для этой CMS, имеет ряд специфичных сервисов и функций, отличается хорошей надёжностью и положительной репутацией. Ускорение загрузки сайта в разных регионах мира решается с помощью сетей CDN.
Итого, стоимость сайта на WordPress за первый год составит примерно 95-100 USD (сюда будет входить оплата хостинга, подарочный домен, шаблон за 60 USD и бесплатные плагины). В каждом конкретном случае расходы могут сильно отличаться.
Установка через ftp
Установка WordPress через FTP отличается от установки через панель хостинга только тем, что файлы WordPress вы загружаете на хостинг не с помощью меню панели, а через FTP-клиент, например, FileZilla. После загрузки файлов шаги те же – перейти по адресу сайта и запустить процесс установки в появившемся приветственном окне CMS.
Если вы хоститесь у нас, и вам не удалось установить WordPress по этой инструкции – напишите в техподдержку, мы поможем.
Название | Характеристики тарифа | Let’s Encrypt | Подарок | Тестовый период | Защита от DDoS | Цена | Цена |
Дисковая квота – 2 ГБ PHP: 5.6, 7.0, 7.1, 7.2, 7.3, 7.4, 8.0 ∞ сайтов ∞ баз данных | 10 дней | 117 82 | 82 | ||||
Дисковая квота – 7 ГБ PHP: 5.6, 7.0, 7.1, 7.2, 7.3, 7.4, 8.0 ∞ сайтов ∞ баз данных | 1 домен (.ru, .рф) | 10 дней | 234 163 | 163 | |||
Дисковая квота – 30 ГБ PHP: 5.6, 7.0, 7.1, 7.2, 7.3, 7.4, 8.0 ∞ сайтов ∞ баз данных | 1 домен (.ru, .рф) | 10 дней | 436 305 | 305 | |||
Дисковая квота – 45 ГБ PHP: 5.6, 7.0, 7.1, 7.2, 7.3, 7.4, 8.0 ∞ сайтов ∞ баз данных | 1 домен (.ru, .рф) Comodo PositiveSSL | 10 дней | 699 489 | 489 |
На всех тарифах хостинга для WordPress : нет ограничений на количество сайтов, баз данных, и почтовых ящиков. Защита от DDoS и бесплатный SSL.
Установка Opencart на хостинг
Перенос сайта WordPress на хостинг
Перенос сайта ModX на другой хостинг
Форма обратной связи
Это сквозная форма для всех внутренних страниц сайта. Используем плагин Contact Form by Supsystic и создаем новую форму.
Выбираем шаблон – Base Contact
Назначаем цвета: черный, синий, черный. Код синего: #1f90c1 Сохраните, чтобы в дальнейшем использовать, это основной цвета сайта.
Переходим на вкладку Поля (Fields). Создаем поля формы. В моем случаи:
- Имя – Text
- Телефон – Text
- Емайл – Email
- Сообщение – Textarea
- Отправить – Submit Butoon
Поле “Емайл” обязательное.
Жмем кнопку “Add New Field”, выбираем тип поля:
Двойной клик по названию поля – редактирование поля. Заполняем данные:
- Name – латинскими буквами имя поля;
- Placeholder – имя поля, которое будет видеть пользователь.
Для поля “Емайл” ставим галочку “Required” и помечает для пользователя, что это поле обязательное. Я поставил звездочку*, но можно в скобках написать “обязательно для заполнения”.
Используем стрелки слева, чтобы передвигать поля в нужно порядке.
Смотрим предварительный просмотр, сохраняем. Переходим во вкладку “Submit Option”.
Вбиваем сообщение с благодарностью за отправленную форму, выбираем цвет сообщения (корпоративно синий). Проверяем, чтобы стояла галочка на “Hide form after submit,” и указываем свой емайл для теста сообщения.
Задаем параметры для отправки емайл сообщений.
- Указываем емайл, куда отправлять сообщения.
- Емайл, который будет источником сообщения (рекомендую дать говорящее название).
- Тема письма.
- И содержание.
Смотрим пример:
После заполнения всех полей, тестируем сообщение – жмем кнопку “Send Test Emai”.
Если все сделано правильно, то на емайл приходит письмо, образец сообщения с формы обратной связи. Если письмо не приходит, проверьте папку Спам либо свяжитесь с хостинг-провайдером, возможно у вас не подключен емайл-сервер.
Вставляем виджет Contact Form by Supsystic в область “Меню справа”, указываем заголовок и выбираем созданную форму.