Как создать сайт на Joomla!

Joomla! — одна из самых популярных систем управления контентом. Она надежная, безопасная и входит в число лучших среди бесплатных CMS — по состоянию на июль 2022 года находится на пятой позиции (доля рынка 1,6%). Рассказываем, как сделать сайт на Joomla! с нуля — от выбора хостинга до верстки и оптимизации.

Плюсы и минусы CMS

«Джумла» имеет открытый код — при необходимости ее можно доработать с учетом потребностей владельца сайта. Преимущества CMS:

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

Сайты на Joomla! легко поддаются оптимизации, трудностей с их продвижением возникнуть не должно. Теперь поговорим о минусах:

• Панель управления сложнее, чем у других CMS.
• При редактировании контента образуются дубли, что негативно сказывается на оптимизации.
• Код платформы перегружен, что особенно заметно при создании корпоративных сайтов и «визиток».
• Есть веб-уязвимости — это сказывается на безопасности сайтов.
• Отсутствует техподдержка, поэтому решать возникшие проблемы нужно будет самостоятельно — добавлять или редактировать модули, разрабатывать собственные решения.
• Некоторые пользователи отмечают более продолжительную загрузку страниц. Вероятно, по быстродействию веб-ресурсы на «Джумле» уступают тем, что созданы на базе других CMS.

Выбор хостинга и регистрация домена

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

Маркетинг

Читайте также:

Что такое партизанский маркетинг и как он работает

Что такое партизанский маркетинг и как он работает

Выбор доменного имени

Узнать, свободно ли доменное имя, можно на сайте любого хостинг-провайдера.

Рекомендации по выбору домена:

• Выбирайте запоминающееся имя. В то же время оно должно быть релевантным содержанию сайта. Например, удачные варианты для магазинов автозапчастей — autorus, autoparts, autoopt.
• Используйте понятные сокращения, чтобы они легко воспринимались как поисковыми системами, так и посетителями. Например, аббревиатура «wgti» не информативна, а сочетание букв «bmv» известно всем.
• Применяйте ассоциации, ключевые слова. Удачно, когда они совпадают с поисковыми запросами, — это повышает эффективность оптимизации. Дополнительный бонус — их легко запомнить.
• Аккуратно используйте транслитерацию. Речь идет о написании русских слов латиницей. Зачастую вместо одного символа («ж», «ш», «ч» и некоторых других) потребуется использовать 2–3. Это ухудшает читабельность доменного имени.

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

Выбор хостинга

В России лидируют хостинг-провайдеры: Timeweb, Reg.ru, Fornex, AdminVPS, SprintHost, Beget. Критерии выбора:

• Стоимость. Бесплатные варианты подойдут для начинающих мастеров и небольших проектов. Для больших и сложных ресурсов выбирайте платные хостинги.
• Технические параметры. Имеют значение поддержка MySQL, Perl, PHP (не ниже версии 5.3, предпочтительнее 7.3 и 7.4), размер дискового пространства, число доступных к размещению сайтов, ограничение по посещаемости за определенный временной период. Также важна поддержка веб-серверов — желательно Apache2+Nginx.
• PHP memory limit. Это объем памяти, необходимый для выполнения скриптов. Для небольших интернет-магазинов оптимально 256 Мб, для сайтов-визиток достаточно и 64 Мб.
• Число почтовых аккаунтов. Выясните, сколько email с вашим доменом получится создать.
• Количество FTP-аккаунтов. Желательно, чтобы их было не менее двух: собственный и для разработчика.

Как установить и настроить

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

1. Установка CMS в панели хостинг-провайдера. Перейдите в соответствующий раздел, выберите Joomla, затем кликните на «Установить приложение» — «Начать установку». Порядок действий будет примерно одинаковый для любого выбранного хостинга.

В результате отобразится окошко с данными для входа:

Алгоритм действий:

1. Зарегистрируйтесь на сайте провайдера хостинга (тестовая версия доступна в течение 10 дней и более).
2. Перейдите в раздел «Сайты/Домены».
3. Введите доменное имя.
4. Выберите название каталога для хранения файлов.

Иногда требуется время для привязки домена к серверам хостинга. Ожидание может занять 1–3 суток. 

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

Рассмотрим альтернативный вариант установки Joomla! — на OpenServer. Пошаговая инструкция:

1. Распакуйте файлы Joomla. Найдите значок OpenServer и кликните по нему — после станет доступен каталог файлов.
2. Перейдите в папку с сайтами. Создайте новую папку с названием ресурса.
3. Распакуйте архив «Джумла» в созданную папку. Запустите сервер.

2. Установка движка сайта на локальном сервере. Последовательность шагов для этого этапа:

1. Зайдите в раздел «Мои сайты».
2. Откройте страницу установки.
3. Заполните основные поля.
4. Введите электронную почту, логин, пароль — они нужны для входа в аккаунт администратора.

3. Настройка базы данных. Название сервера присваивается по умолчанию (MySQLi/localhost), также система создаст аккаунт root. 

Задайте имя базы данных. На завершающей стадии система проверит ее на совместимость с «Джумлой». Инициализация установки осуществляется с помощью соответствующей кнопки. Основные параметры:

• Общие настройки. Название сайта, состояние (включен/выключен), уровень доступа (публичный). Если вам нужно, чтобы ресурс оставался недоступным для посетителей, установите «выключен», добавьте текст с соответствующим уведомлением.
• Настройки SEO. Активируйте ЧПУ, настройте перенаправление URL. Для этого уберите файловое расширение htaccess.txt в папке сайта — доступ к ней происходит через FTP. Активируйте название сайта, установите параметры индексации, заполните строку «Авторские права».
• Система. Рекомендуем установить стандартное кэширование, выбрать продолжительность сессии (период, после которого произойдет автоматическое разлогинивание).
• Сервер. Для повышения быстродействия сайта инициируйте сжатие страниц. Безопасное соединение обеспечивается за счет SSL-сертификата — приобретите его отдельно. Установите часовой пояс, укажите email, логин отправителя.

4. Присвоение прав и настройка фильтров. Если добавлять контент на сайт будут несколько пользователей, настройте «Фильтры текста». Эта опция поможет запретить использование определенных тегов, встроить виджеты через фрейм. В Joomla! можно создать несколько списков запрещенных тегов для разных групп пользователей.

Ограничения доступа настраиваются в разделе «Права». В нем пользователям назначают категории: 

• суперпользователь (владелец); 
• зарегистрированные и незарегистрированные пользователи; 
• редактор;
• автор; 
• менеджер.

Создаем сайт на Joomla!

В административную панель сайта можно перейти, добавив к его адресу «/administrator/». Чтобы задать основные параметры, перейдите в «Общие настройки». 

Шаблоны

Определитесь с тем, как будет выглядеть интерфейс вашего сайта. При установке шаблона следуйте алгоритму:

1. Выберите вариант, соответствующий типу вашего сайта, и скачайте архив.
2. Загрузите скачанную заархивированную папку через опцию «Загрузить».
3. Найдите установленный шаблон, слева отметьте галочку.
4. Установите «использовать по умолчанию».

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

Расширения

Функциональность сайта обеспечивается за счет расширений. Благодаря им на базе Joomla! доступно создание интернет-магазинов, порталов, форумов и других ресурсов. Дополнения представляют собой программный код в файловом формате, который интегрируется в CMS. 

Основные виды расширений:

• Компоненты. Они отображаются в соответствующем меню и применяются для управления контентом. Часто компоненты оснащены собственной панелью управления, дополнены модулями, плагинами. Основная функция — вывод контента в основной части страницы (за исключением «переадресации»). Особая категория — administrator/components — размещена в корневом каталоге сайта.
• Модули. Это вспомогательные элементы, которые выводят информацию не в основной части сайта, а в дополнительных блоках. Они доступны в разделе «Расширения», во вкладке «Менеджер модулей». Располагаются в директориях (префикс mod) /modules и /administrator/modules. Различают два типа модулей — стандартные и пользовательские.
• Плагины. Они служат для проверки и изменения данных. Возможен запуск плагинов при наступлении определенных событий. Ими управляют в подразделе «Менеджер плагинов», директория — /plugins.
• Языки. По умолчанию установлен английский язык. Для адаптации локализуйте версию программы.

В базовый комплект расширений для Joomla! входят:

• Настройка безопасности сайта. Необходимы резервное копирование (Akeeba Backup), защита от спама (iAkismet, R Antispam, CAPTCHA — reCAPTCHA), предотвращение несанкционированного доступа (JU BlockIP);
• SEO. Подойдут расширения для создания карты сайта (PWT Sitemap, OSMap), редактирования метаданных (iSEO, EFSEO);
• Улучшение юзабилити ресурса. Полезно добавить кнопки соцсетей (Fast Social Share, Social Sharing) и формы обратной связи (Form Maker Lite), ускоренные страницы (JAmp, wbAMP);
• Публикация расширенных сниппетов. Присмотритесь к вариантам для микроразметки (Schema.org, Google Structured Data Markup) — проверку выполните с помощью инструмента Google.

Основной источник расширений — официальный сайт Joomla!. Доступны как бесплатные, так и платные версии. Также расширения можно скачать на Форуме русской поддержки Joomla!. Здесь общаются разработчики и веб-мастера. Весомый плюс ресурса — большой выбор локализованных дополнений, адаптированных под потребности пользователей из России.

Структура и навигация

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

Рекомендуем руководствоваться следующими принципами:

• Простота перехода на домашнюю страницу.
• Кликабельный логотип с перенаправлением на главную.
• Уведомление пользователей о том, на какой странице они находятся. Один из вариантов — «хлебные крошки» (последовательность ссылок).
• Уведомления о том, куда ведут ссылки, например при наведении курсора.
• Названия, понятные всем посетителям.

Меню помогает управлять пятью элементами сайта: модулями, которые выводятся на страницу, макетом, URL-адресом, метаданными.

Дизайн и верстка

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

Что можно поменять:

• цвет, тип и размер шрифта;
• логотип;
• заголовок, описание сайта;
• тип основного блока — фиксированный или резиновый.

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

Публикация контента

Чтобы разместить контент, перейдите в раздел «Материалы» — «Менеджер материалов» — «Создать материал». 

Основные вкладки:

• Материалы. Выберите категорию и состояние контента (опубликовано, в архиве, в корзине, не опубликовано). На платформе предусмотрено разграничение доступа для разных категорий пользователей — «Гость», «Публичный», «Зарегистрированный», «Специальные», «Суперпользователи». Укажите метки и комментарии к версии.
• Изображения и ссылки. Основные опции — выравнивание, заголовок, альтернативный текст — он показывается, если картинка не отображается в браузере. Для ссылок необходимо указать текст и вариант открытия — всплывающее, новое или родительское окно.
• Отображение. В этом разделе можно задать альтернативный макет, заголовок, вводный текст, информацию о материале, категорию, автора, дату публикации или редактирования.
• Публикация. В Joomla! можно разместить материалы с отсрочкой публикации. Здесь же доступны поля ввода для метатегов.

Завершающий этап размещения — «Сохранить и создать». Дополнительно можно скрыть материалы, установить права доступа в соответствующих разделах.

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

Виджеты Calltouch

• Увеличьте конверсию сайта на 30%
• Обратный звонок, промо-лендинги, формы захвата, мультикнопка, автопрозвон форм

Узнать подробнее

Как продвигать сайт на Joomla!

Выше мы писали о возможности добавления и редактирования метатегов в «Менеджере материалов». Однако это практичнее делать с помощью расширений, например Collect URL’s. Другие плагины для оптимизации ресурса:

• Sitemap Generator — для создания Site Map.
• EFSEO — для редактирования и добавления метатегов. Здесь доступна автогенерация — Automatic Mode.
• iSEO — содержит расширенный набор инструментов для продвижения.
• JAmp, wbAMP — служат для ускоренной загрузки страниц. Альтернативный вариант — подключение технологии AMP на Joomla! на платной основе.

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

Аналитические сервисы

Основные инструменты — Google Analytics и Яндекс.Метрика. Порядок действий для применения первого:

1. Авторизуйтесь в сервисе Google.
2. Добавьте созданный сайт.
3. Укажите параметры сайта в соответствующих полях.
4. Получите идентификатор.
5. Скачайте Advanced Google Analytics.
6. Включите установленный плагин.
7. Добавьте полученный идентификатор в строку Google Analytics ID.

В Яндекс.Метрике добавление кода выполняется так же. Зарегистрируйтесь в персональном кабинете, получите идентификатор, внесите его в плагин.

Для верификации в Яндекс.Вебмастере и Google Search Console установите плагин Webmaster site verification. Вставьте идентификаторы, полученные в сервисах, в соответствующие поля. Нажмите «Сохранить».

Правила индексации

Рекомендуем установить собственные параметры индексации сайта. Основные элементы синтаксиса:

• User-agent позволяет задавать условия для конкретных роботов, например отдельно для поисковых роботов Google и Яндекса.
• Dissalov запрещает индексацию. По умолчанию в Joomla! не разрешается индексировать системные папки.
• Allow разрешает индексацию.

Индивидуальные настройки дают возможность адаптировать наборы правил с учетом особенностей проекта.

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

Сквозная аналитика Calltouch

• Анализируйте воронку продаж от показов до денег в кассе
• Автоматический сбор данных, удобные отчеты и бесплатные интеграции

Узнать подробнее

Главное в статье

• На Joomla! можно создавать сайты любых типов — от одностраничных ресурсов до крупных интернет-магазинов. 
• Основные этапы создания сайта: регистрация доменного имени, выбор хостинга, установка шаблона и плагинов, разработка структуры, размещение контента, оптимизация.
• Чтобы работать с сайтами, созданными на CMS Joomla!, можно использовать возможности самой платформы. Также пригодятся знания HTML и CSS.