Тизеры при помощи информера ucoz

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

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

Вообще людям, которые довольно долго “общались” на языке php запросов со своим WP, довольно бывает непросто понять структуру Юкоза и способ работы с данными в нем. Я ощутила это на себе, поэтому опишу работу над информером почти с самого начала.

“Почти” – потому что я не буду описывать процесс регистрации. Я думаю, что уж этот этап каждому по силам пройти самому.

Этап нулевой — Регистрация

Если у вас еще нету аккаунта на ucoz.ru, то зарегистрируйтесь. Я пока досконально не понимаю их систему, но кроме пароля юзера у них есть пароль администратора вебтопа. Предупреждаю на тот случай, чтобы вы не запутались (лично я – запуталась), поскольку эти пароли вроде бы должны быть разными.

Этап первый – Заводим сайт

А точнее – заводим домен третьего уровня на Юкозе.

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

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

Для того, чтобы создать сайт, вам нужно залогиниться на Ucoz.ru. После этого он перенаправит вас на интерфейс Вебтопа (где, возможно, нужно будет ввести пароль для админа вебтопа). Вебтоп выглядит так же, как ваш рабочий стол в Windows, там даже обои можно менять.

Создаем сайт – элементарно, на три счета (картинку можно увеличить).

1. Кликаем дважды “Создать файл” на вебтопе.

2. Придумываем сайту имя и указываем желаемый домен юкоза.

3. После подтверждающего сообщения переходим по нажатию кнопки в панель управления сайтом.

Поскольку сайт новорожденный, вас попросят дать ему имя, выбрать дизайн и язык, а следующим шагом и указать нужные модули. Я указываю “Редактор страниц” — “Фотоальбом” — “Каталог статей”. Насколько я понимаю, это те модули, которые будут добавлены в структуру сайта. Все эти параметры можно в дальнейшем менять.

Этап третий – Создаем фотоальбом (= будущая база данных по тизерам)

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

Через левое боковое верхнее меню войдите в “Фотоальбомы”.

Здесь для начала нам понадобится сделать кое-какие настройки размеров. Идем в “Настройки модуля”.

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

“Размеры демо-картинки” – это фактически размер наших тизеров. Картинка будет подогнана под указанные размеры в точности – то есть, если нужно, она будет ужата Юкозом или обрезана, но обе ее стороны при загрузке станут равными той величине, которую вы для них указали.

“Размеры фотографии, выводимой на отдельной странице” и “Максимальные размеры полного изображения” – это поля не принципиальные. К тому же картинка не будет подогнана в точности под размеры – просто большая сторона картинки будет уменьшена до указанной с сохранением пропорций.

Тип уменьшения изображений – лучше выбрать “Обрезание”, потому что, по моему скромному мнению, “Сжатие” выглядит ужасно (это подгонка с деформацией фото, изменением его естественных пропорций).

Имейте ввиду, что если вы поменяете что-то из этих параметров в дальнейшем, то уже загруженные вами “старые” фото не будут переправлены в соответствии с новыми данными.

После этого разбираемся с нужными нами категориями.

Стандартные для Юкоза “Мои фотографии” и “Моя семья” нужно удалить или переименовать. На их месте нужно создать тематические категории под ваши тизеры. Вы можете, допустим, группировать их по сайтам, к которым они относятся, или по тематике. Имейте ввиду – один и тот же тизер не может принадлежать к двум категориям.

Не перепутайте “Добавить раздел” и “Добавить категорию” – добавлять нужно именно категорию. Разделы – это способ группировки самих категорий, в них нельзя добавлять тизеры.

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

Этап четвертый – Добавляем тизеры

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

Для этого возвращаемся в начало модуля “Фотоальбомы” и нажимаем “Добавить материал”.

1 – Категория для тизера.

2 – Тизер (картинка). Удобно, что можно загрузить тизер как с жесткого диска компьютера, так и с сайта (переключитесь на “Файл в интернете”).

Но хочу сразу предупредить – внутренний обработчик фотографий у Юкоза не слишком церемонится с фотографиями. При обработке больших фоток он очень их “пережимает”. Лично я уменьшаю и обрезаю фотки вручную (в данном случае до размера 200*200, остальное вверяю юкозу).

Но если качество тизеров для вас не играет особой роли, тогда грузите изображения, не обрабатывая. Поскольку мы выставили нужные размеры, картинка обрежется “сама”.

3 – Заголовок тизера. Это та самая надпись, которая будет показываться под картинкой. Можете написать что-нибудь интригующее. 😉

4 – Адрес страницы. В поле “Краткое описание” пишем URL для статьи, на которую будет вести этот тизер. Пожалуйста, внимательно скопируйте эти данные из строки браузера и не ставьте дополнительных пробелов или других символов ни до, ни после ссылки. Иначе ссылка не будет работать.

5 – Загрузка нескольких картинок. Если вы загружаете несколько тизеров в одну и ту же категорию, то жмите на этот “плюсик” – появятся дополнительные поля для добавления (до 10 картинок за одну такую загрузку).

После загрузки фоток (кнопка “Добавить”) вы останетесь на той же самой странице. Поэтому если вы продолжаете грузить тизеры, нажмите перед этим кнопку “Очистить”, иначе вы продублируете уже добавленное.

Этап пятый – Оформляем информер

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

Возвращаемся в главное меню, а оттуда идем в раздел “Информеры”. Нажимаем там кнопку “Создать информер” (вверху справа). Поначалу вы увидите только два поля для заполнения — “Название информера” и “Раздел”.

В качестве раздела выбираем “Фотоальбомы”. После этого станут доступны для редактирования и другие параметры информера.

Нажмите на ссылку “Дополнительные опции”, чтобы развернуть форму целиком.

1 – Название информера (тизерного блока).

2 – Раздел. Выбираем “Фотоальбомы”.

3 – Тип данных. Выбираем “Материалы”.

4 – Способ сортировки. Если у вас много тизеров и вы хотите, чтобы они менялись (ротировались), то нужно выбрать “В случайном порядке”.

5 – Количество материалов. Тут вам нужно указать общее количество тизеров, которые будут в вашем блоке. Я выбрала 5, но количество может быть любым.

6 – Количество колонок. Чаще всего встречаются вертикальные блоки тизеров – в сайдбаре. У меня как раз указана 1 колонка – для вертикального тизерного блока из 5 тизеров. Но если у вас широкий сайдбар, то по ширине блок может составлять 2 или 3 тизера (в этом случае укажите в предыдущем пункте кратное число, чтобы количество тизеров в каждой колонке было равным). Если же вы будете размещать тизеры горизонтально, соответственно вы можете выбрать, например, 5 колонок.

7 – Список ID категорий. Идентификаторы (ID) категорий можно посмотреть внутри модуля “Фотоальбомы” — “Управление категориями”. У меня две категории, и я хочу, чтобы фотографии из них обеих крутились внутри этого блока тизеров, поэтому я указала их номера через запятую.

8 — Список ID категорий. Аналогично предыдущему пункту можно указать и конкретные тизеры. ID тизеров можно посмотреть внутри модуля “Фотоальбомы” — “Управление материалами”.

9 – Длина заголовка. Если хотите, можно ограничить длину заголовка каждого тизера.

Заполняем все и нажимаем “Создать”.

Этап шестой – Код информера

И вот, мы на финише.

Вам нужно кликнуть по ссылке “Шаблон информера” и в появившемся окне заменить код на такой:

<div align="center"><a href="$PHOTO_DESCR$">$PHOTO$</a></div><div align="center" style="padding-top:3px;padding-bottom:5px;font:7pt"><a href="$PHOTO_DESCR$" title="$PHOTO_NAME$">$PHOTO_NAME$</a></div>

После этого остается лишь забрать java-код информера и поставить его в нужное место своего сайта.

Для этого кликаем по заголовку информера. Копируем код из окошка и ставим его на свой сайт. Код будет примерно таким:

<script type="text/javascript" src=http://ваш сайт.my1.ru/informer/1-1></script>

Ура, теперь у нас есть свои тизеры на сайте! 😀

Стиль этого тизерного блока подстроится под css вашего сайта.

В дальнейших выпусках, посвященных тизерам, я планирую рассказать о плагинах WP, которые позволяют прикрутить ротацию тизеров на сайте, возможно, что-нибудь о css оформлении блоков, а также о том, какие материалы ваших (или не ваших 😉 ) сайтов стоит раскручивать с помощью подобных тизеров.