Дмитрий Дементий

Владельцы сайтов выбирают эту систему управления контентом благодаря таким достоинствам:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создайте резервную копию сайта.

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

Бесплатная версия Akeeba Backup не поддерживает автоматическое резервное копирование по расписанию, поэтому придется делать копии вручную. Для этого в панели управления Joomla! необходимо воспользоваться меню «Обслуживание – Backup is up-to-date».

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

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

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

Установите расширение Brute Force Stop. Включите его в меню «Менеджер расширений – Плагины».

На странице настроек плагина укажите порог блокировки. По умолчанию стоит значение «10». Рекомендую уменьшить его.

На вкладке «Уведомления» укажите электронный адрес, на который будут приходить сообщения о заблокированных IP.

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

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

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

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

В менеджере плагинов включите плагин CATCHA – reCAPTCHA.

Зарегистрируйте сайт в сервисе Google reCAPTCHA. Получите публичный и секретный ключ. Укажите их в настройках плагина.

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

После этого reCAPTCHA будет защищать формы регистрации, восстановления пароля, комментирования от спам-ботов.

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

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

После установки Sitemap Generator перейдите в менеджер карты сайты. Его можно найти в меню «Компоненты – Sitemap Generator».

Нажмите кнопку «Generate your sitemap».

Дождитесь сообщения об успешном создании карты сайта. Чтобы просмотреть карту, воспользуйтесь кнопкой «Show the sitemap».

Обратите внимание, расширение Sitemap Generator можно бесплатно использовать на сайтах с количеством URL меньше 500. Стоимость использования модуля для сайтов с 500 URL и больше составляет от 40 евро в год.

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

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

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

Установите плагин EFSEO и включите его в менеджере плагинов. Перейдите на страницу настройки плагина. На вкладке «Дополнительные параметры» активируйте функцию Collect URL’s.

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

Щелкните по блоку и отредактируйте мета-данные страницы.

Повторите действие на каждой странице сайта.

Плагин EFSEO поддерживает автоматический режим. При его активации надстройка генерирует мета-данные для страниц. Функцию можно включить на вкладке Automatic Mode в настройках плагина. Используйте автоматический режим в крайнем случае, так как мета-данные лучше создавать вручную.

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

Установите и активируйте модуль AddToAny Share Buttons. По умолчанию кнопки шеринга появятся на страницах публикаций под контентом.

В настройках плагина на вкладке AddToAny Placement можно изменить расположение кнопок. Доступны позиции над контентом, под контентом и над и под контентом одновременно.

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

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

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

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

Добавляйте новые поля с помощью кнопки Add New Field.

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

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

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

Как добавить микроразметку на сайт поду управлением Joomla!

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

Google Structured Data Markup . После активации бесплатная версия добавляет микроразметку Schema.org Breadcrumblist, Organization и Website.

С помощью бесплатной версии плагина к публикациям можно добавлять структурированные данные Schema.org Article. Для этого в меню настроек Google Structured Data выберите раздел Items и нажмите кнопку «Создать».

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

Проверьте корректность микроразметки с помощью инструмента Google .

Платная версия плагина поддерживает другие типы разметки, включая Review, Products, Recipes, Events.

Реализуйте на сайте протокол Open Graph. Он нужен, чтобы при шеринге контента в социальных сетях сниппет выглядел привлекательно.

Установите и активируйте расширение Phoca Open Graph . В настройках плагина на вкладке Main Options включите опцию Find Image in content. Укажите название сайта и сохраните изменения.

Если все сделано верно, при публикации материала в социальных сетях будет формироваться привлекательный сниппет.Турбо-страницы «Яндекса» на сайт под управлением CMS Joomla! можно подключить с помощью платного плагина Turbozen . Стоимость расширения – 990 рублей.

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

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

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

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

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

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

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

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

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

В «Яндекс.Метрике» проверьте, поступают ли данные с сайта.

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

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

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

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

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

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

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

На вкладке «Публикация» добавьте описание и по желанию ключевые слова страницы.

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

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

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

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

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

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

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

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

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

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

• Меньшее по сравнению с WordPress количество бесплатных шаблонов и плагинов. Например, для Joomla! нет бесплатного плагина для реализации турбо-страниц .
• Нежелание некоторых расширений работать сразу после установки.
• Более сложное управление сайтом. Возможно, еще один субъективный недостаток.
Please enable JavaScript to view the

В этой статье я хочу поговорить на тему, что такое главная страница Joomla сайта и как её создать. Предложу 6 вариантов создания.

Что такое главная страница Joomla

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

Предлагаю посмотреть 6 вариантов главной страницы сайта Joomla:

• Блог Избранные материалы;
• Стандартная страница материалов отдельной категории;
• Лендинг страница конструктором SP PageBuilder от JoomShaper
• Посадочная страница расширением Shortcode Ultimate Plugin for Joomla;
• Страница, созданная на одностраничном шаблоне;
• Главная страница, как страница авторизации (вход на сайт)

Покажу, как применить все эти способы.

Блог Избранные материалы

Классический вариант главной страницы сайта Joomla – это блог под названием «Избранные материалы». Я использую названия перевода CMS, которое мы видим в административной части сайта.

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

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

Чтобы создать блог «Избранные материалы» нужно:

• Создать новое меню или выбрать уже существующие меню;
• Создать в этом меню новый пункт. Выбрать тип этого пункта: Материалы - Избранные материалы;

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

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

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

Важно! Двух главных пунктов меню на сайте быть не может.

Страница материалов отдельной категории

Можно сделать главной, страницу материалов отдельной категории. В данном случае речь идёт не о блоге, а о списке материалов отдельной категории.

Для создания нужно:

• Создать новое меню или выбрать уже существующие меню;
• Создать в этом меню новый пункт. Выбрать тип пункта меню: Материалы - Список материалов категории;

• Далее выбрать категорию, материалы которой вы хотите показать на главной;
• Заполнить другие настройки пункта меню.

Важно! На вкладке «Пункт меню», с правой стороны, в пункте «Главная страница» поставить значение «Да».

class="eliadunit">

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

Главная страница - Лендинг страница конструктором SP Page Builder

Есть расширение под названием «SP Page Builder» от JoomShaper. О нём я писал . С помощью этого расширения, можно легко и быстро создать красивую, уникальную, а также отличную от стандартной, главную страницу сайта.

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

Инструменты простые. С помощью перетаскивания вы «навешиваете» на страницу материала нужный контент. Далее сохраняете страницу. Затем создайте пункт меню типа Материалы - Материал. Выбираете созданную конструктором страницу и назначаете этот пункт меню «Главной страницей».

Посадочная страница расширением Shortcode Ultimate Plugin for Joomla

Второе расширение, которое можно использовать для создания главной страницы называется «Shortcode Ultimate Plugin for Joomla».

Shortcodes Ultimate это плагин Joomla, который предоставляет мега пакет шорткодов. В него входит более 45 бесплатных шорткодов и 90+ в pro версии.

• Разработчик плагина: BdThemes Ltd (https://bdthemes.com/)
• Скачать: Есть ссылка тут, http://bdthemes.com/demo/?product=shortcodeultimatefree , где можно было скачать бесплатную версию. Однако сейчас эта официальная ссылка не работает. Там можно купить плагин за 35$. Однако вы легко найдете этот плагин в сети бесплатно.

Повторюсь, плагин позволит вам создать уникальную страницу сайта, которую вы потом должны назначить главной, стандартными инструментами Joomla. Читайте выше.

Главная страница на одностраничном шаблоне

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

Суть этого способа в использовании двух шаблонов на одном сайте. Об этом способе я писал тут, здесь повторюсь, кратко.

• Найдите и скачайте одностраничный шаблон Joomla. Поищите и ;
• Создайте материал, который будет на главной (не публикуйте, только сохраните);
• Создайте модули, которые будут на этой главной (не публикуйте, только сохраните);
• Создайте пункт меню с этим материалом. При создании этого пункта меню, важно, кроме всех настроек описанных выше, на вкладке «Пункт меню» в настройке «Стиль шаблона» выберите одностраничный шаблон, установленный ранее.

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

Для начала, в любом удобном для вас месте создайте папку нашего шаблона «whitesquare». В ней должны находиться три подпапки: css, images и language. В папках css и images создайте файлы index.html со следующим содержимым:

Эти файлы являются заглушками и, по требованиям CMS, должны отображать пустую страницу при обращении к этим папкам напрямую.
Далее, в папке css создайте пустой файл стилей template.css, а в папке language подпапку en-GB, которая будет содержать пустой файл en-GB.tpl_whitesquare.ini и файл en-GB.tpl_whitesquare.sys.ini со следующим содержимым:

TPL_WHITESQUARE_XML_DESCRIPTION="Whitesquare is the Joomla 3 site template."

Давайте подробно разберем, что все это значит. Папка language нужна для локализации, она может содержать подпапки с различными языками: en-GB, ru-RU и т.д. Каждая языковая папка включает два файла с ключами. Ключи представляют собой пару с названием ключа и его значением. Названия ключей для разных языков будут одинаковыми, а значения – разными. Такой механизм позволяет использовать шаблон для создания сайтов на разных языках. Поскольку это учебный пример, будем использовать только английский язык – en-GB. Первый файл en-GB.tpl_whitesquare.ini будет содержать ключи, которые увидят пользователи сайта, а второй - en-GB.tpl_whitesquare.sys.ini будет содержать ключи административных функций.
Далее нужно создать пустые файлы component.php, error.php и index.php. Они нам понадобятся в будущем.
Следующим шагом добавим картинки: favicon.ico, template_preview.png и template_thumbnail.png. Последние две – это превьюшки будущего шаблона и они имеют размеры 640х480 и 206х150 соответственно.
Последний файл, который нужно добавить – это templateDetails.xml. На данном этапе - это самый важный файл, он содержит подробное описание нашего шаблона:

whitesquare 2015-02-25 pcklab http://www.pcklab.com 2014 Pixel Cook Laboratory. All Rights Reserved. GNU General Public License version 2 or later; see LICENSE.txt 1.0.0 TPL_WHITESQUARE_XML_DESCRIPTION css images js language component.php error.php favicon.ico index.php template_preview.png template_thumbnail.png templateDetails.xml en-GB/en-GB.tpl_whitesquare.ini en-GB/en-GB.tpl_whitesquare.sys.ini
Большая часть содержимого этого файла понятна, необходимо пояснить только следующее:
Поле description содержит тот самый ключ локализации, который мы указали в en-GB.tpl_whitesquare.sys.ini
Поле files содержит полный перечень всех файлов и папок, лежащих в корне шаблона.
Поле languages содержит список языковых файлов, а поле positions нам понадобится чуть позже.
Теперь, когда каркас шаблона готов, давайте добавим его в CMS. Для этого откройте панель администратора Joomla!, выберите пункт меню Extension -> Extension manager, перейдите на вкладку Install from Directory и в поле Install Directory укажите путь до папки whitesquare, в которой мы создавали файлы шаблона.

Нажмите кнопку Install и шаблон добавится в систему. Остается только активировать шаблон. Зайдите в меню Extension -> Template manager, найдите шаблон whitesquare в списке и в поле Default, нажмите на звездочку, это сделает наш шаблон – шаблоном по умолчанию. После этого уже можно открыть адрес сайта, где установлена Joomla! и увидите пустую страницу нашего сайта.

Предварительный осмотр

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

Структура страниц Большинство руководств по созданию шаблонов для Joomla! ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на Joomla! в рамках предоставленных макетов.

Давайте начнем со структуры страниц. Управление страницами осуществляется в панели администратора через меню Content -> Article Manager. Для добавления новой страницы нажмите кнопку New и заполните форму. В поле Title введите заголовок страницы. Остальные поля оставьте без изменений. Добавьте таким образом страницы Home, About us, Services, Partners, Customers, Projects, Careers, Contact. После добавления, список страниц должен выглядеть вот так:

Шаблон страницы Следующим шагом нам нужно сделать шаблон страницы Joomla! Откройте файл index.php, который мы создали в папке нашего шаблона и добавьте в него код, который создаст каркас страницы:

Давайте подробно разберем, что здесь написано. Вначале идет PHP блок, в котором мы определяем необходимые переменные. Первая строка – это стандартная проверка безопасности Joomla! Далее мы устанавливаем переменные приложения, документа, меню и языка. Для подключения стилей и изображений также понадобится переменная, содержащая путь до нашего шаблона. И последняя переменная будет содержать проверку - является ли показываемая страница домашней. Помимо прочего, в этом же блоке подключаем локальный CSS файл нашего шаблона и удаленные стили шрифтов.
Далее идет стандартный html шаблон, в теле которого поместим два блока - .wrapper и footer. Секция head начинается с подключения стандартных заголовков Joomla! Дальше идет мета-тег перевода Internet Explorer в современный режим, а затем специальный скрипт для поддержки HTML5 тегов в старых версиях IE. Блок.wrapper содержит пустые блоки для шапки и заголовка страницы. Последней, но самой важной командой является подключение компонента внутри блока.wrapper – именно она будет добавлять содержимое страницы в шаблон и отображать информационные сообщения.
Теперь нужно стилизовать получившуюся страницу. Сохраните фон страницы в файл images/bg.png и добавьте немного базовых стилей в файл template.css:

Показать код

body { margin: 0; border-top: 5px solid #7e7e7e; background: #f8f8f8 url(../images/bg.png); color: #8f8f8f; font: 12px Tahoma, sans-serif; } a { color: #525252; } img { border: 0; } p { margin: 20px 0; } .pull-left { float: left; } .pull-right { float: right; } .aligncenter { display: block; margin-right: auto; margin-left: auto; } .inputbox { padding: 0 10px; height: 30px; border: 1px solid #e7e7e7; background-color: #f3f3f3; color: #b2b2b2; vertical-align: top; } .button { height: 32px; border: none; background-color: #29c5e6; color: #fff; font-family: "Oswald", sans-serif; } .image { outline: 1px solid #c9c9c9; border: 1px solid #fff; } figure img { display: block; } .wrapper { margin: auto; max-width: 960px; } header { padding: 20px 0; } aside { float: left; width: 250px; } aside + .item-page { margin-left: 280px; padding-bottom: 50px; } footer { clear: both; background: #7e7e7e; color: #dbdbdb; font-size: 11px; }

После этих действий у нас должна появиться серая страница с большим нестилизованным заголовком. К нему мы вернемся позже.Логотип

После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В блок header нашего шаблона вставьте разметку для логотипа:

">
В качестве альтернативного текста для изображения вставляется текст через стандартную функцию локализации Text::_(). Ключа TPL_WHITESQUARE_LOGO у нас еще нет, поэтому давайте добавим его в файл \language\en-GB\en-GB.tpl_whitesquare.ini:

TPL_WHITESQUARE_LOGO="Whitesquare logo"
К сожалению, после этого текст не появится на странице сайта. Дело в том, что мы добавляем ключ локализации в шаблон, который уже используется системой, а Joomla! так устроена, что она читает ключи локализации из этого файла только при первоначальной установке шаблона. Можно конечно удалить шаблон и добавить его в систему заново, но мы поступим проще – добавим этот же ключ в системный файл {joomla_root}\language\en-GB\en-GB.tpl_whitesquare.ini, где {joomla_root} – это папка, в которую установлена Joomla!

Форма поиска

Joomla! уже содержит собственный модуль формы поиска. Его можно найти разделе Extensions -> Module Manager панели администратора. Если в вашей CMS он не установлен, то установить его можно, нажав кнопку New и выбрав из списка пункт Search.
Для того, чтобы поместить этот модуль в шаблон – нужно создать собственную «позицию» для этого модуля. Позиции (positions) – это специально размеченные области шаблона, в которые вставляются модули. Позиции описываются в файле templateDetails.xml в блоке positions:

search
После этого вернитесь в Module Manager и откройте модуль Search на редактирование. И в полях укажите следующие значения:
Box Label: пробел
Box Text: Search
Search Button: Yes
Button position: Right
Search Button Image: No
Button text: GO
Show Title: Hide
Position: Whitesquare Search
А на вкладке Advanced в поле Module Class Suffix введите «-block». Это позволит разделить стили формы поиска от содержимого страницы поиска.
Теперь, когда модуль подготовлен, нужно вставить его в шаблон index.php:

...
Осталось добавить стили в template.css:

Показать код

Search-block { float: right; } .search-query { margin-right: -4px; }

Навигация

Меню на страницах сайта создается в три этапа: сначала нужно создать абстрактное меню и определить его пункты, затем определить для него позицию в шаблоне и последним этапом создать модуль, который свяжет абстрактное меню с конкретной позицией.
Управление списками меню осуществляется в разделе Menus -> Menu Manager панели администратора. По умолчанию там уже есть меню под названием Main Menu. Зайдите в него.
Для того, чтобы создать новый пункт меню – нажмите кнопку New и заполните открывшуюся форму – следующим образом:
Menu Title: название страницы, например About us
Menu Item Type: Single Article
Select Article: About us
Создайте аналогичным образом все пункты главного меню: Home, About us, Services, Partners, Customers, Projects, Careers, Contact.

… menu
Далее нужно создать модуль, который будет содержать меню. Модуль главного меню по умолчанию уже установлен в Joomla!, он называется Main Menu. Откройте его через меню Extensions -> Module Manager -> Main Menu. В поле Select Menu укажите Main Menu, а в поле Position: Whitesquare Menu. Поле этого нужно перейти на вкладку Advanced и в поле Module tag выбрать значение nav, а в поле Menu Class Suffix ввести «-top». Это позволит нам задавать CSS классы для этого меню более гибко и семантично.
Давайте теперь добавим нужную позицию в сам шаблон сразу после шапки:

...
На данном этапе меню уже появится на страницах, но без стилей. Стилизуем его:

Показать код

Main-navigation { border: 1px solid #e7e7e7; background: #f3f3f3; } .menu-top { margin: 0; padding: 0; } .menu-top li { display: inline-block; margin: 0; padding: 10px 30px; list-style-position: inside; text-transform: uppercase; font: 14px "Oswald", sans-serif; } .menu-top li.current { background: #29c5e6; } .menu-top a { color: #b2b2b2; text-decoration: none; } .menu-top li.current a { color: #fff; }

Заголовок страницы

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

• В настройках Article Manager задаются глобальные настройки для всех статей.
• В свойствах каждой статьи задаются настройки этой статьи и перебивают глобальные
• Если на странице добавлено меню, то настройки пункта меню, указывающего на данную страницу, будут перебивать все остальные настройки

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

• В панели администратора зайдите в Content -> Article manager, нажмите кнопку Options и на первой вкладке Articles для всех полей поставьте значения Hide и No.
• Далее, там же, в Article manager зайдите в каждую статью на вкладку Options и поставьте для всех полей значение Use Global.
• И последним шагом зайдите в Menus -> Menu Manager -> Main Menu и для каждой станицы на вкладке Options так же поставьте для всех полей значение Use Global.

После этих действий заголовок страницы пропадет со всех страниц сайта. Теперь нужно его вернуть назад на все страницы, кроме главной, вставив его вызов в index.php сразу после навигации:

Теперь нужно стилизовать получившийся блок. Сохраните фон заголовка в файл images /h1-bg.png и добавьте стилевые правила:

Показать код

Main-heading { margin: 30px 0; padding-left: 20px; background: transparent url(../images/h1-bg.png); } .main-heading h1 { display: inline-block; margin: 0; padding: 0 10px; background: url(../images/bg.png); color: #7e7e7e; text-transform: uppercase; font: 40px/40px "Oswald", sans-serif; }

Футер

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

Images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

После того, как все ресурсы подготовлены, давайте взглянем на блок Sitemap. Он состоит из двух колонок. Сейчас, когда нативная поддержка переноса текста по столбцам не очень хорошо поддерживается в популярных браузерах гораздо проще сделать меню, состоящее из двух столбцов. Для этого в разделе Menus -> Menu Manager создайте меню Sitemap left с пунктами Home, About, Services и Sitemap right с пунктами Partners, Support и Contact. Пункты меню должны ссылаться на соответствующие статьи. Для каждого из этих двух меню нужно создать позиции sitemap-left и sitemap-right и связать меню с позициями через новые модули Sitemap left и Sitemap right. При добавлении модулей на вкладке Advanced в поле Menu Class Suffix вставьте значение –sitemap, для того, чтобы в CSS стилях отличать этот тип меню от остальных.
Далее делаем вёрстку в блоке footer файла index.php:

23 oct

Nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug

">

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

TPL_WHITESQUARE_TWITTER_FEED_TITLE="Twitter feed" TPL_WHITESQUARE_SITEMAP_TITLE="Sitemap" TPL_WHITESQUARE_SOCIAL_TITLE="Social networks" TPL_WHITESQUARE_COPYRIGHT="Copyright 2012 Whitesquare. A pcklab creation"
Прописываем стили в template.css:

Показать код

Footer-content { margin: auto; padding: 10px 0; max-width: 960px; height: 90px; } .footer-heading { margin: 0 0 10px 0; border-bottom: 1px solid #919191; color: #fff; text-transform: uppercase; font: 14px "Oswald", sans-serif; } footer a { color: #dbdbdb; } footer p { margin: 5px 0; } .twitter-time { color: #b4aeae; } .twitter { float: left; width: 300px; } .twitter p { padding-right: 15px; } .sitemap { float: left; margin-left: 20px; padding-right: 15px; width: 150px; } .sitemap .column { display: inline-block; margin-left: 40px; } .sitemap .column.first { margin-left: 0; } .menu-sitemap { margin: 0; padding: 0; list-style-type: none; } .sitemap a { display: block; margin-bottom: 5px; text-decoration: none; font-size: 12px; } .sitemap a:hover { text-decoration: underline; } .social { float: left; margin-left: 20px; width: 130px; } .social-icon { display: inline-block; margin-right: 10px; width: 30px; height: 30px; background: url(../images/social.png) no-repeat; } .social-icon-small { display: inline-block; margin: 5px 6px 0 0; width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; } .twitter-icon { background-position: 0 0; } .facebook-icon { background-position: -30px 0; } .google-plus-icon { background-position: -60px 0; } .vimeo-icon { background-position: 0 0; } .youtube-icon { background-position: -16px 0; } .flickr-icon { background-position: -32px 0; } .instagram-icon { background-position: -48px 0; } .rss-icon { background-position: -64px 0; } .footer-logo { float: right; margin-top: 20px; text-align: right; font-size: 10px; }

В итоге внутренняя страница сайта должна выглядеть вот так:

Главная страница

Главная страница у нас уже создана. Наполнение ее контентом выходит за рамки создания шаблона Joomla!, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самого шаблона. Первым делом необходимо нарезать все изображения этой страницы и сохранить в папку images, которая находится в корне папки, где установлена Joomla!. Назовём эти изображения так:

Home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png
Далее, перейдите в панели администратора к форме редактирования главной страницы Content -> Article Manager -> Home и на вкладке Content нажмите Tools -> Source code и введите содержимое страницы:

Показать код

Fusce vitae nibn quis diam fermentum Etiam adipscing ultricies commodo.

Lorem ipsum dolop

Ultricies pellentesque

Aliquam ipsum

Nullam sed mauris ut

About whitesquare

Read more

A word from our ceo In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.

Yane Naumoski, CEO

Services

Read more

Our teams Lorem ipsum

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et

Lorem ipsum

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et

Lorem ipsum

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et

24/7/365 Support

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.

Read more

Our clients

Теперь осталось стилизовать данный код.

Показать код

Slider { margin-top: 30px; text-transform: uppercase; font-weight: 300; font-family: "Oswald", sans-serif; } .slider .content { padding: 30px 40px; height: 220px; background: #e2e2e2; } .slider .title { color: #5a5a5a; font-size: 42px; } .slider .subtitle { color: #acacac; font-size: 20px; } .slider .links { display: block; margin: 0; padding: 10px; border-bottom: 1px solid #e7e7e7; background: #f3f3f3; color: #8f8f8f; counter-reset: list 0; } .slider .links li { display: inline-block; margin-right: 55px; font-size: 18px; line-height: 23px; cursor: pointer; } .slider .links li.active { color: #29c5e6; } .slider .links li:before { display: inline-block; margin-right: 10px; width: 23px; background: #8f8f8f; color: #fff; content: counter(list) " "; counter-increment: list; text-align: center; font-size: 16px; cursor: pointer; } .slider .links li.active:before { background: #29c5e6; } .teaser { display: block; float: left; box-sizing: border-box; padding: 0 10px; vertical-align: top; } .teaser .heading { margin: 40px 0 20px; height: 16px; background: transparent url(../images/h1-bg.png); } .teaser .bullet { display: inline-block; margin-right: -4px; width: 16px; height: 16px; background: #29c5e6; vertical-align: top; } .teaser .heading-text { display: inline-block; margin: 0; padding: 0 10px; background: url(../images/bg.png); text-transform: uppercase; font: normal 14px/16px "Oswald", sans-serif; } .teaser .image { float: left; margin-right: 20px; } .teaser .small-block { margin-bottom: 10px; } .teaser .small-block .image { margin-right: 10px; } .teaser .more, .teaser .more a { margin-bottom: 0; color: #525252; } .teaser-small-heading { display: block; margin: 0; color: #525252; text-transform: uppercase; font-weight: normal; font-size: 11px; } .teaser-small-paragraph { margin: 4px 0; font-size: 11px; } .clients img { display: inline-block; margin-right: 30px; }

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

Давайте добавим его в index.php перед вызовом контента страницы:

">
Этот блок будет выводиться на всех страницах, кроме главной. Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов.
Для полноты картины в качестве подменю предлагаю показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали другие виды меню. Создайте статьи под названиями: Lorem ipsum, Donec tincidunt laoreet, Vestibulum elit, Etiam pharetra, Phasellus placerat. Затем создайте новое меню под названием Submenu и добавьте в него вышеперечисленные страницы. После этого, создайте позицию submenu в templateDetails.xml и модуль Submenu, использующий эту позицию и меню Submenu. В свойствах модуля на вкладке Advanced укажите Menu Class Suffix: «-aside»
Блок карты особых вопросов не вызывает, не забудьте только добавить новый ключ локализации:

TPL_WHITESQUARE_OFFICES_TITLE="Our offices"
В качестве заглушки для карты создайте пустой файл sample.png и сохраните его в папку images в корне сайта Joomla!
В заключение, нам нужно добавить стили для вёрстки:

Показать код

Aside-navigation { border: 1px solid #e7e7e7; background: #f3f3f3; } .menu-aside { margin: 0; padding: 0; text-transform: uppercase; } .menu-aside li { padding: 10px; border-top: 1px solid #e7e7e7; list-style: square inside; font: 14px "Oswald", sans-serif; font-weight: 300; } .menu-aside li:first-child { border: none; } .menu-aside li.current-menu-item, .menu-aside li.current-menu-item a { color: #29c5e6; } .menu-aside a { color: #8f8f8f; text-decoration: none; } .sidebar-heading { margin: 30px 0 0 0; padding: 10px; background: #29c5e6; color: #fff; text-transform: uppercase; font: 14px "Oswald", sans-serif; } .map { margin: 0 0 30px 0; padding: 10px; border: 1px solid #e7e7e7; background: #f3f3f3; }

Страница About us

Теперь давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в папку images сайта Joomla! Назовите изображения вот так:

About-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Показать код

“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”

John Doe, Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat.

Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor.

Our team John Doeceo Saundra Pittsleyteam leader Julio Simsersenior developer Margery Venutisenior developer Fernando Tondreadeveloper Ericka Nobrigaart director Cody Roussellesenior ui designer Erik Wollmansenior ui designer Dona Shoffux designer Darryl Bruntonui designer

И стили в template.css:

Показать код

Main-blockquote { margin: 0; padding: 10px 20px; background: #29c5e6; font-weight: 300; font-family: "Oswald", sans-serif; } .main-blockquote p { margin: 0; color: #fff; font-style: italic; font-size: 33px; } .main-blockquote cite { display: block; margin: 0; color: #1d8ea6; text-align: right; font-style: normal; font-size: 20px; } .content-heading { clear: both; margin: 30px 0 0 0; padding: 0 10px; background: #29c5e6; color: #fff; text-transform: uppercase; font: 30px "Oswald", sans-serif; font-weight: 300; } .footer-content { margin: auto; padding: 10px 0; max-width: 960px; height: 90px; } .footer-heading { margin: 0 0 10px 0; border-bottom: 1px solid #919191; color: #fff; text-transform: uppercase; font: 14px "Oswald", sans-serif; } footer a { color: #dbdbdb; } footer p { margin: 5px 0; } .team-row figure { display: inline-block; margin: 20px 0 0; font-weight: 300; font-family: "Oswald", sans-serif; } .team-row figure + figure { margin-left: 43px; } .team-row figcaption { margin-top: 5px; font-weight: 300; font-size: 16px; } .team-row .occupation { display: block; color: #29c5e6; font-size: 14px; }

Страница поиска

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

Показать код

Search { margin-left: 280px; padding-bottom: 50px; } .icon-search { display: inline-block; width: 21px; height: 21px; background: url(../images/search.png) center center no-repeat; } .search .btn-toolbar { height: 30px; }

Модуль поиска предусматривает, что в шаблоне должна быть иконка поиска для кнопки, но поскольку в дизайне ее нет, то придется добавить ее самим. Для этого найдите любую бесплатную иконку с изображением лупы и сохраните ее под названием search.png в папку images шаблона. Размер картинки должен быть 16х16 пикселей.Страница печати Помимо index.php в корне шаблона лежат еще 2 php файла. Первый из них – это сomponent.php. Этот файл отображает страницу печати, которую пользователь сможет открыть, кликнув на иконку печати в содержании каждой статьи. В самом начале мы отключили показ этих иконок в статьях через меню Content -> Article Manager -> Options -> Show Print Icon в панели администратора. Но, поскольку мы делаем универсальный шаблон, создать этот файл мы обязаны. Наполните его следующим содержимым:

Как вы видите, этот файл полностью повторяет структуру файла index.php. Отличие только в том, что мы убрали ненужные для печати блоки: шапку, футер и боковую колонку.

Страница ошибки

Последняя страница, которую осталось оформить – это страница вывода ошибки. Ее шаблон описывается в файле error.php. Код этого файла будет выглядеть следующим образом:

">
В целом структура здесь аналогична предыдущим страницам, но есть несколько нюансов. Во-первых, данный тип страницы не поддерживает конструкции вида «», поэтому пришлось отказаться от всех модулей и даже динамического блока head, поэтому теги в блоке head прописаны вручную. В заголовке страницы появился новый ключ локализации: TPL_WHITESQUARE_ERROR со значением «Error». Не забудьте прописать его в файлах локализации. И в области контента страницы выводится сообщения с кодом и текстом ошибки. Добавить метки

Главная страница сайта Joomla, открывается по основному адресу сайта, его домену . Можно сказать, что через главную страницу посетители заходят на сайт. Именно поэтому, главную страницу в среде оптимизаторов, называют «дорвей» (doorway-входная дверь), а в российской среде, «морда» или «хомяк» (home page).

Будучи «лицом сайта», главная страница сайта имеет повышенное значение в удержании посетителя на сайте и продуманного направления посетителя по сайту (навигации по сайту).

Как создается главная страница Joomla

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

На сайте должен быть создан хотя бы один материал;

• Создаем меню и пункт меню нужного типа (Вкладка «Менеджер меню»);
• При создании пункта меню, назначаем его «Главной страницей» или «Home» или как угодно;
• Всё! Главная страница сайта, в самом простом её исполнении, создана.

Как пересоздается главная страница

Общий принцип пересоздания главной страницы сайта таков:

Вариант 1

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

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

Вариант 2

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

Динамическая главная страница «Избранные материалы»

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

Очень часто, используя группу «Избранные материалы», создают главную страницу сайта Joomla в виде блога избранных материалов. То есть, получаем динамическую (постоянно обновляемую) главную страницу сайта. Для сравнения, на сайтах WordPress, это аналог страницы последних публикаций.

class="eliadunit">

Статическая главная страница сайта Joomla

Если вы используете CMS Joomla, не для информационного, а коммерческого сайта (интернет магазин, корпоративный сайт), то вполне разумно сделать главную страницу в виде своеобразной витрины: расширенной информации о товарах магазина или услугах фирмы.

Создается такая страница по аналогичному алгоритму:

• Сначала нужно создать страницу с материалом в текстовом редакторе. Материал нужно красочно и главное, информативно, оформить;
• Потом создается пункт меню по типу «Отдельный материал». При выборе материала для этого пункта меню выбирается созданная страница;
• Этот пункт меню назначается главной страницей.

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

Модули на главной странице

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

Используя именно этот инструмент, можно создать главную страницу самого различного вида:

• В виде отдельных модулей с минимальным содержанием;
• В виде большого материала о сайте с навигацией без боковых колонок;
• В виде страницы регистрации;
• В виде страницы контактов и т.д.

Именно так создаются лейдинг пейдж на CMS Joomla.

Как обновлять статическую главную страницу

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

• Модуль «Последние записи»;
• Модуль «RSS ленты», включая RSS ленты своих постоянно обновляемых новостей или RSS ленту блога «Избранных материалов».

Лендинг пейдж

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

Дополнение

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

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

В итоге посетитель приходит с поисковой системы и видит не понятную страницу. Например вот так 404 страница выглядит по умолчанию в Joomla:

Это не хорошо, просто потеряете поситетеля, а то и покупателя. Значит нам надо просто причесать эту 404 страницу в Joomla.

Для начала, создайте статичную (без категории раздела) статью, например с названием 404 . Наполните ее контентом, яркий пример посадочная 404 страница .

Потом создайте новое меню, и назовите невидимка. Модуль создавать не надо.

Откройте файл \templates\system\error.php . После строки

Defined("_JEXEC") or die("Restricted access");

вставьте следующий код

If ($this->error->code == "404") { // Сообщаем роботу, что этой страницы не существует header("HTTP/1.0 404 Not Found"); // Переводим пользователя на посадочную страницу. Очень важный шаг header ("Location: /404"); exit; }

Сохраните файл и скопируйте обратно в папку \templates\system\ перезаписав оригинальный файл.

Для улучшения SEO необходимо скрыть 404 страницу для поисковиков. Откройте robots.txt в корне и добавьте в конец строку:

Disallow: /404

В.htaccess в корне сайта прописываем следующую директиву:

ErrorDocument 404 /404

Вот таким образом вы сможете спасти обновленый сайт с помощью страницы 404 на Joomla.