74 подписчика

Адаптация html-шаблона под MyEngine. Часть 5.

19 марта 202019 мар 2020

2 мин

Здравствуйте, уважаемые читатели канала Сам Себе Веб-Мастер.

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

Вид вложенной страницы. Исходный шаблон ZeroFour.

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

Блок основного контента на главной странице.

Третья – это вывод заголовка страницы, который, как мы решили, должен быть заголовком первого уровня h1. Дело в том, что сейчас у нас на страницах нет заголовка h1, а все заголовки страниц выводятся как заголовок второго уровня h2. Простая замена h2 на h1 не прокатит, т.к. на главной странице логично сделать заголовком первого уровня название сайта, но этот заголовок должен быть скрыт от пользователей, но доступен для поисковых ботов. Но, давайте решать эти задачи по очереди.

У нас на главной странице есть баннер, который имеет вот такой код.

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

<?php if($Page->isIndexPage()):?>

// Вывод какого-то контента

<?php endif;?>

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

Так же, на главной странице есть такой блок

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

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

Основная часть кода блока основного контента.

Непосредственно код основного контента выглядит так

Здесь уже прописан выбор типа заголовка, на главной странице будет выводиться заголовок второго уровня h2, а на всех остальных страницах заголовок первого уровня h1.

Код бокового блока выглядит так

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

Стили css для блока авторизации выглядят так

Теперь несколько слов о заголовке первого уровня для главной страницы, он выглядит так

<h1 class="home"><?php $Page->get_header();?></h1>

Внутри тегов h1 выводится заголовок сайта, а самому тегу присвоен класс home. Заголовок скрыт от пользователей и доступен для поисковых ботов. Стили для заголовка выглядит так