No Image

Шаблон главной страницы joomla

СОДЕРЖАНИЕ
0 просмотров
22 января 2020

Вступление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посадочная страница расширением 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. Поищите тут и тут;
  • Создайте материал, который будет на главной (не публикуйте, только сохраните);
  • Создайте модули, которые будут на этой главной (не публикуйте, только сохраните);
  • Создайте пункт меню с этим материалом. При создании этого пункта меню, важно, кроме всех настроек описанных выше, на вкладке «Пункт меню» в настройке «Стиль шаблона» выберите одностраничный шаблон, установленный ранее.

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

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

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

Вывод

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

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

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

1. Изменяем URL ваших страниц и других разделов.

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

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

Идём в корень сайта, там, где лежит файл htaccess.txt. Откройте через NotePad++ и внизу впишите это:

Напишите в третьей строчки свой домен и сохраните этот файл как .htaccess без расширения. Это можно сделать так: Сохранить как — Тип файла «All Types» — Название .htaccess — сохранить. Верните назад этот файл на сервер, откуда взяли его. Теперь, открываем в административной панели общие настройки и ставим так:

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

Представим что у нас сайт с четырьмя категориями: КАТАЛОГ, РАЗДЕЛЫ, ГАЛЕРЕЯ, КОНТАКТЫ. Именно на них мы будем ссылаться с главной страницы, там будет создано отдельное меню.

2. Установка стилей

Так как при открытии главной, страница будет формироваться заново, то разумно написать для неё собственные стили. А лучше сделать так, чтобы при открытии загружался отдельный файл со стилями. Создайте файла homestyle.css при помощи всё того же редактора NotePad++ и вставьте туда этот код:

Читайте также:  Типы ресурсных записей dns

Полученный файл бросаем в папку CSS нашего шаблона (по умолчанию путь …/templates/protostar/css).

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

Всё верно, наши настройки будут находиться в менеджере:

Ищем файл templateDetails.xml (лежит там же где и index.php). Открываем и вписываем это между тегами :

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

Фоновое изображение — даёт возможность выбрать фоновое изображение для главной страницы. Картинка выравнивается по ширине и является адаптивной. Это значит, что на квадратных и широких экранах она будет стоять без изменения. Лучше поставить сюда квадратную картинку (скажем 1600х1600px), нижняя часть будет скрыта с экрана, если у посетителя широкоформатный монитор. Но если вы опытный разработчик, то меняйте таблицу стилей по своему усмотрению (файл homestyle.css).

Название сайта — отображает название сайта, но вы можете написать сюда любой текст. Просто написанное здесь, будет большего размера, так как имеет тег

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

MENU 1-4 — поля для добавления пунктов меню. То как вы напишите здесь текст, так и отобразиться на главной странице.

Вставить ссылку 1-4 — добавляет ссылки к пунктам меню. Если не заполнить, то названия меню останутся, но не будут считаться ссылками.

Можете заполнить поля, только вставляйте свои ссылки на пункты меню сайта (КАТАЛОГ, РАЗДЕЛЫ, ГАЛЕРЕЯ, КОНТАКТЫ). Вообще стоит уточнить, это же не расширение и всё написано вручную, а это значит, количество пунктов в меню зависит только от вас. Если хотите всего два, то и заполняйте два. Но если захотите шесть, то придётся дописывать код в файлах templateDetails.xml и index.php.

4. Изменение php нашего шаблон

Здесь начинается самое сложное, потому как приходиться думать. Прежде чем делать, прочитайте. Мы вынуждены сохранить весь php код в файле index.php для того чтобы сайт работал полноценно. Но при этом необходимо вставить проверку (главная страница или нет), а так же написать условия для вывода настроек из менеджера. Ситуация складывается такая, что если вы сейчас не правильно сделаете, то и получиться коряво. А требуется изрядно изменить внешний вид кода этого файла, то есть не чего удалять не надо.

Если откроете файл index.php от шаблона protostar , то увидите первые 90 строчек. Эти первые строчки php кода отвечают за разные условия, подключения стилей и скриптов, выдача переменных, формирования шапки ( ) и т.д. Некоторые условия используются в нижней части. Это трогать нельзя.

Дальше идут такие строчки:

Это тоже оставляем, но только для того, чтобы браузер правильно определил нашу страницу. Дальше открываются теги . По факту всё, что внутри нам не требуется, за одним исключением:

Этот небольшой код, подключает все скрипты и стили из верхней части файла (помните про 90 строчек). Его-то нам повторно и придётся использовать. Так вот, там где начинается head и заканчивается на body внизу, это мы перенесём в нижнюю часть нашего условия. Чтобы вы немного сориентировались в пространстве, наш конечный файл должен будет иметь следующий вид:

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

Вставляем этот код:

Делаем это сразу после html как показано на картинке, но перед head:

Ниже должно остаться всё, что начинается от head и заканчивается body. Однако после body добавляем это:

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

Заключение

Макет вступительной страницы довольно простой, но смотрится хорошо. Конечно, те, кто опытней, смогут сделать и лучше. Но наша задача была рассмотреть создание уникальной страницы для шаблона. И что же у нас получилось? Адаптивное фоновое изображение, две области под меню и описание, которые выравниваются по процентному соотношению — всё это позволяет открывать сайт на любом экране. А так же полностью настраиваемая страница в менеджере шаблонов.

Читайте также:  Фото океана с космоса

Дата публикации: 2016-03-03

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

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

Теперь рассмотрим ответ на следующий вопрос для CMS Joomla — как сделать главную страницу? Главная страница – это в первую очередь абсолютно обычная страница, как, к примеру, страница контактной информации или отображения конкретного материала. А значит в качестве главной, может быть назначена любая созданная страница Вашего сайта.

Теперь давайте вспомним, как формируются страницы в CMS Joomla. В основном для создания отдельной страницы сайта необходимо создать новый пункт меню, который по сути представляет собой ссылку, ведущей на страницу. При этом за формирование страницы и отображения на ней необходимых данных, отвечает определенный компонент, который выбирается при создании пункта меню. Соответственно создавая или редактируя пункт меню в “Менеджере меню” мы можем назначить страницу, на которую он ссылается в качестве главной, используя специальный переключатель.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

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

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

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

Таким образом мы с Вами кратко рассмотрели возможности админки Joomla в плане изменения вида главной страницы, но более глубокое редактирование, на уровне программного кода, требует хороших знаний движка, поэтому если данная тема Вам интересна, изучите курс Joomla-Профессионал: создание расширений для joomla. В нем достаточно подробно рассмотрена структура и принцип работы расширений CMS Joomla.

Вот собственно и все что я хотел сказать Вам в данной статье, а значит и вопрос для CMS Joomla как изменить главную страницу — исчерпан. Всего Вам доброго и удачного кодирования.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Комментировать
0 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
Adblock detector