{* *}{strip} {putOtherMeta} {/putOtherMeta} {$title = 'Руководство пользователя' scope=global} {$keywords = '' scope=global} {$description = '' scope=global}

{title}

Благодарим за интерес к бесплатному шаблону {themeName}. Он разработан вебмастером Mostafizur Rahman из Бангладеш - опытным фронтенд разработчиком для Wordpress, фрилансером в области создания, настройки и мониторинга сайтов на этой платформе. Начальный шаблон был исполнен на фреймворке Bootstrap v.3.3.7 в виде статического одностраничного HTML-макета с простейшим набором функций. А его отраслевая адаптация, выполненная под систему Impera CMS на основе технологии ShortCodes, уже содержит некоторый дополнительный функционал, характерный для визиточных сайтов и интернет витрин в Рунете.

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

О коде:   Нам и самим нравится краткий, ясно читаемый код. Потому что его легко поддерживать. В этом шаблоне присутствует как раз такой код. А версия применённой в шаблоне библиотеки ShortCodes Helper равна v.{shortCodesVersion}. Наверняка её возможностей хватит вам надолго, но в любой момент можете закачать в шаблон более свежую версию той библиотеки.


Соглашение

Данную адаптированную версию бесплатного шаблона {themeName} разрешено использовать на личном сайте. Если вы являетесь вебстудией, частным мастером, фрилансером и тому подобное, - шаблон разрешено использовать на сайте вашего клиента. При этом вы не имеете права:

  • Удалять из подвала страницы или скрывать ссылки на девелоперов.
  • Продавать этот шаблон.
  • Изготавливать на основе шаблона другие модификации на продажу.

Послабление:   Удаление с вашего сайта ссылок на девелоперов допустимо только в случае, когда вы приобрели у вебмастера Mostafizur Rahman коммерческую версию данного шаблона для своего сайта.

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


С официальной частью завершили, давайте перейдём к деталям.

Установка

Установка движка:   Прежде всего необходимо скачать с официального сайта Impera CMS скрипт установки - это файл imperacms.ru/impera_cms.zip. Он представляет собой архив, который следует распаковать на свой компьютер. Тогда в папке компьютера, куда развернули этот архив, появятся следующие файлы:

  • install.php - непосредственно скрипт установки
  • ImperaCMS_sources.zip - так называемое ядро движка

Эти два файла необходимо скопировать в корень своего сайта, например с помощью файлового менеджера в панели управления хостингом. Затем нужно открыть в браузере страницу http://ваш.сайт/install.php, после чего следовать инструкциям скрипта установки.

Установка состоит из 5 простых экранов. На одном из них от вас потребуются такие сведения:

  • адрес сервера баз данных MySQL - обычно это localhost
  • имя созданной базы данных для вашего сайта
  • логин MySQL-пользователя этой базы данных
  • пароль MySQL-пользователя

Эти сведения вам должен был прислать хостинг-провайдер, когда регистрировали свой сайт.


Установка шаблона:   Когда движок сайта установлен, теперь можно перейти к загрузке шаблона. Сначала его надо скачать в виде архива - это файл imperacms.ru/files/media/Doctor.zip (кому интересно, файловое содержимое архива перечислено в главе "Строение шаблона" ниже).

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

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

Строение шаблона

Ниже показан листинг папки шаблона {themeName}, условно он поделен на 5 подпапок. В первой размещаются так называемые стилевые файлы.

{/strip}
css
    bootstrap.css
    bootstrap.min.css
    font-awesome.min.css
    style.css             «-- стили дизайна{strip}
                        

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

{/strip}
fonts
    FontAwesome-4.6.3.eot
    FontAwesome-4.6.3.svg
    FontAwesome-4.6.3.ttf
    FontAwesome-4.6.3.woff
    FontAwesome-4.6.3.woff2
    -----
    glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.svg
    glyphicons-halflings-regular.ttf
    glyphicons-halflings-regular.woff
    glyphicons-halflings-regular.woff2
    -----
    OpenSans-Bold.ttf
    OpenSans-CondensedBold.ttf
    OpenSans-CondensedLight.ttf
    OpenSans-Regular.ttf{strip}
                        

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

{/strip}
html
    abstract
        manual.htm        «-- текст этого макета вы сейчас читаете
        sitemap.htm
    email                 «-- макеты писем
        callme-to-admin.htm
        callme-to-user.htm
        feedback-to-admin.htm
        feedback-to-user.htm
    sms                   «-- макеты СМС
        callme-to-admin.htm
        callme-to-user.htm
        feedback-to-admin.htm
        feedback-to-user.htm
    modules               «-- всякие модулёчки
        check404.htm      «--     модуль "Проверка неучтённых случаев Ошибка404"
        demo-themes.htm   «--     модуль "Ещё дизайны на этом сайте"
    -----
    index.tpl             «-- тот самый каркас (общий макет страницы)
    -----
    articles.htm          «-- макет "Советы врачей"
    article.htm           «-- макет "Пост совета"
    callme.htm            «-- макет "Заказать звонок"
    catalog.htm           «-- макет "Главная страница"
    feedback.htm          «-- макет "Обратная связь"
    news.htm              «-- макет "Наш блог"
    news_item.htm         «-- макет "Пост блога"
    products.htm          «-- макет "Наша аптека"
    sitemap.htm           «-- макет "Карта сайта"
    static_page.htm       «-- макет "Пост" (из блока "О нас" на главной)
    -----
    missing_template.htm  «-- макет "Ошибка 404"
    price.htm             «-- макет "Прайс-лист"
    -----
    navigation.htm        «-- блок "Пагинация страниц"
    helper.php            «-- упоминавшаяся библиотека ShortCodes{strip}
                        

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

{/strip}
images
    demo
        import-1.xls      «-- пример прайса для импорта товаров
        -----
        article-1.jpg     «-- демо картинки постов "Советы врачей"
        article-2.jpg
        article-3.jpg
        article-4.jpg
        -----
        news-1.jpg        «-- демо картинки постов "Блог"
        news-2.jpg
        news-3.jpg
        news-4.jpg
        -----
        product-1.jpg     «-- демо картинки товаров аптеки
        product-2.jpg
        product-3.jpg
        product-4.jpg
        product-5.jpg
        product-6.jpg
        product-7.jpg
        product-8.jpg
        product-9.jpg
        -----
        section-1.jpg     «-- демо картинки постов "О нас"
        section-2.jpg
        section-3.jpg
    slider                «-- слайды на главной
        slide-1.jpg
        slide-2.jpg
        slide-3.jpg
    team                  «-- фотографии врачей
        person-1.jpg
        person-2.jpg
        person-3.jpg
        person-4.jpg
        person-5.jpg
        person-6.jpg
    -----
    logo.png              «-- логотип вверху страницы
    map.jpg               «-- фон под блоком "Наши контакты" на главной
    -----
    service-1.png         «-- значки блока "Наши услуги" на главной
    service-2.png
    service-3.png
    service-4.png
    service-background.jpg
    -----
    favicon.ico           «-- ярлыковая иконка
    -----
    no-photo.png          «-- картинка на случай "Фото не загружено"
    ribbon-1.png          «-- картинка "Хотите себе такой шаблон?"
    thumbnail.jpg         «-- иконка шаблона (для админпанели){strip}
                        

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

{/strip}
js
    bootstrap.js
    bootstrap.min.js
    jquery.min.js
    script.js             «-- клиентские сркипты{strip}
                        

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

Настройки

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

  • phone1 - телефон в слайдере на главной и ниже в блоке контактов
  • phone2 - факс в блоке контактов
  • email1 - емейл в блоке контактов
  • address1 - адрес в блоке контактов

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

  • facebook
  • twitter
  • vkontakte
  • google

Разумеется все эти параметры хранятся в конфигурационном файле сайта и редактируются через админпанель. Вот ссылка:

  • Конфигурационный файл - где это
  • Логин/пароль админки на демо сайте - admin / 123

Антиспам:   Библиотека ShortCodes Helper содержит простой, но действенный механизм защиты против автоматической рассылки спама через формы обратной связи, регистрации, комментариев и обратного звонка. По умолчанию этот механизм выключен. Чтобы включить антиспам терапию, создайте следующий конфигурационный параметр:

  • antispanEnabled - значения: 1 = включен, 0 = выключен

О страницах

Главная страница:   В шаблоне она представлена файлом catalog.htm. В самом начале есть секция "Слайдер", её слайды размещены среди прочих картинок шаблона, а именно в директории slider, которая была создана в папке картинок.

Вот ссылки:

  • Файлы картинок - где это
  • Логин/пароль админки на демо сайте - admin / 123

Просто удалите ненужные слайды и загрузите требуемое количество своих. Ожидаемый размер слайда: 2000х800 пикселей.

Сразу под слайдером есть секция "О нас", а в качестве её постов выводятся те специальные страницы, которые вы прикрепите к меню под названием "Верхнее меню".

Вот ссылки:

  • Специальные страницы - где это
  • Менюшки - где это
  • Логин/пароль админки на демо сайте - admin / 123

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

Итак, вот упомянутые ограничения:   На широких экранах - демонстрируется только 3 поста в ряд, остальные невидимы. На средних экранах - 4 поста по 2 в каждом ряду. На узких - по 1 в ряд, а количество видимых постов не ограничено.

Далее рассмотрим секцию "Наши врачи". Фотографии врачей на ней размещены среди прочих картинок шаблона, а именно в директории team, которая была создана в папке картинок. А текст с ФИО и должностями сотрудников редактируйте в файле catalog.htm этого же шаблона.

Вот ссылки:

  • Файлы картинок - где это
  • Файлы шаблона - где это
  • Логин/пароль админки на демо сайте - admin / 123

Обратите внимание, чтобы редактировать текст, надо иметь хотя бы базовые представления о разметке HTML. Иначе можно накосячить с тегами и элементы страницы "посъезжают" со своих мест. Или попросите своего вебмастера выполнить эту задачу.


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

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

  • Файлы шаблона - где это
  • Логин/пароль админки на демо сайте - admin / 123

Импорт товаров

Базовые возможности движка предоставляют три типа загрузки ассортимента на сайт: набивка товаров вручную, синхронизация из программ типа 1С или сервиса Мой Склад и тому подобных, импорт из прайса Excel.

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

Ввести дерево категорий, так называемые разделы или группы товаров. Вот ссылка:
  • товары » Категории - где это
  • Логин/пароль админки на демо сайте - admin / 123
Ввести бренды, так называемые производители. Снова ссылка:
Ввести сами товары. Ссылка:
Причём редактирование любого шага может быть частичным, по мере подготовки информации о соответствующем элементе каталога товаров.

Импорт из программ 1С:   Такой модуль импорта расположен в админпанели.

Вот ссылка:
  • товары » Настройки синхронизации 1С - где это
  • Логин/пароль админки на демо сайте - admin / 123
При настройке программы 1С необходимо сообщить ей ваш URL обмена - это адрес {site}cml страницы синхронизации, через которую 1С будет обмениваться информацией с сайтом аптеки. В качестве логина и пароля необходимо сообщить программе 1С сайтовый логин/пароль любого администратора, в правах которого разрешён доступ к странице этого модуля. Даже рекомендуется создать отдельного администратора и назначить ему права доступа лишь к модулю CommerceML, как дополнительный элемент безопасности сайта при взаимодействии с внешними сервисами. Это выполняется в админпанели. Вот ссылка:
Приятной особенностью модуля является история, где протоколируются результаты синхронизаций. Полезная фишка при анализе ситуаций.

Импорт из прайс-листа Excel:   Данный способ понравится аптекам, которые по некоторым причинам не используют учётные системы типа 1С, и которым удобно вести каталог товаров в виде Excel таблицы.

Такой модуль импорта расположен в админпанели. Вот ссылка:
  • разное » Варианты импорта - где это
  • Логин/пароль админки на демо сайте - admin / 123
Достоинства этого способа импорта товаров:
  • Редактировать каталог способен и тот, кто не знаком с админпанелью магазина
  • Каталог собирается вне сайта, затем один раз импортируется на сайт
  • Возможность коллективной работы с прайсом благодаря возможности импорта только части колонок

Мы подготовили некоторый пример, по которому вы сможете быстро разобраться, как импортировать товары, если предпочитаете вести свою базу в форме прайса Excel и периодически обновлять сайт на основе такого прайса.

Используйте тот файл примера import-1.xls как основу для создания своего прайса. Там набито 2800+ позиций (к сожалению без фоток) всяких медицинских препаратов типичной аптеки. Удалите лишние строки, проставьте в соответствующих колонках свои цены, наличие на складе, пропишите используемые вами артикулы вместо вымышленных в примере (или сотрите если не используете), пропишите вместо выдуманных настоящие имена фотографий, какие достанете или нащёлкаете со своих товаров.

Сохраните результат с помощью Файл » Сохранить как... и укажите формат сохранения CSV (разделители - запятые) (*.csv). Создайте в админпанели вариант импорта, который и будет закачивать этот CSV-файл. Вот ссылка:

  • разное » Варианты импорта - где это
  • Логин/пароль админки на демо сайте - admin / 123

При создании варианта импорта укажите ему, что он работает с таким списком полей:

{/strip}
    sku, category [-] [-рубрика], model [-], price, quantity [есть:100], brand, largeImage{strip}
                

О доработке

Как уже говорилось в первой главе, код вёрстки в шаблоне {themeName} и в самом деле простой. Он представляет собой обычный HTML с малым включением тегов ShortCodes, расставленных посреди тегов html-разметки страницы. Такой код позволяет даже фрилансеру, который впервые видит внутренности вашего шаблона, легко разобраться в макетах страниц и дополнить новыми блоками по вашему заданию.


Макет поста

Чтобы подтвердить сказанное примером, распечатаем иходный код какого-нибудь макета, например файла static_page.htm - он служит для отрисовки центральной части статических постов блока "О нас".

  • Cразу ссылка - посмотреть, как такая страница выглядит вживую.
А вот код упомянутого файла:

{/strip}
{* <!-- статическая страница --> *}{strip}
{ifSection}
    <section class="publication">
        <div class="container">
            <div class="row">
                <a class="btn btn-primary pull-right" href="articles">
                    Советы
                    <i class="glyphicon glyphicon-hand-up"></i>
                </a>
                <a class="btn btn-primary pull-right" href="news">
                    Блог
                    <i class="glyphicon glyphicon-pencil"></i>
                </a>
                <a class="btn btn-primary pull-right" href="products">
                    Аптека
                    <i class="glyphicon glyphicon-leaf"></i>
                </a>

                <!-- заголовок, текст -->
                <h1>{nameSection}</h1>
                <div class="static-text">
                    {bodySection}
                </div>

                <a class="goto-btn hidden"></a>
                <a class="goto-btn" href="sitemap">
                    Карта сайта
                    <i class="glyphicon glyphicon-map-marker"></i>
                </a>
            </div>
        </div>
    </section>
{/ifSection}

{ifNotSection}
    {modError404}
{/ifNotSection}{strip}
                    

Любой знающий HTML на базовом уровне поймёт этот фрагмент кода. Что же касается назначения тегов ShortCodes, поясним по аналогии с текстовым описанием алгоритма:

  • {* ... *} - так пишут некий комментарий ...
  • {strip} - минифицировать строки ниже (то есть убрать пробелы между строками)
    • {ifSection} - если страница доступна
      • {nameSection} - вывести текст заголовка
      • {bodySection} - вывести описание
    • {ifNotSection} - если же страница недоступна
      • {modError404} - вывести модуль "Ошибка404"

И на всякий случай приведём список тегов с кратким описанием цели:

{/strip}{enumFunctions}
{{idx}} = {item}{/enumFunctions}{strip}
                        

Пост типа "Блог"

Его макет представлен файлом news_item.htm и похож на макет статического поста, поэтому ограничимся только пояснением:

  • {* ... *} - комментарий
  • {strip} - минифицировать строки ниже
    • {ifNewsItem} - если пост доступен
      • {nameNews} - вывести текст заголовка
      • {bodyNews} - вывести текст поста
    • {ifNotNewsItem} - если же пост недоступен
      • {modError404} - вывести модуль "Ошибка404"

Здесь использованы похожие теги, но с другим окончанием. Подобный подход нравится ценителям обособлять макеты по видам, невзирая на копипасту. Однако при желании оптимизировать всё и вся, такие типовые "дубликаты" макетов могли быть записаны единым с универсальными тегами, навроде ifItem, name, body и тому подобными.


Пост типа "Советы врачей"

Его макет представлен файлом article.htm и похож на макет статического поста:

  • {* ... *} - комментарий
  • {strip} - минифицировать строки ниже
    • {ifArticle} - если пост доступен
      • {nameArticle} - вывести текст заголовка
      • {bodyArticle} - вывести такст поста
    • {ifNotArticle} - если же пост недоступен
      • {modError404} - вывести модуль "Ошибка404"

Макет пагинации

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

  • Cразу ссылка - посмотреть, как пагинация выглядит вживую.
А вот код упомянутого файла:

{/strip}
{* <!-- модуль: пагинатор --> *}{strip}
{ifPages}
    <div class="clearfix"></div>
    <nav class="text-center">
        <ul class="pagination">
            {enumPages}
                <li>
                    <a href="/{item}">
                        {num}
                    </a>
                </li>
            {/enumPages}
        </ul>
    </nav>
{/ifPages}{strip}
                    

Опять же поясним по аналогии с описанием алгоритма:

  • {* ... *} - комментарий
  • {strip} - минифицировать строки ниже
    • {ifPages} - если есть листаемые страницы
      • {enumPages} - перечислить листаемые
        • {item} - вывести элемент (понимайте URL, так как список листаемых представляет собой перечень URL-ов)
        • {num} - вывести порядковый номер перечисляемого элемента

Главное помните   Современные веб-технологии и фреймворки - типа jQuery, Bootstrap, ShortCodes и тому подобные - создавались чтобы упростить построение или доработку сайта собственными силами. А если у вас всё равно возникли вопросы, или нет времени на доработку, или ещё мало опыта, задайте в обратную связь сайта Имперы. Вам подскажут или найдут тех фрилансеров, кто за некоторую денежку поможет с требуемой вам доработкой.

Благодарности

За картинки, фотографии и прочие графические материалы:

За шрифты, иконки и значки:

За средства разработки:

За тест адаптивности:

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


Хотим верить, наша скромная работа понравится вам за качество исполнения и внимание к деталям. Мы были бы очень рады, если эту понравившуюся работу вы порекомендуете своим друзьям или поделитесь в своей сети ссылкой на неё. Например так:

  • http://imperacms.ru/products/doctor - адаптация интересного бесплатного шаблона {themeName}, предназначена медикам, кому нужен красивый сайт визитка с элементами аптеки
Карта сайта