Если вы хотите завести собственный блог, который станет для вашего бизнеса этаким корпоративным СМИ - то есть печатной историей мероприятий и достижений фирмы, тогда есть множество вариантов выбора, на какой платформе делать сайт блога.

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

Сегодня на разных торговых площадках в интернете существует множество готовых тем сайтов для WordPress - как платных, так и бесплатных. Однако порядочная доля предлагаемых шаблонов, особенно в сегменте бесплатных и малобюджетных (ценой до 100$) имеет всё же однообразный дизайн, являются слегка изменёнными клонами шаблонов прошлых лет.

Начинающий блогер спрашивает: А если хочется не быть как все? Что если блогеру хочется сделать свою, фирменную тему? То есть шаблон сайта без лишних прибамбасов, с малым числом строчек кода, современным дизайном, SEO оптимизаций, семантической вёрсткой и прочими атрибутами современности.

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

Ведь начинающий блогер в общем случае является простым пользователем интернета, а из навыков имеет лишь опыт работы с HTML на уровне контент-менеджера. Но для качественного создания собственной темы WordPress от блогера требуются следующие навыки, как минимум:

• нужен опыт работы с CSS, HTML и Javascript на уровне верстальщика
  • общее понимание стилей
    • синтаксис
    • селекторы
    • классы
    • правила
    • медиа-запросы
    • основы оптимизации
  • понимание применённого css-фреймворка
    • пространство имён его классов
  • знание разметочных тегов
    • синтаксис
    • атрибуты
    • основы оптимизации
  • знание браузерного javascript
    • синтаксис языка
    • управление узлами DOM
    • основы оптимизации
  • умение резать вёрстку на файлы-модули
• необходимо знание PHP на уровне программиста
  • синтаксис языка
  • понимание как Wordpress работает внутри
    • имена переменных
    • методы - шаблонизационные теги
    • хуки - ловушки событий
  • синтаксис WordPress тегов
• знание файловой структуры темы
  • иерархия файлов
    • понимание модульных вставок
  • точки входа генератора страницы
    • понимание маршрута
  • порядок сборочных событий
• соблюдение кодекса WordPress из-за грузного синтаксиса

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

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

Хочу познакомить вас с одной такой методикой 2017 года, удачно апробированной вебмастерами уже год на бесплатной платформе Impera CMS. Лучше всего подойдёт живой пример, и для такой цели я выполню прежде всего следующие шаги:

• скачаю с официальной страницы платформы вот этот архив со скриптом установки их CMS
• распакую архив скрипта к себе на компьютер
• скопирую получившиеся 2 файла на свой локальный сайт, например в папку http://localhost/test
• и выполню установку - то есть открою в браузере страницу http://localhost/test/install.php

Затем за полчаса в ручном режиме соберу на ваших глазах простую блоговую тему всего из нескольких таких же простых строчек кода. Каждый свой шаг опишу в этой ветке форума, а вы сможете повторить такой же шаблон у себя. Уверен, вы не только запросто повторите мой пример, но и переделаете шаблон даже лучше, чем я :)

Разработчик ответил: Одним из удивительных атрибутов Impera CMS и её бесплатного шаблонизационного расширения ShortCodes Helper является то, что эта пара компонентов позволяет создавать пользовательские темы, которые могут включать в себя множество бизнес-логики, функций и настроек, но исходный код темы при этом остаётся лёгким и понятным блогеру, а конечный результат выглядит удовлетворительным.

Создание файловой структуры шаблона

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

• шапка с логотипом и менюшкой
• центральная часть
• боковая панель с рубриками
• подвал с копирайтом

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

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

• главная со слайдером
• блог с листалкой страниц
• отдельный пост
• статическая
• страница "ошибка 404"

Поэтому я создал папку темы - назвал её EasyBlog, - и в ней создал следующую структуру пустых макетных файлов, как изображено справа. Так как значение этих файлов скорее всего непонятно вам с первого раза, сразу же поясню, зачем они нужны. Начну со стилевых файлов:

• styles.css - здесь определены стилевые правила вашей темы, то есть этот файл описывает на языке CSS внешний вид элементов страницы.

Теперь необязательные файлы для браузерного javascript:

• scripts.js - я так и оставил этот файл пустым, но можете написать здесь скрипты, которые станут исполняться в браузере, когда страница загрузится.

Далее всякие необязательные файлы, например расширений платформы:

• helper.php - представляет собой шаблонизационное расширение ShortCodes Helper, которое я скачал по ссылке выше и установил (просто скопировал) в мою тему.
  
  » Смысл этого хелпера в том, что он даёт платформе сотни полезных коротких шаблонизационных тегов. Фактически это пакет лучших тегов, которыми вебстудии часто пользуются в своей работе. В результате синтаксис макетов вашей темы становится таким же невероятно простым, как у тех студий.

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

• index.tpl - это общий макет страницы без центра, то есть вёрстка той неизменной части вокруг воображаемого центра, что выводится на любом типе страниц.
  
  
  • catalog.htm - это макет центра страницы типа "главная".
    
    
  • news.htm - это макет центра страницы типа "блог".
    
    
    • navigation.htm - это модуль - маленький макет листалки страниц, которая появляется под списком блога.
      
      
  • news_item.htm - это макет центра страницы типа "отдельный пост".
    
    
  • static_page.htm - это макет центра страницы типа "статическая".
    
    
  • missing_template.htm - это макет центра страницы типа "ощибка 404", которая показывается в момент, когда пользователь зашёл на несуществующий URL сайта.
    
    » На всякий случай сообщу, что если вместо стандартного вызова сделать ajax-вызов страницы, то генерация любого типа страницы прекратится именно на этом уровне иерархии (для понятности я обозначил имена макетов этого уровня таким цветом), то есть не дойдёт до макета index.tpl. Подобное поведение генератора удобное для осуществления бесконечного скроллинга страницы с помощью того же самого макетного файла.

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

• check404.htm - так как вдобавок к теме сайта ещё и платформа имеет модульную систему и следовательно тонкости в адресном пространстве, а шаблонизационное расширение ShortCodes поддерживает ещё и работу абстрактных страниц вне адресного пространства платформы, то этот модуль служит цели отловить случаи "ошибка 404", неучтённые стандартным контролем ошибок.
  
  
• head.htm - здесь собраны все заголовки страницы, и на самом деле этот блок был вырезан из верха основного макета index.tpl.
  
  
• header.htm - здесь содержится вёрстка шапки страницы. Этот блок был вырезан из верхней части основного макета index.tpl.
  
  
• sidebar.htm - здесь содержится вёрстка боковой панели темы. Этот блок был вырезан из середины основного макета index.tpl.
  
  
• footer.htm - здесь содержится вёрстка подвала страницы. Этот блок был вырезан из низа основного макета index.tpl.
  
  
• slider.htm - здесь содержится вёрстка слайдера, который на главной странице. Этот блок был вырезан из верха основного макета catalog.htm.
  
  
• news-item.htm - здесь содержится вёрстка так называемой мини карточки поста, ряд которых выводится в списке блога. Этот блок был вырезан из середины основного макета catalog.htm, где выводились мини карточки новых постов блога. Точно такие же карточки используются в листинге блоговых постов основного макета news.htm. Так что вынесение карточки в отдельный модуль имело смысл, чтобы не усложнять макеты шаблона повторяющимися фрагментами вёрстки.
  
  
• demo-remark.htm - это всего лишь поясняющее сообщение на главной для демонстрационного сайта. Можете запросто удалить этот модуль на своём блоге.

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

• account.htm - личный кабинет
• article.htm - страница статьи
• articles.htm - список статей
• cart.htm - корзина
• compare.tpl - сравнение товаров
• countries.htm - список стран
• defer.htm - отложенные товары
• feedback.htm - обратная связь
• informer.tpl - информер для внешних сайтов
• login.htm - авторизация
• order.htm - страница оформленного заказа
• order_success.tpl - страница сообщения об успешном оформлении заказа
• password_remind.htm - восстановление пароля
• price.htm - прайс-лист
• product.htm - страница товара
• products.htm - список товаров
• registration.htm - регистрация
• search.htm - результаты поиска товаров
• sitemap.htm - карта сайта

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

• email/callme-to-admin.htm - вам о запросе обратного звонка
• email/callme-to-user.htm
• email/feedback-to-admin.htm - вам о письме в обратную связь
• email/feedback-to-user.htm
• email/login-to-admin.htm - вам об успешной авторизации пользователя
• email/login-to-user.htm
• email/registration-to-admin.htm - вам об успешной регистрации нового пользователя
• email/registration-to-user.htm
• email_notifyme_confirm.htm - клиенту о подтверждении желания подключить услугу уведомлений
• email_order_payment_to_admin.htm - вам об успешной оплате заказа
• email_order_payment_to_user.htm
• email_order_to_admin.htm - вам об успешном оформлении заказа
• email_order_to_user.htm
• email_password_remind.tpl - клиенту о новом пароле

Наверное, кому-то пригодятся и макеты SMS-уведомлений вам или вашим посетителям о событиях на сайте. Вот список таких макетов, их тексты отправятся на телефон, если в админпанели сайта вы подключите шлюз какого-нибудь СМС-оператора:

• sms/callme-to-admin.htm - вам о запросе обратного звонка
• sms/callme-to-user.htm
• sms/feedback-to-admin.htm - вам о письме в обратную связь
• sms/feedback-to-user.htm
• sms/login-to-admin.htm - вам об успешной авторизации пользователя
• sms/login-to-user.htm
• sms/registration-to-admin.htm - вам об успешной регистрации нового пользователя
• sms/registration-to-user.htm
• sms_order_change_to_user.htm - клиенту об изменении заказа
• sms_order_payment_to_admin.htm - вам об успешной оплате заказа
• sms_order_payment_to_user.htm
• sms_order_to_admin.htm - вам об успешном оформлении заказа
• sms_order_to_user.htm

Разработчик ответил: Со своей стороны ещё раз напомню блогеру, это перечислялось Кириллом всё, что поддерживается сразу из установочной коробки Impera CMS. Если с новыми версиями платформы там появятся какие-то новые модули в составе системы, к этому списку добавьте макеты тех модулей.

Разметка общего макета

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

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

Кирилл ответил: Есть такой недостаток, подтверждаю. Описания тегов зачем-то сделали комментариями в файле helper.php теговой библиотеки, увеличив тем самым размер файла.

У меня получился следующий общий макет, даже с учётом этических норм - в блоге следует "пикать" некоторые грубые слова:

index.tpl

{modCheck404}
{ifAjax}
    {content}
{/ifAjax}

{ifNotAjax}
    {censor change=[ '/бля[дт]ь/ui'      => 'бл**ь',
                     '/ублюд/ui'         => 'убл*д',
                     '/сука/ui'          => 'су*а',
                     '/хуй/ui'           => 'х*й',
                     '/oху[иею]/ui'      => 'ох**',
                     '/пoхеру/ui'        => 'пох*ру',
                     '/пизд[аиеёоуя]/ui' => 'пиз**',
                     '/пизжу/ui'         => 'пи*жу',
                     '/ебись/ui'         => 'еб*сь',
                     '/ебать/ui'         => 'еб*ть',
                     '/ебан/ui'          => 'еб*н',
                     '/пид[ао]р/ui'      => 'пид*p' ]}
        <!DOCTYPE html>
        <html class="{htmlClass}" lang="{htmlLang}">
            {modHead}
            <body>
                {modHeader}
                <main>
                    {content}
                    {modSidebar}
                </main>
                {modFooter}
                {modScripts}
            </body>
        </html>
    {/censor}
{/ifNotAjax}

Логика работы макета: Сначала с помощью модуля Check404 проверяются неучтённые случаи ошибки 404. И если проверка дала ajax-сигнал, выводится сгенерированный ею контент. Иначе страница генерируется по макету из последовательности модулей - Head, Header, Sidebar, Footer, Scripts, - которые я вынес в отдельные макеты.

<!DOCTYPE html>
<html>
    {modHead}
    <body>
        {modHeader}
        <main>
            {content}
            {modSidebar}
        </main>
        {modFooter}
        {modScripts}
    </body>
</html>

Разработчик поясняет: Далее до конца поста Кирилл рассматривает макеты перечисленных модулей. Я встречал вебмастеров, кому нравится вот такое деление основного макета на серию мелких макетиков. Но встречал и мастеров, кому нравится, когда макет не режут на части - тогда те мастера могут вернуть фрагменты перечисленных модулей ниже в их одноимённые посадочные места на общем макете выше.

modules/check404.htm

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

{ifPageAbstract}
    {setContent}
        {modAbstract}
    {/setContent}
    {header200}
{/ifPageAbstract}

{ifPage404}
    {setContent}
        {modError404}
    {/setContent}
{/ifPage404}

{ifPageOff}
    {setContent}
        {modError404}
    {/setContent}
{/ifPageOff}

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

modules/head.htm

Здесь собраны все заголовки страницы, в том числе прочие (other), которые могли быть добавлены каким-то основным макетом ещё до момента генерации общего макета.

<head>
    <base href="{site}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{title}</title>
    <meta name="description" content="{metaDescription}">
    <meta name="keywords" content="{metaKeywords}">
    <link rel="canonical" href="{canonicalUrl}">

    <link rel="shortcut icon" href="{theme}images/favicon.ico">

    {implantCSS}
        <link rel="stylesheet" href="{theme}css/reset.css">
        <link rel="stylesheet" href="{theme}css/styles.css">
    {/implantCSS}

    {otherMeta}
</head>

Стилевые файлы по возможности имплантируются прямо в тело страницы с целью автоматической минификации и ускорения загрузки страницы за счёт уменьшения лишних запросов к сайту.

modules/header.htm

Модуль шапки, то есть верхней части сайта выводит логотип и пункты меню, какое было названо в админпанели именем "Верхнее меню".

<header>
    <div class="wrapper">
        <a class="logo" href="{site}">
            <img src="{theme}images/logo.png" alt="">
        </a>

        {getTopMenu}
        <menu>
            {enumSections}
                <a href="{url}" {activeSection}>
                    {name}
                </a>
            {/enumSections}
        </menu>
    </div>
</header>

modules/sidebar.htm

Модуль боковой панели просто выводит ссылки на корневые рубрики (категории), отметив ссылку активного раздела, если такой есть.

<aside class="topics">
    <h6>Рубрики</h6>
    <menu>
        {enumCategories}
            <a href="{url}" {activeCategory}>
                {name}
            </a>
        {/enumCategories}
    </menu>
</aside>

modules/footer.htm

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

<footer>
    <div class="wrapper">
        <div class="copyright">
            &copy; {year} {company}
        </div>
        <a href="http://imperacms.com/" rel="nofollow">
            Скрипт сайта
        </a>
    </div>
</footer>

modules/scripts.htm

По правилам SEO, с целью ускорить загрузку страницы рекомендуется поместить в конец вёрстки блок скриптов, где и собрать следующее:

• все локальные скрипты шаблона, по возможности имплантировав в тело страницы с целью автоматической минификации и ещё быстрейшей загрузки
• все прочие (other) скрипты, которые могли быть затребованы каким-то основным макетом ещё до момента генерации общего макета
• все скрипты счётчиков, метрики и аналитики, которые захотите ввести на сайт через соответствующую настройку админпанели

<script>
    var siteUrl = '{site}',
        themeUrl = '{theme}';
</script>

{implantJS}
    <script src="{theme}js/scripts.js"></script>
{/implantJS}

{otherJS}

<aside class="counters">
    {counters}
</aside>

Заплачу 15wmz, дайте номер кошеля. Если добавите

• Спинер правее h1 в центральном блоке. Чтоб нажал - боковая панель схлопнулась, центр стал на всю ширину, спинер обернулся стрелкой влево. Нажал - центр вернулся на место, бок расхлопнулся, спинер стал стрелкой вправо.
• В блоге, обзорах, каталоге отсутствует "Найдено X шт" правее h1. Должно быть. Пусть перед спинером.