Как создать шаблоны ucoz с нуля. Как установить шаблон на uCoz
Прежде чем перейти к процессу установки необходимо найти подходящий дизайн. Я бы рекомендовал использовать шаблоны только из проверенных источников, таких как: официальный магазин от uCoz или же на сайтах, которые специализируются на данном направлении.
В этом случае вы можете быть уверены в качестве шаблона и его работоспособности. Безусловно, можно нагуглить или использовать различные варезники - но очень часто на них попадаются рипы, нерабочие дизайны или еще хуже файлы с вирусами. Поэтому подойдите к вопросу выбора источника со всей серьезностью, так как от этого зависит не только успех проводимой операции, но и безопасность вашего сайта. В рамках этой статьи я буду устанавливать бесплатный шаблон DesktopChaos с uTemplate.pro.
Загрузка файла с шаблоном
Итак, загружаем архив с шаблоном:
Внутри архива находятся несколько вложенных папок:
- папка с изображениями (images, img);
- папка со скриптами (js);
- папка со стилями (css);
- папки с кодами Глобальных блоков, Информеров и т.д.
Также в архиве, как правило, присутствуют:
- инструкция.txt (ReadMe.txt) - настоятельно рекомендую обязательно прочитать;
- конструктор шаблонов.txt (tmpl.txt) - общий код каркаса;
- таблица стилей.txt (css.txt, style.txt) - файл с набором стилей;
- вид материалов.txt - содержит код вида материалов;
- и др. текстовые файлы с кодами, которые нужны для полной установки шаблона.
Примечание: содержимое вашего архива может отличаться от моего шаблона (это зависит от типа, структуры, сложности шаблона и других факторов).
Делаем резервную копию текущего шаблона
Прежде чем приступить к установке нового шаблона рекомендую сделать бэкап текущего шаблона (на всякий случай)
Для этого - заходим в "Панель управления" своего сайта - "Дизайн" - "Резервное копирование шаблонов":
Нажимаем в правом верхнем углу кнопку "Создать резервную копию", после чего вы увидите появившийся резервный архив с вашим текущим шаблоном вида "1372338464.zip" с датой создания в скобках:
И, еще один момент: перед установкой нового шаблона рекомендую активировать все необходимые модули : те, которые вы в данный момент хотите использовать и те, которые возможно вы захотите использовать в будущем. Это делается для того, что бы ваш новый шаблон корректно установился и отображался во всех модулях.
Пошаговая инструкция по установке шаблона на uCoz:
Установка шаблона делается согласно той инструкции, которая находится внутри вашего архива с шаблоном . Как я уже говорил в рамках этой статьи я буду показывать установку шаблона DesktopChaos .
Шаг-1.
Загружаем папку с изображениями images к себе на сервер. Это можно сделать двумя способами.
Первый способ - через FTP-клиент, например, FileZilla. Скачиваем и устанавливаем программу: http://filezilla.ru/get/ .
После этого, на главной странице Панели Управления жмем и задаем новый пароль:
После этого открываем ftp-менеджер FileZilla, в самом верху вводим Хост, Имя пользователя и Пароль, нажимаем "Быстрое соединение":
В левой части менеджера находим папку с картинками своего шаблона, жмем на ней правой кнопкой мышки, в появившемся меню нажимаем "Закачать на сервер". Готово. Теперь картинки находятся на нашем сервере.
Данным способом удобно пользоваться если нужно закачать много изображений, или других файлов.
Второй способ - загрузка изображений через Файловый менеджер . Переходим на главную страницу ПУ и нажимаем на "Файловый менеджер":
В право верхнем углу жмем Создать папку, вводим название images и нажимаем Enter:
Заходим в эту папку. Что бы закачать в нее картинки нажимаем "Выберите файл", выбираем картинку и жмем Загрузить файл. Зеленым плюсиком можно добавлять поля для нескольких файлов.
Таким образом закачиваем на сервер все картинки из папки images.
Шаг-2.
Устанавливаем (если нужно) значение тега . Заходим в "ПУ (Панель Управления)" - "Настройки" - "Общие настройки" и в соответствующее поле вставляем код:
Шаг-3.
Устанавливаем Таблицу стилей. Для этого, находим в архиве файл "Таблица стилей.txt", открываем и копируем из него весь код (Ctrl+A, Ctrl+C) и вставляем его вместо старого кода в "ПУ" - "Дизайн" - "Управление дизайном (CSS)" - "Таблица стилей (CSS)":
Шаг-4.
Устанавливаем код из файла "Конструктор шаблонов". Открываем файл из архива "Конструктор шаблонов.txt", копируем все содержимое и вставляем его в "ПУ" - "Дизайн" - "Конструктор шаблонов", нажимаем кнопку "Создать шаблоны":
Шаг-5.
Теперь, аналогичным образом переносим содержимое файла "Вид материалов.txt" в вид материалов модулей: "Новости сайта", "Блог", "Каталог файлов", "Каталог статей". Идем в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)":
Код из файла "Вид комментраиев.txt” аналогично копируем в "Комментарии" - "Вид комментариев".
Шаг-6.
Создаем Глобальный блок. Переходим в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)" - "Глобальные блоки":
В правом верхнем углу жмем "Добавить блок", в появившемся поле пишем названия блока INFO и нажимаем "Добавить":
Находим в архиве папку "Глобальные блоки" и открываем файл "INFO.txt", копируем содержимое файла и вставляем в только что созданный глобальный блок INFO, сохраняем:
Шаг-7.
Устанавливаем необходимые значения:
- Название информера: Последние новости;
- Раздел: Новости сайта (либо "Блог", либо "Каталог файлов", либо "Каталог статей");
- Тип данных: Материалы;
- Способ сортировки: Дата добавления материала D;
- Количество материалов: 5;
- Количество колонок: 1.
Жмем "Создать".
После этого чуть ниже появляется блок с созданным нами информером, справа в нем видим иконки, выбираем первую из них "Управление дизайном информера" и в появившееся окно вставляем из папки "Информеры" содержимое файла "Последние новости", сохраняем:
Код данного информера $MYINF_1$ вставляем в созданный нами ранее глобальный блок INFO .
Информер для форума создается похожим образом.
На этом установка шаблона DesktopChaos завершена.
К стати, если вы так и не разобрались с установкой нового шаблона на свой сайт, то в официальном магазине uTemplate.pro можно заказать услугу по установке шаблона.
Создавая свой сайт каждый хочет чтобы его сайт отличался от других. Для этого нужен уникальный дизайн (купить в магазине шаблонов). В этой статье мы рассмотрим как создать свой уникальный дизайн из стандартного дизайна ucoz. Для того чтобы изменить дизайн под себя нужно зайти в раздел «Управление дизайном» в панели управления. Для этого авторизуйтесь в вебтобе системы ucoz и перейдите в раздел Дизайн> Управление дизайном(шаблоны) в панели управления. Откроется соответствующая страница.
В этом окне вы увидите из чего состоит дизайн сайта. Это отдельные компоненты, которые вместе составляют общий рисунок. Чтобы их изменять ucoz предоставил несколько инструментов которые мы сейчас разберём. В верхней части окна есть кнопка «Конструктор» с помощью которого вы сможете редактировать ваш сайт в окне браузера прямо на странице сайта. Пока давайте рассмотрим инструменты которые находятся в панели управления сайтом. Нажмите на кнопку «Верхняя часть сайта» и откроется окошко редактирования данного шаблона дизайна сайта.
Но многие не знают языка html поэтому мы выберем другой путь. Мы воспользуемся визуальным редактором. Нажмите кнопку визуальный редактор в нижней части окна. Откроется визуальный редактор верхней части шаблона.
Сверху вы увидите строку $WDAYS$ $DATE$ $TIME$ мы изменим их порядок так $DATE$ $WDAYS$ $TIME$. Под ней находится строка $USERNAME$, |Группа "$USER_GROUP$" | RSS которая означает что вы зарегистрировались под именем $USERNAME$ и входите в группу "$USER_GROUP$" изменим её на $USERNAME$, |Группа "$USER_GROUP$" | IP: $IP_ADDRESS$
IP: $IP_ADDRESS$ показывает ip зарегистрированного пользователя. Далее идёт запись МОЙ Сайт вы можете изменить её на что угодно в зависимости от того как называется ваш сайт. Далее нажмите кнопку сохранить для сохранения изменений. Таким образом вы можете изменять другие шаблоны входящие в дизайн сайта.
Чтобы без проблем пользоваться отредактированным шаблоном надо создать резервную копию. Она поможет в том случае если вы нечаянно испортите шаблон при редактирование. Чтобы создать резервную копию пройдите в раздел "редактирование шаблонов" и нажмите на кнопку "Backup шаблонов" и нажмите "резервное копирование шаблонов".
Установка нестандартного шаблона
Лучший способ установить нестандартный шаблон, это воспользоваться инструкцией по установке, которая поставляется вместе с шаблоном. Если ее нет, то воспользуйтесь нашей универсальной инструкцией.
Установка шаблона состоит из нескольких шагов:
Загрузка файлов на сайт
Первым делом нужно загрузить на сайт файлы, которые поставляются с шаблоном. При этом важно соблюдать вложенность файлов в папки. Так, все изображения могут находиться в папке img , а скрипты - в js .
Чтобы создать папку, воспользуйтесь , кнопка «Добавить папку»:
Перетащите файлы в область для загрузки и дождитесь ее окончания. Когда все файлы шаблона будут загружены на сайт, можно переходить к следующему шагу.
Установка каркаса сайта
Позволяет сгенерировать однородную структуру для всех разделов сайта. Обычно он поставляется в.txt файлах и может иметь произвольное название ("Каркас.txt", "Конструктор шаблонов.txt" и т.д.).
В некоторых случаях каркас сайта у шаблона может отсутствовать, тогда можно переходить к следующему шагу.
Каркас сайта имеет свои уникальные переменные, которые помогут отличить его среди других файлов шаблона:
Попробуйте выполнить поиск строки или . Если они найдены в тексте, то скорее всего это файл каркаса.
Чтобы установить каркас, перейдите в раздел «Дизайн», в меню слева выберите пункт «Каркас», вставьте код из текстового файла, нажмите на кнопку «Установить» и подтвердите действие:
Вы увидите сообщение об успешном выполнении операции. Значит можно переходить к следующему шагу.
Установка шаблонов сайта
Каждый модуль сайта содержит свои уникальные шаблоны, которые отвечают за вывод страниц. В зависимости от набора подключенных модулей, число необходимых для установки шаблонов может различаться.
Шаблоны поставляются в текстовых файлах и для их размещения на сайте, нужно просто скопировать содержимое файла в редактор шаблона соответствующего модуля. Перейдите в раздел «Дизайн», в меню слева выберите пункт «Редактор». Найдите шаблон, код которого хотите добавить и скопируйте его в редактор. Сохраните изменения.
Повторите данное действие для всех текстовых файлов, которые поставляются с шаблоном. Когда закончите, переходите к следующему шагу.
Не отчаивайтесь, если какого-то файла нет в поставляемом шаблоне. Это может означать, что разработчик предусмотрел настройку шаблона с помощью каркаса.
Настройка модулей и расширений
Не всегда данный шаг требуется воспроизводить при установке шаблона. Может быть и так, что на данном этапе шаблон установлен полностью и установку можно завершить.
Сегодня мне хотелось бы поделится с вами своим опытом внедрения на сайте конструктора дизайна. Так как у меня используется нестандартный дизайн - мне нужно внести изменения таким образом, чтобы можно было работать с сайтом при помощи конструктора.
Что мне это даст?
Во-первых
- удобный способ управлять дизайном сайта и блоками, не заходя в панель управления.
Во-вторых
- быстрое добавление нужных мне блоков, которые уже будут оформлены в нужном мне дизайне.
В-третьих
- возможность использовать в блоках предоставляемые системой возможности - например гаджеты и виджеты.
В-четвертых
- самое важное преимущество. При создании каркаса система сама сгенерирует все шаблоны для всех модулей - и мне не нужно будет менять их руками, для каждого используемого мною модуля.
Полезность очевидна - вооружусь терпением и начну вносить изменения.
Для начала нужно убедится, что конструктор активирован - это можно проверить, зайдя в Панель управления, Главная » Общие настройки. Если нужна опция активирована, переходим к настройке дизайна. Для этого нужно зайти в Панель управления, Управление дизайном » Конструктор шаблонов, и в при помощи подсказок оформить будущий каркас должным образом. Принцип создания каркасов прост - существующая структура страницы делится на определенные зоны по смыслу и назначению. Например, мой трехколоночный дизайн, разбитый на подобные зоны для создания каркаса, схематически будет выглядеть так:
Итак, как можно видеть на рисунке, каркас состоит из таких основных частей:
- в этом блоке я размещу верхнюю часть (шапку) сайта.
- здесь будет вся средняя часть сайта, в том числе левая и правая колонки и средняя часть, в которой будет отображаться основной контент.
- здесь будет нижняя часть сайта - счетчики, копирайты и прочее.
Отдельно бы хотелось остановится на описании кода
В использовании этого кода есть определенные ньюансы, которые необходимо знать. В частности, это связано с использованием модуля "Форум". В моем случае, если мне понадобится использовать этот модуль - моя структура каркаса предполагает, что модуль будет располагаться на всю ширину страницы, так как блоки container у меня включены в блок middle. При генерации шаблона для модуля "Форум" система смотрит, как расположен блок middle и всю область, которую он занимает, отводит под вывод форума. В случае если я вынесу код container правой колонки за границы блока middle - то форум будет занимать место левой и центральной колонки, а правая останется на месте. Если я вообще не использую код middle - то форум будет размещен в том же месте, где выводится остальной контент.
Результат: дизайн разбит на три больших части, каждая из которых имеет свое значение. Но - для того чтобы я мог управлять блоками и сгенерировать шаблоны для всех модулей мне нужно рассказать системе о том, как будут выглядеть блоки, и где они будут расположены.
Так как основная часть сайта (колонки) размещена в блоке
- добавим в него нужные коды.
При помощи кода
я определяю в моем дизайне область, в которой будут содержаться блоки, например "Опросы", "Календарь", "Поиск" и другие. При помощи этих кодов я точно указываю системе, где разрешено размещать новые блоки. В моем случае это левая и правая колонка средней части страницы. Прописываем коды в дизайн, например вот так:
TITLE |
CONTENT |
Отдельно хотелось бы остановится на зарезервированных кодах каркаса. Их несколько - вот они:
-
: заголовок страницы
-
: путь к файлу с css-стилями
-
: основная часть страницы
-
: копирайт системы uCoz
У меня всплывающие окна по стилю будут такими же, как и блоки - поэтому добавляю такой код:
|