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

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

Вики-разметка - это язык, который используется для верстки страниц. Условно его можно назвать младшим братом 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 года и позиционирует его как инструмент для публикации лонгридов.

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

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

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

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

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

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

Вопрос знатокам: что такое вики-страницы вконтакте?

С уважением, НаДю СіК

Лучшие ответы

Positive:

Типа википедии наверно

Кирилл Вноградов:

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

Ви́ки - (англ. wiki) веб-сайт, структуру и содержимое которого пользователи могут сообща изменять с помощью инструментов, предоставляемых самим сайтом. Известнейший вики-сайт - Википедия. Впервые термин «вики» для описания веб-сайта был использован в 1995 году Уордом Каннингемом, разработчиком первой вики-системы WikiWikiWeb, который заимствовал слово гавайского языка, означающее «быстрый». Позже этому слову был придуман английский бэкроним What I Know Is….

Видео-ответ

Это видео поможет разобраться

Ответы знатоков

~Vreda~:

вибери меню- редактировать- и там справа вверху- вики=))

Владимир Побывавший:

Удалить страницу невозможно, можно только забыть о ней. Поменяйте все свои данные и забудьте о ней. Со временем ее удалят модераторы.

Вот что пишет Вики по этому поводу:
Сделать имя и фамилию Deleted deleted, удалить страницу и месяц там не появляться. Она удалится автоматически.
Если начнешь спамить, тебя быстро удалят)))
«Дуров и Компания» говорит, что зайдя в раздел «Настройки» можно в подразделе «видимость страницы» указать «не показывать, удалить страницу».
Согласно блогу Вконтакте, через месяц информация о Вашем аккаунте должна быть стерта из БД Сервиса. Я говорю названия ссылок по памяти, потому что проделал это все. Только не уверен, что это действительно так [что информация стерта] — потому что проверить тоже не могу.
Мои Настройки >> Приватность >> Кто может смотреть мою страницу >> Никто, удалить страницу >> Сохранить
Это приведет к тому, что вся информация на Вашей странице будет удалена и Вам никогда больше не придет ни одно оповещение от сайта

natalimo:

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

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

Мои Настройки >> Приватность >> Кто может смотреть мою страницу >> Только я >> Сохранить

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

Вопросы и ответы:

Q: Почему нельзя сразу удалить всю информацию без возможности восстановления?
A: До 80% просьб о немедленном удалении, которые мы получали, шли от злоумышленников, овладевших чьим-то аккаунтом. Представьте, что после работы в компьютерном классе или клубе Вы забыли нажать кнопку «Выйти». После этого Ваш аккаунт мог быть немедленно удален без возможности восстановления. Это приводило к потоку жалоб.
Кроме того, как оказалось, большая часть удаляющихся обращалась с просьбой «вернуть все назад и восстановить информацию» в течение недели.

Игорь Счастливцев:

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

Что такое Вики-страница ВКонтакте?

Прежде чем приступить к пошаговой инструкции, как создать Wiki-страницу ВКонтакте, нужно разобраться с самим понятием. Итак, что же это такое: Вики-страница ВКонтакте и для чего она нужна?

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

Для чего это нужно, наверное, уже понятно. Без использования разметки ваша страница/группа будет выглядеть достаточно серо и банально. Чтобы вас заметили, нужно привлекать внимание. А что может быть проще, если у вас под рукой будет огромный перечень инструментов, позволяющих выделить вас среди остальных авторов?! Просто вставляйте таблицы, используйте ссылки и списки, выделяйте текст различными шрифтами, создавайте каталоги товаров или пишите посты с красочными фотоколлажами! И всё это с помощью языка верстки, который доступен всем и каждому! Здорово? Не то слово!

Создание Вики-страницы ВК

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

• группу можно закрыть для просмотра всем пользователям, кроме ее участников. Или можно закрыть отдельные функции (типа, комментариев);
• для владельцев группы доступен раздел «Свежие новости»;
• зато владельцы пабликов могут создавать мероприятия, тогда как в сообщество можно загрузить документы.

В виду существенных различий в функционале, рассмотрим каждый вариант в отдельности. Итак, начинаем.

В сообществе

Как сделать вики-страницу ВКонтакте для группы, разберемся по шагам:

• Откройте группу ВК и выберите «Управление» .

• Перейдите в разделы.

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

• В простейшем текстовом редакторе можно создать контент.
• Чтобы сохранить вики-страницу, нажмите одноименную кнопку. Доступен предпросмотр.

Теперь по опции «Свежие новости» вы будете попадать на созданную вики-страницу.

Сделать вики-разметку ВКонтакте можно в редакторе: для перехода в него кликните значок «<>» , расположенный справа. Подробное описание правил, а также курс «Создание Wiki-страницы ВКонтакте», примеры для него, вы найдете в обучающем сообществе.

В паблике

Такую Wiki-страницу ВКонтакте сделать еще проще – она автоматически появится при вводе в браузере адреса вида:

http://vk.com/pages?oid=-XXXXX&p=ИМЯ

• oid – идентификатор сообщества, берется из адреса, когда открыт паблик в ВК.
• ИМЯ – название, которое вы придумываете сами. Кстати, помните, что правильно, дело не простое, и мозговой штурм на вечер, а то и на неделю вам точно обеспечен.

Для создания выполните следующие действия:

1. Укажите адрес и нажмите Enter .
2. На новом экране кликните по кнопке «Наполнить содержанием» .
3. После того, как все готово, в адресной строке скопируйте идентификатор и вставьте в своем меню ссылку. Потом ее можно будет убрать, текст все равно останется на месте.

Главное не забудьте поставить в настройках доступа условия для редактирования «Только руководители группы» . Иначе рискуете оказаться в неловкой ситуации, когда участники шутки ради изменят запись по своему усмотрению.

Благодаря разметке в текст записи можно будет добавить еще и изображение. Если после публикации щелкнуть по такому фото, перед вами откроется не увеличенная его копия, а сама Wiki-страница.

Меню для группы

Теперь перейдем к вопросу, как сделать вики-меню ВКонтакте для группы. По сути, это просто набор ссылок, которые можно прикрепить к тексту или к картинкам. Начать создание нужно с того, что выбрать картинку из вашего альбома и скопировать ссылку. После этого останется только заключить ее в двойные квадратные скобки (например, []). После этого можно начинать редактировать изображение, как Вам удобно. Можно добавить текст с помощью тега text или вставить ссылку через тег link.

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

Жирным выделена цель перехода: это может быть ваша вики-страница или принадлежащая другому сообществу – не имеет значения.

Для создания перелинковки на сторонний относительно ВК ресурс выделите картинку или текст и нажмите значок якоря. В поле «Ссылка» укажите адрес, например http://ya.ru.

Доступ для просмотра и редактирования

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

Как удалить вики-страницу?

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

Обратите внимание, что при создании вики- странички в контакте стоит помнить о некоторых особенностях ее размещения:

1. в настоящий момент сайт поддерживает 100% отображения информации, поэтому при создании разметки не ставьте другое значение. Иначе при просмотре Вашей страницы у других пользователей может «поплыть» картинка;
2. к великому сожалению, данный тип верстки не адаптируется под мобильную версию. Поэтому при создании постоянно проверяйте, как отображается информация из Вашей группы в приложении;
3. для разметки очень важна длина символов в ссылке (ограничение - 6 знаков). Поэтому не забывайте перед тем, как вставить их в текст.
4. не используйте спецсимволы в названии (например, +, _, *). Вполне возможно, что во время кодировки таких знаков могут возникнуть проблемы.
5. выберите какой-то один вариант верстки: либо виртуальный редактор, либо вики-разметка.

Набор тегов

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

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

Текст

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

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