Информеры на uCoz.

Доброго времени суток, друзья! Сегодня мы с вами начнем изучать инструмент «Информеры для сайта Ucoz«.

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

Итак, приступим.

Создаем информеры для сайта Ucoz

Щелкните на главной странице панели управления сайта по ссылке „Информеры“. Откроется страница этого инструмента.

Эта страница должна отображать список имеющихся информеров Ucoz. Поскольку у нас их пока еще нет, список пуст.

Приступим к созданию информера для сайта Ucoz.

1. Нажмите кнопку „Создать информер“, появится окно с инструментами создания информера.

2. Введите в поле „Название информера“ имя создаваемого информера, например „Мой информер“.

3. В раскрывающемся списке „Раздел“ выберите один из разделов, для которого создается информер.

4. Выберите, например, пункт „Пользователи“. При этом появится следующее окно настройки параметров создаваемого информера Ucoz.

5. Выберите в поле „Способ сортировки“ пункт „Кол. сообщений в форуме“ и нажмите кнопку „Создать“, чтобы создать информер для Ucoz.

Пользуясь инструментами раздела „Информеры“, можно удалить информер, нажав кнопку „Удалить“ (1), или настроить параметры, нажав кнопку „Изменить“ (2) и отобразив тем самым окно „Редактирование информера“.

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

Как вы помните, ID групп пользователей отображается в разделе „Пользователи“ панели управления в списке „Группы пользователей“.

Введите в это поле значения для „Проверенных“ (ID равно 2), „Модераторов“ (ID равно 3) и „Администраторов“ (ID равно 4). Далее нажмите кнопку „Сохранить“, чтобы сохранить настройки.

После этого щелкните на кнопке „Управление дизайном информера“ (3), откроется окно „Настройка шаблона информера“.

Это окно содержит HTML-код информера и набор переменных кода uCoz системы для отображения в информере нужной вам информации.
Тег

в языке HTML применяется для создания списка, а тег <а> - гиперссылки.

Переменная $USERNAME$ отображает входное имя (логин) пользователя, a $PROFILE_URL$ - адрес страницы с параметрами профиля пользователя.
Таким образом, информер Ucoz содержит список логинов пользователей сайта, снабженных ссылками на страницы с их профилями.

Вы можете добавить какие-то свои переменные, например $RANK_ICON$ , чтобы отобразить справа от логина иконку ранга данного пользователя. Отредактируем строку следующим образом:

$USERNAME$:$RANK_ICON$

Для редактирования шаблона информера Ucoz можно также воспользоваться визуальным редактором или загрузить нужные данные с помощью файлового менеджера.

Допустим, нам потребуется поместить в информер ссылку на какой-то рисунок, например на логотип сайта. Для этого нажмите кнопку «Файловый менеджер», откроется одноименное окно.

В списке загруженных файлов содержится загруженный файл . Нажмите кнопку «Ссылка к файлу», откроется окно со ссылкой на этот файл.

Сохраните полученный адрес в буфер обмена и поместите его в ссылку на источник изображения внутри тега .

Нажмите кнопку «Визуальный редактор», чтобы просмотреть результат.

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

Например, уменьшите его размеры и внешний вид, сделав следующее.

1 . Выделите логотип щелчком кнопкой мыши. Нажмите кнопку «Изображение» на панели инструментов редактора. Откроется окно «Изображение».

2. Установите в полях группы «Отступ значения» - 5.

3. Введите «Мой логотип» в поле «Название».

4. Нажмите кнопку «Стиль рамки» и задайте рельефный стиль рамки.

5. Уменьшите размеры рисунка примерно вдвое, установив соответствующие значения в поля «Ширина и Высота».

Если результат вас устраивает, нажмите кнопку «Сохранить», чтобы сохранить результат.

Теперь поместим созданный информер на страницу .

1. Отобразите страницу сайта и включите режим «Конструктор».

2. Поместите на страницу сайта в правую колонку новый блок и откройте окно свойств блока в разделе informers (информеры).

Теперь здесь содержится созданный нами информер для сайта Ucoz.

3. Щелкните на строке «Мой информер». Он отобразится в добавленном блоке.

4. Измените название блока на «Пользователи».

5. Выберите на админ-панели команду «Конструктор > Сохранить изменения», чтобы сохранить результаты и отобразить страницу с информером.

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

Щелчок на его имени отображает окно профиля пользователя, которого я зарегистрировал в сети uNet в качестве примера.

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

При необходимости можно ограничить доступность информера, настроив в режиме «Конструктор» его свойства на вкладке «Доступ» окна «Управление содержимым блока».

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

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

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

На практике, создав информер и установив его код на страницы сайта, не означает что всё готово. Многим пользователям не нравится как он выглядит, или пользователи хотят вывести в информере, картинки, указать автора и его аватарку, добавить информацию из дополнительных полей или рейтинг материала. Стоит отметить, что не малое количество пользователей, в зависимости от их потребностей используют информеры не совсем стандартно, для этого к примеру информеры используют совместно со скриптами или используют условные операторы. Всякие интересные идеи с информерами в основном придумываются владельцами сайтов для своих нужд, но кое что можно найти и в интернете! Но будьте внимательны, когда будите ставить чужие готовые решения на свой сайт, а особенно включающие в себя скрипты и картинки - это может быть опасно! Для того чтобы обезопасить свой сайт, вы должны разбираться в том что Вы ставите себе на сайт. Более подробнее можете узнать из этой темы на форуме .

В данной инструкции будет рассмотрено подробно как создать информер, от его создания и настройки, до его установки на сайт.

1. Создание информера

1.1 Необходимо зайти в панель управления, на главной странице панели управления выбрать "Информеры" (рис. 1)

Рисунок 1

1.2 На странице с информерами вверху справа нажать на кнопку "Создать информер" (рис.2), после чего откроются две опции, "Название информера" и "Раздел" (рис. 3)

Рисунок 2

Рисунок 3

Название информера - необходимо для Вас, чтобы не запутаться когда информеров будет много.

Раздел (рис 4)- здесь выбирается раздел для которого необходимо создать информер. Разделов всего семнадцать, это:

Новости сайта
Блог
Каталог статей
Каталог файлов
Каталог сайтов
Доска объявлений
Фотоальбомы
Форум
Пользователи
Комментарии
Случайные данные
Счётчики для посетителей
Пользователи посетившие сайт за текущий день
Стчётчики материалов
Теги
Онлайн игры
Интернет-магазин

Рисунок 4

1.3 После того как Вы выбрали название модуля и раздел, Вам откроются следующие опции (рис 5), это:

Рисунок 5

Тип данных - Данные, которые необходимо получать для создания информера. (Материалы, Категории, Календарь и т.п.)

Способ сортировки - Определяет порядок вывода материалов.
(Дата добавления материала A, Дата добавления материала D, Рейтинг материала A, Рейтинг материала D, Количество просмотров A, Количество просмотров D, Комментарии к материалу A, Комментарии к материалу D, В случайном порядке, Название материала и т.п.)

Где А - обозначает более старую дату материала и читаеться как "Меньше" или "Раньше".
- Где D - обозначает более новою дату материала и читается как "Больше" или "Последний".

Количество материалов - Количество выводимых в информере материалов.

Количество колонок - Количество колонок для вывода материалов. (от 1 до 20)

Количество колонок, влияет на вид информера (горизонтальный и вертикальный). Если выбрать количество материала 12 и количество колонок 3 - это будет означать что информер будет выводить материал в три колонки по 4 материала (горизонтальный вид). Если выберать одну колнку - это будет означать что информер будет выводить в одну колонку 12 материаов (вертикальный вид).

Материалы за текущий день - Если поставить галочку, будут выводиться материалы только за текущий день. Если материалов в модуле за сегодняшний день не добавлено будет выводится надпись "Сегодня материалов нет". Или любой другой текст, который Вы укажите.

Рисунок 6

Кроме основных опций, доступны и дополнительные опции (рис 6) Для того чтобы их открыть нужно нажать на ссылку [ Дополнительные опции ] внизу слева (рис 5). Они могут понадобится если нужно вывести материал из определённых разделов и категорий. А так же если нужно указать длину заголовка новости.

В дополнительных опциях, есть подробное описание и инструкция. Главное здесь не перепутать ID разделов и категорий и тогда всё получится правильно!

1.4 После того как все настройки сделаны нужно нажать на кнопку "Создать" и таким образом создать информер. После того как информер будет создан, он появится в низу (рис 7).

Рисунок 7

Стоит отметить что в примере, создан информер новостей со способом сортировки "Дата добавления материала D" (т.е последние добавленные новости), количеством материала 5 и 1 колонкой (рис 7).

1.5 На данном этапе информер создан. Для того чтобы получить его код и вставить на страницы сайта, нажмите на заголовок информера (Рис. 8) и скопируйте полученный код (Рис. 9).

Рисунок 8

Рисунок 9

Рисунок 10

В управлении дизайном выберите первый или Второй контейнер и вставьте код информера в блок (рис. 11, 12).

Рисунок 11

Рисунок 12

После добавления кода информера в блок сайта и сохранения, можно перейти на сайт и посмотреть как он отображается (рис. 13).

Рисунок 13

Если Вас не устраивает такой вид отображения информера, тогда отредактируйте информер!

2. Настройка информера.

После того как информер создан, его можно изменить - отредактировать его шаблон(рис. 14) и настройки (рис 15). А так же удалить.

Рисунок 14

Рисунок 15

2.1 Настройка шаблона (дизайна) информера заключается в изменении стандартного шаблона. Для того чтобы открыть шаблон информера нажмите на ссылку "[Шаблон информера]" (рис. 14),или кнопку "Изменить дизайн шаблона справа", после чего откроется окошко (рис. 16) - это и есть шаблон информера.

Рисунок 16

В шаблоне информера указаны системные коды, которые можно использовать. Кроме этого в шаблоне информера можно использовать и условные операторы, хоть они и не указаны!

Для того чтобы изменить шаблон информера нужно просто изменить/заменить содержимое, после чего сохранить изменённый шаблон (рис. 17).

Рисунок 17

В данном примере (рис. 17), в шаблоне информера было добавлено изображение 1, убрано количество комментариев и название категории. После чего новый шаблон был сохранён. Всё, теперь нужно перейти на сайт и посмотреть как информер отображается теперь. Копировать код информера и переустанавливать заново - НЕ нужно!

Такой вид имеет информер после изменения его шаблона (рис. 18)

Рисунок 18

Код шаблона информера последних новостей с картинкой слева и заголовком справа, как на примере (рис. 17, 18).

200?"200px":""+(this.scrollHeight+5)+"px");">

[$DATE$]
$TITLE$

+ Дополнительная информация:

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

Для того чтобы убрать из информера дату добавления новости (рис. 18), уберите с кода шаблона код [$DATE$].

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

200?"200px":""+(this.scrollHeight+5)+"px");">

$TITLE$

Width="100" - это ширина в пикселах изображения. В примере высота изображения не указана, для того чтобы картинка выглядела более натуральнее (если картинка больше, она будет вытягиваться в высоту). Если нужно указать высоту добавьте - height="75" (пример кода ниже). После этого все изображения будут иметь одинаковую высоту.

200?"200px":""+(this.scrollHeight+5)+"px");">

[$DATE$]
$TITLE$

Отличное решение для сайте виде информер на материал, где показывает сколько производилось скачивание а также просмотров пользователя или гостя. Отлично подойдет для таких интернет ресурсов как софт портал или где просто основной материал скачивают. Он будет показывать, что актуально и что предпочитают больше просматривать. Установка его будет в самом вид материале и комментариев к нему на светлый дизайн он настроен. Из новшества, это от Font Awesome, что вам нужно будет поставить, их 2 решение установки, один здесь будет показан, на второй можете перейти.

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

Переходим к установки :

Создаем в админ панели информер и у него должны такие быть значение.

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 5 · Колонки: 5 ]

200?"200px":""+(this.scrollHeight+5)+"px");">

200?"200px":""+(this.scrollHeight+5)+"px");">.top_list1 {padding: 2px; border-radius: 3px;border: 4px solid #FFFFFF;box-shadow: 0px 0px 1px 1px #B7B7B7;width: 138px;margin: 5px;}
.top_list_title1 {text-align: center; white-space: nowrap; overflow: hidden;}
.top_list_title1 a {color: #1476B1;font-size: 12px;}
.top_list_title1 a:hover {color: #4A4847;}
.projects11 {display: inline-block; margin-bottom: 7px;}
.projects11 img {width: 100%; height: 110px;border-radius: 3px;}
.projects11 {background: #DADADA; margin: 8px 0 1px 3px; padding: 4px 3px 1px 3px;color: #464646; font-size: 13px; border-radius: 3px;}
.projects11 span {float: left; padding: 2px 7px; background-color: #ccc; margin: 0px 3px 3px 3px; border-radius: 3px; width: 44px; text-align: center;}
.projects11 i {padding-right: 6px; font-size: 11px;}
.osite { padding: 10px; }
.review-text, .review-text p, .review-text li { font-size: 12px; font-family: Tahoma,Arial; line-height: 17px; text-align: justify;}

Так он будет на светлом сайте со всеми настройками.