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

Привет, читатель!

Предположим, ваш знакомый дизайнер нарисовал в PSD-макете вот такой сайт, как сейчас изображён на этой странице. Допустим, ещё один знакомый сверстал из макета пачку страниц в виде HTML-шаблона. Или хотя бы в виде так называемого одностраничника, на единственном листе которого блок за блоком склеены воображаемые страницы HTML-шаблона. Именно такой одностраничный шаблон вы смотрите сейчас, даже можете скачать для изучения.

Скачать HTML

Так вот если делать HTML-шаблоны самому или в кооперации дизайнер+верстальщик и продавать в лучших международных маркетах шаблонов, типа австралийского ThemeForest или американо-украинского TemplateMonster, то цена единицы будет около 17 долларов. А если свой шаблон да ещё адаптировать (натянуть, переверстать) для лучшей бесплатной CMS - например WordPress американского производства, то владельцы будущих сайтов согласны покупать такую тему уже раза в 4 дороже. При натяжке же шаблона на коммерческие CMS, - а лучшими здесь считаются три-четыре крупнейшие российские системы и пара-тройка крупнейших украинских систем, - так владельцы сайтов вообще согласны платить цену порой раз в 20 дороже исходного HTML.

Кстати, шаблоном принято называть статичный HTML-макет, а темой - его адаптацию к условиям меняющегося контента. Но при разговоре о CMS-ках обычно подразумевают только динамическую генерацию страниц, в результате слова Шаблон и Тема употребляют порой как синонимы, а статичный макет тогда называют только так: HTML-шаблон.

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

Скачать WP тему Скачать IMPERA тему

Сравнивая вёрстку скачанных тем, читатель скорее всего обратит внимание, что на самом-то деле всё оказывается доступно и новичку. Главное чтобы какой-нибудь мастер быстро познакомил с основами и дал примеры "вот что было, вот как я натянул этот фрагмент". И здесь у новичка возникает вопрос:

  • Где прочесть классный урок для чайников по натяжке HTML-шаблонов хотя бы на WordPress?

Да прямо на этой странице! Ниже шаг за шагом расписан процесс натяжки. Автор урока с удовольствием поможет понять тонкости и продолжит рассказ, начиная натяжку с простейшего - так называемой Front Page, то есть заглавной страницы. Ей соответствует блок Шаг 1 рассматриваемого здесь HTML-шаблона.

Подсказка Внутреннее устройство CMS-ок формируется исходя из видения разрабатывающей её команды. И хотя все стараются придерживаться неких воображаемых стандартов, однако в разных CMS-ках имена файлов темы могут несколько отличаться. Например, на время забыв про иерархию движковой обработки файлов в темах, просто скажем, в движке WordPress за генерацию такой страницы отвечает файл front-page.php, а в движке Impera CMS похожий файл назван вот так catalog.htm. Подобные нюансы с именованием создают небольшой дискомфорт при адаптации HTML-шаблона сразу на несколько CMS.

Подсказка При натяжке шаблона помогает умение мысленно разбить предложенную HTML-страницу на блоки, которые повторяются и на других страницах, и следовательно могут быть вынесены в отдельные файлики-модули. Например, в компоновке Шага 1 просматриваются блоки: шапка, слайдер, контент, боковая панель, подвал.

Подсветить блоки

Кому это нафиг нужно?

Спросил бы так всяк не знакомый с масштабом популярности WordPress в среде любительского создания блогов, портфолио и малостраничных корпоративных сайтов. И наверняка ошибся бы. Потому что в области бесплатных, условно-бесплатных и малобюджетных сайтов американский движок завоевал любовь фрилансеров своей относительной простотой и низким порогом входа на рынок платной разработки новых или доработки существующих сайтов. Ну и ещё полюбился низким порогом входа на буйнорастущий рынок шаблонов собственного производства.

А так как разработчик WordPress постоянно улучшает свою систему, в ней появляются свежие подходы, то вопрос современных уроков актуален до сих пор. С целью повышения эффективности, - ведь в нынешнем быстро устаревающем IT-мире хороший урок должен по возможности учить и новым трендам, как минимум тому что происходит в смежных проектах, - так вот в интерактивные уроки добавляют сравнительную постановку тех же действий на примере какого-нибудь из лучших представителей платных CMS.

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

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

К шагу 1 К пояснению 1 К шагу 2

Как установить WordPress

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

Скачать WordPress

Далее следует разархивировать скачанный zip-архив на свой компьютер. У вас в папке образуется множество файлов, порядка полутора тысяч штук. Закачайте их на свой будущий сайт с помощью какой-нибудь программы FTP-менеджер, и затем откройте главную страницу сайта. Тут же начнётся процесс установки, который изображен по шагам на следующих 5 скриншотах. Для увеличения малых скриншотов просто нажмите на интересующую из 4 миниатюр под большой, чтобы она встала на место большой.

Экран 1 из 5
Экран 2 из 5
Экран 3 из 5
Экран 4 из 5
Экран 5 из 5

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

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

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

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

Однако при всех своих минусах и плюсах, оба типа движков продолжают успешно жить и процветать.

Как установить ImperaCMS

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

Скачать ImperaCMS

Далее разархивируйте скачанный файл на свой компьютер, затем вашим любимым FTP-менеджером закачайте образовавшиеся 2 файла (это install.php и файл ImperaCMS_sources.zip) на свой сайт. Теперь осталось открыть страницу сайта http://ваш.сайт/install.php - тут же начнётся процесс установки, который изображен на следующих 5 скриншотах.

Экран 1 из 5
Экран 2 из 5
Экран 3 из 5
Экран 4 из 5
Экран 5 из 5

А теперь... Вернёмся к пояснениям по первому шагу урока. С этого места начинается реальный исходный код собираемой нами темы сайта. Так что внимательней читайте и не пугайтесь, всё на самом деле очень просто.

Верстаем главную страницу

Приступим к натяжке первого файла нашей будущей темы. Мы начинаем работу с такой страницы предложенного HTML-шаблона лишь из соображений нумерации шагов урока, а в общем случае вы могли бы начать натяжку с любой другой страницы HTML. Это дело опыта и личных предпочтений: кто-то начинает нарезку файликов-модулей с макета главной, кто-то с публикации блога, кто-то с карты сайта, кто-то со страницы контактов, и так далее. Короче, нажимая в Шаге 1 его техническую кнопку Вид, вы могли подробно рассмотреть:

  • Как эта виртуальная первая страница урока смотрится в виде отдельной HTML-страницы со слайдером сверху и без него.
  • Причём техническая кнопка Подсветить блоки помогла увидеть расположение блоков на странице, обозначив их некими цветами:
    • голубая шапка
    • зелёный слайдер
    • серо-жёлтый контент
    • фиолетовая боковая панель
    • коричневый подвал
  • А техническая кнопка Код помогла увидеть исходный HTML-код страницы с аналогичным цветовым обозначением участков кода.
    Ещё раз увидеть HTML

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

Финальный код главной

Для ясности теги подключений отрезанных модулей обозначены оговоренными выше цветами. И ещё один момент - так как для создания устойчиво работающих тем рекомендуется проверять неочевидные ситуации, мы тоже добавим в наш файл проверки, и красным цветом обозначим эти контрольные теги. Без них шаблон тоже будет работать, но когда пользователь попадёт, скажем на заблокированный пост, он может увидеть совсем не то внятное сообщение "пост не найден", что мы ожидали бы ему показать по такому случаю.

<?php /* это макет главной страницы */ ?>
<?php get_header(); ?>
    <?php get_template_part('template-parts/post/content', 'slider'); ?>
    <div class="layout layout-1">
        <div class="container">
            <div class="row">
                <article class="col-xs-12 col-sm-7 col-md-8 publication">
                    <?php if (have_posts()) : ?>
                        <?php the_post(); ?>
                        <?php get_template_part('template-parts/page/content', 'front-page'); ?>
                    <?php else : ?>
                        <?php get_template_part('template-parts/post/content', 'none'); ?>
                    <?php endif; ?>
                </article>
                <aside class="col-xs-12 col-sm-5 col-md-4">
                    <?php get_sidebar(); ?>
                </aside>
            </div>
        </div>
    </div>
<?php get_footer(); ?>
{* это макет главной страницы *}
{lastTemplate}
{modHeader}
    {modSlider}
    <div class="layout layout-1">
        <div class="container">
            <div class="row">
                <article class="col-xs-12 col-sm-7 col-md-8 publication">
                    {ifSection}
                        {useSection}
                        {modFront}
                    {/ifSection}
                    {ifNotSection}
                        {modNone}
                    {/ifNotSection}
                </article>
                <aside class="col-xs-12 col-sm-5 col-md-4">
                    {modSidebar}
                </aside>
            </div>
        </div>
    </div>
{modFooter}

Код связанных модулей

Поскольку в процессе разрезки исходной HTML-страницы на кусочки у нас появилось 2 малых файлика-модуля (front-page и none), приведём следом их код, сначала для первого модуля, затем для второго.

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

<?php /* это контент поста главной страницы */ ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
{* это контент поста главной страницы *}
<h1>{name}</h1>
{body}

И наконец код второго малого модуля - он служит сообщением "Контент не найден".

<?php /* это сообщение о пустом результате */ ?>
<h1>Ничего не найдено</h1>
<p>Попробуйте воспользоваться поиском или картой сайта.</p>
{* это сообщение о пустом результате *}
<h1>Ничего не найдено</h1>
<p>Попробуйте воспользоваться поиском или картой сайта.</p>

Текущее содержимое темы

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

  • Корень сайта
              • bootstrap.min.css
              • theme-styles.css
              • glyphicons-halflings-regular.eot
              • glyphicons-halflings-regular.svg
              • glyphicons-halflings-regular.ttf
              • glyphicons-halflings-regular.woff
              • glyphicons-halflings-regular.woff2
              • OpenSans-Bold.ttf
              • OpenSans-Regular.ttf
                • action-1.jpg
                • slide-1.jpg
                • slide-2.jpg
              • favicon.ico
              • bootstrap.min.js
              • jquery.min.js
              • theme-scripts.js
              • content-front-page.php
              • content-none.php
              • content-slider.php
          • footer.php
          • front-page.php
          • functions.php
          • header.php
          • index.php
          • screenshot.png
          • sidebar.php
          • style.css
  • Корень сайта
          • bootstrap.min.css
          • theme-styles.css
          • glyphicons-halflings-regular.eot
          • glyphicons-halflings-regular.svg
          • glyphicons-halflings-regular.ttf
          • glyphicons-halflings-regular.woff
          • glyphicons-halflings-regular.woff2
          • OpenSans-Bold.ttf
          • OpenSans-Regular.ttf
            • footer.htm
            • front.htm
            • header.htm
            • none.htm
            • sidebar.htm
            • slider.htm
          • catalog.htm
          • helper.php
          • index.tpl
            • action-1.jpg
            • slide-1.jpg
            • slide-2.jpg
          • favicon.ico
          • thumbnail.jpg
          • bootstrap.min.js
          • jquery.min.js
          • theme-scripts.js

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

Зачем нужен functions.php

Когда у нас нет опыта, а перед нами уже поставили цель приделать к сайту нестандартную хотелку, на мгновенную реализацию которой в ядре движка вроде бы отсутствует необходимая функция, то всегда есть желание по-быстренькому накодить внутрь ядра. Но подобная практика ведёт к хаосу. Фольклор веб-индустрии хранит забавные истории, как молодые фрилансеры с целью "хотю тута вывести эта" лезли в код движка, словно на высоковольтный столб с отвёрткой в руках. Чтобы избежать травм, в темах сайтов был придуман файл functions.php (где-то он назван helper.php, где-то назван emulator.php и тому подобное). Здесь мы можем запрограммировать недостающую нам функцию, или вообще перекрыть какую-то из стандартных, чтобы записать её по-своему.

Например, мне в шаблоне понадобилось вывести случайное число от 1 до 10 и пусть я хочу, чтобы это выполнялось с помощью какого-то нестандартного тега, скажем myRandom. Тогда в макете страницы я пишу следующее:

<?php /* это наброски моей капчи */ ?>
<form>
    <p>Сайт загадал числа. Введите их сумму.</p>
   <?php myRandom(); ?>+<?php myRandom(); ?>
    = <input name="captcha" type="text">
</form>
{* это наброски моей капчи *}
<form>
    <p>Сайт загадал числа. Введите их сумму.</p>
   {myRandom}+{myRandom}
    = <input name="captcha" type="text">
</form>

А в хелпере своей темы пишу требуемый мне обработчик своего выдуманного тега. Вот так:

<?php /* это наши нестандартные функции для темы */
    function myRandom ( $params = null ) {
        echo rand(1, 10);
    }
?>
<?php /* это наши нестандартные функции для темы */
    class TemplateEmulator {
        public function myRandom ( $params, & $smarty ) {
            return rand(1, 10);
        }
    }
?>

Кстати, на место файла helper.php в темах ImperaCMS по умолчанию обычно устанавливают такой же файл из библиотеки ShortCodes. Там содержится свыше сотни уже готовых обалденных функций на всякие случаи. Так что что-либо программировать почти не приходится, всё уже изобретено до нас. К тому же сделано с любовью к технарям поддержки сайта. Ведь рассматривая выше финальный код главной страницы, вы наверняка могли заметить, насколько читабельнее выглядит имперский код справа по сравнению с таким же вордпресовским кодом слева. Упрощение как раз было достигнуто за счёт использования тегов библиотеки.

Текущий состав темы

Знаете ли вы, что... Внутри папки темы WordPress находится файл screenshot.png (или файл images/thumbnail.jpg внутри темы ImperaCMS). Это та миниатюрная заставка, которая изображает тему в админпанели сайта на странице установки, настройки и активации тем. В конце работ по адаптации мы поместим в тот файл подходящую картинку, скажем снимок получившегося сайта.

Зачем нужен index.php

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

Согласно одной концепции, которой придерживаются в основном блоговые движки, в том числе и WordPress, там главный файл темы представляет собой эдакую универсальную замену любому несуществующему файл-макету страниц того же типа, как текущая страница. Например, если сейчас генерируется заглавная страница и в шаблоне по какой-то причине нет её файл-макета front-page.php, тогда вместо него WordPress ищет в папке темы главный файл index.php и использует как универсальную замену.

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

Иерархия файлов темы WordPress

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

Так вот согласно другой концепции работы шаблонизатора сайта, которой придерживаются многоцелевые движки, в том числе ImperaCMS, там типов страниц может быть намного больше, и с каждым типом связан определённый модуль, установленный в систему заранее. Так вот в подобной ситуации главный файл темы тогда лучше всего представляется единой обёрткой для всех страниц, чьи файл-макеты теперь служат генерации только центра страниц того же типа как текущая. Например, если в этот момент генерируется страница новостей, то её наполнением занимается некий модуль соответствующего типа, ну допустим назовём его News, и модуль этот с помощью сопоставленного ему файл-макета news.htm генерирует лишь центральную часть страницы. А потом получившийся центр оборачивается шаблонизатором в файл index.tpl - как раз поэтому в данном файле стараются расположить общий макет страниц как бы с отрезанным центром.

Примечательно, что в хороших коммерческих CMS предусмотрена возможность перейти на ту концепцию работы шаблонизатора, которая нам больше нравится в этот момент. Для примера, в системе ImperaCMS можно в нужном файле темы просто использовать тег {lastTemplate}, чтобы начиная с этого места отключить дефолтную концепцию и включить подобную блоговым движкам.

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

<?php /* это дефолтный макет страницы */ ?>
<?php get_header(); ?>
<div class="wrap">
    <header>
        <h1>Посты</h1>
    </header>
    <main>
        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : ?>
                <?php the_post(); ?>
                <?php get_template_part('template-parts/post/content', get_post_format()); ?>
            <?php endwhile; ?>
            <?php the_posts_pagination(array(
                'prev_text' => '«',
                'next_text' => '»'
            )); ?>
        <?php else : ?>
            <?php get_template_part('template-parts/post/content', 'none'); ?>
        <?php endif; ?>
    </main>
    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
{* это общий макет страницы *}
{modCheck404}
{ifAjax}
    {content}
{/ifAjax}
{ifNotAjax}
    {modHeader}
    <div class="wrap">
        <main>
            {content}
        </main>
    </div>
    {modFooter}
{/ifNotAjax}

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

<?php /* это дефолтный макет страницы */ ?>
<?php include('404.php'); ?>
{* это общий макет страницы *}
{modError404}

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

Текущий состав темы

Как добавить страницу в WordPress

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

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


Как добавить страницу в ImperaCMS

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


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

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

Страница не найдена!

Упс, что-то пошло не так! На нашем сайте нет такой страницы. Возможные причины:

  • Вы воспользовались устаревшей ссылкой
  • Набрали неправильный адрес
  • Страница закрыта для неавторизованных
Попробуйте поиск

Подсказка На разных CMS имена файлов шаблона могут несколько отличаться. Например, в движке WordPress за генерацию такой страницы отвечает файл 404.php шаблона, а в движке ImperaCMS подобный файл назван уже так missing_template.htm. Такие нюансы с именованием создают небольшой дискомфорт при адаптации шаблона сразу на несколько CMS.

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

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

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

Держитесь моды

Маркеты - это конвейеры продаж тиражных шаблонов с однообразным стилем. Но даже там попадаются красивые HTML-шаблоны. Отслеживайте лишь такие.

Сделайте код чище

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

Берегите время

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

Продолжайте учиться

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

Соизмеряйте возможности

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

Цените свой труд

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

Обзоры Каталог Блог

Знаете ли вы, что... Lorem ipsum.

Контент этого блока ещё не готов.
Ожидайте...

Знаете ли вы, что... Lorem ipsum.

Новое в блоге

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

Весь блог

Кстати, неплохая практика от сайтов на CMS-ках - это блоки seo-текста под списками постов. Там например пишут толкование побочных ключевых терминов для списка подобной тематики.

Знаете ли вы, что... WordPress - это одна из самых популярных в мире систем управления сайтом блогового типа. Была разработана более 10 лет назад в Америке. На начальном этапе развития ориентировалась на вебмастеров с хорошей подготовкой. Но благодаря простой архитектуре и упорному развитию набора готовых шаблонизационных функций, эта система за последние годы стала популярной по всему миру в сфере любительского создания сайтов.

Новое на витрине

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

Все товары

Знаете ли вы, что... Этот html-шаблон разработан в лаборатории Имперы как приложение к уроку. Он свёрстан на Bootstrap версии 3.3.7. В согласии с современными требованиями, шаблон сделан адаптивным + базовая seo-оптимизация. Разметка выполнена на основе простейших бутстраповских паттернов. При проектировании блоков шаблона автор урока старался использовать минимум стилей "от себя", чтобы вам было легче стилизовать блоки под собственные нужды.