Благодарим за интерес к бесплатному шаблону {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 простых экранов. На одном из них от вас потребуются такие сведения:
localhost
Эти сведения вам должен был прислать хостинг-провайдер, когда регистрировали свой сайт.
Установка шаблона: Когда движок сайта установлен, теперь можно перейти к загрузке шаблона. Сначала его надо скачать в виде архива - это файл 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.htmsms
«-- макеты СМС callme-to-admin.htm callme-to-user.htm feedback-to-admin.htm feedback-to-user.htmmodules
«-- всякие модулёчки 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.jpgslider
«-- слайды на главной slide-1.jpg slide-2.jpg slide-3.jpgteam
«-- фотографии врачей 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
Разумеется все эти параметры хранятся в конфигурационном файле сайта и редактируются через админпанель. Вот ссылка:
Антиспам: Библиотека ShortCodes Helper содержит простой, но действенный механизм защиты против автоматической рассылки спама через формы обратной связи, регистрации, комментариев и обратного звонка. По умолчанию этот механизм выключен. Чтобы включить антиспам терапию, создайте следующий конфигурационный параметр:
antispanEnabled
- значения: 1 = включен, 0 = выключенГлавная страница: В шаблоне она представлена файлом catalog.htm
. В самом начале есть секция "Слайдер", её слайды размещены среди прочих картинок шаблона, а именно в директории slider
, которая была создана в папке картинок.
Вот ссылки:
Просто удалите ненужные слайды и загрузите требуемое количество своих. Ожидаемый размер слайда: 2000х800 пикселей.
Сразу под слайдером есть секция "О нас", а в качестве её постов выводятся те специальные страницы, которые вы прикрепите к меню под названием "Верхнее меню".
Вот ссылки:
Обратите внимание, с помощью стилевых файлов для этой секции установлены следующие визуальные ограничения дизайнерского плана. Вы или ваш вебмастер можете легко убрать такие ограничения в файле style.css
на участке стилей, условно обозначенном "О нас". Ограничения выполнены через media-запросы.
Итак, вот упомянутые ограничения: На широких экранах - демонстрируется только 3 поста в ряд, остальные невидимы. На средних экранах - 4 поста по 2 в каждом ряду. На узких - по 1 в ряд, а количество видимых постов не ограничено.
Далее рассмотрим секцию "Наши врачи". Фотографии врачей на ней размещены среди прочих картинок шаблона, а именно в директории team
, которая была создана в папке картинок. А текст с ФИО и должностями сотрудников редактируйте в файле catalog.htm
этого же шаблона.
Вот ссылки:
Обратите внимание, чтобы редактировать текст, надо иметь хотя бы базовые представления о разметке HTML. Иначе можно накосячить с тегами и элементы страницы "посъезжают" со своих мест. Или попросите своего вебмастера выполнить эту задачу.
Ошибка 404: Всякому владельцу сайта рекомендуется хотя бы раз взглянуть на страницу, куда попадает посетитель по недействительной ссылке. В шаблоне такая страница представлена файлом missing_template.htm
. Проверьте всё ли правильно, и если что-то не так, ваш вебмастер или вы напишите там подходящие сведения. Сейчас страница выглядит таким образом:
Говорят, если продумать контент данной страницы и разместить там правильные ссылки, это дескать немного поднимает конверсионные качества сайта. В таком случае лишний раз напомним о редактировании файлов шаблона в админпанели. Вот ссылка:
Базовые возможности движка предоставляют три типа загрузки ассортимента на сайт: набивка товаров вручную, синхронизация из программ типа 1С или сервиса Мой Склад и тому подобных, импорт из прайса Excel.
Набивка вручную: Этот способ традиционный для онлайновых аптек с маленьким товарным составом, когда наполнить базу руками быстрее, чем готовить какие-то файлы импорта. Состоит из последовательности шагов:
Импорт из программ 1С: Такой модуль импорта расположен в админпанели.
{site}cml
страницы синхронизации, через которую 1С будет обмениваться информацией с сайтом аптеки. В качестве логина и пароля необходимо сообщить программе 1С сайтовый логин/пароль любого администратора, в правах которого разрешён доступ к странице этого модуля. Даже рекомендуется создать отдельного администратора и назначить ему права доступа лишь к модулю CommerceML
, как дополнительный элемент безопасности сайта при взаимодействии с внешними сервисами. Это выполняется в админпанели. Вот ссылка:Импорт из прайс-листа Excel: Данный способ понравится аптекам, которые по некоторым причинам не используют учётные системы типа 1С, и которым удобно вести каталог товаров в виде Excel таблицы.
Мы подготовили некоторый пример, по которому вы сможете быстро разобраться, как импортировать товары, если предпочитаете вести свою базу в форме прайса Excel и периодически обновлять сайт на основе такого прайса.
Используйте тот файл примера import-1.xls
как основу для создания своего прайса. Там набито 2800+ позиций (к сожалению без фоток) всяких медицинских препаратов типичной аптеки. Удалите лишние строки, проставьте в соответствующих колонках свои цены, наличие на складе, пропишите используемые вами артикулы вместо вымышленных в примере (или сотрите если не используете), пропишите вместо выдуманных настоящие имена фотографий, какие достанете или нащёлкаете со своих товаров.
Сохраните результат с помощью Файл » Сохранить как...
и укажите формат сохранения CSV (разделители - запятые) (*.csv)
. Создайте в админпанели вариант импорта, который и будет закачивать этот CSV-файл. Вот ссылка:
При создании варианта импорта укажите ему, что он работает с таким списком полей:
{/strip} sku, category [-] [-рубрика], model [-], price, quantity [есть:100], brand, largeImage{strip}
Как уже говорилось в первой главе, код вёрстки в шаблоне {themeName} и в самом деле простой. Он представляет собой обычный HTML с малым включением тегов ShortCodes, расставленных посреди тегов html-разметки страницы. Такой код позволяет даже фрилансеру, который впервые видит внутренности вашего шаблона, легко разобраться в макетах страниц и дополнить новыми блоками по вашему заданию.
Чтобы подтвердить сказанное примером, распечатаем иходный код какого-нибудь макета, например файла static_page.htm
- он служит для отрисовки центральной части статических постов блока "О нас".
{/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
- он служит для отрисовки пагинации в списках неких постов, то есть этот блок пагинации появляется внизу на страницах "Наша аптека", "Блог", "Советы врачей".
{/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 и тому подобные - создавались чтобы упростить построение или доработку сайта собственными силами. А если у вас всё равно возникли вопросы, или нет времени на доработку, или ещё мало опыта, задайте в обратную связь сайта Имперы. Вам подскажут или найдут тех фрилансеров, кто за некоторую денежку поможет с требуемой вам доработкой.
За картинки, фотографии и прочие графические материалы:
За шрифты, иконки и значки:
За средства разработки:
За тест адаптивности:
Замечание: Все изображения товаров, публикаций и прочее использованы в шаблоне только в демонстрационных целях. Они не являются частью поставки.
Хотим верить, наша скромная работа понравится вам за качество исполнения и внимание к деталям. Мы были бы очень рады, если эту понравившуюся работу вы порекомендуете своим друзьям или поделитесь в своей сети ссылкой на неё. Например так: