Imagecms шаблоны торрент. Адаптируем шаблон из магазина Templatemoster под ImageCMS

За основу разработки шаблона на ImageCMS Corporate был взят шаблон http://www.templatemonster.com/ru/website-templates-type/43798.html . Также при создании данного шаблона использовалась .

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

Поскольку в верстке Templatemonster были недоступны некоторые страницы, которые доступны в базовом шаблоне ImageCMS Corporate, в результате шаблон получил несколько ограничений:

  • Главное меню может содержать максимум 5 пунктов.
  • Данный шаблон не поддерживает фотогалерею.
  • Данный шаблон будет иметь несколько ограничений на странице блога (теги, последние комментарии).

В сумме процесс создания шаблона потребовал 3 часа рабочего времени (здесь стоит учесть, что это — первый мой шаблон для ImageCMS и я думаю, что в будущем можно было бы сократить до 1,5-2 часов). В целом, для его создания пришлось сделать 26 различных настроек, о которых я напишу ниже.

1. Создаем папку шаблона в папке templates, называем ее motheme (как назывался шаблон на templatemonster), копируем туда содержимое дефолтного шаблона с папки templatesdefault.

2. Загружаем все рисунки, стили, скрипты, которые используются в верстке вместо применяемых в дефолтном шаблоне в соответствующие папки: css, js, images.

3. Открываем файл main.tpl и копируем в него весь html-код с файла верстки index.html, оставляем только meta-теги, которые используются в дефолтном шаблоне.

4. Для всех рисунков, скриптов, классов, которые вызываются в шаблоне, дописываем к пути вызова переменную {Theme}, к примеру

, чтобы они корректно вызывались для данного шаблона.

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

7. В файле main.tpl вставляем в правый верхний угол шаблона переменные, которые отвечают за вход/регистрацию.

8. В файле main.tpl вставляем код, который вызывает главное меню сайта {load_menu(‘main_menu’)}. Далее заходим в папку 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, заходим в папку widgetsnews.tpl и правим согласно макета html-код. Дополнительно в администраторской панели в настройках данного виджета уменьшаем количество новостей с 3 до 2, чтобы он правильно отображался согласно макету.

15. Создаем дополнительно виджет для отображения продукции на главной. Называем его product_main, тип “Последние новости”, в настройках указываем отображать 4 новости, далее правим отображение в файле: widgetsproduct_main.tpl. После этого вставляем в нужное место в шаблоне, с помощью блока: {widget(‘product_main’)} .

16. В файле main.tpl вставляем в футер произвольный текст для клиентов.

17. В файле main.tpl вставляем нижнее меню с помощью блока: {load_menu(‘bottom_menu’)}. В админке заходим в редактирование меню “Нижнее меню” и указываем, чтобы использовался файл шаблона bottom_menu. После этого правим в папке bottom_menu файл bottom_menulevel_0container.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 завершено, шаблон можно использовать в своих целях, либо делать на его основании похожие. Также прилагаю ссылку на сам шаблон, чтобы вы смогли посмотреть результат.

Как уже говорил в прошлом посте, последнее время я достаточно плотно работаю с Image CMS. Для тех, кто вырос из WordPress, связываться с Joomla не хочет, но тем ни менее желает получить функциональную open source систему управления контентом для корпоративного сайта, эта CMS подойдет, как нельзя кстати. Движок набирает обороты, становится популярным, но есть одна загвоздка. На сегодняшний день, кроме дефолтного шаблона не существует ни одного адекватного шаблона для Image CMS. На официальном форуме эта тема постоянно поднимается, но бесплатных шаблонов как не было, так и нет.
На самом деле сверстать свою тему для Image CMS достаточно просто, что я и постараюсь сегодня продемонстрировать.

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

main.tpl - это основной шаблон нашего будущего сайта, он отвечает за генерацию header, footer, сайдбара и прочих элементов.
category.tpl - шаблон категории. Редактируя его мы сможем настроить отображения страниц разделов нашего сайта.
page_full.tpl - шаблон внутренней страницы.
homepage.tpl – шаблон для главной страницы сайта.

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

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

Начнем с main.tpl
После открытия тега < head > прописываем правило

{$page_type = $CI->core->core_data[‘data_type’];} ,

Подключим таблицы стилей css и javascript’ы
Убедимся, что все файлы находятся в соответствующих директориях. Для удобства обозначаем пути к файлам папки шаблона через переменную {$THEME} .
Например,


{if $page_type == ‘main’} (если тип страницы «главная»), то запускаем слайдер:

Не забываем редактировать адреса картинок, а все javascript обрамлять {literl}….{/literl}) !

Теперь главный шаблон main.tpl готов, а к homepage.tpl мы вернемся чуть позже.
А пока оформим категории.

Мы «одели» в html-код регулярные выражения, присущие категориям Image CMS:
{$category.name} - название категории
<а hrеf=»{site_url($page.full_url)}»>{$page.title} — ссылка на страницу
{$page.prev_text} - предварительное содержание страницы
Также мы внедрили дополнительное поле {$page.field_image} - картинку-миниатюру для страницы, которая будет отражаться в категории (это дополнительное поле необходимо подключать через админку).

Теперь настроим отображение внутренних страниц. Займемся файлом page_full.tpl.
Тут еще проще — оперируем лишь:
{$page.title} - заголовок страницы
{$page.full_text} - полное содержание страницы
{$page.field_image} - миниатюра

После того, как мы задали дизайн внутренним страницам и категориям, вернемся к файлу homepage.tpl и займемся оформлением главной страницы. Я специально оставил эту работу напоследок, так как в файле homepage.tpl мы будем работать с виджетами. Виджеты необходимо заранее создать и настроить через админку! Дабы не усложнять процесс разработки я пошел простым путем: использовал лишь два виджета: news и works, все остальное пространство между слайдером и виджетами пустил под отображение контента.

Виджет ‘works’ отображает последние три записи с миниатюрами из указанной категории.

Система 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%-тным веб-дизайнерам. Но шансы есть у всех.

Недели 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.Вебмастер).