Пару месяцев назад я познакомился с движком modx. Вначале было очень трудно, хотя самоучителей по нему достаточно. Но некоторые из них застарели, некоторые были для других версий. Но в общем с работой и возможностями движка я разобрался, хотелось еще установить красивый шаблон modx , но тут я столкнулся с проблемой — шаблонов на модх как таковых нет. Сначала я расстроился, а потом понял насколько это круто, ведь на модх можно поцепить любой html -шаблон, при этом разбив его на чанки (детали шаблона) как угодно! В этой статье я и расскажу вам как легко установить шаблон modx , разбить его на части и как редактировать шаблоны modx .

Самое главное — это найти просто html-шаблон. Желательно адаптивный — чтобы открывался на разных устройствах с разной шириной экрана. Будем считать что Вы нашли такой (хотя в нашей случае подойдет абсолютно любой html шаблон). Далее нужно или залить файлы на хостинг, или создать там странички и скопировать содержимое. Но давайте все по шагам и как это делаю я.

Пошаговая инструкция по созданию и настройке своего шаблона modx

Итак, мы имеем шаблон — набор html и css файлов, возможно еще и скрипты.

1. Заходим в админ панель modx, вкладка Элементы-Шаблоны и жмем плюсик.

3. Жмем сохранить. Все, наш шаблон готов. Но чтобы проверить его работу, нужно создать тестовую страничку. Для этого Создаем новый ресурс (страницу), выбираем наш новосозданный шаблон и жмем сохранить. Не забываем отметить галочкой Опубликован .

Теперь открываем нашу страницу (введя вручную адрес в браузере или добавьте в меню для удобства). Если Вы все сделали правильно сайт должен открыться с Вашим новым html шаблоном, установленным на modx.

Свой шаблон modx: не показываются картинки и стили css

Хотя, скорее всего, шаблон может не открыться так как надо с первого раза. Будьте внимательны с расположением файлов . Обычно шаблон может «поплыть» и показываться без картинок. Все из-за того, что неверно прописан путь к файлам. Их нужно смотреть в самом файле шаблона и подставить туда, куда вы заливали на хостинг. Например, я заливал файлы в папку assets/template/test_shab /, поэтому в шаблоне прописывал что-то вроде assets/template/test_shab/img/favicon.ico и т.д. Все пути к файлам нужно сменить, поскольку стандартно все файлы находятся в папке с шаблоном, а в modx лучше их куда-то загружать (но это скорее для удобства, дабы не засорять систему).

Как сделать чтобы отображался контент modx на своем шаблоне

Если Ваш шаблон открывается и все картинки показываются — это хорошо. Но это еще не все. Сам контент, прописан через админку modx, не выводится. А почему? Потому что он не упоминается в шаблоне! Мы просто скопировали весь код из html-шаблона. Добавьте вместо контента в шаблоне чанк [[*content]] , который как раз и отвечает за вывод всего контента modx. В редакторе шаблона выглядеть это будет примерно вот так:

На этом пока заканчиваем. Если что-то не получилось — спрашивайте. Это пока не все, еще нужно будет разбить ваш шаблон на чанки , чтобы удобнее выводить контент и работать с сайтом.

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

но у нас ставится другая задача: сделать уникальный шаблон для MODx самим .

Для этого перейдем в Админ панель/элементы/управление элементами/шаблоны. Здесь, имеется ссылка: Новый шаблон . Переходим по этой ссылке:

В этой вкладке, мы и будем создавать новый уникальный шаблон для сайта на CMS MODx.

Итак, мы имеем четыре поля для введения описания шаблона MODx:

• Поле имени шаблона. Так как мы создаем главную страницу назовите шаблон index_1 .
• Описание шаблона. Напишите краткое название Вашего сайта, у меня это будет: Лучшие бесплатные CMS интернета .
• Существующие категории. Здесь можно выбрать категории: Content, Demo Content, Login, Forms… Выбираем категорию Content .
• Поле новая категория. Оставляем это поле пустым.

Как, Вы уже успели заметить, в этой вкладке все поля пустые, и самое главное поле: Код шаблона (HTML) MODx , тоже пустое, его нам и предстоит заполнить HTML -кодом. Не переживайте, знания языка гипертекстовой разметки нам не пригодится, писать в ручную HTML - код мы не будем. Для создания шаблона MODx мы воспользуемся специальной программой.

Для написания HTML шаблона мы воспользуемся визуальным html-редактором для быстрого создания сайта и Web-страниц:

Итак, приступим к созданию страницы при помощи программы: FrontPage 2003 .
После установки и запуска программы, откройте вкладку: Файл/создать , у Вас появляется меню следующего вида:

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

• Конструктор - режим создания страницы режиме визуального конструктра.
• С разделением - режим создания страницы с разделением в одной половине экрана режим конструктора в другой половине режим кода HTML.
• Код - режим создания страницы, при помощи языка HTML.
• Просмотр - режим отображения страницы в браузере.

Для того, чтобы создать Веб-страницу, разложим создаваемую нами страницу на составные части:

Теперь, мы визуально понимаем из каких частей состоят страницы и можем создать свою страницу.

Перейдем в режим: Конструктор и создаем в этом режиме, таблицы в соответствии с нарисованной нами структурой:

Отредактировать: размеры таблицы, фон, ширину границы, обтекание текстом и многое другое, можно при помощи вкладки: Таблица/Свойства таблицы/таблица:

После создания таблиц, заполним их соответствующим содержимым:

• Шапку страницы - изображением для шапки.
• Горизонтальное меню - ссылками на другие страницы сайта.
• Контент - статьями и изображениями.
• Вертикальное меню - ссылками на другие страницы сайта.
• Подвал страницы - счетчиками посещений и баннерами.

Выделим таблицу шапки, и при помощи вкладки: Вставка/Рисунок/Из файла… загрузим в таблицу заранее подготовленное изображение для шапки:

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

Прикрепим к каждому из пунктов меню гиперссылку. Делается это при помощи выделения пункта меню и клика правой клавишей мыши:

В появившемся меню добавления гиперссылок вводим адрес гиперссылки:

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

Для отображения в таблице «подвала», счетчика просмотров страницы, добавляем в таблицу Java - Script, с сервиса предоставляемого Яндексом.

После заполнения всех таблиц перейдите в режим просмотра страницы: Код . Копируем созданный в визуальном редакторе HTML - код и вставляем данный код в поле: Код шаблона (HTML) .

И не забудьте все изображения (картинки, шапки), нужно перенести на хостинг и заново в шаблоне прописать путь к изображениям. Обычно на сервере под графические файлы создают каталог под названием images . В таком случае путь к изображению у нас будет иметь http://ваш сайт /images/изображение.png - это только показательный пример, у Вас может быть по другому.

В поле: Имя шаблона вводим - Мой шаблон , а в поле: Описание - Лучшие бесплатные CMS интернета . Нажимаем клавишу: Сохранить . Вот мы и создали уникальный шаблон для CMS MODx.

Когда все подготовительные моменты закончены, перейдем непосредственно к тому, чтобы проанализировать скачанный шаблон, выделить в нем основные повторяющиеся части, такие как шапка, подвал, меню, левое меню, если оно есть, и натянуть их на CMS Modx. Ведь мы здесь и собрались для того, чтобы разобраться, как же получить бесплатный шаблон для Modx. Первым делом откройте шаблон Arbitrary , который мы скачивали в предыдущей статье и рассмотрите какие html файлы там есть. Для нас имеют значение файлы about, contact, gallery, index, services. Файл codes нас мало интересует, потому что содержит в себе различные типографские и функциональные единицы, к нему стоит обращаться по необходимости. Видим, что подвал, шапка и меню у страниц в основном одинаковое, отличается только главная страница, т.к. на ней под меню имеется слайдер, с нее и начнем.

В админке Modx переходим на вкладку Элементы-Шаблоны, видим шаблон BaseTemplate, переименовываем его в Главная. Оставляем содержимое шаблона вида:

[[$head]]




[[$header]]
[[$slider]]



[[$footer]]

[[$scripts]]

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

Начнем с чанка head. Предварительно создадим три TV поля для SEO, это поля seokeyw, seodesc и seoh1. Эти поля необходимы, для заполнения SEO информации о страницах нашего сайта. Расскажу на примере keyw, как создать поле, а далее по аналогии. Заходим Дополнительные поля-Новое дополнительное поле, имя seokeyw, подпись Keywords, параметры ввода оставляем по умолчанию Текст, доступно для шаблонов отмечаем Главная, других пока нет, но эти поля должны быть во всех видах шаблонов. Далее создаем оставшиеся 2 поля и для них категорию SEO, Дополнительные поля-Новая категория. Теперь у созданных полей отметим эту самую категорию.

Двигаемся дальше. Заходим Элементы-Чанки-Новый чанк. Имя head, далее копируем туда все, что содержит между тегами head из нашего скачанного шаблона. Но это еще не все, необходимо переписать пути к файлам, вынести скрипты в отдельный чанк scripts перед закрывающимся тегом body и приспособить title,keyword и description к Modx. Ко всем путям добавляем assets/, т.к. мы помним, что картинки, css и js заливали именно в эту папку. Затем добавляем конструкцию:

Она необходима для правильного отображения ссылок сайта и ЧПУ. Далее удаляем содержимое title и вставляем следующую конструкцию:

[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]

Она означает, что, если значение longtitle пусто, то выводим pagetitle, в противном случае longtitle. Это стандартные поля Modx, которые есть у каждого ресурса. Надеюсь, все знают, что это за поля. Далее по аналогии вставляем конструкцию с участием уже созданных нами SEO полей, если их значения пусты, то будет выводиться стандартный заголовок страницы, если же заполнены, то новые данные.

Теперь вынесем все скрипты(кроме jquery.min.js, ведь это инициализация jquery) в новый чанк scripts, который расположен перед закрывающемся тегом body, это улучшает скорость загрузки страницы, ведь скрипты подтягиваются немного позже, а страница не будет долго "зависать" в неприглядном виде. В итоге получим содержимое чанка Head:

[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]





addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }

А содержимое чанка Scripts:

new WOW().init();

Следующим этапом будет создание чанка header. По аналогии с чанком head создаем чанк и даем ему название header, затем копируем в него содержимое блока с классом header из нашего шаблона для Modx. В данном шаблоне в шапке отсутствую картинки, к которым нужно переписать пути, в логотипе содержится текст. Изменим содержимое этого логотипа на слово Test и в ссылку поставим слеш, это будет переход на главную. Следующим этапом будет созданием меню на Modx. Для этого можно использовать Wayfinder или pdoMenu, возьмем последний вариант. Для генерации простого меню, как в шаблоне, достаточно будет использовать весьма несложный вызов, но у нас есть определенный вид у пунктов меню, поэтому используем еще и шаблоны для оформления. И получим следующий код для вывода нашего меню:

[[!pdoMenu?
&parents=`0`
&tplOuter=`@INLINE

[[+wrapper]]

Шаблоны в отдельные чанки не выносила для экономии времени, но это не воспрещается, потом в параметрах вызова нужно будет только прописать нужные названия чанков. Полная документация по PdoMenu доступна по ссылке , там очень много параметров для вывода, подойдут почти для любого случая, если будут вопросы, вы всегда можете обратиться за помощью . В итоге получаем содержимое чанка header:

Toggle navigation




Test

[[!pdoMenu?
&parents=`0`
&tplOuter=`@INLINE

[[+wrapper]]

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

CMS MODX является дружелюбной системой для разработчиков, так как она представляет собой заслуживающий доверия CMF (Content Management Framework ). Примечательно, что MODX также подходит для дизайнеров:

WanChai является MODX темой для адаптивного одностраничного портфолио, построенного на Bootstrap 3 с чистым и современным дизайном. Она имеет настраиваемую секцию портфолио с расширяющимся просмотром и CSS3 анимацией при пролистывании:

Основанный на сетках () одностраничный адаптивный CMS MODX шаблон для цифрового агентства, фотостудии, малого бизнеса или фрилансеров. Возможности STYZO включают в себя корректный код HTML5 и CSS3 , полную кастомизацию в системе MODX , собственные анимации, настраиваемое портфолио, плагин Cube Portfolio , AjaxForm , блог, прейскурант и плагин JQuery Cycle :

Глянцевый, красочный, радующий глаз одностраничный дизайн, обрабатывающий большую часть переменных шаблона MODX и параметры темы. Построенная на основе Bootstrap 3.0 и разработанная с помощью LESS , эта тема снабжена набором опций, который позволяет контролировать каждый аспект сайта со стороны сервера:

Шаблон ClubCube – это идеальный выбор для ночного клуба. Его современный, запоминающийся дизайн незамедлительно привлекает внимание.

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

ClubCube является основанным на сетке (Twitter Bootstrap Grid System ), адаптивным HTML5 шаблоном. Он позволяет реализовывать функционал, который будет:

• сообщать о событиях;
• публиковать фотоотчеты;
• выполнять бронирование;
• просматривать меню:

Neat является чистой, быстро загружающейся темой MODX , построенной с помощью модульных файлов Sass , для быстрой и легкой настройки пользовательского интерфейса. Тема использует мощную серверную часть MODX с большим количеством параметров и настраиваемых полей:

Тема имеет 3 шаблона, настраиваемые поля для изображений, файлы css/js/image и упакована в transport.zip . Поддерживает меню Wayfinder и Formlt для фрагментов формы обратной связи. В теме есть два меню: первое – это меню прокрутки для одностраничного сайта, а второе – для многостраничного (сниппет Formlt ):

Является современной одностраничной анкетной/персональной темой для MODX CMS CMF , построенной на Bootstrap 3 с большим количеством опций для настройки. В ней есть раздел резюме с чистой разметкой и анимированными графиками, секция портфолио и раздел каталога. Вместе со сниппетами, которые поставляются с шаблоном, легко создавать собственный контент, который согласуется со стилем темы:

TREDD STUDIO представляет собой одностраничный адаптивный MODX шаблон на основе сетки (Twitter Bootstrap Grid System ) для цифрового агентства, фотостудии, малого бизнеса или фрилансеров. Возможности TREDD STUDIO включают в себя: корректный код HTML5 и CSS3 , полную настройку в системе MODX , настраиваемое портфолио, прейскурант, плагин JQuery Cycle :

Основанный на сетке (Twitter Bootstrap Grid System ) одностраничный адаптивный CMS MODX evolution шаблон для музыки и музыкальных групп. Он включает в себя отличные функции и графику:

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

Многофункциональная одностраничная MODX тема для целевой страницы приложения или демонстрации продукта.

Построена с помощью фреймворка Bootstrap 3 , который включает в себя адаптивную, ориентированную на мобильные устройства, систему сеток. Соответствующим образом она масштабируется до 12 колонок по мере увеличения размера окна просмотра:

Является чистой, плоской, стильной CMS MODX темой «сайта в разработке » с работающей формой подписки на новости для формирования аудитории. С помощью панели настроек темы MODX можно настроить почти любой аспект новой страницы. Смотрите скриншот ниже:

Современная адаптивная одностраничная MODX тема для портфолио. Она подойдет для любого вида бизнеса, которому необходимо продемонстрировать свое портфолио.

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

Полностью адаптивный макет, который прекрасно подстраивается под разрешения мобильных устройств, планшетов и ПК:

Состоит из одного шаблона, настраиваемых полей для большей части контента, css/js/image файлов и упакован в файл transport.zip . Поддерживает сниппеты Wayfinder и Formlt (меню и форма контактов ):

Это полностью адаптивная CMS MODX тема с чистым и минималистичным дизайном, который подходит для любого вида творческого и коммерческого использования. Base оптимизирована под мобильные устройства и персональные компьютеры, построена на основе фреймворка Bootstrap 3 .

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

Отличительной особенностью является то, что для MODx используются самые обыкновенные html шаблоны, а их в интернете десятки тысяч экземпляров, да к тому же, большинство из них совершенно бесплатны. Так что если вы выбрали данный движок для своего проекта, то проблем с дизайном возникнуть не должно.

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

Мы с вами будем разрабатывать сайт на основе шаблона Retina — Free Template от производителя – chocotemplates. Скачать его можно по этой ссылке – ссылка на шаблон .

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

Архив включает в себя следующие файлы.

Index.html – этот файл нам не нужен, разработчики сделали его, чтобы демонстрировать работу шаблона на различных устройствах.

А папка «defaul» в свою очередь имеет вложение директории.

В папке «css» — хранятся стили и изображения, используемые в данной теме (папка «images»).

В папке «js» — содержатся файлы библиотеки jquery, а также скрипты подключения слайдера на главной странице сайта.

Файл home.html – основной файл html шаблона именно его мы и будем использовать.

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

После того, как вы разберетесь со структурой шаблона, можно приступать к работе с системой. Все шаблоны для MODx хранятся в папке /assets/templates/, именно туда нам и нужно залить папку с шаблоном. Директорию я назову «Retina». В эту папку заливаем все файлы которые находятся в директории «default». У вас должно получится следующее.

Теперь переходим в административную панель сайта в раздел и авторизуемся. Сделать это можно по адресу http://вашсайт.com/manager .

Сейчас там есть шаблон с демо данными, его мы трогать не будем, а чуть ниже размещен шаблон под именем – «Minimal Template». Именно его мы и будет начинать править.

Заполняем два поля:

• имя шаблона;
• описание.

Чуть ниже, в поле – «Код шаблона HTML», нужно вставить код страницы index.html, которая размещена у вас на сервере по адресу — /assets/templates/retina/home.html.

Вот как это сделал я.

После чего в верхнем правом углу жмем кнопку «Сохранить». И идем на сайт смотреть, что у нас получилось.

Как видите, структура сайта подключилась, стили и скрипты не подключены. Дело в том, что у нас поменялся путь ко всем этим файлам. Сейчас мы это исправим.

Для этого опять переходим в админ панель в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны» и нажимаем редактировать шаблон «Главная».

Для начала между тегами , прописываем базовый путь для шаблона, делается это с помощью этого кода:

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

Маленькое отступление – на CMS MODx, придется много работать с кодом, поэтому советую вам поставить редактор Notepad++, он отлично подойдет для правки шаблонов.

Итак, для примера, если изображение в оригинальном шаблоне подключается вот таким образом.

То в MODx нужно изменить его на вот такую конструкцию.

То есть во всех путях добавляем приставку:

/assets/templates/retina/

Если вы называли папку шаблона по другому, то «retina» нужно изменить на ваше название.

Для облегчения работы можете использовать в редакторе Notepad++ поиск по слову «src». Так вы сможете проверить, все ли элементы подключены.

После проделанной работы сохраняем наш шаблон «Главная» и идем на сайт смотреть на результат. Если вы сделали все правильно, вы должны увидеть следующую картину.

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

Подписывайтесь на обновления, чтобы ничего не пропустить.