Приветствую, вот мы и добрались до того момента когда пора устанавливать шаблон на свой сайт. В этом уроке мы разберёмся как установить свой шаблон на ucoz через специальную программу. Эта программа абсолютно бесплатна и очень проста в использовании.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
Я уже коротко упоминал об этой программе в уроке как добавить файлы на сайт ucoz, даже есть видео в котором показываю как работать с это программой. Программа называется filezilla, и её можно скачать на сайте http://filezilla.ru/.
Устанавливается программа тоже очень просто, в этом вы сможете разобраться сами. Если вдруг что-то будет не понятно, вы всегда сможете перейти на страницу как добавлять файлы на сайт по ссылке выше и просмотреть видео инструкцию по работе с данной программой.
Поиск шаблонов
После регистрации своего сайта, которую мы произвели в прошлом уроке, следующим шагом на пути создания сайта будет выбор и установка на него шаблона. Если вы не хотите сильно мучится, можете заказать услугу у специалиста в интернете или заказать эту услугу у меня.
Специалист установит на сайт понравившийся вам дизайн и его нужно будет только настроить под себя. Так-же можно установить стандартный шаблон который уже присутствует в системе ucoz.
Выбор ниши:
Перед тем как идти на просторы интернета и скачивать или покупать дизайн, у меня в голове сидит образ моего сайта, а точнее тематика моего сайта.
Из серии уроков как создать сайт на ucoz, я покажу пример создания сайта для флеш игр. По тому принципу которому мы создадим этот сайт, можно будет создавать любой сайт в системе ucoz и не только в ней. Такие сайты будут посещать люди и приносить прибыль их владельцам при условие что всё было сделано правильно!
И так, с тематикой сайта я определился, это буду флеш игры, вы-же в свою очередь должны держать образ своей тематике и точно знать что это будет за сайт и какая на нём будет собираться информация.
Идём немного дальше, тематика которую выбрал я очень огромная, то-есть в интернете очень много флеш игр на разные темы, стрелялки, бродилки, для девочек, для мальчиков, ну и так далее.
Если создать сайт на большую тематику и впихивать в него всё подряд, такой сайт будет очень трудно раскрутить в поисковых системах, а в результате и сил будет много потрачено и результата не какого.
По этому я из огромной нише флеш игры, выберу под нишу, то-есть в нише флеш игры я выберу нишу про стрелялки и буду заполнять сайт только этими играми. В дальнейшем я покажу как определить что выбранная вами нища имеет спрос на рынке, другими словами ищут ли люди в интернете ту информацию которую вы собираетесь выкладывать на сайт.
Идём в интернет:
И так, с тематикой сайта я определился, теперь открываю яндекс и ввожу слово скачать бесплатно шаблоны для ucoz. В первой-же выдачи, мне попадается сайт который я хорошо знаю, на этом сайте я не однократно покупал шаблоны для своих сайтов — utemplate.pro
Сегодня покупать не чего не буду, это сделаю когда сайт немного станет посещаемый, по этому на этом сайте я перехожу в раздел бесплатные.
Мне на глаза попадается очень интересный шаблон, перейдя на страницу шаблона, я изучаю его характеристики и скачиваю. Адрес шаблона — если вдруг захотите скачать его.
У большинство шаблонов которые вы качаете в интернете, есть инструкция как его устанавливать, конечно установив несколько шаблонов, вы в будущем будете устанавливать любой шаблон без инструкций, но на первых шагах советую искать шаблоны с пошаговой схемой для установки.
Устанавливаем
Раскрыв скаченный архив, передо мной в папке появились тринадцать элементов, из них я нахожу файл с инструкцией, обычно это текстовый файл создан из блокнота. Такая инструкция в разных шаблонах может называться по разному, в моём случае это ReadMe_RUS.
Открываю начинаю изучать, первым делом там сказано что мне нужно загрузить папки на сайт через программу. В моём случаи это две папки img и js. Запускаю программу filezilla, теперь что-бы соединится с моим сайтом мне нужно в вести следующие данные, хост, имя пользователя, пароль.
Где взять эти данные? Для этого я отправлюсь в панель управления сайтом, «Как это сделать можно посмотреть по ссылке» для того чтобы нажму на кнопку FTP — детали, которая находится на главной странице в панели.
После откроется помощник с данными для нашей программы. Скопируйте эти данные и вставьте в программу и не забудьте установить пароль.
Что бы установить пароль нажму на кнопку под номером 4, меня перекинет на страницу где нужно два раза ввести новый пароль, и секретный вопрос в данном случае это номер моего телефона. У вас должно быть точно так-же. Нажму кнопку сохранить.
Пароль установился, теперь пройду в программу filezilla и введу все данные из помощника и пароль, после чего нажму кнопку быстрое соединение. Если все сделано правильно, тогда в программе в правом окне появится надпись пустой список каталогов.
Теперь из левого окна, на рабочем столе я найду папку с шаблоном, ниже под этим окном откроется содержимое этой папки, из этого содержимого нужно перетащить две папки с фалами в правое окно, произойдёт закачка и файлы должны загрузится на сайт в файловый менеджер.
Что-бы в этом убедится, пройдите в файловый менеджер и посмотрите появились -ли папки которые вы загружали. В моём случае всё на месте. Как войти в файловый менеджер смотрите урок выше, к закладке.
Каркас сайта
Первый этап прошли! На следующим шаге открываю вновь инструкцию по установке шаблона, в которой говорится что нужно установить каркас сайта. В принципе все шаблоны на ucoz устанавливаются в такой последовательности —
- Загрузка файлов и папок
- Создание каркаса у сайта
- Подключение стилей
- Установка кодов в модули сайта
- Мелочная настройка если шаблон сложный
Для этого в папке с шаблоном я нахожу файл который называется tmpl — у вас он может называться по другому, в инструкции будет сказано что это за файл. Так вот, открываю этот файл и копирую всё содержимое этого файла, это обычный HTML код.
Далее иду на сайт в панель управления, и в верху нахожу кнопку дизайн, раскрывается меню в котором нажимаю кнопку конструктор шаблонов.
После нажатия на кнопку, откроется таблица с формой в которую нужно вставить скопированный код из файла tmpl, и нажать кнопку создать шаблон.
Программа сработает и начнёт создавать шаблон для модулей, после благополучного завершения, должно появится окно с надписью «шаблоны созданы для модулей» и список модулей.
Установка css стилей
Опять -же из инструкции я узнаю что нужно установить css стили, для этого открываю подходящий файл из папки с шаблоном, и копирую его содержимое.
Возвращаюсь в панель управления, и в верхнем меню нажимаю нам уже знакомую кнопку дизайн, из выпадающего списка выбираю кнопку «Управление дизайном (CSS)»
Откроется страница через которую можно управлять css стилями нашего сайта. На этой странице присутствуют стили от старого дизайна, их нужно полностью удалить, и за место их вставить новые стили которые мы скопировали из папки нашего нового шаблона. Не забудьте сохранить.
Активация модуля онлайн игры
В принципе наш дизайн готов, осталось только в модули установить коды, которые задают вид этим модулям, к примеру, как будут отображаться новости на главной странице, или как будут отображаться комментарии, или как будет отображаться страница пользователя.
Но для моего сайта все эти коды не нужны, так как у меня будет только один модуль, для которого я и установлю коды из папки нашего нового шаблона.
В системе ucoz присутствует модуль с онлайн играми, данный модуль очень удобен в использовании, по этому для своего сайта с флеш играми я буду использовать его.
Конечно любой модуль в этой системе, можно перестроить под свои потребности, к примеру модуль новости сайта, можно перенастроить под флеш игры, а каталог статей под новости сайта. Я-же обычно использую модули которые напрямую относятся к теме моего сайта, так как они уже максимально настроены под все случаи жизни.
К делу:
Для того что-бы активировать модуль, нужно отправится в панель управления и слева где расположены модули, нажать на кнопку неактивные.
Раскроется список не активных модулей, из него я выберу онлайн игры и нажму на него. Откроется страница которая предлагает выбрать содержимое модуля. Выбираю без содержимого и нажимаю кнопку активировать модуль.
Всё модуль активирован и в панели управления он выглядит вот так.
Решение проблемы:
Перейдя по ссылке что-бы посмотреть как выглядит этот раздел на сайте, я обнаружил что стили и каркас для моего нового активированного модуля не сработали, и по этому шаблон у этого модуля выглядит коряво.
То-есть для этого модуля подгружается старый шаблон, а если перейти на главную странице моего сайта, то там загружается новый шаблон который я установил.
Проблема связана с тем что каркас сайта не активировался для этого модуля, и что-бы исправить эту ошибку нужно просто второй раз добавить каркас сайта. Как это делается мы рассмотрели выше.
И так, каркас сайта я обновил и теперь переходя в раздел онлайн игры новый шаблон подгружается без проблем.
Осталось загрузить последний код:
В папке с нашим новым шаблоном, остались коды которые нужно загрузить в наши модули, эти коды как я говорил раньше отвечают за вид модуля.
В каждый модуль добавляется свой код, и когда мы зайдём на сайт в раздел к примеру онлайн игры, вид у игр на странице будет один, а если мы задаём в раздел новости сайта, вид новостей будет отличатся от вида онлайн игры, и так можно настраивать свой вид для всех модулей.
Модуль если мы помним это раздел на сайте.
Так вот у меня на сайте активирован только один модуль «Онлайн игры», остальные мне просто не нужны, но в папке с шаблоном который я скачал, лежат коды для других модулей и эти коды я устанавливать не буду, некуда.
Я возьму коды которые преднозначены для модуля новости сайта, и установлю их для модуля онлайн игры. Да, так делать можно, но нужно будет немного подправить код.
Этим мы займёмся в следующим уроке, а сейчас проследуйте в панель управления и нажмите кнопку дизайн. Опять-же выпадет окно в котором в самом верху найдите кнопку «Управление дизайном (Шаблоны)»
Откроется страница на которой мы можем управлять дизайном наших разделов на сайте. Мне нужно промотать странице вниз и найти мой раздел с онлайн играми.
У каждого такого раздела есть структура, в которую помещаются коды из скаченного нами шаблона.
Структура:
Главная страница модуля — Здесь мы настраиваем вид для главной страницы раздела/модуля.
Страница со списком материалов и разделов, а так-же страница со списком материалов категории — здесь мы настраиваем страницу с разделами или категориями. То-есть мы наш контент в моём случае «это флеш игры» можем разделять по разделам и категориям.
То-есть игры для мальчиков, игры для девочек — это разделы, когда мы переходим в раздел для мальчиков у нас появляются категории, Драки, Стрелялки, Танчики и т.д.
Когда человек нажимает на кнопку игры для мальчиков, он попадёт на страницу раздела, у этой страницы может быть свой дизайн, который мы настраиваем по кнопке «Страница со списком материалов раздела».
Когда-же он в разделе нажмёт на категорию к примеру танчики, он попадёт на страницу с категориями которую мы можем так-же настроить отдельно по кнопке «Страница со списком материалов категории». Но обычно эти страницы выглядят одинаково.
Страница материала и комментария к нему — Эта та страница на которой находится в моём случае флеш игра на пример про танчик — эту страницу можно так-же настраивать отдельно.
Вид материалов — Когда мы заходим в раздел или категорию или на главную страницу модуля, перед нами открываются списки материалов, в моём случае это игры. Выглядеть это может так, ссылка на страницу под ней текст а возле текста картинка.
Внизу под первой игрой может быть вторая и так 10 штук. Так вот, как будут отображаться эти игры в разделах или комментариях мы можем настраивать по кнопке вид материалов. В общем думаю вы суть уловили, что вот эти кнопки помогают настраивать отдельные страницы или разделы любого модуля.
Установим последний код:
Из папки с шаблоном, я найду файл в котором есть код для настройки вида материалов, в любой инструкции по установке шаблона, есть информация как этот файл называется, скопирую содержимое файла и отправлюсь в панель управления.
Далее у модуля онлайн игры я нажму на кнопку вид материалов, откроется окно в котором будет присутствовать старый код, его удалю и за место него вставлю новый который я скопировал из папки шаблона.
Следующим шагом я отправлюсь опять в папку с шаблоном и найду код, который нужно вставить на страницу материала и комментария к нему.
Так-же нажимаю на кнопку страница материала и комментария к нему и попадаю на страницу со старым кодам, старый код удалю а за место него вставлю новый из папки. Не забываю сохранять!
Таким образом для всех модулей устанавливается код, не важно какой это модуль, новости сайта или онлайн игры, каталог статей, или просто блог, принцип установке в эти модули кодов одинаковый.
Всё шаблон установлен!
Теперь можно походить по сайту, посмотреть что у нас получилось. В принципе у меня шаблон установился нормаль, но над ним ещё придётся по работать и настроить под себя.
Работы ещё много но первые шаги уже сделаны а дальше только движение по инерции.
Предыдущий урок | Как создать сайт — Оглавление | Следующий урок