Wiki-меню (навигация) для групп ВКонтакте

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

Раскройка графического полотна

Для начала нам потребуется само меню в графическом исполнении. Размеры подобного формата - 600px в ширину (в высоту сколько угодно). Лично я делаю 1200px в ширину, чтобы максимально нивелировать потерю качества при загрузке изображений во ВКонтакте.

Для дальнейшей работы нам потребуется инструмент "раскройка".

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

В появившемся диалоговом окне выбирайте «Разделить по горизонтали», если Ваше меню стандартного типа, как в нашем примере (кнопки идут сверху вниз), и выставляйте число разделений, в нашем случае это 3, так как в меню будет всего 3 кнопки.

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

На этом все, переходим к сохранению: «Файл – Сохранить для веб» или, если у Вас более новая версия программы, «Файл - Экспортировать - Сохранить для веб». Должен получиться следующий набор:

Создание wiki-страницы

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

Установка wiki-меню в группу ВК

Небольшое знакомство с интерфейсом создания страниц.

1. Wiki-режим/визуальный режим (Важно! Вся работа будет проходить в wiki-режиме)
2. Кнопка «добавить фотографию», который позволит загружать изображения Вашего меню
3. Зона с рабочим кодом
4. Самая главная кнопка "Сохранение", не забудьте нажать ее после окончания работ.

Первым делом загружаем все необходимые элементы меню. Для этого нажимаем кнопку «добавить фотографию» и выбираем все элементы для загрузки. Из всего кода нам потребуется только те части, которые отвечают за ссылку на элемент. (См. скрин)

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

Wiki-код для меню из нашего примера на 3 кнопки:

Где:

• noborder — убирает рамку вокруг фотографии;
• nopadding — убирает отступы вокруг фотографии;
• photo171447909_456241171 – ссылка на графический элемент (нужно вставить ссылки на изображения, которые Вы загрузили ранее, для формирования правильной картинки меню вставлять их нужно по порядку);
• 600px - размерность элементов меню (Важно! Ставьте только одну цифру, так автоматически сохраняются пропорции элементов)
• |- - новая строка
• | - новая ячейка
• {| и |} - начало и конец таблицы
• https://vk.com/maxstudiofree - место для Вашей ссылки (ссылка может вести на обсуждения, другие wiki-страницы, альбомы, внешние ресурсы и пр.)

Чем больше кнопок в вашем меню, тем больше будет новых строк и ячеек в таблице. Данный пример предназначен для меню на 3 кнопки.

По итогу получился такой результат:

Спасибо

Спасибо всем, кто осилил статью до конца. В качестве поощрения я выкладываю шаблон того самого меню на 3 кнопки из примера. PSD-шаблон будет полностью готов к работе, осталось только заменить текст/цвет/фото и сохранить. +wiki-код из примера в текстовом формате, чтобы вы не тратили время на его переписывание.

Если пост с данной статьей наберет более 200 лайков, я продолжу данную рубрику, в которой мы будем рассматривать более сложные структуры wiki-меню для групп ВКонтакте.

P.S. Условие выполнено. Статья набрала более 200 лайков. Ссылка на продолжение — Wiki-меню (часть 2)