index.php для Joomla 3

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

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

Уникальная главная страница

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

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

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

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

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

Общая настройка Joomla

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

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

Т.к. при открытии главной, страница будет формироваться заново, то необходимо написать для неё собственные стили. Делаем чтобы при открытии загружался отдельный файл со стилями. Создайте файла home.css, вставьте туда представленный ниже и загрузите на сервер в папку CSS нашего шаблона (по умолчанию путь …/templates/protostar/css).

body {background:#f1f1f1;margin:0}
h1{bottom:55%;color:#e9e9e9;letter-spacing:4px;position:absolute;text-align:center;text-transform:uppercase;width:100%;}
.image-back {margin:0 auto}
.image-back img{width:100%;height:100%}
.home-text-block {position:absolute;height:100%;width:100%}
.home-text{padding:15px;position:fixed;bottom:65%;width:100%;text-align:center;font-family:arial;z-index:3}
.home-text-title {padding:0 10px;color:#fff}
.home-text-title a {text-decoration:none;color:#ffc641}
.home-text-title a:hover {text-decoration:none;color:#85c2ff}
.home-text-block2 {position:absolute;height:100%;width:100%}
.home-text2 {padding:15px;position:absolute;text-align:center;bottom:35%;font-family:arial;color:#e9e9e9;z-index:3}
.home-text-title2 {padding:0 10px;color:#fff}
.home-text-desc2 {padding:0 30px}
.home-overlay{background-color:rgba(44,62,80,0.3);background-image:url("../images/pattern.png");background-repeat:repeat;height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}
.home-phone{font-size:32px;line-height:55px;margin-bottom:15px}

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

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

<fieldset name="Home-Config" label="Конфигурация главной страницы">
        <field name="home-bg-img" class="" type="media" default=""
            label="Фоновое изображение"
            description="Установите фоновое изображение для главной страницы." />
        <field name="home-title" type="text" default=""
            label="Название сайта"
            description="Написать название сайта."
            filter="string" />
        <field name="home-desc" type="textarea" default=""
            label="Добавить описание"
            description="Описание будет показано под заголовком."
            filter="string" />
        <field name="home-menu-1" type="text" default=""
            label="MENU 1"
            description="Напишите название первого пункта меню."
            filter="string" />                
        <field name="home-link-1" type="url" default=""
            label="Вставить ссылку 1"
            description="Вставте ссылку на разде вашего сайта для первого пункта меню."
            filter="string" />
        <field name="home-menu-2" type="text" default=""
            label="MENU 2"
            description="Напишите название второго пункта меню."
            filter="string" />                
        <field name="home-link-2" type="url" default=""
            label="Вставить ссылку 2"
            description="Вставте ссылку на разде вашего сайта для второго пункта меню."
            filter="string" />
        <field name="home-menu-3" type="text" default=""
            label="MENU 3"
            description="Напишите название третьего пункта меню."
            filter="string" />                
        <field name="home-link-3" type="url" default=""
            label="Вставить ссылку 3"
            description="Вставте ссылку на разде вашего сайта для третьего пункта меню."
            filter="string" />
        <field name="home-menu-4" type="text" default=""
            label="MENU 4"
            description="Напишите название четвёртого пункта меню."
            filter="string" />                
        <field name="home-link-4" type="url" default=""
            label="Вставить ссылку 4"
            description="Вставте ссылку на разде вашего сайта для четвёртого пункта меню."
            filter="string" />  
        <field name="home-menu-5" type="text" default=""
            label="MENU 5"
            description="Напишите название пятого пункта меню."
            filter="string" />                
        <field name="home-link-5" type="url" default=""
            label="Вставить ссылку 5"
            description="Вставте ссылку на разде вашего сайта для пятого пункта меню."
            filter="string" />                    
        <field name="home-menu-6" type="text" default=""
            label="MENU 6"
            description="Напишите название шестого пункта меню."
            filter="string" />                
        <field name="home-link-6" type="url" default=""
            label="Вставить ссылку 6"
            description="Вставте ссылку на разде вашего сайта для шестого пункта меню."
            filter="string" />                    
        <field name="home-menu-7" type="text" default=""
            label="MENU 7"
            description="Напишите название седьмого пункта меню."
            filter="string" />                
        <field name="home-link-7" type="url" default=""
            label="Вставить ссылку 7"
            description="Вставте ссылку на разде вашего сайта для седьмого пункта меню."
            filter="string" />                    
        <field name="home-menu-8" type="text" default=""
            label="MENU 8"
            description="Напишите название восьмого пункта меню."
            filter="string" />                
        <field name="home-link-8" type="url" default=""
            label="Вставить ссылку 8"
            description="Вставте ссылку на разде вашего сайта для восьмого пункта меню."
            filter="string" />                    
    </fieldset>

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

Настройка шаблона для главной страницы

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

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

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

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

Кол для определения страницы

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

<jdoc:include type="head" /> 

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

Screenshot 2

Обратите внимание, теги <html></html> оборачивают всё наше условие.

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

<?php
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {?>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="/<?php echo JURI::base (true); ?>/templates/protostar/css/homestyle.css">
<?php
if ($this->params->get('home-menu-1')){
    $HomeMenu1 = '' . $this->params->get('home-menu-1') . '';}
if ($this->params->get('home-menu-2')){
    $HomeMenu2 = '' . $this->params->get('home-menu-2') . '';}
if ($this->params->get('home-menu-3')){
    $HomeMenu3 = '' . $this->params->get('home-menu-3') . '';}
if ($this->params->get('home-menu-4')){
    $HomeMenu4 = '' . $this->params->get('home-menu-4') . '';}
if ($this->params->get('home-menu-5')){
    $HomeMenu5 = '' . $this->params->get('home-menu-5') . '';}
if ($this->params->get('home-menu-6')){
    $HomeMenu6 = '' . $this->params->get('home-menu-6') . '';}
if ($this->params->get('home-menu-7')){
    $HomeMenu7 = '' . $this->params->get('home-menu-7') . '';}
if ($this->params->get('home-menu-8')){
    $HomeMenu8 = '' . $this->params->get('home-menu-8') . '';}
if ($this->params->get('home-bg-img')){
    $HomeBgImg = '<img src="' . JUri::root() . $this->params->get('home-bg-img') . '" />';}
?>
<body>
<div class="home-overlay"></div>
<div class="home-text-block">
<div class="home-text">
    <div class="home-text-title"><?php if ($this->params->get('home-link-1')){
                echo '<a href="' . $this->params->get('home-link-1') . '">' . $HomeMenu1 . '</a>';}
            else {
                echo $HomeMenu1;} ?>
        <?php if ($this->params->get('home-link-2')){
                echo '/ <a href="' . $this->params->get('home-link-2') . '">' . $HomeMenu2 . '</a>';}
            else {
                echo $HomeMenu2;} ?>
        <?php if ($this->params->get('home-link-3')){
                echo '/ <a href="' . $this->params->get('home-link-3') . '">' . $HomeMenu3 . '</a>';}
            else {
                echo $HomeMenu3;} ?>
        <?php if ($this->params->get('home-link-4')){
                echo '/ <a href="' . $this->params->get('home-link-4') . '">' . $HomeMenu4 . '</a>';}
            else {
                echo $HomeMenu4;} ?>
        <?php if ($this->params->get('home-link-5')){
                echo '/ <a href="' . $this->params->get('home-link-5') . '">' . $HomeMenu5 . '</a>';}
            else {
                echo $HomeMenu5;} ?>
        <?php if ($this->params->get('home-link-6')){
                echo '/ <a href="' . $this->params->get('home-link-6') . '">' . $HomeMenu6 . '</a>';}
            else {
                echo $HomeMenu6;} ?>
        <?php if ($this->params->get('home-link-7')){
                echo '/ <a href="' . $this->params->get('home-link-7') . '">' . $HomeMenu7 . '</a>';}
            else {
                echo $HomeMenu7;} ?>
        <?php if ($this->params->get('home-link-8')){
                echo '/ <a href="' . $this->params->get('home-link-8') . '">' . $HomeMenu8 . '</a>';}
            else {
                echo $HomeMenu8;} ?>
    </div>
</div>    
</div>
<h1><?php echo $this->params->get('home-title'); ?></h1>
<div class="home-text-block2">
    <div class="home-text2">
        <p class="home-phone">+7 (926) 763-86-31</p>
        <p><?php echo $this->params->get('home-desc'); ?></p>
    </div>    
</div>
<div class="image-back">
    <?php echo $HomeBgImg ?>
</div>
</body>
<?php } else { ?>

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

Screenshot 3

Screenshot 4

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

 <?php } ?>

Screenshot 5

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


Поделись с друзьями

Поделиться
Плюсануть
Поделиться

Не пропускайте новые материалы, получайте анонсы прямо на e-mail!

Добавить комментарий

Защитный код
Обновить