Как сделать вики страницу Вконтакте для группы – как в группе вк сделать меню. Полный мануал по вики-разметке вконтакте

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

Как работает вики-разметка

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

Ширина любой вики-страницы - 607px. Высота ограничивается только количеством знаков, всего их может быть около 16 000.

Вся вики-разметка держится на тегах, как и HTML. Есть одиночные теги (например,
- перенос строки) и парные (например, жирный текст).

Как работают теги для текста в вики-разметке

В некоторых случаях вики-разметка использует упрощенный синтаксис (теги заменены на типографские знаки). Например, для создания маркированного списка используются звездочки «*», а для нумерованного - решетки «#».

Как работают типографские знаки в вики-разметке

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

В стандартном редакторе вики-страниц есть два режима: визуальный и режим вики-разметки (кнопка переключения выглядит так: <>).

Так выглядит активный режим вики-разметки

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

Как создать вики-страницу

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

Стандартный

Для группы. Зайдите в «Управление сообществом» → «Разделы» → «Материалы» и выберите пункт «Открытые» или «Ограниченные».

Как включить «Материалы» в группе

Теперь на главной странице группы появится раздел «Свежие новости». Это место для предполагаемого меню группы. Чтобы создать новую страницу, можно написать ее название прямо в режиме редактирования страницы «Свежие новости», заключить его в квадратные скобки, нажать на «Предпросмотр» и получить готовую ссылку на новую страницу.

Как создать новую страницу через «Свежие новости»

Для паблика. Чтобы создать новую страницу, нужно узнать id вашего паблика. Для этого зайдите в раздел «Статистика сообщества». В адресной строке браузера вы увидите примерно такой код:

https://vk.com/stats?gid= 123456789

Искомое id группы - это все цифры после «gid=».

Теперь нужно ввести в адресную строку браузера такой код:

https://vk.com/pages?oid=-ХХХ&p=Нaзвание_страницы

Вместо ХХХ подставляем id паблика, вместо «Нaзвание_страницы» - то название, которое вы придумали. В названии можно использовать кириллицу, латиницу и цифры. Специальные символы использовать не запрещено, но лучше не рисковать: из-за них у вас может пропасть возможность редактирования страницы. Вставляем все данные на нужные места, нажимаем Enter, и браузер откроет созданную страницу.

С помощью приложения

Разработчики ВКонтакте рекомендуют к использованию три приложения для работы с вики-разметкой: «Мобивик» , «Исходный код» и «Вики Постер» .

В этом руководстве мы возьмем для примера приложение «Мобивик». В ноябре 2017 года оно получило второй приз в программе ВКонтакте по поддержке стартапов (Start Fellows). Работает без установки и дополнительной регистрации в десктопной, мобильной версии ВКонтакте и в приложении для телефона (разработчик рекомендует использовать версии не ранее Android 5.1, iOS 9 и Windows Phone 8.1).

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

Как создать новую страницу с помощью приложения «Мобивик»

Ссылки на новую вики-страницу в приложении «Мобивик»

А вот лайфхак для тех случаев, когда вы сделали сложную страницу с большим количеством элементов, и боитесь, что верстка поедет на маленьком экране. Скопируйте адрес из пункта «Код для вики-страницы». Зайдите в режим редактирования своей страницы и вставьте его в самое начало кода. Вы получите такое изображение:

Когда пользователь нажмет на него, он попадет в приложение «Мобивик», которое покажет аккуратную мобильную версию вашей страницы.

Слева - страница меню сообщества LIVE, открытая на мобильном,
справа - она же, но открытая через «Мобивик»

Как получить ссылку на вики-страницу

Как найти страницу, созданную ранее? Самый простой и надежный метод - заранее скопировать все адреса вики-страниц в отдельный файл, например, в Google Таблицах. Другой способ - через любое приложение для работы с вики-страницами. Например, зайдите в «Мобивик», выберите название сообщества и нужную страницу, кликните «Получить ссылку» и скопируйте адрес из пункта «Ссылка на вики-страницу».

Как получить ссылку на ранее созданную вики-страницу

Как сделать пост со ссылкой на вики-страницу

Скопируйте ссылку на вики-страницу и вставьте в новую запись на своей стене или на стене сообщества. Если все сделано правильно, сайт сгенерирует ссылочный блок под текстовым полем записи. Теперь удалите сам текст ссылки, прикрепите баннер и нажмите «Отправить». В десктопной версии баннер тоже станет ссылкой на вики-страницу, а в мобильной - будет открываться как обычная картинка.

Прикрепленная к посту картинка станет частью ссылки на вики-страницу в десктопной версии

Текст

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

Текст по центру .

Для структурирования текста в вики-разметке предусмотрены сочетания типографских знаков. Например, такой код « —- » поставит в тексте горизонтальную разделяющую полосу, а такой « :: » - двойной отступ перед абзацем.

На одну страничку можно поместить около 16 тысяч знаков.

Ссылки

Чтобы вместо адреса был виден текст, добавляем название ссылки:

[] - на профиль пользователя

[] - на главную страницу сообщества

[] - на другую вики-страницу

[] - на встречу ВКонтакте

Картинки

Предельная ширина изображения, которое можно использовать в вики-разметке, - 607px, это и есть ширина самой вики-страницы. Высота практически не ограничена (помним, что высота самой страницы - 16 000 знаков). Изображения можно загрузить двумя способами.

С помощью загрузчика в верхнем меню редактора.

С помощью кода. Загружаем картинку в отдельный альбом группы, открываем ее, в адресной строке видим длинный код наподобие этого

https://vk.com/club12345678?z= photo-12345_12345 %2Falbum-12345678_12345678

Копируем из него id картинки (выделено жирным). Дальше обрамляем это двойными квадратными скобками и вставляем в нужные места на странице. Получается примерно так:

[­]

Что дальше? Отредактируйте выравнивание, обтекание текстом, размер, привяжите ссылку. Для этого напишите нужные параметры после вертикальной черты и через точку с запятой. Например, в таком коде мы задали для картинки размер 300x100px и обтекание текстом справа:

Видео

Для начала нужно загрузить видео в видеозаписи сообщества. После загрузки открыть видео и скопировать из адресной строки его id (выделено жирным).

https://vk.com/videos-12345678?z= video-12345_12345 %2Fclub12345678%2Fpl_-12345678_-2.

Обрамляем это квадратными скобками и получаем такой код:

Получаем небольшую картинку со значком play, при нажатии на который разворачивается полноценный видеоплеер. Чтобы видео воспроизводилось на самой странице, разработчики ВК предлагают воспользоваться тегом player .

Но здесь мы получаем непропорциональную черную рамку вокруг видео:

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

Мы получили видео без черных рамок, оно будет воспроизводиться прямо на странице

Таблицы

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

При работе с таблицами можно использовать 4 тега: noborder (делает рамки таблицы невидимыми), nomargin (делает таблицу во всю ширину вики-страницы), nopadding (убирает отступы в ячейках) и fixed (позволяет создать таблицу фиксированных размеров). Сколько ячеек вы укажете в строке, столько столбцов будет в таблице.

Вот пример таблицы 2×2 без отступов сверху и снизу текста внутри ячеек:

Ширина первого столбца - 200px, ширина второго - 300px.

Вот что из этого получилось:

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

Как сделать вики-меню

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

1. Готовим обложку для меню. Можно взять любую подходящую картинку и нанести на нее текст. А можно нанять дизайнера, который отрисует вам красивые блоки и кнопки. У нас будет меню на 6 кнопок. Для этого нам нужна картинка, где будут обозначены эти кнопки. Определимся с ее размером.

При подготовке картинки для меню помните, что ширина вики-страницы - 607 px, Ширина картинки не должна быть больше, иначе изображение ужмется и потеряет в качестве. Для примера мы взяли изображение размером 510х300 px.

1. Режем эту картинку на 6 частей (по части на каждую кнопку). Это удобно делать в Adobe Photoshop инструментом «Раскройка». Если не хотите заморачиваться, воспользуйтесь, например, онлайн-сервисом IMGonline (режет картинки на равные части). Мы же сделали все в Photoshop.

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

Как разрезать картинку в Photoshop

Наше меню будет оформлено в виде таблицы из 6 ячеек: в три строки и два столбца. Для этого мы нарезали картинку для меню на 6 равных частей размером 255×100 px. Такой же размер нужно будет проставить для каждой ячейки.

1. Создаем каркас для таблицы. Заходим в режим редактирования новой страницы и делаем таблицу. Открываем ее тегом {| и сразу задаем три важных параметра:

• nopadding - разрешит картинкам соприкасаться
• noborder - скроет видимые границы таблицы
• fixed - позволит задать точные размеры ячеек.

Указываем фиксированную ширину ячеек - 255px 255px (два раза, потому что столбцов тоже два). Дальше устанавливаем места для начала новых строк тегом |- и новых ячеек (столбцов) тегом | . Закрываем таблицу тегом |} и получаем такой каркас:

1. Помещаем картинки в ячейки и задаем для них ссылки . Поочередно открываем в альбоме сообщества нужные части картинки, копируем из строки браузера их id ( photo-12345_12345) , заключаем в двойные квадратные скобки, прописываем размеры 255x100px и тег nopadding для склеивания картинок. После вертикальной черты назначаем ссылку для каждой кнопки. Получаем такой код.

{|noborder nopadding fixed
|~255px 255px
|-

| []
|-
| []
| []
|-
| []
| []
|}

1. Готово! Нажимаем «Сохранить страницу» - и получаем удобное меню для сообщества.

Готовое меню группы в десктопной версии

Готовое меню группы в мобильной версии

Если вы делали меню для группы , то оно будет легко доступно по клику на «Свежие новости» (кстати, эту страничку можно переименовать на «Меню» в режиме редактирования).

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

Чтобы закрепить меню в группе , опубликуйте запись с баннером и ссылкой на вики-страницу от имени сообщества (если опубликовать от своего имени, закрепить страницу будет невозможно). В паблике проблем с закреплением не будет: там можно закрепить запись любого автора.

Как сделать пост со ссылкой на меню в паблике

Как закрепить меню сообщества

Новый редактор статей ВКонтакте и вики-разметка

Администрация ВКонтакте объявила о запуске редактора статей 22 декабря 2017 года и позиционирует его как инструмент для публикации лонгридов.

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

Из этого видно, что сделать удобное меню для сообщества или вики-лендинг по-прежнему можно только с помощью вики-разметки. Что будет дальше - время покажет.

Так выглядит интерфейс нового редактора статей ВКонтакте

Что запомнить о вики-разметке

• Стандартный метод создания вики-страниц кропотливый и не очень удобный. Проще всего создать страницу через приложение «Мобивик», «Исходный код» или «Вики Постер».
• Меню сообщества нужно сделать таблицей, чтобы оно аккуратно смотрелось на мобильных устройствах.
• При редактировании вики-страницы в стандартном интерфейсе не стоит переключаться между визуальным режимом редактирования и режимом вики-разметки. Из-за этого может поехать верстка.

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

Хотите создать не просто очередной паблик с картинками и музыкой, а по-настоящему интересное сообщество с полезным контентом? Тогда вам просто необходимо знать, как создать вики-страницу. И сегодня мы научимся это делать.

Для чего нужна wiki-разметка

На самом деле вариантов использования десятки. К примеру, в "Википедии" с помощью данного языка разметки оформляются все статьи. Сайт "ВКонтакте" также поддерживает создание вики-страниц: с их помощью можно формировать меню группы или оформить объёмную статью, где текст перемежается с фотографиями, видео и другими материалами.

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

Теперь поговорим о том, как создать вики-страницу.

Шаг 1: узнаём ID группы и создаём новую страничку

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

Переходим к следующему этапу. Как создать вики-страницу для группы? На самом деле нужно просто ввести в адресную строку браузера новую ссылку-команду. Выглядит она так:

Вместо ХХХХ вводим ID нашего сообщества, а вместо "Название_страницы" — собственно то название, которое мы придумали. После этого необходимо нажать Enter. Новая вики-страница будет автоматически создана, а на экране появится надпись "Наполнить содержанием".

Шаг 2: создаём пост

Пожалуй, это самое простое, что можно сделать с помощью языка

С функционалом визуального редактора разберётся любой, кто работал хотя бы в банальном Notepad. В быстром доступе на панели есть все основные функции:

• начертание текста (жирный/наклонный);
• выравнивание (по левому краю, правому краю, по центру);
• добавление заголовков H1-H3;
• выделение цитат;
• добавление ссылок;
• добавление мультимедиа (фото, видео, аудио).

Шаг 3: публикация

Итак, вы уже знаете, как создать вики-страницу "ВКонтакте". Дальше остаётся лишь опубликовать её в вашем сообществе. Для того чтобы подписчики увидели ссылку, лучше сразу подготовить симпатичную обложку. Желательно, чтобы на картинке была ссылка или призыв нажать на кнопку "Посмотреть" внизу.

Полезные "фишки"

В принципе, чтобы понять, как создать вики-страницу стандартного типа, более чем достаточно. К тому же в любой момент можно нажать на кнопку "Предпросмотр" и увидеть, как будет выглядеть ваш пост после публикации. Другое дело, если нужно сделать красивое и удобное меню для навигации по группе. Здесь уже понадобятся базовые знания самого языка разметки.

Обтекание фото

Если вы хотите, чтобы изображение было не по центру страницы между двумя абзацами, а сбоку от текста, необходимо сделать приписку |right или |left в коде самой картинки.

Спойлеры

Всем, кто интересуется, как создать вики-страницу "ВКонтакте", стоит запомнить ещё один весьма полезный тег — Hider. С его помощью можно делать скрытые блоки, в которых информация открывается по щелчку.

Якоря

Это очень удобно, если вы публикуете объёмную статью с большим количеством заголовков и подразделов. Тогда в самом верху странички можно сделать оглавление, чтобы пользователь мог моментально перейти к интересующему его блоку. Всё, что нужно — вписать после решётки точное а после прямой черты — текст ссылки.

Таблицы

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

• {| — начало таблицы;
• |+ — заголовок;
• |- — новая строка;
• | — новая ячейка;
• ! — выделенная ячейка (с затемнённым фоном);
• |} — конец таблицы.

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

Графическое меню

Пожалуй, это самое крутое, что можно сделать, зная, как создать вики-страницу. На самом деле ничего сложного нет, но придётся повозиться с продумыванием макета и нарезкой изображений. Чтобы меню отображалось корректно, необходимо точно соблюдать размеры, ориентируясь на ширину 510 или 504 px. Если вы хотите, чтобы фото были "склеены" друг с другом, к коду изображения нужно сделать приписку;nopadding.

А если вместо этого использовать параметр noborder, то между картинками будет расстояние 6 px. Тогда общая ширина всех фотографий в ряду рассчитывается по формуле 510-6*N (N — количество изображений в ряду).

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Вики-разметка - это инструмент форматирования текста в публикациях ВКонтакте.

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

Подробней о вики-разметке ВКонтакте

Что еще вы можете делать с подобным контентом:

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

Как сделать вики разметку

Существуют приложения для быстрого и простого конструирования страниц. В список этих сервисов входят:

• Мобивик (для мобильных устройств)

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

Как создать публикацию самостоятельно

Сначала нужно открыть в группе материалы. Для этого зайдите в управление, выберите «Разделы» и подключите этот пункт. Затем перейдите обратно в сообщество. Вам понадобится id страницы. Это цифры из адресной строки после слова club.

Далее используйте ссылку http://vk.com/pages?oid=-*******&p=Имя. Замените на нее адрес сообщества. Вместо звездочек вставьте свой id, а имя замените на название раздела. Обратите внимание, что изменять его будет нельзя. Можно писать на русском языке, с пробелами и цифрами.

Нажмите «Наполнить содержанием», откроется редактор. Теперь вам снова понадобится адрес. В этот раз важно скопировать первую его часть, до «?act…».

Обязательно сохраните ее в отдельном документе. Так как страница еще не закреплена, вы ее потеряете.

Перейдите в режим разметки, нажав значок <> справа. В нем больше функций и он работает без ошибок. Здесь ничего сложного. Оформите подзаголовки, абзацы, расположите фото так как вам нравится. Для этого можно использовать панель инструментов или теги:

• – полужирный шрифт.
• – курсив.
• – подчеркивание.
• – ссылка.

Проверьте статью. Внизу есть кнопка предпросмотр, с ее помощью вы увидите недочеты.

Затем сделайте публикацию видимой для подписчиков. Для этого ссылку, которую вы скопировали ранее, оставьте на стене сообщества, кликните по трем точкам справа и выберите «Закрепить».

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

Меню

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

Чтобы поделить фото на элементы, воспользуйтесь сервисом IMGonline . Скачайте их и загрузите в редактор. Не забудьте нажать <>. Если вы хотите объединить их так, чтобы между ними не было границ, впишите к каждой nopadding. После этого слова добавьте ссылку на раздел, в который ведет кнопка.

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

Таблицы

На wiki-страницах их создают с помощью различных кодов. Их можно сделать самостоятельно или найти готовый шаблон. Каждая матрица открывается символами «{|» , а закрывается «|}».

Другие знаки:

• |- – начало новой строки. Ставится после {|.
• | – простая ячейка.
• ! – ячейка с выделенным, центрированным текстом.
• |+ – заголовок по центру.

Также в построении часто используются теги (всегда прописываются после первого знака):

• Noborder – отсутствие видимых рамок.
• Nomargin – увеличивает таблицу на ширину материала.
• Nopadding – уменьшает отступы в ячейках.
• Fixed – фиксирует ширину.

Пример.

Коды вики разметки

Так выглядят заголовки, отступы, списки, разделительная линия и подпись на wiki- языке и в чистовом варианте.

Такие публикации – непривычный и сложный инструмент для новичков. Бывает так, что вы все делаете правильно, но ничего не получается. Чтобы избежать ошибок, придерживайтесь трех правил:

• Не оформляйте контент в визуальном редакторе. Из-за переключения на этот режим сбиваются настройки: пропадают теги, сбивается размер картинок.
• е добавляйте в названия лишние знаки: «+», «_». Они подвергаются перекодировке, в результате которой может сломаться меню.
• Сокращайте длинные ссылки с помощью вот этого сервиса. Домен первого уровня должен быть не более 6 символов.

Вики-разметка – это не простой, но эффективный способ продвижения и развития сообщества ВКонтакте. Чтобы упростить работу с инструментом, используйте приложения. В некоторых из них публикация буквально в несколько шагов. На сайте VK представлен объемный учебник, в котором рассмотрены все вопросы, связанные с wiki-языком.

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

Для создания страниц используется Вики разметка . Сейчас мы разберем, что это такое.

Что такое Вики разметка?

Обычные веб-страницы создаются с помощью языка HTML. Но для создания страниц в ВК, он не применяется. Вместо него используется Вики разметка. Она также призвана дать возможность размечать элементы на странице. С ее помощью мы можем сделать ссылки (см. ), кнопки и т.д. Выглядит это вот так.

Для чего используется?

Для создания страниц и оформления групп. Используя разметку, вы сможете создавать информативные и функциональные страницы, элементы меню и т.д.

Структура Wiki разметки

Https://vk.com/wiki?w=page-87938575_51299900

Там подробно представлены все основные элементы, и приведен код.

[­]

Как начать пользоваться?

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

Идем на вкладку «Раздел» . Здесь находим пункт «Материалы» , и для него выставляем значение «Открытые» .

Сохраняем настройки и возвращаемся обратно в группу.

У нас появляется вкладка «Свежие новости» . Идем на нее, и нажимаем кнопку «Редактировать» .

Мы перейдем в режим редактирования страницы. Можете начинать ее наполнение. Не забудьте перейти в режим Wiki-разметки, нажав соответствующую кнопку в меню.

Когда закончите, сохраните страницу.

Видеоурок: оформление группы с помощью вики разметки

Вопросы?

Вконтакте

Перед тем как углубиться в вики — разметку, создавая интерактивное меню , необходимо сделать некоторые подготовительные действия, в первую очередь, изменить некоторые настройки в группе. Нажимаем на «Управление сообществом», открываем «Обсуждения», и подключаем «Материалы».

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

Заготавливаем шаблон для группы ВКонтакте согласно изображению.

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

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

Сохранив и удалив ненужные фрагменты (фотошоп кроит и сохраняет всё изображение и белые поля тоже), переименуем фрагменты, пронумеровав их по порядку их расположения в меню.

Теперь переходим непосредственно к группе. После корректировки настроек, на стене появились две вкладки: «Свежие новости» и «Обсуждения». Кликаем по «Новая тема» в закладке обсуждений и создаем первую страничку нашего меню.

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

На стене появится созданное сообщение. Таким же путем создаем нужное нам количество (в соответсвии с разделами меню) страниц.

После завершения подготовительных операций можем переходить к редактированию нашего меню. Для этого нам понадобится вкладка «Свежие новости». Наводим курсор на нее и нажимаем на «Редактировать».

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

Образец кода для рассматриваемого меню:

[]
[]
[]
[]

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

Если все сделано правильно и не допущено никакой ошибки в коде, то при возврате в нашу группу и после нажатия на название вкладки (Главное меню группы) откроется созданное нами меню, которое смотрится, как одно целое вместе с аватаром. Интерактивное меню и графическое оформление группы представляют собой единую композицию. При нажатии на разделы меню мы попадаем в соответствующие разделы группы.

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

Мы рассмотрели, как сделать интерактивное меню или оформить группу в стиле wiki. Если возникнут вопросы по самому процессу подготовки, пишите в комментариях и вместе попробуем решить их.