Обзоры расширений Joomla

  • Тип – русскоязычный бесплатный движок для создания сайта.

 

 

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

Joomla – это весьма популярная во всём мире система управления контентом (от англ. Content management system, CMS) (движок). По данным на декабрь 2017 она занимает второе место среди бесплатных CMS  (среди доменов в зоне «RU»). Рейтингов существует масса, поэтому данные могут отличаться. Плюс, стоит отметить, что Joomla – универсальная CMS, на ней можно создавать сайты различных типов (при помощи дополнительных расширений), включая форумы, блоги, интернет-магазины, лендинги, небольшие соц. сети, корпоративные сайты и т.д.. Но есть и специализированные CMS, направленные, к примеру, на создание интернет-магазинов или форумов и т.д.

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

Я работаю с Joomla, примерно, с конца 2009 года. Начинал с версии Joomla 1.5.7. Планомерно переходил на 1.6, 1.7, 2.5… 3.х и вот теперь буду переходить на Joomla 4. Есть несколько проектов помимо этого сайта. Например, вот и вот. Делаю сайты под заказ. В основном, это сайты фирм, частных предпринимателей и небольшие интернет-магазины. Помимо создания сайтов на Joomla занимаюсь увеличением скорости загрузки, защиты от взлома, SEO-оптимизацией и другими сопутствующими процессами. Несмотря на то, что Joomla не самая популярная CMS, за всё время работы с ней у меня не возникало необходимости переходить на другую систему.

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

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

Уроки Joomla
Уроки Joomla
Как создать сайт самостоятельно
Как создать сайт самостоятельно
Создание сайта кафе
Создание сайта кафе
Уроки для начинающих по Joomla
Уроки для начинающих по Joomla

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

Видео уроки будут проходить в последней стабильной, на момент их записи (19.12.2017), русскоязычной версии Joomla 3.8.3.

Подготовка к созданию сайта

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

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

Шаг 1. Определитесь с целью и задачами сайта. Для себя ответьте на вопросы (в перспективе на 1,5-2 года):

  • Что Вы хотите получить от этого сайта?
  • Что получат посетители Вашего сайта, нужно ли им это и насколько?

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

Изучите потребности целевой аудитории на основании анализа поисковых запросов. По сути, надо составить максимально объёмное семантическое ядро (но без мусора). Кластеризовать его (разделить на группы), определить частотность запросов и, желательно, выяснить конкурентность по каждому запросу. Очень приблизительно кокнкуретность можно узнать или по стоимости клика в контекстной рекламе или при помощи специальных программ/сервисов для расчёта конкурентности. Всё это можно сделать, например, в Rank Tracker.

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

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

Шаг 4. Ознакомьтесь с общими рекомендациями по созданию сайтов от весомых игроков рынка интернет-индустрии и следуйте их рекомендациям:

Также не лишним будет регулярное чтение отраслевых блогов и форумов. Лично мне полезны и своевременны были советы сайтов:

А вот в учебниках ВУЗов актуального не найти. Там либо всё то, что уже есть в сети, либо то же, но другими словами. Хотя… Может и есть исключения.

В любом случае, не стоит бездумно бросаться делать то, о чём прочли. Подумайте, почитайте ещё, посоветуйтесь.

Шаг 5. Найдите в поисковых системах сайты конкурентов. Например, если планируете, чтобы Ваш сайт был на лидирующих позициях в поисковой выдаче, откройте 1-3 самых популярных среди Вашей целевой аудитории поисковых систем и введите туда ключевое слово. Ключевое слово — это предположительное слово или фраза, по которой Вас будут находить люди в поисковой системе. Например, для сайта интернет-магазина товаров для пчеловода таким словом может быть «купить товары для пчеловода». Лучше, если Вы эти ключевые слова подберёте на основании анализа статистики поисковых запросов. Рекомендую подобрать 3-5 таких ключевых слов, поочерёдно вводите их в каждую из поисковых систем и составляйте список из первых 10 сайтов, которые появятся по запросу (лучше записывать позиции, которые они занимают, и поисковую систему, в которой находятся в топе).

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

Для этого шага я использую Rank Tracker (рисунок ниже), но можно и «вручную» – бесплатно.

Анализ поисковой выдачи
Анализ поисковой выдачи

Шаг 6. Просмотрите сайты 10 самых сильных конкурентов. Ищите и записывайте всё, что касается внешнего вида, функциональности, информации, цен и т.д. Я составляю таблицу. Например, такую.

 

 

Конкурент 1

Конкурент 2

 Конкурент …

Кол-во товаров в каталоге

1500

500

5000

Адаптивная версия сайта

1

1

1

Юридический адрес магазина и городской номер телефона

0

1

1

HTTPS

1

0

0

Онлайн-консультант

0

1

1

Поиск по сайту

1

1

1

Фильтр товаров в категориях

0

0

1

1

1

1

 

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

Шаг 7. На основании найденных «фишек» на шаге №6 начните планировать, что будет у Вас на сайте. Можно разбить его на задачи по приоритетности.

Шаг 8. Продумайте структуру сайта. Например.

 

Главная

Каталог товаров

      Подраздел 1

         Товар 1

         Товар 2

         Товар …

      Подраздел 2

         Товар 1

         Товар 2

         Товар …

      Подраздел …

         Товар 1

         Товар 2

         Товар …

Доставка и оплата

Контакты

Блог

      Статья 1

      Статья 2

      Статья …

 

По сути, это отражение меню сайта и, частично, структуры URL адресов (об этом поговорим далее).

Шаг 9. Кратко распишите, что должно быть на каждой из страниц. В этом может помочь анализ конкурентов, знание целевой аудитории и собственный опыт. Например.

Страница «Контакты». Карта Яндекс с отметкой нашего офиса (справа на странице); форма обратной связи (с полями «телефон», «сообщение») (слева на странице). Над формой, слева от карты: телефон (кликабельный), адрес, краткое описание как проехать, график работы.

И так по каждой типовой странице. Естественно, похожие страницы товаров отдельно описывать не нужно.

Шаг 10. Пропишите в плане дополнительные задачи. Например, «Полная скорость загрузки страницы товаров не должна превышать 5 секунд по данным сервиса http://www.webpagetest.org/ (тест с Польши)».

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

Шаг 12. Подберите нужные для реализации сайта расширения Joomla. Об этом поговорим далее.

Шаг 13. Подберите шаблон Joomla. О том, как это можно сделать, подробнее в статье «Обзор JM Computers and Electronics VirtueMart Storeу. Шаблон Joomla 3».

Без такой подготовки, считаю, уроки Joomla для начинающих будут не столь эффективными.

Предусмотрев все необходимое, приступаем к непосредственному созданию сайта (можно на локальном хостинге). Об этом можно узнать в видео ниже. Затем подберите хостинг и перенесите созданный сайт на него. О хостинге, который использую я, читайте в статье «Обзор хостинга сайтов – Ukraine.com.ua». А процесс переноса рассмотрим в следующих статьях.

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

Если Вам интересно, в статье «Качество сайта» более подробная информация по этому вопросу.

Компоненты, модули и плагины

Функциональность Joomla дополняется и изменяется, в основном, за счёт установки расширений, которые делятся на:

  1. Компоненты.
  2. Плагины.
  3. Модули.

Ещё есть такие расширения:

  1. Шаблоны.
  2. Плагины для компонентов.
  3. Файлы локализаций (языки). Например, русификаторы.

Под «расширениями» подразумеваю все вышеперечисленные пункты.

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

Все расширения, кроме плагинов для компонентов, устанавливаются одинаково через админку в менеджере расширений Joomla (Расширения – Менеджер расширений – Установка). Плагины для компонентов, как правило, устанавливаются через соответствующие компоненты.

В Joomla есть свои собственные (встроенные) расширения. Но можно устанавливать и дополнительные.

Компоненты Joomla. Доступны для настройки в админке в меню Компоненты. Они, как правило, составляют основную функциональность сайта. Например, компонент RSPageBuilder (рисунок ниже) служит для создания страниц. С ним поработаем в следующих уроках. Или компонент DJ-Classifieds – служит для создания доски объявлений.

Чтобы отобразить страницы компонента во фронтальной части сайта нужно создать соответствующие им пункты меню в менеджере меню (об этом далее).

Достаточно часто компоненты устанавливаются вместе с плагинами, модулями и даже шаблонами.

Компоненты Joomla
Компоненты Joomla

Плагины Joomla. Доступны для настройки в админке в меню Расширения – Плагины (рисунок ниже). Они могут расширять функциональность компонентов или выступать как отдельные единицы. Например, JAmp – плагин Joomla для создания страниц по технологии Google AMP (это «самостоятельный» плагин), а плагин «Контент – RSMediaGallery» служит для отображения галерей компонента RSMediaGallery в материалах Joomla (внутри статей) (этот плагин расширяет возможности компонента).

Результаты действий одних плагинов могут быть не видны на сайте, если не смотреть в исходный код. Например, плагины могут оптимизировать скорость загрузки сайта. А результат действий других плагинов отображается в виде галерей, видео, ссылок/таблиц на загрузку файлов и так далее. Работу таких плагинов мы наглядно рассмотрим в наших уроках Joomla.

Плагины Joomla
Плагины Joomla

Модули Joomla. Доступны для настройки в админке в меню Расширения – Модули. Они служат для отображения информации на сайте (как в админке так и во фронтальной части). В них могут отображаться галереи, текст, меню, картинки, видео и так далее. Модули могут выводить информацию из компонентов или быть отдельными единицами. Например, RSContact (с ним мы поработаем в видео уроках)  позволяет отображать форму контактов (это «самостоятельный» модуль), Tag Transform – модуль, который отображает во фронтальной части сайта теги стандартного компонента тегов Joomla (этот модуль расширяет возможности штатного компонента «Метки» (com_tags)).

Модули отображаются в админке и фронтальной части сайта в позициях шаблона (об этом ниже).

Модули Joomla
Модули Joomla

Плагины для компонентов. Устанавливаются через панели управления компонентов или через менеджер расширений Joomla. Служат для расширения возможностей компонентов. Например, BIT VirtueMart Google Analytics – плагин VirtueMart (компонента  интернет магазина) для сбора статистики при помощи Google Analytics (устанавливается через менеджер расширений Joomla). Как правило, такие плагины работают только при наличии компонента, для которых они предназначены.

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

Где искать расширения Joomla

Существует специальный сайт – «Joomla! Extensions Directory» (JED). Это официальный каталог расширений Joomla. Там есть платные и бесплатные расширения. Шаблонов на данный момент нет. На 20.12.2017 в каталоге числится 7997 расширений. Есть поиск и удобный фильтр. Сайт на английском языке.

Рекомендую искать там. Также можно искать при помощи поисковых систем. В любом случае, лучше загружать расширения исключительно с официальных сайтов разработчиков. Ничего ворованного, скачанного с форумов и разных «левых» сайтов загружать не следует. В статье «Обзор JM Financial Services. Шаблон Джумлы 3 на русском» рассмотрены преимущества и недостатки ворованных шаблонов, но это относится к любым расширениям.

Касательно поиска шаблонов, лично я предпочитаю таких разработчиков:

  1. Joomla-monster.com.
  2. RSJoomla!.
  3. RocketTheme.
  4. Virtuemarttemplates.net. Шаблоны для компонента интернет магазина VirtueMart.

Шаблон и его позиции, сетка Bootstrap

 Шаблон Joomla – это расширение Joomla, которое позволяет задавать внешний вид и взаимное расположение различным элементам сайта. Это можно назвать одним словом «дизайн». Сам термин «шаблон» применяется из-за того, что в Joomla на английском языке подобные расширения называют «template» – в переводе с английского это как раз и есть «шаблон». К примеру, в WordPress принят другой термин – «тема». Подробнее можно прочесть в этой статье.

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

На данные момент очень многие шаблоны базируются на сетке Bootstrap. Чтобы понять принцип, ознакомьтесь с этой статьёй. Большинство современных шаблонов оснащены редактором макетов, где можно менять сетку и позиции шаблонов (рисунок ниже).

Позиции шаблона Джумла
Позиции шаблона Джумла

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

О преимуществах готовых профессиональных шаблонов можно прочесть тут. Но никто не мешает Вам создавать свои собственные. Можно вручную, а можно и при помощи специальных программ, например, TemplateToaster.

В статьях «Ответы на вопросы по шаблонам для Joomla. Установка, настройка, удаление» и «Ответы на вопросы по шаблонам для Джумла. Внесение изменений» Вы найдёте дополнительный материал по работе с шаблонами.

Управлять шаблонами можно в админке Джумла в Расширения – Шаблоны.

Меню Joomla и пункты меню

Меню Джумла (рисунок ниже) очень-очень важный элемент.

  1. Меню может отображаться на сайте и служить в качестве навигации.
  2. При помощи меню выводятся компоненты сайта во фронтальную часть.
  3. Меню участвует в формировании URL адресов страниц.
  4. На основании меню можно управлять отображением модулей на той или иной странице.

Чтобы создать меню, отображаемое на сайте, Вам нужно (это будет рассмотрено в наших уроках Joomla):

  1. В Меню – Менеджер меню создать меню.
  2. В созданном меню создать пункт меню.
  3. В Расширения – Модули создать модуль меню, выбрав созданное меню и указав позицию и страницы (пункты меню), где нужно отображать этот модуль.

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

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

Меню Joomla
Меню Joomla

URL, алиасы, имена файлов

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

Алиас – слово (или словосочетание), которое используется для создания сокращённого URL адреса (ЧПУ). Алиасы можно задавать при создании материалов, пунктов меню, категорий и т.д. (рисунок ниже).

Пример обычного URL адреса:

http://domen.com/index.php?option=com_content&view=category&layout=blog&id=10

 

Пример ЧПУ (SEF) URL адреса:

http://domen.com/menyu

Алиас пункта меню
Алиас пункта меню

И в первом, и во втором случае адрес ведёт на одну и ту же страницу. В создаваемом сайте кафе это страница «Меню». В первом случае, в обычном URL, видны параметры запроса к базе данных: компонент, категория, макет страницы, ID материала. ID – это уникальный номер записи/элемента в рамках одной таблицы базы данных. В моём примере «10» – это ID категории материалов Joomla.

ЧПУ (SEF) URL, как правило, боле предпочтительны, так как:

  1. Понятнее людям. Легче запомнить, записать, продиктовать по телефону.
  2. Лучше для SEO. Можно использовать ключевые слова в URL, красивее отображаются в результатах поисковой выдаче.
  3. Безопаснее, так как не показывают запрос к базе данных, чем немного затрудняют злоумышленникам процесс взлома.

Как правило, ЧПУ URL адрес формируется на основании алиасов всех «уровней». Например, есть пункт меню – «Меню», тип Блог категории. Его алиас – «menyu». Он выводит материалы из категории «Меню». В этой категории есть материал «Margarita». Алиас этого материала – «margarita», ID материала – «5». Конечный URL адрес страницы материала такой: «http://domen.com/menyu/5-margarita». В Joomla 3.8 и более новых версиях есть возможность отключения отображений ID материала в URL. Для этого в Материалы – Менеджер материалов – Настройки – Интеграция для опции Маршрутизация URL выберите Экспериментальный и для опции Удалить идентификаторы из URL выберите Да.

Но не все URL адреса страниц формируются на основании структуры меню и не все можно с лёгкостью изменить. Это зависит от каждого конкретного компонента и типа пункта меню. У сторонних компонентов могут быть свои опции и принципы формирования URL адресов.

Также существуют сторонние компоненты для управления URL адресами. Например, sh404SEF. У него, как и у других подобных компонентов есть недостатки.

В статье «Обзор sh404SEF. ЧПУ Joomla» собраны рекомендации по формированию человеко-понятных урлов (ЧПУ). От англ. SEF – search engine friendly.

А в статье «Обзор Simple Image Gallery. Плагин галереи Joomla» можно найти рекомендации по именам для файлов, которые Вы добавляете на сайт: изображения, PDF, архивы и так далее.

Видео урок по созданию сайта №1

  1. Установка и настройка локального сервера Open Server – с 01:14.
  2. Установка Joomla в Open Server – с 07:08.
  3. Базовая настройка Joomla – с 11:19.
  4. Установка бесплатного шаблона (RSVario) и дополнительных расширений – с 18:20.
  5. Настройка шаблона – с 20:57.
  6. Создание меню Joomla – 24:13.
  7. Создание слайд шоу в RSMediaGallery – 29:29.
  8. Создание формы обратной связи (RSContact) – 33:19.
  9. Создание слайд шоу в sigplus – 41:07.

 

 

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube, Rutube и Mail.ru.

Ссылки из видео урока

Содержимое таблицы стилей («custom.css»):

/* Скрытие текста "Оставшееся количество символов" в модуле контактов на слайдере */
#mod-rscontact-counter-93 {
    display: none;
}

/* Ширина формы в слайдере */
@media (min-width: 1050px) {
.rstpl-slideshow-position .rstpl-rscontact {
    width: 25.5%;
}
}

В следующем видео уроке «Видео уроки Joomla (часть 2). Создаём сайт с нуля самостоятельно» мы рассмотрим создание главной страницы сайта кафе в виде лендинга при помощи бесплатного русскоязычного компонента RSPageBuilder.

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