Шаблоны imagecms corporate. Процесс адаптации шаблона под ImageCMS

Вайбер на компьютер 26.03.2019
Вайбер на компьютер

Недели 2 назад подписался я, значится, под создание сайта-визитки частной охранной организации, в которую, собственно, и устроился. Узнав, что я промышляю заработком в Интернете, одним из первых вопросов было "А сможешь сделать нам новый сайт?". Это у них как рефлекс. Не знаю почему, но все спрашивают.
Всем нужен сайт, им глубоко начхать, что трафа в этой теме кот наплакал и даже имея первые позиции, посетителями будет десяток праздно шатающихся, роботы поисковиков, ну и сами сотрудники. Но имидж ведь! Они вроде одни из топовых охранных организаций Пензы, у конкурентов свои сайты-визитки имеются. Вот и у них имеется...
На данный момент представляет из себя настолько унылое зрелище, что просто диву даешься как можно быть настолько бездарным и не стыдно ли брать деньги за ЭТО?

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

  • главная страница называется... подождите-подождите... "Главная"
  • H1 сделан картинкой в шапке
  • в коде 3 сквозных ссылки, стилями вынесенные за предел видимости (создатели шаблона молодцы)
  • нет ни одной ссылки (Solomono и Ahrefs показывают нули)
  • сайт даже по наименованию организации находится за ТОП 10

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

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

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

Кстати, я впервые увидел человека, который пользуется Рамблером. Вернее РамблЕ ром. При том именно старой версией (там есть Вернуться в старый дизайн , вот он ее постоянно юзает). Типичный консерватор, не разбирающийся в сайтах. Ну это я все к тому, с кем приходится иметь дело.

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

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

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

Да это и не главное! ImageCMS сделана на фреймворке CodeIgniter, что позволяет достаточно легко дорабатывать код под себя. Ну по крайней мере для тех, кто знаком с PHP.

Функционал весьма впечатляет:

Скачал, распаковал. Файлика readme.txt или install.txt не нашел, поэтому просто набрал главную и движок послушно выдал страницу установки.

Надо сказать, что я ненавижу читать тонны документации, а предпочитаю разбираться что и как на месте.
Здесь поступил также. Установка довольно простая в 2 шага, если не считать соглашения с лицензией: смотрим, что с файлами и PHP-модулями всё ОК, прописываем данные для подключения к базе данных и данные для доступа в админку. Если хоть раз устанавливали WordPress, то проблем каких-либо затруднений не должно быть.
После установки, которая у меня заняла меньше минуты, выдает окно об окончании установки:


Идем в админку, находящуюся по адрес http://site.ru/admin/

Первое, что сделал - удалил ненужные категории (Категории → Редактировать ). Я оставил только Услуги и Новости, т.к. эти разделы будут присутствовать на сайте.

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

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

Есть возможность разграничить доступ к странице:

Чтобы назначить главную страницу, нужно пройти в раздел Система → Конфигурация сайта → Главная страница :


Затем изменил меню в соответствующем разделе:


В разделе "Модули" отключил все ненужное мне:

Шаблон можно редактировать прямо из админки (Система → Редактор шаблонов ), но мне было проще залезть в папку template/default . Открываем main.tpl и редактируем: меняем слоган, телефоны, сайдбар, копирайты. Я удалил также слайдер, т.к. не нужен он.

В итоге получилось такая вот простая и симпатичная сайт-визитка за пару часов:


В общем, я пишу дольше про CMS, чем разбирался и сделал сайт на ней.
Мне теперь осталось лишь добить остальные страницы и получить оплату...

Что еще хотелось бы отметить в данном движке - это SEO-friendly, т.е. прекрасно подходит для продвижения.

Без различных дополнительных плагинов, как это бывает в Джумле или ВП, ImageCMS сразу включает в себя необходимые функции для оптимизации:

  • прописывание meta-тегов, title, description и keywords
  • sitemap.xml
  • хлебные крошки
  • перелинковка по заголовкам
  • корректная 404 ошибка

Также движок имеет дополнительный модуль, который позволяет легко встраивать статистики (Яндекс.Метрика, Google Analytics, Я.Вебмастер, G.Вебмастер).

Система ImageCMS Shop Premium представляет собой особую сборку с расширенными возможностями для самых требовательных клиентов.

Основные аспекты развития версии 4.4
модульность - написали как функционал для удобного создания модулей в дальнейшем;


работа с изображениями;
оптимизация шаблона.

Модернизация системы
изменение подхода к формированию изображений продукта;
изменение размера изображений и применение водного знака;
создание нового заказа менеджером;
управление сортировкой продуктов в каталоге.
Новые модули ImageCMS
“Узнать о снижении цены” (версия ImageCMS Shop);
“Авторизация через социальные сети” (версия ImageCMS Corporate & ImageCMS Shop);
“Нашли дешевле” (версия ImageCMS Shop);
“Управление баннерами” (версия ImageCMS Corporate & ImageCMS Shop).
Подробнее об улучшениях системы
Изменен подход к формированию изображений продукта
Отныне можно создавать необходимое количество изображений разного размера. Используйте эту возможность, чтобы обогатить магазин медиа-контентом.

Изменение размера изображений и применение водяного знака.

Если в ходе работы вы решили изменить водяной знак либо применить размер, это будет проще сделать с функцией Resize:


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

Взяв во внимание идеи нашего сообщества, мы изменили способ создания заказа из панели администрирования. Заменив пошаговую стратегию создания нового заказа (операции с момента поступления звонка вашему менеджеру и формирования его в админпанели), на более наглядную схему “All-on-Desk”, решили проблему последовательности поступления информации менеджеру.


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


Среди дополнительных функций предоставлена возможность изменить порядок вывода, название на сайте, указать подсказку и так же изменить видимость опции на сайте.
Новые модули ImageCMS
(версия ImageCMS Shop)

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


Модуль доступен пользователям бесплатно с магазина расширений
Авторизация через социальные сети (версия ImageCMS Corporate & ImageCMS Shop)

Теперь вашим клиентами не нужно создавать еще один аккаунт на вашем сайте для того, чтобы себя идентифицировать - достаточно будет всего лишь выбрать один из предоставленных сервисов: Google, VKm Facebook или Яндекс.

Модуль “Нашли дешевле” (версия ImageCMS Shop)

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

На этом список не заканчивается. Магазин дополнений также пополнили
модуль “Управление баннерами” для сборок как Corporate, так и Shop;
модуль “Расширенные новости” позволяет управлять отображением новостей на определенной категории товаров, не выводя их на других. Теперь возможны уникальные новости на каждой категории;
возможность распечатать товар будет предоставлена соответствующим модулем, который пока в бета-версии, но скоро мы сможем анонсировать стабильную версию;
так же подготовлено два псевдо-модуля для разработчиков. Это модуль “Оповещение о новом комментарии”, который является вполне функциональным модулем и подробно документированным руководством по созданию своего расширения. Так же доступен “Каркас модуля” - программный каркас для разработчиков модулей. Интересно узнать больше о возможности создания собственного расширения? Читайте подробное .
Другие изменения, коснувшиеся этого релиза
правки настроек пунктов меню;
добавлен класс mediaManager для управления изображениями;
доработки средств автоматизации: 1С и СSV;
улучшено формирование тегов типа no-index и canonical, другие моменты, касающиеся SEO;
изменена работа дополнительных полей типа “заказ” и “профайл”;
добавлена обработка ссылок-дубликатов (содержащих двойной слеш “//”, и учет регистра);
улучшен список сравнений;
добавлена возможность управления дополнительной валютой на фронтальной части сайта;
работы с шаблоном по обеспечению кроссбраузерности.

Процесс адаптации шаблона под ImageCMS.


Основой шаблона на ImageCMS Corporate стал шаблон . Кроме того при его создании была использована по созданию корпоративного сайта на базе ImageCMS Corporate. На ее основных положениях мы сейчас останавливаться не будем, а рассмотрим главные этапы создания нового шаблона.
В базовом шаблоне ImageCMS Corporate, в отличие от верстки Templatemonster, стали доступными некоторые страницы. В результате этого в новом шаблоне имеются некоторые ограничения.
Главное меню не может содержать более 5 пунктов;
не поддерживается фотогалерея;
ограничения на странице блога (последние комментарии, теги).
Для создания нового шаблона понадобилось сделать 26 настроек, на что ушло 3 часа. Это был мой первый опыт создания шаблона для ImageCMS, поэтому в дальнейшем, думаю, время можно сократить практически вдвое.
Настройки:
1. В папке templates создаем папку шаблона, которую называем motheme (как шаблон на templatemonster). В нее копируем содержимое дефолтного шаблона (папка templatesdefault)
2. В папки: css, js, images загружаем скрипты, стили и рисунки, которые будем использовать при верстке вместо тех, которые применяются в дефолтном шаблоне.
3. Весь html-код с файла верстки index.html копируем в main.tpl, из дефолтного шаблона оставляем только meta-теги.
4. Для корректного вызова классов, скриптов и рисунков дописываем к пути вызова переменную {Theme}, к примеру

5. В администраторской части заменяем в конфигурации сайта дефолтный шаблон на новосозданный.
6. Ссылку на главную страницу {site_url("")} ставим на логотип в файле main.tpl.
7. Переменные, отвечающие за вход/регистрацию, вставляем в правый верхний угол шаблона в файле main.tpl
8. Код, вызывающий главное меню сайта {load_menu("main_menu")} вставляем в файл main.tpl. Для того, чтобы меню отображалось согласно шаблону, в папке main_menu вносим правки в файл main_menulevel_0container.tpl
9. В разделе “Меню-Главное меню” администраторской части уменьшаем количество пунктов до 5 (поскольку больше шаблон не поддерживает). Убираем также галерею (шаблоном не поддерживается).
10. Чтобы слайдер выводился только на главной странице, ставим возле него в файле main.tpl условие {if $page_type == "main"}
11. Поскольку структура главной страницы несколько отличается от структуры внутренних, в файле main.tpl в месте вывода контента главной страницы ставим условие

12. В файл page_full.tpl для отображения страниц согласно макету вставляем необходимый html-код.
13. Заходим в администраторскую часть и убираем отображение комментариев на главной странице.
14. Новости компании отображаются при помощи виджета news, поэтому правим html-код в папке widgetsnews.tpl согласно макету. В администраторской панели уменьшаем количество новостей в настройках этого виджета до 2-х для правильного их отображения.
15. Для отображения продукции на главной странице создаем дополнительный виджет, который называем product_main, тип “Последние новости”. В настройках указываем отображение 4-х новостей и правим отображение в файле widgetsproduct_main.tpl. Затем ставим в нужное место шаблона при помощи блока: {widget("product_main")} .
16. После этого в файле main.tpl вставляем в футер текст для клиентов.
17. Вставляем нижнее меню в файл main.tpl при помощи блока:{load_menu("bottom_menu")}. Заходим в редактирование меню “Нижнее меню” в админке, указываем использование шаблона bottom_menu. Правим файл bottom_menulevel_0container.tpl в папке bottom_menu таким образом, чтобы меню отображалось в согласии с шаблоном.
18. Вставляем ссылки на социальные сети в файле main.tpl в футере.
19. Изменяем контактную информацию файле main.tpl в футере.
20. Вставляем ссылки на лого и копирайт в файле main.tpl в футере.
21. В файле main.tpl в том месте, где у нас отображается контент главной страницы с помощью переменной {$content}, ставим дополнительное условие, чтобы в разделе “Продукция” справа отображался виджет со всеми продуктами. После этого настраиваем сам виджет продуктов в файле widgetsproduct_all.tpl.
22. В файле category.tpl настраиваем отображение категории “Продукция”.

23. В файле application/modules/feedback/templates/feedback.tpl. согласно дизайну настраиваем отображение обратной связи.
24. В файле main.tpl в месте отображения контента главной страницы при помощи переменной {$content} выставляем доп. условие отображения всех дополнительных категорий “Блога” в разделе “Блог” с правой стороны.
25. В файле blog.tpl. настраиваем отображение раздела “Блог” в соответствии с дизайном.

26. В файле news.tpl. настраиваем отображение раздела “Новости” в соответствии с дизайном.
Шаблон для ImageCMS Corporate завершен и готов к использованию. Также на его основании можно делать и другие шаблоны для своих целей.

Система ImageCMS продолжает устраивать конкурсы. Буквально недавно рассказывал про а вчера стартовал еще один . В этот раз больше для дизайнеров и всех тех вебмастеров, которые знакомы с фотошопом + созданием сайтов. Здесь пригодятся и те, и другие навыки. Суть конкурса — вам нужно нарисовать шаблон для системы управления сайтами ImageCMS Corporate.

ImageCMS Corporate — это бесплатная Open Source система для разработки веб-проектов, которая включает в себя все основные функции: меню, пользователи, мультиязычность, формы, комментарии, кэширование, пользователей, галерею и т.п. Она достаточно проста в использовании и удобна. Скачать ее можно на официальном сайте. Кстати, в рунете заняла шестое по популярности место после таких монстров как WordPress, TYPO3, Joomla, Drupal.

Для конкурса нужно сделать 2 вещи — собственно, создать шаблон, а потом его «зарегистрировать». Звучит немного сложновато, но если пошагово выполните все инструкции, то проблем не возникнет. Итак:

Этап 1. Создание шаблона для ImageCMS Corporate

1. Скачиваете с официального сайта самую последнюю сборку ImageCMS Corporate.
2. Нужно буде создать на локальном компьютере виртуальный сервер — используете для этого XAMPP или Денвер (в статье есть про установку)
3. Изучить инструкцию создания шаблона .
4. Создайте свой шаблон, переделав базовый вариант. Таким образом, вы должны будете вносить изменения и свои правки только в текущий шаблон — templates/default. При этом по желанию можете изменить структуру, но данные менять нельзя.

В результате работы у вас должен получится архив базового шаблона — папки templates/default, который будете предоставлять на суд жюри. В этот же архив нужно включить скриншоты дизайна вашего шаблона. Основные критерии в конкурсе — качество дизайна и верстки.

Этап 2. Регистрация шаблона

1. Первым делом регистрируетесь на сайте ImageCMS .
2. Входите в учетную запись, где находите «Мой магазин» и кликаете по кнопке «Добавить».
3. Добавляете свой шаблон, при этом крайне желательно прикрепить парочку скриншотов + обязательно в начале описания укажите «На конкурс шаблонов». Желательно чтобы в архиве шаблона также были скриншоты.
4. Дальше остается следить когда ваш шаблон появится в магазине дополнений. Увидели? — размещаете ссылку на него в соц.сетях или своем блоге. На этом все.

После этого просто ожидаете результатов конкурса. Старт его был дан 3.06, продлится прием шаблонов ImageCMS до 28.08.13. Итоги огласят 2.09.

Что касается призов

1 место: $400 + 1 лицензия ImageCMS Shop Premium (которая стоит 600 баксов), а также 5000 рублей на счет фотобанка Лори. Кроме того, получите 50% скидки на любой шаблон в TemplateMonster Russia и 50% на сервис Jivosite. Кстати, в блоге я как-то уже писал. Плюс была статья — есть там хорошие шаблоны.

2 место: $300 + также одна лицензия ImageCMS Shop Premium. По скидкам — 50% на шаблон в TemplateMonster Russia и 30% на Jivosite.

3 место: $150 + также одна лицензия ImageCMS Shop Premium. Скидки — 30% на Jivosite и 20% на шаблон TemplateMonster.

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



Рекомендуем почитать

Наверх