Делаем главную страницу Joomla шаблона уникальной

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

Главная страница Joomla шаблона

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

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

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

PHP код:
  1. <?php
  2. $menu = &amp; JSite::getMenu();
  3. if ($menu->getActive() == $menu->getDefault()) {?>
  4.     1. Показать на главной странице
  5. <?php } else { ?>
  6.     2. Показать на всех остальных
  7. <?php } ?>

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

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

Apache configuration код:
  1. RewriteEngine On
  2. RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
  3. RewriteRule ^index\.php$ https://домен_сайта.ru/ [R=301,L]

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

img 02

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

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

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

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

CSS код:
  1. body {
  2.     background: #f1f1f1;
  3.     margin: 0;
  4. }
  5. .image-back {
  6.     margin: 0 auto;    
  7. }
  8. .image-back img{
  9.     width: 100%;
  10.     height: 100%;    
  11. }
  12. .home-text-block {
  13.     position: absolute;
  14.     z-index: -1;
  15.     height: 100%;
  16.     width: 100%;
  17.     background: #000;
  18.     opacity: 0.6;
  19. }
  20. .home-text{
  21.     position: absolute;
  22.     bottom: 65%;
  23.     left: 15%;
  24.     color: #fff;
  25.     font-family: arial;
  26.     z-index: 3;
  27. }
  28. .home-text-title {
  29.     padding: 0 10px;
  30.     color: #fff;
  31.     }
  32.     .home-text-title a {
  33.         text-decoration: none;
  34.         color: #ffc641;
  35.     }
  36. .home-text-block2 {
  37.     position: absolute;
  38.     z-index: -1;
  39.     height: 100%;
  40.     width: 100%;
  41.     background: #000;
  42.     opacity: 0.6;
  43. }
  44. .home-text2 {
  45.     position: absolute;
  46.     width: 50%;
  47.     bottom: 35%;
  48.     left: 30%;
  49.     color: #fff;
  50.     font-family: arial;
  51.     z-index: 3;
  52. }
  53. .home-text-title2 {
  54.     padding: 0 10px;
  55.     color: #fff;
  56.     }
  57. .home-text-desc2 {
  58.     padding: 0 30px;
  59. }

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

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

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

img 03

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

XML код:
  1. <fieldset name="Home-Config" label="Home Config">
  2.     <field name="home-bg-img" class="" type="media" default=""
  3.         label="Фоновое изображение"
  4.         description="Установите фоновое изображение для главной страницы." />
  5.     <field name="home-title" type="text" default=""
  6.         label="Название сайта"
  7.         description="Написать название сайта."
  8.         filter="string" />
  9.     <field name="home-desc" type="textarea" default=""
  10.         label="Добавить описание"
  11.         description="Описание будет показано под заголовком."
  12.         filter="string" />
  13.     <field name="home-menu-1" type="text" default=""
  14.         label="MENU 1"
  15.         description="Напишите название первого пункта меню."
  16.         filter="string" />                
  17.     <field name="home-link-1" type="url" default=""
  18.         label="Вставить ссылку 1"
  19.         description="Вставте ссылку на разде вашего сайта для первого пункта меню."
  20.         filter="string" />
  21.     <field name="home-menu-2" type="text" default=""
  22.         label="MENU 2"
  23.         description="Напишите название второго пункта меню."
  24.         filter="string" />                
  25.     <field name="home-link-2" type="url" default=""
  26.         label="Вставить ссылку 2"
  27.         description="Вставте ссылку на разде вашего сайта для второго пункта меню."
  28.         filter="string" />
  29.     <field name="home-menu-3" type="text" default=""
  30.         label="MENU 3"
  31.         description="Напишите название третьего пункта меню."
  32.         filter="string" />                
  33.     <field name="home-link-3" type="url" default=""
  34.         label="Вставить ссылку 3"
  35.         description="Вставте ссылку на разде вашего сайта для третьего пункта меню."
  36.         filter="string" />
  37.     <field name="home-menu-4" type="text" default=""
  38.         label="MENU 4"
  39.         description="Напишите название четвёртого пункта меню."
  40.         filter="string" />                
  41.     <field name="home-link-4" type="url" default=""
  42.         label="Вставить ссылку 4"
  43.         description="Вставте ссылку на разде вашего сайта для четвёртого пункта меню."
  44.         filter="string" />                    
  45. </fieldset>

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

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

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

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

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

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

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

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

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

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

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

PHP код:
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

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

PHP код:
  1. <jdoc:include type="head" />

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

PHP код:
  1. <?php
  2.     90 строчек
  3. ?>
  4. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  6.  
  7.     <!-- начинаем проверку -->
  8.     <?php
  9.     $menu = &amp; JSite::getMenu();
  10.     if ($menu->getActive() == $menu->getDefault()) {?>
  11.  
  12.             <!-- если эта главная страница, то паказываем это -->
  13.             <jdoc:include type="head" /><!-- стандартная шапка от protostar -->
  14.             <body>
  15.                 наша главная страница
  16.             </body>
  17.  
  18.     <?php } else { ?> <!-- если эта не главная, то показать обычный макет ниже -->
  19.  
  20.             <head>
  21.                 <jdoc:include type="head" />
  22.                 стандартная шапка от protostar
  23.             </head>
  24.  
  25.             <body>
  26.                 стандартный контент от protostar
  27.             </body>
  28.  
  29.     <?php } ?><!-- проверка заканчивается -->
  30.  
  31. </html>

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

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

PHP код:
  1. <?php
  2. $menu = &amp; JSite::getMenu();
  3. if ($menu->getActive() == $menu->getDefault()) {?>
  4. <jdoc:include type="head" />
  5. <link rel="stylesheet" href="<?php echo JURI::base (true); ?>/templates/protostar/css/homestyle.css">
  6.  
  7. <?php
  8. if ($this->params->get('home-menu-1')){
  9.     $HomeMenu1 = '' . $this->params->get('home-menu-1') . '';}
  10. if ($this->params->get('home-menu-2')){
  11.     $HomeMenu2 = '' . $this->params->get('home-menu-2') . '';}
  12. if ($this->params->get('home-menu-3')){
  13.     $HomeMenu3 = '' . $this->params->get('home-menu-3') . '';}
  14. if ($this->params->get('home-menu-4')){
  15.     $HomeMenu4 = '' . $this->params->get('home-menu-4') . '';}
  16. if ($this->params->get('home-bg-img')){
  17.     $HomeBgImg = '<img src="' . JUri::root() . $this->params->get('home-bg-img') . '" />';}
  18. ?>
  19. <body>
  20. <div>
  21. <div></div>
  22.     <h2>MENU / 
  23.         <?php if ($this->params->get('home-link-1')){
  24.                 echo '<a href="' . $this->params->get('home-link-1') . '">' . $HomeMenu1 . '</a>';}
  25.             else {
  26.                 echo $HomeMenu1;} ?>
  27.         <?php if ($this->params->get('home-link-2')){
  28.                 echo '/ <a href="' . $this->params->get('home-link-2') . '">' . $HomeMenu2 . '</a>';}
  29.             else {
  30.                 echo $HomeMenu2;} ?>
  31.         <?php if ($this->params->get('home-link-3')){
  32.                 echo '/ <a href="' . $this->params->get('home-link-3') . '">' . $HomeMenu3 . '</a>';}
  33.             else {
  34.                 echo $HomeMenu3;} ?>
  35.         <?php if ($this->params->get('home-link-4')){
  36.                 echo '/ <a href="' . $this->params->get('home-link-4') . '">' . $HomeMenu4 . '</a>';}
  37.             else {
  38.                 echo $HomeMenu4;} ?>
  39.     </h2>
  40. </div>    
  41.  
  42. <div>
  43. <div></div>
  44.     <h2><?php echo $this->params->get('home-title'); ?></h2>
  45.     <p><?php echo $this->params->get('home-desc'); ?></p>
  46. </div>    
  47.  
  48. <div>
  49.     <?php echo $HomeBgImg ?>
  50. </div>
  51. </body>
  52.  
  53. <?php } else { ?>

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

img 04

img 05

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

PHP код:
  1. <?php } ?>

img 06

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

Заключение

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

 
4.5958904109589 1 1 1 1 1 (Оценок: 292)
4.5958904109589 292
Опубликовано: 22-06-2016

Соседние материалы

<Назад Вперёд>

Комментарии  

Курелов
+3 #1 Курелов 30.08.2016 05:12
большое спасибо, вы мне очень помогли. Еще неделю разбирался бы.

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