И так, начнем с самого начала. Меня зовут Максим, он же LUCEfeel, думаю вы уже ранее видели мои адаптации на других сайтах, и сегодня в данной статье я расскажу вам как сделать адаптацию стороннего шаблона под datalife engine. Можно так сказать том первый.
Что нам для этого понадобиться:
- Программа для скачивания файлов (я пользуюсь Download Master)
- Программа для редактирования html ,php, tpl файлов (Dreamweaver, Notepad +)
- Браузер (желательно опера)
- Прямые руки и терпение!)
И так поехали! Для начала найдем шаблон, который нам понравиться. Советую выбирать из платных вариантов, которые идут с демкой. К примеру возьмем этот http://livedemo00.template-help.com/joomla_36479/ , Это уже готовая демка платного шаблона.
- Зашли на сайт, видим шаблон, при помощи браузера нам нужно просмотреть исходный код (Вид \ Средства разработки \ Исходный код). И так, первый этап выполнен, прём дальше!
- Видим перед собой сам код, в нем обычно куча скриптов, стилей и изображений, теперь пускаем в ход Download Master, и начинаем скачивать всё, что есть (те же картинки, жаба скрипты и стили). Честно говоря, это самое нудное дело, т.к шаблоны joomla всегда перегружены графикой и скриптами. (но вы можете по такому подобию выбрать совершенно другой шаблон, либо wordpress, html, php).
- Закачали с горем пополам. Далее не менее нудная работа, нам нужно перекачать все изображения стилей. К примеру адрес стиля будет таков
http://images.livedemo00.template-help.com/joomla_36479/templates/theme844/css/general.css
Мы копируем это строку в браузер, и перед нами открылся стиль, наша задача перекачать все картинки из него. См. ниже
- Есть, готово. Теперь переходим к следующему шагу, открываем снова исходный код шаблона и берем исходник. См. ниже
- Скопировали. Теперь создаем через Dreamweaver пустую страничку формата html и вставляем туда наш исходный код. См. ниже
Не обращайте внимание на колонки, они нам не нужны, ибо у нас шаблон уже готовый есть. Вот что у нас получиться. См. ниже
- Теперь наша задача такова
А) Убрать все лишние ссылки, сменить кодировку шаблона
Б) Вместо ссылок на картинки, прописать пути изображений (как?) – {THEME}/images/blabla.gif Таким макаром
В) Прописать стили и скрипты (как?) - {THEME}/js/vasya.js либо стиль {THEME}/style/engine.css
- В итоге мы получаем полностью рабочую главную страничку, НО, нам еще нужно вставить сами тэги, которые будут отвечать за вывод контэнта, календаря и различный дополнений.
1. Для этого, мы сначала ставим после тэга вписываем {headers}
2. В Dreamweaver вы должны были заметить расположение новостей (текст) Убираем этот текст и вместо него, прописываем {info}{content}
3. Далее, вам нужно просто через Dreamweaver просмотреть расположение блоков, заменить их название, убрать лишние предложения и вставить нужные вам тэги, например вывод календаря или блок онлайн.
4. После всех манипуляций, можно считать что главный шаблон готов, сохраняем его через Dreamweaver (Сохранить Как \ ) сохраняем его как main.tpl. Не забудьте положить изображения и скрипты со стилями так, как вы прописали их в самом шаблоне.
И так, это начальный этап, обычно остальные файлы закидывают из других шаблонов, мало кто адаптирует шаблоны полностью, но если вам далее будет интересно, я могу написать дополнительные статьи (как адаптировать полную и краткую новость, панель пользователя, информацию о пользователе)
Прочитав данную статью, вы должны были освоить базовый метод адаптации шаблона, как и чем пользоваться, и вообще что с чем едят.