2 Jul 10:55

Как создать сайт на Joomla!: пошаговое руководство для начинающих

Веб-разработка: Как создать сайт на Joomla!: пошаговое руководство для начинающих

По данным Web Technology Surveys, CMS Joomla! занимает второе место в мире по популярности после WordPress. На этом «движке» по состоянию на июнь 2015 года работают 2,8 % от общего числа сайтов или 7,1 % ресурсов, использующих системы управления контентом. Из этой статьи вы узнаете, почему стоит обратить внимание на «Джумлу». Также вы найдете пошаговое руководство по созданию и настройке сайта на Joomla!, подключению ресурса к системам веб-аналитики и публикации контента.

Почему стоит обратить внимание на CMS Joomla!

«Джумла» — это система управления контентом, распространяющаяся по лицензии GNU GPL. Проще говоря, это бесплатный «движок», на котором вы можете делать любые сайты. CMS Joomla! характеризуется высокой функциональностью и простотой управления. Выше сказано, что «Джумла» занимает второе место по популярности после CMS WordPress. Владельцы сайтов выбирают эту систему управления контентом благодаря таким достоинствам:

  • По простоте использования Joomla! можно сравнить с WordPress. Вы сможете работать с этой CMS без знаний в области программирования и дизайна сайтов.
  • «Джумла» обладает функциональностью, достаточной для создания сайтов любого размера и предназначения. Этот «движок» поможет вам сделать ресурсы разных типов: от сайта визитки или блога до большого интернет-магазина или информационного портала.
  • Возможность адаптировать сайт к нуждам аудитории с помощью платных и бесплатных шаблонов и расширений.
  • Удобное управление меню и навигацией. Благодаря этому «Джумла» считается одним из лучших «движков» для интернет-магазинов. С помощью этой CMS вы можете быстро создавать сайты со сложной архитектурой: большим числом категорий и подкатегорий, а также организовывать иерархии страниц.
  • Адаптация к требованиям поисковых систем. Движок Joomla! считается SEO-дружественным по умолчанию. А с помощью SEO-расширений вы сможете быстро решать все технические аспекты оптимизации.


Все еще не доверяете бесплатным «движкам» или думаете, что поисковики их не любят? Это глупости. Поисковые системы не любят некачественные и шаблонные сайты, а функциональность Joomla! позволяет сделать ресурс нестандартным и полезным для аудитории. Возможно, вас убедят солидные организации, использующие «Джумлу»: Гарвардский университет, газета The Hill, аэропорт Хитроу, автоконцерн Peugeot, Министерство обороны Великобритании. Что там министерства и университеты, держитесь крепче. Официальный сайт самого Леонардо Ди Каприо работает на Joomla!

Шаг № 1: начинаем работать с Joomla!

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


Если вы считаете выгодным предложения без установленного «движка», вам придется загрузить и установить «Джумлу» самостоятельно. О нюансах почитайте на сайте поддержки российского сообщества Joomla.

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

Веб-разработка: Интерфейс административной панели Joomla! Интерфейс административной панели Joomla!

Шаг № 2: как установить шаблон Joomla!

Вы можете заказать эксклюзивный шаблон для «Джумлы» или воспользоваться готовым платным или бесплатным решением. При выборе шаблона руководствуйтесь следующими рекомендациями:

  • Если у вас нет мобильной версии сайта, выбирайте шаблон с адаптивной версткой. Благодаря этому вашим сайтом смогут пользоваться владельцы смартфонов и планшетов.
  • Обращайте внимание на внешний вид и функциональность шаблона. Например, если вы создаете корпоративный сайт или интернет-магазин, вам не подойдут темы для блогов или сайтов-визиток.
  • Если вы выбираете готовый шаблон, воспользуйтесь иностранными сайтами. Для этого введите в Google запрос joomla templates. У вас будет больше шансов найти хорошую тему, которую не используют ваши коллеги и конкуренты.

Веб-разработка: Ищите шаблоны на иностранных сайтахИщите шаблоны на иностранных сайтах

Если вам некогда пользоваться «поисковиками», ищите шаблоны здесь:


После выбора шаблона скачайте дистрибутив на жесткий диск компьютера. В административной панели выберите меню «Установка расширений».

Веб-разработка: Входим в меню установки расширений Входим в меню установки расширений

Загрузите и установите шаблон.

Веб-разработка: Загружаем и устанавливаем шаблон Загружаем и устанавливаем шаблон

После успешной установки перейдите в менеджер шаблонов.

Веб-разработка: Входим в менеджер шаблонов Входим в менеджер шаблонов

Поставьте галочку напротив выбранного шаблона и нажмите кнопку «По умолчанию» в левом верхнем углу экрана.

Веб-разработка: Назначаем шаблон по умолчанию Назначаем шаблон по умолчанию

Убедитесь, что вы активировали выбранный шаблон.

Веб-разработка: Вы активировали шаблонВы активировали шаблон

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

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

Теперь переходите к настройке CMS и шаблона.

Шаг № 3: как настроить CMS Joomla!

Из этого раздела вы узнаете об общих настройках «движка», о создании и управлении меню. Начните с общий настроек CMS Joomla!, которые можно изменить в соответствующем разделе.

Указываем общие настройки сайта

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

Веб-разработка: Указываем название сайта и пишем офлайн-сообщениеУказываем название сайта и пишем офлайн-сообщение

Укажите мета-данные сайта: описание и ключевые слова. Выберите значение для тега robots. Если у вас нет нужды ограничивать индексирование ресурса поисковыми системами, вам подойдет вариант Index, Follow. В поле «Авторские права» внесите данные о копирайте.

В разделе «Настройки SEO» включите ЧПУ и добавление суффикса к URL. Чтобы включить перенаправление URL, вам необходимо переименовать файл htaccess.txt, который находится в корневой директории ресурса. Чтобы получить к нему доступ, воспользуйтесь любым FTP-клиентом, например, Filezilla. Найдите указанный файл и переименуйте его в .htaccess.

Веб-разработка: Переименовываем файл htaccess.txt в .htaccessПереименовываем файл htaccess.txt в .htaccess

Поставьте напротив поля «Алиасы в Unicode» отметку «Нет». Если вы хотите включать название сайта в заголовок страницы, сделайте отметку в соответствующем поле. Оставьте поля в разделе «Настройки Cookie» пустыми. Вы заполните их, когда «прикрутите» к сайту форум или блог на субдомене.

Веб-разработка: Указываем настройки SEO и CookieУказываем настройки SEO и Cookie

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

В разделе «Настройки сессии» установите время продолжительности сессий для авторизованных пользователей. Например, если вы укажете значение 60 минут, система потребует от пользователя повторный ввод логина и пароля после часа бездействия.

Веб-разработка: Настраиваем параметры системыНастраиваем параметры системы

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

Веб-разработка: Указываем настройки сервера Указываем настройки сервера

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

Веб-разработка: Настраиваем права доступа Настраиваем права доступа

Если вы работаете с сайтом самостоятельно, не изменяйте настройки на вкладке «Фильтры текста». Если другие пользователи могут добавлять на ваш ресурс публикации, отфильтруйте нежелательные теги HTML. Например, с помощью фильтров вы можете запретить группе пользователей встраивать в публикации видео с YouTube. Для этого напротив соответствующей группы укажите тип фильтра «Черный список», в который по умолчанию включаются теги <iframe>.

Веб-разработка: При необходимости указываем настройки фильтрации текста При необходимости указываем настройки фильтрации текста

Как создать меню сайта на CMS Joomla!

Чтобы создать меню, воспользуйтесь менеджером меню в панели управления «Джумлы».

Веб-разработка: Входим в менеджер меню Входим в менеджер меню

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

Веб-разработка: Создаем меню Создаем меню

Чтобы создать пункты меню, вам необходимо сначала опубликовать соответствующие им страницы сайта.

Чтобы добавить пункты меню, перейдите по соответствующей ссылке и воспользуйтесь кнопкой «Создать». Выберите тип пункта меню. Представьте, что вы хотите вывести в главное меню ссылку на публикацию. Для этого воспользуйтесь опцией «Выбрать — материалы — материал».

Веб-разработка: Выбираем тип менюВыбираем тип меню

Для выбора конкретного материала воспользуйтесь опцией «Выбрать».

Веб-разработка: Выбираем конкретный материал Выбираем конкретный материал

Нажмите кнопку «Сохранить и создать», чтобы сохранить пункт меню.

Таким же способом создайте остальные пункты меню. Например, чтобы добавить в меню ссылку на блог, выберите тип меню «Блог категории».

Веб-разработка: Создаем пункт менюСоздаем пункт меню «Блог»

Теперь вы должны создать модуль отображения меню на сайте. Для этого перейдите в менеджер модулей.

Веб-разработка: Переходим в менеджер модулей Переходим в менеджер модулей

Нажмите кнопку «Создать» в левом верхнем углу экрана.

Веб-разработка: Создаем новый модуль Создаем новый модуль

На открывшейся странице выберите вариант модуля «Меню».

Веб-разработка: Выбираем вариант модуля Выбираем вариант модуля

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

Веб-разработка: Создаем модуль отображения меню Создаем модуль отображения меню

Как создать категории и меню категорий

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

Веб-разработка: Входим в менеджер категорий Входим в менеджер категорий

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

Веб-разработка: Указываем название и описание раздела Указываем название и описание раздела

На вкладке «Публикация» укажите мета-данные категории, при необходимости укажите автора и дату создания.

Веб-разработка: Указываем мета-данные категории Указываем мета-данные категории

Сохраните значения по умолчанию на вкладке «Права доступа». На вкладке «Параметры» вы можете выбрать макет страницы категории и добавить изображение. Например, для информационного ресурса подойдет макет «Блог». Сохраните изменения.

Теперь вы можете создать подкатегории. Для этого во время создания категории вам необходимо указать родительский раздел.

Веб-разработка: Создаем дочерний раздел или подкатегорию Создаем дочерний раздел или подкатегорию

Теперь вы можете создать модуль отображения категорий. Для этого перейдите в менеджер модулей. Воспользуйтесь опцией «Создать» и выберите тип модуля «Категории».

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

Веб-разработка: Создаем модуль отображения категорий Создаем модуль отображения категорий

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

Веб-разработка: Меню категорий Меню категорий

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

Веб-разработка: Выбираем тип модуляВыбираем тип модуля «Навигатор сайта»

Укажите название модуля, выберите подходящие настройки и позицию элемента на сайте. Сохраните изменения.

Веб-разработка: Настраиваем модуль Настраиваем модуль

Теперь хлебные крошки будут отображаться в верхней части страниц сайта.

Веб-разработка: Вы добавили хлебные крошки Вы добавили хлебные крошки

Вы настроили CMS и создали меню сайта. Теперь вам необходимо решить практические задачи с помощью расширений.

Шаг № 4: устанавливаем и настраиваем базовый набор расширений для Joomla!

C помощью базового набора расширений для Joomla! вы сможете решить следующие практические задачи:

  • Обеспечить безопасность сайта.
  • Обеспечить соответствие ресурса техническим требованиям поисковых систем.
  • Расширить функциональность и повысить юзабилити сайта.


Обеспечиваем безопасность сайта

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

Как настроить резервное копирование сайта на Joomla!

Чтобы регулярно создавать резервные копии, вам необходимо воспользоваться одним из следующих инструментов:


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

Веб-разработка: Резервная копия успешно создана Резервная копия успешно создана

С помощью кнопки View Log вы можете просмотреть журнал обновлений. Кнопка Manage backups позволяет войти в меню управления бэкапами. Здесь вы можете фильтровать, помечать и удалять устаревшие резервные копии.

Веб-разработка: Меню управления резервными копиями Меню управления резервными копиями

Бесплатная версия Akeeba Backup не поддерживает автоматическое резервное копирование по расписанию, поэтому вам придется делать копии вручную. Для этого в панели управления Joomla! необходимо воспользоваться меню «Компоненты — Akeeba Backup». На открывшейся странице управления компонентом нажмите кнопку Backup Now.

Веб-разработка: Создаем резервную копию вручнуюСоздаем резервную копию вручную

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

Веб-разработка: Добавляем пометку и запускаем копирование Добавляем пометку и запускаем копирование

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

Как уменьшить вероятность несанкционированного доступа к сайту на Joomla!

Вы можете уменьшить вероятность взлома вашего сайта на «Джумле» с помощью таких расширений:


Установите расширение kSecure. Включите плагин в меню «Расширения — менеджер плагинов».

Веб-разработка: Включаем kSecure Включаем kSecure

Перейдите на страницу настроек плагина kSecure. Поставьте отметку «Да» напротив поля Enable. Введите пароль, который вы будете использовать для доступа к административной панели, в поле Password. Сохраните изменения.

Веб-разработка: Настраиваем плагин Настраиваем плагин

Теперь при попытке войти в панель управления с помощью стандартного адреса vashsite.ru/administrator система будет перенаправлять вас на главную страницу. Чтобы попасть в «админку», вам необходимо ввести адрес vashsite.ru/administrator?***, где *** — введенный вами при настройке плагина kSecure пароль.

Веб-разработка: Административная панель доступна только по специальному URL Административная панель доступна только по специальному URL

Как защитить сайт на Joomla! от спама

Вы можете защитить ресурс на CMS «Джумла» от автоматических регистраций и спам-комментариев с помощью следующих расширений:

  • iAkismet. Это платный плагин, обеспечивающий защиту сайта с помощью сервиса Akismet.
  • R Antispam. Этот инструмент защищает от спам-ботов форумы сайтов, работающих на Joomla!
  • CAPTCHA — reCAPTCHA.
  • CleanTalk (платный сервис).
  • KeyCAPTCA.


После регистрации на сайте KeyCAPTCHA укажите версию вашей CMS, выберите ширину и язык капчи.

Веб-разработка: Выбираем параметры капчиВыбираем параметры капчи

Скачайте дистрибутив плагина и установите его на сайт. В менеджере плагинов включите расширение. На странице настроек KeyCAPTCHA введите индивидуальный код, полученный во время регистрации. В поле Custom text above KeyCAPTCHA вы можете ввести текст, который будет отображаться над капчей. Вы можете удалить обратную ссылку на сайт разработчика плагина, отметив No в поле KeyCAPTCHA link. Сохраните изменения. Теперь формы регистрации, комментирования, связи с администратором, гостевая книга и другие разделы вашего сайта будут защищены от роботов.

Веб-разработка: Сайт и его пользователи защищены от роботов Сайт и его пользователи защищены от роботов

Как обеспечить соответствие сайта техническим требованиям поисковых систем

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

Как создать карту сайта

Вы можете решить эту задачу с помощью следующих инструментов:


После установки Xmap перейдите в менеджер карты сайты. Его можно найти в меню «Компоненты — Xmap». Нажмите кнопку «Создать».

Веб-разработка: Входим в меню создания карты сайтаВходим в меню создания карты сайта

На странице настроек параметров укажите название карты сайта и выберите статус «Опубликовано». На вкладке «Меню» выберите меню, которое вы используете. Оставьте дефолтные настройки на вкладке «Параметры». Нажмите кнопку «Сохранить и создать».

Веб-разработка: Создаем карту сайта Создаем карту сайта

Чтобы просмотреть карту сайта, вернитесь в меню управления и воспользуйтесь ссылкой, отмеченной на иллюстрации.

Веб-разработка: Переходим по ссылке на карту сайта Переходим по ссылке на карту сайта

Если вы все сделали верно, после перехода по ссылке вы увидите XML-карту.

Веб-разработка: Карта сайта Карта сайта

Как обеспечить удобное управление мета-данными

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

  • iSEO. Платное решение: мощный SEO-плагин, решающий комплекс задач.
  • EFSEO.
  • SEOSimple.
  • SEOBoss. Используйте этот бесплатный плагин осторожно, так как некоторые его функции относятся к олдскульному SEO.


Установите плагин SEOSimple и включите его в менеджере плагинов. Перейдите на страницу настройки плагина. Поставьте флажок в поле Enabled напротив пункта Noindex Category Pages. Закрывая страницы категорий от индексации, вы решаете проблему дублированного контента.

Веб-разработка: Автоматически закрываем страницы категорий от индексацииАвтоматически закрываем страницы категорий от индексации

На вкладке Title Tag Settings укажите способ отображения заголовков внутренних и главной страниц сайта. Укажите название пользовательского заголовка и выберите разделитель.

Веб-разработка: Указываем настройки для заголовков страницУказываем настройки для заголовков страниц

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

Как уведомлять поисковые системы о публикациях нового контента

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

Если вы недавно создали сайт, поисковые системы не знают, как часто вы будете публиковать контент. Из-за этого они «приходят» на ваш сайт нерегулярно. Чтобы ускорить индексацию нового контента, вы можете уведомлять «поисковики» о публикациях. Это делается с помощью таких инструментов:


Все перечисленные решения являются платными. Стоимость установки Blog Ping Pro составляет USD 10,00. После установки и включения плагина вы сможете настроить уведомление поисковых систем с помощью пинг-сервисов. Чтобы сообщать о публикации контента «Яндексу» и Google, используйте сервисы ping.blogs.yandex.ru/RPC2 и blogsearch.google.ru/ping/RPC2.

Как сделать сайт более удобным для пользователей

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

Как добавить кнопки шеринга социальных сетей

Добавить кнопки социальных сетей можно с помощью таких расширений:


После установки включите Uptolike Share Buttons и перейдите на страницу настроек. Выберите язык, способ выравнивание и расположение виджета. Определите, нужны ли вам кнопки шеринга на главной странице.

Веб-разработка: Настраиваем плагинНастраиваем плагин

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

Веб-разработка: Выбираем внешний вид блокаВыбираем внешний вид блока «Поделиться»

Теперь ваша аудитория сможет делиться вашими публикациями в соцсетях в один клик.

Веб-разработка: Виджет установленВиджет установлен

Как добавить форму обратной связи

Вы можете сделать форму обратной связи с помощью таких расширений:


После установки расширения Form Maker Lite войдите в меню «Компоненты — Form Maker Lite — Forms». С помощью кнопки «Создать» откройте редактор новых форм.

Веб-разработка: Создаем контактную форму Создаем контактную форму

С помощью кнопки Form Options перейдите на страницу настройки формы. На вкладке Email Options введите адрес электронной почты, на который будут приходить сообщения, созданные с помощью формы.

На странице конструктора добавляйте новые поля с помощью кнопки Add New Field.

Веб-разработка: Добавляем новые поля Добавляем новые поля

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

Веб-разработка: Редактируем поля Редактируем поля

Чтобы добавить форму на страницы сайта, в меню «Компоненты — Form Maker Lite — Forms» скопируйте код созданной формы. В режиме редактирования вставьте его на выбранные страницы сайта.

Веб-разработка: Копируем код Копируем код

Если вы все сделали верно, на страницах сайта появится созданная форма.

Веб-разработка: Форма опубликованаФорма опубликована

CMS Joomla! и Schema.org: как добавить микроразметку

Структурированные данные интересны благодаря расширенным описаниям страниц в поисковой выдаче.

Вы можете легко добавлять микроразметку Schema.org на сайт под управлением CMS Joomla! без необходимости изменения кода. Чтобы размечать данные в визуальном редакторе, вам понадобятся расширения J4Schema.org и редактор JCE. Обратите внимание, J4Schema.org работает только с этим редактором. Поэтому после установки расширений выберите JCE в общих настройках системы.

Веб-разработка: Включаем редактор по умолчаниюВключаем редактор по умолчанию

Расширение J4Schema.org не требует дополнительных настроек. Поэтому вам необходимо настроить только редактор JCE. Действуйте так:

  • Выберите меню «Компоненты — JCE Editor — Global Configuration».

Веб-разработка: Переходим в меню настроек редактора
Переходим в меню настроек редактора

  • Отключите валидацию HTML.

Веб-разработка: Отключаем валидацию HTML Отключаем валидацию HTML

  • Перейдите в меню редактирования профилей редактора.

Веб-разработка: Переходим в меню редактирования профилейПереходим в меню редактирования профилей

  • Выберите профиль по умолчанию. Перейдите в меню настроек.

Веб-разработка: Редактируем дефолтный профиль Редактируем дефолтный профиль

  • Перейдите на вкладку Features & Layout. Методом drag-and-drop добавьте кнопку J4Schema.org на панель редактора. Сохраните изменения.

Веб-разработка: Перетаскиваем кнопку на панель и сохраняем изменения Перетаскиваем кнопку на панель и сохраняем изменения

Теперь вы можете работать с компонентом J4Schema.org в визуальном редакторе.

Веб-разработка: Кнопка J4Schema.org доступна в режиме создания и редактирования материаловКнопка J4Schema.org доступна в режиме создания и редактирования материалов

Представьте, что хотите добавить микроразметку на страницу описания фильма. В режиме редактирования добавьте текст.

Веб-разработка: Добавляем описание фильма Добавляем описание фильма

Выделите описание и с помощью кнопки J4Schema.org откройте редактор микроразметки.

Веб-разработка: Открываем редактор микроразметки Открываем редактор микроразметки

Разверните меню Thing — Creative work. Выберите itemtype Movie. Добавьте его с помощью кнопки Add type.

Веб-разработка: Выбираем тип разметкиВыбираем тип разметки

Выделите название фильма и добавьте атрибут с помощью кнопки Add attribute.

Веб-разработка: Добавляем разметкуДобавляем разметку «название»

Добавьте разметку «Режиссер».

Веб-разработка: Указываем режиссераУказываем режиссера

Укажите жанр фильма и его продолжительность. Добавьте разметку на страницу с помощью кнопки Paste back в нижней части редактора. Чтобы проверить разметку, воспользуйтесь меню Toggle Editor визуального редактора.

Веб-разработка: Разметка добавлена Разметка добавлена

Опубликуйте страницу. Воспользуйтесь опцией «Просмотр кода страницы», чтобы убедиться, что разметка добавлена.

Веб-разработка: Страница размечена Страница размечена

Вы можете проверить корректность разметки с помощью валидатора. Для этого вставьте код или URL страницы в соответствующее поле инструмента и нажмите кнопку «Проверить».

Веб-разработка: Валидатор Google не имеет вопросов к разметке Валидатор Google не имеет вопросов к разметке

Шаг № 5: как добавить код аналитических сервисов на сайт под управлением Joomla!

Вы можете добавить сайт под управлением CMS Joomla! в сервисы аналитики «Метрика» и Google Analytics, а также в Search Console Google и «Яндекс.Вебмастер».

Как добавить сайт на «Джумле» в Google Analytics

Войдите в аккаунт Google Analytics. Добавьте новый сайт в систему: укажите название, URL. Воспользуйтесь опцией «Получить идентификатор отслеживания». Вы получили код отслеживания, который необходимо вставить на все страницы сайта.

Веб-разработка: Код отслеживания Код отслеживания

Задачу можно решить с помощью следующих расширений:


После установки плагина Advanced Google Analytics включите его и перейдите на страницу настроек. Укажите ID идентификатора отслеживания, название домена, выберите подходящие настройки и сохраните изменения. Вы добавили код отслеживания на сайт.

Веб-разработка: Настройки плагинаНастройки плагина

Как добавить сайт на Joomla! в «Яндекс.Метрику»

Добавить на сайт код отслеживания «Яндекс.Метрики» можно с помощью плагинов do Yandex Metrika и Yandex Metrika.

После установки плагина Yandex Metrika включите его и перейдите на страницу настройки. Выберите вкладку «Параметры». Введите ID идентификатора. На вкладке «Дополнительные параметры» внесите необходимые вам изменения.

Веб-разработка: Настраиваем плагинНастраиваем плагин «Яндекс.Метрика»

Как верифицировать сайт на Joomla! в Google Search Console и «Яндекс.Вебмастер»

Чтобы добавить сайт в кабинеты для вебмастеров Google и «Яндекс», вам необходимо подтвердить права на управление ресурсом. Вы можете быстро сделать это с помощью расширения Webmaster site verification.

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

Веб-разработка: Добавляем идентификаторыДобавляем идентификаторы

После этого подтвердите права в кабинетах для вебмастеров Google и «Яндекс».

Веб-разработка: Права подтвержденыПрава подтверждены

Шаг № 6: как публиковать контент

Чтобы опубликовать заметку на сайте под управлением CMS Joomla!, воспользуйтесь меню «Создать материал» в административной панели.

Веб-разработка: Создаем материал Создаем материал

На странице редактирования укажите название публикации, добавьте текст. Выберите категорию. Чтобы добавить изображение, воспользуйтесь кнопкой Insert/Edit Image на панели редактора.

Веб-разработка: Добавляем текст и изображение Добавляем текст и изображение

В меню добавления изображения вы можете добавить атрибут alt, выбрать способ выравнивания и разрешение фото.

Веб-разработка: Добавляем изображениеДобавляем изображение

На вкладке «Параметры публикации» вы можете добавить мета-тег keywords. Также вы можете вручную добавить описание страницы, если не хотите, чтобы оно было сгенерировано автоматически с помощью установленного ранее SEO-плагина. При необходимости укажите дату публикации и автора.

Веб-разработка: Указываем параметры публикации Указываем параметры публикации

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

Веб-разработка: Публикация готоваПубликация готова

В разделе «Менеджер материалов» вы можете управлять публикациями: редактировать, удалять, снимать с публикации, оценивать количество просмотров. В разделе «Категории» вы можете создавать и редактировать категории сайта.

Вместо заключения, или Что лучше: Joomla! или WordPress

Ответ на этот вопрос зависит от стоящих перед вами задач, личных предпочтений и привычек. Однозначное решение вы сможете найти самостоятельно, поработав с этими «движками». «Джумлу» можно сравнить с «Вордпрессом» по простоте создания и управления сайтом. Обратите внимание, впервые создающему ресурс человеку все же будет проще и быстрее разобраться с WordPress. При этом Joomla! имеет больше встроенных возможностей, с помощью которых можно решать практические задачи без установки дополнительных компонентов.

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

К преимуществам Joomla! перед WordPress можно отнести:

  • SEO-дружественные настройки по умолчанию. «Движок» поддерживает оптимизацию URL-адресов, переадресацию ссылок, управление мета-тегами robots.
  • Автоматическое кэширование. Эта функция ускоряет загрузку страниц в браузерах.
  • Наличие встроенного доступа к FTP.
  • Управление сжатием страниц.
  • Возможность front-end редактирования контента.


В CMS WordPress перечисленные задачи можно решить только с помощью дополнительных плагинов.

К недостаткам Joomla! можно отнести:

  • Меньшее по сравнению с WordPress количество бесплатных шаблонов и плагинов.
  • «Нежелание» некоторых расширений работать сразу после установки. Например, чтобы заставить работать J4Schema.org, автору пришлось переустанавливать и перенастраивать его несколько раз. Впрочем, этот недостаток можно объяснить человеческим фактором.
  • Более сложное управление сайтом. Возможно, еще один субъективный недостаток.


Стоит ли выбирать CMS Joomla!, если вы не занимаетесь разработкой сайтов? Почему бы и нет. С помощью этого «движка» вы сможете быстро создать блог или небольшой контент-проект. Возможно, вам придется обратиться к профессионалам, если вы создаете масштабный ресурс. Кстати, это справедливо для любой CMS.

Понравилась публикация? Поделись с друзьями:

0 комментариев

Зарегистрируйтесь или авторизуйтесь для того, чтобы оставлять комментарии.